未経験者が独学でWEBデザインを学ぶための学習ロードマップ

こんにちは!WEBデザイナーのとも(@tomo_buddy)です。

私は、1年前に未経験かつ独学でwebデザインの勉強を始め、現在は業務委託契約で企業のWEB制作やアプリ・管理画面のデザインを担当しています。

「どうやったら独学でWEBデザイナーになれるの?」とよくTwitterのDMをいただくので、今回は私が1年間試行錯誤して考えた、最短の学習ロードマップを公開します!

この記事がこれからWEBデザイナーとして活動したい人の背中を押すきっかけになったら嬉しいです☺️

WEBデザインを学ぶ5ステップ

  1. 【基礎編】デザインツールの使い方を学ぶ
  2. 【基礎編】WEBデザインの4原則を学ぶ
  3. 【基礎編】フォントと配色の基礎を学ぶ
  4. 【実践編】実際に自分でオリジナルサイトを作ってみる

上記のカリキュラムを行った友人2人は、デザイン未経験から1ヶ月弱でこのようなオリジナルサイトが作れるようになりました!

私はPCに疎く、デザインのセンスもありませんでした。正しい順番で勉強すれば、私や友人2人のように未経験からでもデザインを勉強することができ、個人でも案件をいただくことはできます。

それでは短期間でWEBデザインを学ぶための5ステップ、それぞれの項目を詳しく説明していきます!

【基礎編】1.デザインツールの使い方を学ぶ

デザインツールは様々ありますが、フリーランスデザイナーを目指される方は無料で使えるFigmaがおすすめです。複数人と共同で編集できたり、ブラウザ上で動くのが非常に便利です!

まずはデザインツールの基本的な使い方を学びましょう。詳しいことは実際にデザインを使いながらその都度調べて学んでいくのがおすすめです。

▼ こちらのYouTubeで1時間程度で使い方が学ぶことができます。

※制作会社の現場ではAdobeが使用されることが圧倒的に高いため、制作会社に就職を目指す方はAdobe XD(無料)/Illustrator/Photoshopが使えるようになることを推奨しています。

アドビでPhotoshopを勉強したい人はこちらのUdemyのコースでPhotoshopを勉強することができます。セール中に購入すれば1200円ほどで購入できます!全422レッスン & 42時間の動画が1000円代で学べるのでコスパ最強でした…HTMLとCSSを中心に実践的なコーディングまで収録されている神コースです。

【基礎編】2. デザインの4原則を学ぶ

デザインはセンスが必要と思われがちですが、デザインには原則や論理がありその基本的なルールを学ぶことが重要です。

デザインをこれから勉強し始めたいという方に向けて、デザインの原則を学ぶことができるおすすめの名著を2冊紹介します!

20年以上売れ続けているデザインの良書 「ノンデザイナーズ・デザインブック」

デザインの基礎本なのでこの本は必ず手元に置いておくことをお勧めします!良いデザインの作り方、悪いデザインの例と改善方法などが体系だってわかりやすく説明されているので、デザインを勉強したい人に一番お勧めしたい本です。

また、こちらの記事でも基礎を勉強することができます!

Swings | デザイナーズオンラインマガジン by BULANCO INC.

デザインとは何か デザイナーでなくとも、私たちは「デザイン」という言葉を日常的に使いますが、そもそもデザインとは一体何で…

「けっきょく、よはく。余白を活かしたデザインレイアウトの本

 

余白の使い方に特化した本です。
この本では、ベテランデザイナーと新人デザイナーのNGとOKのデザイン例といいデザインにするためにどこを改善したらいいのかを満遍なく掲載しています。

デザインの4原則の本を読んだ後にこちらの本を読むと、さらにいいデザインを作るためにどこに意識したらいいか理解できるようになるので、ぜひ手にとってみてください〜!

【基礎編】3. フォントと配色について学ぶ

WEBデザインで押さえるべきフォントと配色を学びましょう。選ぶ色やフォントによってサイトの雰囲気は大きく変わります。まずは、基礎を勉強し実際に作りながら学んでいきましょう!

①配色の原則を学ぶ

②フォントの基礎を学ぶ

ホームページ制作お役立ち情報

書体が与えるイメージについて Webサイトでも印刷媒体でも、商品やサービスのイメージアップにはフォントがとても大切な役割…

「ほんとに、フォント。フォントを活かしたデザインレイアウトの本

 

※大事なことは一回で覚えようとしないこと、実務で何回も読み返すこと。本を買って手元に置いて作業する

【実践編】4. 実際にデザインをしてみる

続いては実践編です。このステップまでくると程度デザインの基本や理論が学べている状態かと思います。

しかしデザインは本だけ読んでいてもなかなか上達しません。一番効果的なのは、とにかく実践すること!そして、実践しながらデザインの原則、配色、フォントを再度学び、復習することです。

自分が実際に手を動かして作っていく中で、必要な知識をその都度学んでいく方が効率的にかつ記憶に定着しやすいです◎

