フリーランスとセルフマネジメントby アキユキ

フリーランスのお役立ちブログ+モチベーションを高く維持するためのセルフマネジメント術

Webデザイナーになりたい人が独学でWebデザインを勉強する方法

Webデザインを独学で勉強する時の勉強方法について解説します。

これだけは知っておいて欲しいというポイントがいくつかあるのでそこを深堀りしていきながらの解説です。

Webデザインの勉強はポイントをおさえた上で勉強しているかどうかで身につくスキルが圧倒的に違います。

では解説していきます(´ε` )

Webデザインの独学は可能か

結論から言うと、もちろんWebデザインは独学可能です。
僕も実際に独学でやってきました。そして

フリーランスなら独学からやってWebデザイナーで年収1000万を超えることも可能です。

僕の場合はのんびりやり過ぎて時間は少しかかりましたが。(ちなみに僕は開発もやっています)

独学の勉強には少しコツがあって、ただ勉強すればいいというものではありません。
次のことを意識しながら勉強しましょう。

  • どういう目的意識を持っているか
  • 何を学んでいるか意識しているか

Webデザインに限らず勉強の基本かもしれませんが、

この2つを踏まえてやることでインプットの質が変わります。

ではそれらを踏まえながら、具体的にどういう勉強方法があるのか、解説していきます。

Webデザインの独学での勉強方法3つ

勉強方法はオーソドックスですが次の3つです。

  1. 書籍で学ぶ
  2. 既存のWebデザインをトレースする
  3. 実戦形式で誰かのサイトを作る

よくあるやり方ですが、大切なのは先述した通り、何を意識すべきかです。ここがポイントなので、その点に注意しながら1つ1つ解説していきます。

1.書籍で学ぶ

書籍ではデザインの基礎であるデザイン理論を学ぶことができます。
基礎力があると応用力を身につけやすい、というか基礎がないと応用は無理なので、書籍でしっかりデザイン理論を学ぶ必要があります。

書籍で学ぶ際のポイント:デザイン理論を学ぶ

デザイン理論とは当てずっぽうのデザインではなく、なぜそれがそういう印象を持たせることができるのかを分析して論理的に考えられるかどうかです。

デザイン理論とは例えばですが、デザインというのは相対的なものですよね。

文字が大きく見えるのは他の文字が小さいからですし、色が目立つのは他の色が目立たないからです。相対的なものだとわかっていれば、「四角」がたくさん並んでいる中に「三角」を1つ作るとそれが目立つのは容易にわかります。

このようなデザイン理論をわかっていないと、次に紹介するトレースだけをいくらやっても非効率です。

逆にデザイン理論が分かっていると、1つトレースする中でインプットできることが多くなるので効率の良い勉強ができます。

2.既存のWebデザインをトレースする

既存のWebサイトをPhotoshopでトレースする手法です。これもよくあるやり方ですね。

Webサイトのまとめサイトなどありますので、そこから1日1個とか2日に1個とか決めてトレースします。やはりトレースにもポイントがあって、それをおさえておくことが大切です。

トレースする際のポイント:どうしてそのデザインがいいのかを分析する

例えば、余白、色使い、写真使いなど色々な要素がデザインにはありますよね。

なぜそのデザインがいいのかを考えてみましょう。

絶対にやってはいけないのは、作業的にトレースすることです。
これはマジで意味がないので絶対にしないように(´・ω・`)
作業が目的化しています。

いちいち自分で

このデザインが与える印象は○○だな、特徴はXXだな、そして、
なぜそのような印象かというと「コントラストが特徴敵で対比的なデザインを使っているから〜〜」とか「遠近法を使っていて〜〜」とか「イラスト重視のデザインだから○○な印象を与えることができる」のように解説をする

ことでデザイン理論がトレースを通して自分の血となり肉となります。

3.実戦形式で誰かのサイトを作る

案件がなくても無償ならWebサイトはいくらでも作れるでしょう。

もちろんお金をもらえるならもらった方がいいのですが、勉強中の身であれば無償でもいいので、とにかく実戦形式で一度作ってみることです。

ここでは実戦形式なので、必ず相手からヒアリングをしてください。

