いつからでも独学ではじめれるwebデザインの学び方

こんにちは、ゆたかです。(@yutaka_dreams

『これからwebデザイナーなりたいけど、デザインってどうやって勉強するの?』

こんな悩みで一歩踏み出せないでいる人がたくさんいると思います。

さまざまな方法があり何から手を付けていいかわからないところですよね。

一歩でも踏み出せるように、
具体的に何をしたら良いかを書いていますので、参考にしてみてください。

それではさっそく紹介します。

記事の信頼性

あなたの知りたい項目から読めるように出来ています。
知りたいタイトルから始めてください。

プロが作ったサイトを真似ることからはじめる

どうやって良いサイトを調べるかというと、

Webデザインアーカイブサイトがあるので、そこから探していこう!

おすすめアーカイブサイト

以上のようなアーカイブサイトからプロの作ったサイトを参考にしてみましょう。

デザインを言語化できるようにする

先程のWebアーカイブサイトからプロのデザインを見て言語化することをおすすめします

どうしてそのサイトが見やすいのか、カッコいいのかを言葉にしていくのです。

例えば、

「余白がしっかり取られていてわかりやすい」

「整列されていて、見やすい」

「整列を意図的に崩していて動きがあってなんか目線で追う」

「欧文と日本語のジャンプ率が大きくて見やすい」

のような感じです。

コレに慣れてくると、デバッグツールでアニメーションとかフォントのサイズとかルールを調べるといいです。

ページ遷移を学ぶ

ページの遷移を学びましょう。

学ぶことのメリット
  • 動線を意識するできるようになる
  • 情報の優先順位を意識できるようになる
  • 初めて見るのに迷わないのはなぜかを考えれるようになる
  • 下層ページ間の閲覧をどのようにスムーズにするかを考えれるようになる

webデザインとグラフィックデザインの一番大きな違いは『使われる』ことを前提として作られていることです。

使ってみてわかりやすいか、気持ちいいかがとても重要です。

web特有の動きを学ぶ

webデザインが『使われること』を前提にデザインされているということは先にお伝えした通りです。

アコーディオンとか、タブ切り替えとかってweb特有の動きですよね。

紙にはない動き(インタラクション)があります。

まずはインタラクションの引き出しをたくさん知ることが大切です。

PSDデータやHTMLテンプレートを購入する

レイヤーの整理方法

フォントサイズのパターンを知る

デザインモジュールを真似る

レイアウト用のグリッド設定を盗もう

これらが一目瞭然です。

特にレイヤーの整理方法が一番勉強になるはずです。

これが自分の秘策です。

なるべく早めに、すごい人のデータがどんなものなのか知っておいた方がいい。

好きなweb制作会社の制作実績を常にチェック

その会社の制作実績は常にチェックしています。

そして、隅々までみています。

まとめ

まとめること以下になります。

イケてるサイトを見つけて、そのサイトへ誘導するためのバナーをつくる

装飾としてのデザインの引き出しを増やすためにストックしておく

webデザインにこだわることなくグラフィックデザインも観る

どんどん作って、プロに添削してもらって、いろんなことに気づいてください。

自分なりに継続してできることを考えて、行動に移すことはとても素晴らしいことです。