Webデザイン業界は、トレンドの移り変わりが非常に早いのが特徴です。テクノロジーの発展やスマートフォンの普及も影響し、グラフィックからUI/UX、モバイル向けデザインなど様々なトレンドが誕生しました。
Webデザイナーであれば常日頃から情報収集を欠かさないという方もいるのではないでしょうか。

そのような時は、*セミナーや勉強会で利用されたスライドを閲覧できる「Slideshare」から情報を得ることをオススメします。*基本的なノウハウから、トレンドを取り入れた新しい手法など様々なスライドが共有されているため、書籍ではまかないきれない情報を得ることができるでしょう。

今回は、スキルアップを目指す若手Webデザイナー向けのスライドを21種類まとめました。ぜひ、Webデザインのスキルアップに活用してみてください。

Webデザイナー向けトレンドやスキルが学べるスライド21選

1.ウェブデザインに応用する4つの基本原則

「近接」「整列」「コントラスト」「反復」というデザインに関する基本原則をWebデザインに応用する手法が学べるスライドです。ページのレイアウトを上記の原則に適用させることで、視覚的にどのように変化するのかがわかりやすくまとめられています。

2.色彩センスのいらない配色講座

「配色」に関する基礎知識が学べるスライドです。色相や三原色、明度など基本的な色の構造について解説されている他、具体的な配色のノウハウを学ぶことができます。
配色はデザインの基本ですが、改めて色見本から配色の方法を確認する意味でもぜひチェックしてみましょう。

3.Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの？

人によって異なる「デザイン」の良し悪しについて言及したスライドです。目立つデザインか、わかりやすいデザインかなど、人によって好むデザインは分かれます。そのデザインは「何を目的に作られたものか」という視点で考えることで最適なデザインを選べるということが事例を元に解説されています。

4.いまさら訊けないWebフォント入門

CSSのfont-familyで利用できるWebフォントの基本について学べるスライドです。Webフォントを導入する際の構造やルール、利用するメリットについてシンプルに解説されています。

5.デザイナーこそ覚えておきたいCSS最新事情！ あなたの知らないfont-familyのイマ

Webフォントの種類や具体的なフォント事例について学べるスライドです。代表的なフォントを例に、フォントデザインの特徴を解説し、フォントが与える印象について言及しています。

6.ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう

非デザイナー向けに作られた、「デザイン」の判断の方法について学べるスライドです。「デザイン」は見た目の良さで良し悪しを判断しがちですが、「伝えたい目的を達成できているか」という視点を持つことで、デザインの判断ができると解説しています。非デザイナー向けとはいえ、他部署とのやり取りを行うデザイナーであれば知っておきたい知識でしょう。

7.コーディングを考慮したWebデザインガイドライン

ホームページ制作などコーディングを考慮したWebデザイン設計の基本が学べるスライドです。カラーモードや、寸法の単位、テキストサイズなどコーディング担当者に配慮した設定やレイアウトを知ることができます。

8.【デザイン・ノイズ論】～ Webデザインにおけるノイズ的手法を考える ～

“雑音”や“不要な要素”を意味する「ノイズ」をデザインに活用する方法を解説したスライドです。ノイズは「分からないけど面白いもの」と定義しており、AI時代に備えてノイズ的な発想をデザインに応用することの重要さを学べます。

9.コンバージョン心理学によるウェブ・デザイン

心理学の視点からコンバージョン改善するための方法をデザインという軸で学べるスライドです。ユーザーがコンバージョンしやすいUI設計とはなにか、コンバージョンするときの心理状況とはなにかについて図でわかりやすく解説されています。

10.【第二回】デザイン初心者でも出来る！企業ロゴの作り方【案出し～デザイン作成編】

企業ロゴの作り方について、コンセプトから作成する手順をまとめたスライドです。どんな会社なのか、何を提供しているのか、企業の第一印象はなにかのように「企業らしさ」を洗い出しデザインする方法を学ぶことができます。

11.アクセシビリティとこれからのWebデザイン

全ての人が「利用しやすい」設計を指す「アクセシビリティ」という視点からWebデザインを考察したスライドです。アクセシビリティを考慮したデザイン設計を行うことで、ユーザーの快適性を高めるだけでなくマーケティングという点においてもメリットが得られると解説されています。

12.UXの考え方とアプローチ

UXの基本的な考え方が学べるスライドです。様々なデバイスが登場したことでUXという概念が重視されるようになりました。ユーザーの心理構造をもとにどのようにプロダクトやサービスをデザインすれば良いUXなのか、実務において役立てられるでしょう。

13.グッドパッチのデザインカルチャーの作り方

アプリのUIデザインを行う株式会社グッドパッチのデザインカルチャーを知ることができるスライドです。デザイナーはどういう視点を持って仕事をすべきか、チームワークやプロジェクト進行の事例など、自社でデザインチームの構築をする際の参考にできるでしょう。

14.CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする

Yahoo JAPANが開催するデザインの勉強会イベント「Design #1」で利用されたデザインとビジネスの関わりについてのスライドです。ビジネスの手段としての「デザイン」をYahoo!の事例をもとに学ぶことができます。

15.快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司

フリーランスのデザイナー向けの業務についてまとめられたスライドです。クライアントとのデザイン案のやり取りや、納期の取り方など業務のフロー別にわかりやすく解説されています。

16.SketchがAndroidのUIデザインに向いているワケ

Mac用デザインツール「Sketch」がAndroidアプリのUI設計に利用するメリットを解説したスライドです。Sketchができる業務の幅広さ、連携できるサービスの豊富さなどを知ることができるでしょう。

17.Photoshopをもっと効率化しよう ショートカットのその先へ 第76回「WEB TOUCH MEETING」

Photoshopを用いた業務効率化についてまとめられたスライドです。一般的にショートカットやツールの把握によってPhotoshopの作業効率を上げることができますが、さらに効率化する方法として、アクション設定について細かく解説されています。具体的な設定方法も学べるのですぐに応用できるでしょう。

18.デキるWebデザイナーを目指せ！本当に現場で使えるCC活用テクニック

Webデザイナー向けに「Adobe Creative Cloud」の活用方法を解説したスライドです。アイデア案出しではAdobe Stockを活用し、モック制作にはAdobe Experience Designを利用するというように業務フローごとにどのソフトが活用できるのかがまとめられています。

19.WEBデザインにおける、Photoshopの作業速度向上テクニック　先生：黒葛原 道

Photoshopの基本操作を軸にした作業効率化方法を学べるスライドです。選択範囲ツールを定規的に利用するなど応用技を学ぶことができます。他にもツール別に効率化する手段が解説されているため、既にPhotoshopに使い慣れたユーザーでも新しい発見があるかもしれません。

20.イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜

非デザイナー向けにIllustratorを使った、イラスト制作を簡単に行う方法がまとめられたスライドです。イラストをいきなり書き始めるのではなく、パーツに分解してイラストとして構成していくという手順がわかりやすく解説されています。

21.Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします！」鷹野 雅弘（スイッチ）

プロのデザイナー向けにIllustratorの応用方法を解説したスライドです。Illustratorのアップデートに伴い強化されたツールなど、「慣れている人ほど見落としがち」な機能にフォーカスしているため、業務になれたデザイナーこそチェックすべき内容がまとめられています。