Webデザイナー1年生におすすめするデザインの練習方法

こんにちは。デジタルビジネス部のWebデザイナーAです。

今回は私がWebデザイナー1年生の頃にやっていたデザインの練習方法について紹介します。
皆さんがバナーやサイトのメインビジュアル、Webサイトのデザインを制作するときに少しでも役に立てれば幸いです。

私が実践していたのは以下の4つです。

1. デザインを見て学ぶ
2. Webサイト以外のデザインから学ぶ
3. デザインを真似して学ぶ
4. 学んだことを応用してオリジナルのバナーやサイトのデザインを作ってみる

1. デザインを見て学ぶ

最初はとにかくいろんなサイトを見ることを意識してやっていました。
あとはグロナビやボタン、アイコンなどのパーツ単位で気になったデザインをエクセルにまとめて、デザイン制作で悩んだときに見直せるような資料も作っていました。

流行りや最近のデザインの傾向を知ることにも役に立ちますし、何より制作意欲への刺激になります。
例として私が普段見ている主なサイトも掲載しておきます。

Webデザインのまとめサイトの例

・WebDesign
国内サイトだけでなく海外サイトまで幅広く網羅。
デザインの参考になるクオリティーの高いサイトが約2800件掲載され、カテゴリー検索だけでなく、タグ検索、レイアウトタイプやメインカラーでの検索も可能。

・SANKOU!
国内サイトのみをピックアップ。
カテゴリ検索の内容が具体的。（例：シズル感･訴求力がある写真･動画･映像）
フィルター検索で細かい絞り込みも可能。

・81-web.com
国内サイトのみをピックアップ。
サムネイルにhoverするとサイトに該当するカテゴリ・カラー・タグを見ることができる。
サイトのお気に入り登録機能が便利。（Webサイトのボックス右下にある＋ボタンで登録して、メニューのFavoriteから登録したサイトを閲覧できる）

・MUUUUU.ORG
クオリティが高く縦に長いサイトがピックアップされているので、TOPに情報や写真を多く掲載するサイト制作時に参考になる。

・bookma!
サムネイルにPCとスマホの表示画面が一緒に掲載されているため、レスポンシブデザインをする時の画面の見え方のイメージを膨らませやすい。
1サイト1カラム構成になっているので、色んなサイトのファーストビューをじっくりみたい人におすすめ。

・1GUU
国問わずとにかく色んなサイトをみたい人向け。
国内と海外サイトが掲載。アニメーションのあるサイトはサムネイルの時点で動きの確認ができる。海外サイトの国別または7大州ごとに絞り込み検索が可能。

・Pinterest
Webサイトに限らず色んなデザインを集めたい人向け。
ユーザー登録（無料）の必要あり。
該当する画像をボード（ブックマークフォルダ）にピン留め（ブックマーク）するサイト。
ボードには任意の名前をつけられ、他のユーザーのボードもフォローして閲覧することができる。

2. Webサイト以外のデザインから学ぶ

雑誌や広告のレイアウトもWebサイトのメインビジュアルやコンテンツのタイトルデザインを作る上で役に立ちました。

雑誌や広告はWebと同じく限られた空間に情報をわかりやすく見せ、かつ掲載されている内容にあったデザインがされているので、普段からジャンル問わずチラ見しておくと何かの役に立つ時が来ます。
実際、私もファッション紙やデザイン情報誌などから発想を得た経験があります。

見ておくと良いポイントとしては、文字間や文字の配置とデザイン、使われている色、イラストやデザインの配置、ロゴの配置などです。
あとは細かい装飾の部分で、アクセントになっている遊びの部分なども意識して見ていました。
（手書きのイラストや文字、筆記体の文字、アナログ素材（紙など）で柔らかさを出している背景、背景色から少しずらして配置されている写真など）

3. デザインを真似して学ぶ

気になったサイトやレイアウトがまとまって見やすいバナーなどをスクリーンショットして、Photoshopで上からデザインをなぞっていました。

実際に自分で真似して作ることで、文字の間隔やサイズ、フォントの種類はどんな系統のものが使われているのか、どんな加工や配色になっているか、写真やイラストなどの配置がどんな風に作られているのかがわかります。

実際に手を動かすことで、見るだけでは得られない数値単位での情報やデザインの技術が自分の中に自分の中にストックされていきます。

4. 学んだことを応用してオリジナルのバナーやサイトのデザインを作ってみる

今までの3つを踏まえた上で、架空のクライアントを立ててオリジナルのデザインを作ると、さらに自分の力になります。

架空のクライアントが思いつかない場合は、自分の趣味や好きなものを題材にしてみるのも良いです。
Webサイトのデザインを作った場合は、コーディングまでやってみるとさらに力が尽きます！

最後に

以上、4点を業務の隙間時間に少しずつ積み重ねてやっていくと、実際の業務で役に立つことがあるでしょう。

是非、実践してみてください。