WebデザイナーになるためにWebデザインの勉強を始めたい。
だけど何から始めれば良いのか分からない人がいると思います。
今回は現役Webデザイナーが正しいWebデザインの勉強方法について説明します。
Webデザイナーには大きく2種類のタイプがいる
勉強を始める前に、Webデザイナーには大きく2種類のタイプがいます。
- デザインとコーディングの両方できるWebデザイナー
- デザインだけに特化するWebデザイナー
実際の現場では上記の大きく２種類のタイプのWebデザイナーがいると思います。
まずは、自分がどちらのタイプのWebデザイナーになりたいのかをある程度決めておくと、今後の学習範囲の境界線を作ることができ、時間を有効に使うことができます。
ただし、必ずしも最初にガッチリ決める必要はなく、ざっくりとでも構いません。
最初はデザインとコーディング両方できるWebデザイナーになりたいと思っていたけど、仕事をしていくうちにデザインだけに特化するWebデザイナーになった人も結構います。
ここでは将来自分がどのタイプのWebデザイナーになりたいかをイメージすることが重要です。
ただ、注意が必要なのは、仮にデザインだけに特化するWebデザイナーになりたいと思ったとして、コーディングの知識が全く必要ないとは限りません。
デザインだけに特化しているからこそ、コーディングの知識も必要になるからです。
Webデザインの勉強方法
ではWebデザインの勉強方法について説明します。Webデザインの勉強は大きく下記の工程で進めるのが良いと思います。
- デザインの基礎・原則を学習する
- いろんなサイトのデザインを見る
- サイト以外のいろんなデザインも見る
- デザインツールの使い方を学習する
- デザインツールを使ってサイトのデザインを制作してみる
- 学習を継続し繰り返す
デザインには基礎や原則が存在します。
まずはデザインの基礎や原則を勉強し、その上でいろんなサイトのデザイン、サイト以外のデザインを観察します。
理由は、デザインの基礎や原則を理解しないでデザインを観察するのと、デザインの基礎や原則を理解した上でデザインを観察するのとでは、デザインを観察する着眼点や見方が違ってくるからです。
それによってインプットの質も変わってきます。
次にデザインツール（道具）の使い方を覚え、最後にデザインツールを使ってデザインを制作（アウトプット）します。
そしてこれらの学習を継続し繰り返すことが重要です。
デザインの基礎・原則を学習する
まずデザインの基礎と原則を学習します。
デザインの基礎と原則を学習することにより、時代の流れやトレンドに左右されない不変的な知識を得ることが可能です。
おすすめはデザインの4原則という書籍を1度読むことです。
この本はデザイナーに限らず、資料作りをする営業の人や、人に何かを伝えるセミナー講師など、幅広い人に役立つデザインの基礎と原則を学習することが可能です。
Webデザイナーなら知らない人はいない、というくらいの書籍なので絶対読んだ方が良いです。
いろんなサイトのデザインを見る
良いアウトプットを作るためには、良いインプットが必要になります。
日頃から自分が良いなと感じたWebサイトを観察することは、今後のデザイン制作においてかなり重要になります。
ですので常にいろんなサイトのデザインを見る習慣をつけましょう。
業務の開始前に30分間デザインのギャラリーサイトやawardサイトを眺めると、とても良いインスピレーションを受けます。
サイト以外のいろんなデザインも見る
Webサイトのデザインを作るのだからWebデザインだけ見れば良いのではないか？と思われるかもしれません。それも一理あると思います。
ただ、サイト以外のデザイン、例えば街中で見かける看板やお店のロゴ、ショッピングビル内で見かけるブランド物のロゴや商品、家電屋さんで見かける商品の造形などを見るもの、デザインセンスの向上のきっかけになります。
デザイナーになるとアイディアを出すのに煮詰まることが多々あります。
そんなときにWebデザインだけを見るより、他の分野のデザインを見ていると、アイディアとアイディアが重なって、良いアイディアが生まれやすくなります。
デザインツールの使い方を学習する
サイトのデザインを作るためにはデザインツールの使い方を学習する必要があります。
サイトのデザインを作るツールはいくつかありますが、現在よく使われているデザインツールはAdobe XDとFigmaです。
私個人の所感ですが、Web制作会社はXD、Webの事業会社はFigmaを使われている方が多い印象があります。両方のツールを使えるようになるのがベストですが、大変なのでどちらか1つのデザインツールを選んで学習すれば良いと思います。
また画像を加工する時にはPhotoshop、アイコンやロゴを作ったりする時にはllustratorを使うことがあるので、この2つのツールも学習する必要があります。
ツールの勉強方法は動画教材でも本でもどちらでも構いません。自分のあった勉強方法を選択するのが良いと思います。
また、PhotoshopやIllustratorはたくさんの機能が搭載されていますが、実際の現場で使う機能は限られているので、全て覚える必要はありません。基本的なこととよく使われる機能を覚えれば問題ありません。
デザインツールを使ってサイトのデザインを制作してみる
デザインツールの使い方をある程度覚えたら、実際にサイトのデザインを作ってみましょう。実際に手を動かしながらのほうが上達が早いです。
サイトのデザインを作るときには、自分のポートフォリオサイトでも良いですし、架空の会社やカフェなどを想像してデザインしても良いです。
初心者のうちで重要なのは、何のデザインを作る（質）かより、たくさんのデザインを作る（量）ほうが重要だと思います。
もちろん最終的には質も重要ですが、量をこなせば自ずと質も向上していきます。
繰り返し継続する
以上のデザインの勉強方法を繰り返し継続していけば、Webデザインの学習方法として問題ないと思います。
日頃からいろんなデザインを見て（インプット）、デザインツールを使ってサイトのデザインを作る（アウトプット）ことを繰り返すことが重要です。
コーディングの勉強法
コーディングの勉強方法について説明します。コーディング勉強方法は下記の順番で進めるのが良いと思います。
- HTML、CSS、JavaScriptの基礎を学習する
- Webページを何ページかコーディングしてみる
Webサイトにはフロントエンド（レイアウトやアニメーションなどの見た目の部分）とバックエンド（プログラムで動いている部分）の大きく2つの役割があります。Webデザイナーが担当するのは主にフロントエンド側になります。
フロントエンドで必要な言語はHTML、CSS、JavaScriptが使われるので、これらを学習する必要があります。
ですので、HTML、CSS、JavaScriptの基礎を学習してから、Webページを何ページかコーディングしてコーディングスキルを身につけるのが良いです。
HTML、CSS、JavaScriptの基礎を学習する
HTML、CSS、JavaScriptの勉強方法は、本やプロゲートなどのオンライン教材などがたくさんあります。これらの教材を駆使して基礎を学習します。
ここで注意してほしいことは、コーディングやプログラミングの勉強に関しては暗記したり、何回も本やプロゲートのチュートリアルを往復するのでなく、ある程度理解したら次へ行ってください。
なぜなら、コーディングに関しては勉強してから実践をするより、実践から覚えていったほうが学習効率が良いからです。
Webページを何ページかコーディングしてみる
基礎をある程度覚えたら、Webページを何ページかコーディングしてみましょう。
実践のほうが本やオンラインの教材で勉強するより、遥かに理解が深まります。
コーディングしてみると言っても何からやればいいか分からないと思いますが、ネットで公開されているサイトのスクショを撮って、そのデザインを基にゼロから自分でコーディングするのが、1番手っ取り早い方法です。
ただしこのやり方で注意が必要なのは、他の人が作ったサイトなので、自分のサーバーに上げたり、ポートフォリオにしてはいけません。著作権違反になります。
【絶対力になる勉強】ゼロからオリジナルのWebデザインを作ってコーディングする
Webデザインとコーディングの勉強方法について説明しましたが、ここからは応用を説明します。
今まで勉強したWebデザインの基礎やコーディングの基礎を基に、自分でゼロからオリジナルのサイトのデザインを制作して、そのデザインをコーディングする。
そしてこれを繰り返す。
この方法がデザインもコーディングも1番スキルが上達する勉強方法です。
オリジナルのサイトは架空の会社を想定してもいいし、自分のポートフォリオでも構いません。とにかく自分でゼロからデザインしてコーディングする経験を重ねることが重要です。
まとめ
以上Webデザインとコーディングの勉強方法について説明しました。
初心者の人は何から手をつければいいか分からないと思うので、参考にしてみてください。