実戦形式でのポイント:人の悩みを整理し、解決策としてどうデザインに落とし込むかを学ぶ

実際の案件ではここが非常に重要です。

綺麗なデザインを作れるデザイナーが売れるデザイナーではありません。

クライアントの悩みを整理してその解決策としていかにデザインを活用できるか、その提案力が非常に重要なのです。

なのでWebデザイナーとてコンサルタントだと思っていた方がいいです。

Webデザインの力で課題解決する人、それがWebデザイナーなのです。

ひとつ上のレベルのデザインをするために

それでは次にひとつ上のレベルのデザインをするために、Webデザインについてもう少し理解を深めていきましょう。

これぞWebデザインに必要なものだ、という内容です。

Webデザインは役割を4つに大別できる

これまでデザインの勉強方法について解説してきましたが、デザインには大別すると4つの役割があります。

  1. 情報伝達のためのデザイン
  2. 惹きつけるためのデザイン:印象づけ
  3. 操作性のデザイン:UI観点
  4. ものを売るためのデザイン:マーケティング観点

この役割4つを理解しておくことで、さらに勉強する時に何を意識していけばいいのかがわかります。
ちょっとだけ難易度があがるかもしれませんが、デザインを仕事にする上でとても大切なことなので1つ1つ解説していきます(´ε` )

1.情報伝達のためのデザイン

デザインの基本中の基本ですが、情報を伝達するためにデザインがあります。

わかりやすく伝達することもあれば、あえてぼかして伝達することもあります。情報をどのように伝達するかは戦略次第ですが、次のようなことを意識しておくとよいでしょう。

  • 伝えたい情報の本質は何なのか
  • その情報はどう伝えるべきなのか、具体的か抽象的か

2.惹きつけるためのデザイン:印象づけ

Webサイトに訪れたユーザーに対してどのような第一印象を持ってもらえるかはWebデザイナーの腕の見せどころです。

第一印象でその先閲覧されるか、それとも離脱されるかが決まるので、第一印象づくりは戦略的にやるべきです。

次のようなことを意識してデザインでどう第一印象を作るか考えてみましょう。

  • ターゲットは誰なのか
  • ターゲットにどう思ってもらえたら次に進んでもらえるのか
  • 気にならせるための表現として何ができるのか

3.操作性のデザイン:UI観点

ユーザーインターフェース(UI)、つまり使い勝手を意識したデザインですね。
簡単な例でいうと、

  • ボタンがクリックしやすいか
  • リンクがわかりやすいか
  • 必要な情報にたどり着きやすいか
  • サイトの構造がわかりやすいか
  • 各種デバイスに最適化されている

などです。

Webデザインはそういった操作性が非常に重要でユーザーにとって使いやすいWebサイトは使われるWebサイトの大前提です。

4.ものを売るためのデザイン:マーケティング観点

Webデザインには必ず目的がありますよね。

ものを売るのか、資料請求なのか、お問合せなのか、様々ですが、目的を達成するために的確に導線設計をしたり、ユーザーの背中を押して上げるような表現が必要です。

つまりマーケティング観点でのデザインとは次のようなことを意識することが大切です。

  • ユーザーの行動をスムーズにアシストできるか(導線設計)
  • ユーザーの背中を押して上げることができるか

早く現場を経験しよう

実際は色んな要件が絡み合ってくるので結構複雑になってきます。技術的な課題や予算の関係もあります。

より多くの早く現場を経験していくことで、デザインをやる時に何が大切なのかをより深く理解できますし、勉強したことも身についていきます。

現場で仕事をすることが目的なので、是非案件を取ることがを考えながら動いていきましょう。



プロフィール

田中亮行
アキユキ

フリーランスWebデザイナー・エンジニア歴6年。主に企業のホームページの企画・デザイン・開発をしています。

ここでは自分の経験から感じたフリーランスにとって役立つ情報を発信しています。また、「やりたいことをやれる自分になりたい」そのために必要な“セルフマネジメント”についても執筆しています。フリーランスとしての生き方にも関係してくることが多いので参考にしてもらえたら嬉しすです(´ε` )

おすすめ書籍紹介