こんにちは、ユタカです。(@yutaka_dreams)
『これからwebデザイナーなりたいけど、デザインってどうやって勉強するの?』
こんな悩みで一歩踏み出せないでいる人がたくさんいると思います。
さまざまな方法があり何から手を付けていいかわからないところですよね。
一歩でも踏み出せるように、
具体的に何をしたら良いかを書いていますので、参考にしてみてください。
それではさっそく紹介します。
あなたの知りたい項目から読めるように出来ています。
知りたいタイトルから始めてください。
どうやって良いサイトを調べるかというと、
Webデザインアーカイブサイトがあるので、そこから探していこう!

S5Style
https://bm.s5-style.com/
Responsive Web Design JP
https://responsive-jp.com/
MUUUUU.ORG
http://muuuuu.org/
以上のようなアーカイブサイトからプロの作ったサイトを参考にしてみましょう。
先程のWebアーカイブサイトからプロのデザインを見て言語化することをおすすめします。
どうしてそのサイトが見やすいのか、カッコいいのかを言葉にしていくのです。



例えば、
「余白がしっかり取られていてわかりやすい」
「整列されていて、見やすい」
「整列を意図的に崩していて動きがあってなんか目線で追う」
「欧文と日本語のジャンプ率が大きくて見やすい」
のような感じです。
コレに慣れてくると、デバッグツールでアニメーションとかフォントのサイズとかルールを調べるといいです。
ページの遷移を学びましょう。
- 動線を意識するできるようになる
- 情報の優先順位を意識できるようになる
- 初めて見るのに迷わないのはなぜかを考えれるようになる
- 下層ページ間の閲覧をどのようにスムーズにするかを考えれるようになる
webデザインとグラフィックデザインの一番大きな違いは『使われる』ことを前提として作られていることです。
使ってみてわかりやすいか、気持ちいいかがとても重要です。
webデザインが『使われること』を前提にデザインされているということは先にお伝えした通りです。
アコーディオンとか、タブ切り替えとかってweb特有の動きですよね。
紙にはない動き(インタラクション)があります。
まずはインタラクションの引き出しをたくさん知ることが大切です。



レイヤーの整理方法
フォントサイズのパターンを知る
デザインモジュールを真似る
レイアウト用のグリッド設定を盗もう
これらが一目瞭然です。
特にレイヤーの整理方法が一番勉強になるはずです。
これが自分の秘策です。
なるべく早めに、すごい人のデータがどんなものなのか知っておいた方がいい。
好きなweb制作会社の制作実績を常にチェック
その会社の制作実績は常にチェックしています。
そして、隅々までみています。
まとめること以下になります。
イケてるサイトを見つけて、そのサイトへ誘導するためのバナーをつくる
装飾としてのデザインの引き出しを増やすためにストックしておく
webデザインにこだわることなくグラフィックデザインも観る
どんどん作って、プロに添削してもらって、いろんなことに気づいてください。
自分なりに継続してできることを考えて、行動に移すことはとても素晴らしいことです。