私もWEBサイトを作り実践しながら→本で学習→実践→本で学習 というサイクルを繰り返し少しずつ改善していきました。

本で学んだことをその場ですぐに自分の制作で生かす。これができる人は短期間で上達します!

それでは実践編スタートです!実践編は4ステップ

    ステップ① 作りたいサイトを決める

 ステップ②    作りたいサイトの目的・ターゲット・どんな印象を持ってもらいたか考える

 ステップ③    参考デザインを集め、いいと思う部分や参考にできるものを書き出す

 ステップ④    実際に自分で作ってみる

    ステップ⑤ デザインのブラッシュアップ をする

ステップ① 作りたいサイトを決める

架空のサイトを制作しましょう!自分が好きなサービスで大丈夫です。すでにあるサイトを自分で作り直すのもOK.

もしネタがない場合、私の家族で運営している金沢の小さなホテルの素材があるので、ぜひそちらで制作してみてください☺️

ステップ② 作りたいサイトの目的・ターゲット・どんな印象を持ってもらいたか考える

デザインを勉強し始めた時に、間違えてしまうのがとにかく綺麗なデザインをしようとしてしまうこと。デザインはは目的を達成するために行います。具体的には公式サイトからの予約数を増やしたい、サイトからの資料ダウンロード数を増やしたい、などです。

そのため、どんなユーザーをどういう行動(予約、問い合わせ)に導きたいか最初に整理することが重要になります。

例えば、60代のシニア向けに病院の予約サイトを作る場合、

目的:予約をスムーズに行ってもらうこと
ターゲット:病院に通院している60代のシニア層。毎回スマホで病院の予約をしている。
どんな印象を持ってもらいたいか:簡単に操作できる。使いやすい。信頼感がある

この場合、ターゲットはどんな印象を持ってもらいたいかによってデザインも変わってくるのです。ですので架空サイトのデザインをする際も、目的・ターゲット・どんな印象を持ってもらいたいか、を整理することでよりターゲットに合ったデザインを作ることができます。

ステップ③ 参考デザインを集め、いいと思う部分や参考にできるものを書き出す

画像

WEBデザインを実際に行う時に一番重要なことは、「参考になるデザインをたくさん見ること」です。

自分のオリジナルでデザインしようとするのではなく、一つのパーツにつき最低5個以上参考サイトを探すことをお勧めしています。

おすすめの参考デザインサイト

Pinterest 
Parts.

私は、普段参考になるサイトを保存してFigmaに一列並べています。

最初のうちは、模写をするのもお勧めです。フォントの大きさや余白の取り方、レイアウトなど勉強になります

ステップ④ 実際に自分で作ってみる

ステップ③で色々なサイトのレイアウト、文字の大きさを見て実際に参考に作ってみましょう。

最初はうまくいかなくて当たり前です。私も今でもなかなか納得のいくものが作れませんが、まずは完成度60%を目指しましょう!

ステップ⑤ デザインのブラッシュアップをする

デザインの大枠ができたら、そこからブラッシュアップをする工程に入ります。私は主に3つのパターンでデザインの修正を行っています。

①友人や家族にフィードバックをもらう

私は、普段出来上がったサイトをとにかく色々な人に見てもらっています。WEBサイトを使う人は、ほとんどがデザインの素人です。わかりやすく情報が整理されているのか、使っていて快適か、初めてサイトを見る人の意見はとても新鮮です。

どんどん人に聞いてフィードバックをもらうようにしましょう。

②「やってはいけないデザイン」を見ながら修正する

垢抜けたデザインにするためのヒントが盛り沢山「やってはいけないデザイン」

素人っぽいデザインが抜け出せなく、悩んでいるときに手に取った本です。最初にでこの本に出会った時には、「まさに初学者の自分のための本だ!」と感動しました笑

特にこれは初学者であれば手元に置いておいて損はない非常に役立った本です。

素人がやりがちなNGデザインと、垢抜けたデザインにするためのテクニックがたくさん掲載されています。「あ〜自分よくやってしまっていたな、、」と思うNGポイントと改善案がたくさんあるので、実際に私は、この本を読みながらデザインを修正してブラッシュアップしています!

さらに学びたい人へ!格安or無料で学べる学習サイトをご紹介

540本の教材が月額1,100で読み放題の「“>chot design

“>chot desigh

デザインツールの使い方やコーディング、WEB制作テクニックなどデザインの基礎知識がまるっと学べる素晴らしいサイトです。月額1,100円で勉強することができるので、オリジナルサイトを作りながらわからないことがあったらこのサイトから検索するのもお勧めです!

毎日お題をクリアしていくデザイン学習サービス「Cocoda」

いかがだったでしょうか?

実際に自分で案件を取る方法や、さらに詳しい勉強方法などはこれからこのブログで発信していきたいと思います!

ブログを最後まで読んでくださった方、ありがとうございました!

Twitterの最新投稿を見てみる