デザイン未経験者がWebデザイナーになるために始めた3つのこと

「Webデザイナーになるためには、まず何から始めたらいいんだろう？」
そう思う方もいるのではないでしょうか。

学生時代にデザインを学んでこなかった私が、Webデザイナーになるべく実践した勉強法を、おすすめの書籍とギャラリーサイトの切り口でご紹介します。

同じように未経験でWebデザイナーを目指している方に、何か一つでも参考になる情報があればいいな、という気持ちで書いていきます。目下勉強中の身ですので、どうぞお手柔らかにご覧ください！

目次

ステップ1. デザインの考え方を知ろう
ステップ2. ツールの扱い方を知ろう
ステップ3. 実際のクリエイティブから吸収して、アウトプットしよう
まとめ

ステップ1. デザインの考え方を知ろう

まずは「デザイン」というのが、どのような考え方なのかを知る必要があります。

闇雲に「なんかオシャレなものを作りたい！」で手を動かし始めると、結果的にダサいところに行き着いてしまう…ということが最初はありがちです。そこで、次の書籍でまずは基本を学びました。

デザイン入門教室

この本ではデザインをしていく上で基礎となる情報整理の仕方、レイアウト、配色、文字、などの知識が丁寧にまとめられています。

基本のルールを知ることで「“オブジェクト同士が揃っているから”スッキリした印象になるんだな」や「“このフォントを選んでいるから”文章が読みやすいんだ」というように、目の前のデザインの根拠に気づけるようになります。

デザインの根拠に気づけると、なんとなくではなく、自分で制作する時にも理由のあるデザインに落とし込めるようになります（ちょっとずつ！）。

次に紹介するのはAmazonの「グラフィック入門書」部門1位の言わずと知れたベストセラーです。

なるほどデザイン

デザインを良くするためのポイントが、非常に多彩な具体例と共に紹介されています。プロのデザイナーの頭の中をのぞいているように、デザインの発想法を学ぶことができます。

パラパラとめくるだけでも楽しく、「私も何か作りたい！」という創作意欲が湧いてくる一冊です！

ステップ2. ツールの扱い方を知ろう

デザインの見方・考え方を知ったら、次に制作ツールを知っていきましょう。制作ツールとしてはグラフィック編集ソフトとコーディングについて見ていきます。

グラフィック編集ソフト

私の場合は、まずはPhotohopをきちんと使えるようになろうと勉強しました（グラフィック編集ソフトは他にも種類があるため、どんなデザインを行いたいかなどで使うソフトも異なります。目的にあったソフトを調べてみてください！）。

Photoshop しっかり入門 増補改訂 第２版 【CC完全対応】［Mac ＆ Windows対応］（同じシリーズのIllustratorも購入しました）

まずはざっと一読して、「こういう機能があるんだな」程度で良いので機能を把握します。実際に触ってみないと覚えられないことだと思うので、この一冊は辞書を引く感じで手元に置いておくのが良いと思います！

本では網羅されていない機能もありますし、ネットのチュートリアル動画の方が分かりやすい箇所もあるかもしれません。

ですが、バラバラと機能を拾っていくよりは、まずは全体感を掴んで基本の使い方を抑えるのが“急がば回れ”という言葉もあるように、上達への近道かと思います。

書籍以外で気づいたPhothoshopの操作方法や、自分がつまずいた操作方法などを随時スプレッドシートにまとめると、後から振り返りやすくなります。

操作方法の気づきなどをまとめる自分用のスプレッドシート

コーディング

Webサイトの基本となるコーディングについて、実践も通して学ぶことができる下記の書籍を購入しました。

HTML&CSSとWebデザインが 1冊できちんと身につく本

「コードはちょっと難しそう…」と思う方もいるかもしれませんが（私もでした…）、コーディングを知ることでサイトデザインのどこまでをグラフィックソフトで制作すべきなのか、コーディングで実装できるのか、などとWebデザインの範囲を実現可能な形で具体的に考えられるようになります。

私はオンラインの学習サービスProgateと合わせてこの本を読んだことで、より理解できたと感じたので、合わせ技もおすすめです。

ここまでで、ツールの使い方を全て頭に入れる必要はありません。次のステップの、アウトプットで覚えていきたいところです。

ステップ3. 実際のクリエイティブから吸収して、アウトプットしよう

ステップ1でデザインの基本知識をインプットしたら、ステップ2でツールの扱いを学びつつ、手を動かしてアウトプットしていきます。

その方法として、デザイナーの先輩からまずは“トレース”をおすすめされました。つまり、実際のバナーやLPを模写して、同じように作ってみるということです。

トレースを行うことで、Web画面上での適切なフォントのサイズ感やカーニング（文字間）、あしらい（装飾）など、デザインの詳細な部分までつかむことができます。

トレースは完全なアウトプットというよりは、インプットとアウトプットを同時に行うようなものです。再現するのが難しくてもどかしい時もありますが、自分が「素敵！」と思ったデザインを作れるようになるとどんどん楽しくなっていきます。

以下はバナーやLPを見つける時に参考にしているギャラリーサイトの一部です。こうしたサイトからトレースするお題を選んだり、印や分類わけしておくと後々デザインのアイデアを探す時に便利です。

=====

●バナー
http://design-library.jp/
https://bannnner.com/

●サイトデザイン
https://sankoudesign.com/
https://81-web.com/
https://muuuuu.org/

●レスポンシブ
http://design.web-hon.com/

=====

トレースの際に重要なのは、そのデザインのポイントや良いと思う理由をなるべく言語化してみる、ということです。

まだまだデザインのストックの乏しい私は、ついつい感覚的にデザインを作ってしまいがちです。それを回避するためにも、「このサイト/バナーおしゃれ！」と思ったら「どこがおしゃれを表現しているんだろう、どんなターゲットが好きになるだろう」と言語化のプロセスを挟むことで、より論理的で説得力のあるデザインを作る練習にもなります。

まとめ

デザインの考え方を知る→ツールの扱いを知る→アウトプットする

以上が、デザイン初心者の私がまず取り組んだデザインスキルアップの方法です。と言っても、私もまだまだこの1～3をぐるぐる実践中ですが…。

専門的にデザインを学んでいないけどWebデザインに興味がある、Webデザイナーになりたい、という方がいたら、ぜひ初めの一歩の参考にしてください。いつか「Webデザイナーです！」と胸を張って言えるよう、一緒にスキルアップしていきましょう〜！