【実践シート付き】独学でのWEBデザイン勉強法とおすすめの教材を解説

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

この記事では、「独学でWEBデザインを勉強する方法や学習スケジュールを知りたい」

「WEBデザインを学びたいけど何から手をつけて良いのか分からない」

とお悩みの方向けに私が1年間試行錯誤して考えた「最短の1ヶ月の勉強法」を公開しています。記事を読んだ後にすぐに実践に移せるように学習スケジュールシートと実践練習素材をダウンロードできるようになっています。

こちらはデザイン未経験者3人の1ヶ月後の実績です。正しい順番で学習することで、このような公式HPをゼロからデザインできるようになりました。

この記事の学習方法を実践することで、WEBデザインの基礎はもちろん「自分でゼロからWEBデザインを制作できるスキル」が身につきます。

3つの実践シート付き

1ヶ月の学習スケジュールを記載した Google スプレッドシートを配布いたします。大まかな学習時間とスケジュールを記載しています。よろしければ自身の学習にご活用ください。

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

具体的に、WEBデザイン学習時間の目安については、以下のとおりです。

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

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

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

まずはデザインツールの基本的な使い方を学びましょう。

デザインツールはたくさんありますが、無料で使えるFigmaがおすすめです。複数人と共同で同時に編集でき、ブラウザ上で動かすこともできるので便利です。クライアントさんやチームメンバーとリンクを共有してリアルタイムで進捗状況を共有したり一緒に編集することができます。

 figma を勉強される場合は「ゼロイチラボさん」が提供している 全7回のFigma 講座がおすすめです。

こちらは YouTube にアップされており、ひとつの動画につき約5分〜15分合計約1時間程度の動画になっています。私もこの動画を見てFigmaの使い方を勉強しました。

詳しいことは、実際に使いながらその都度ネットで調べて学んでいくのがおすすめです。

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

※制作会社の現場ではAdobeが使用されることが多いため、制作会社の就職を目指す方はAdobe XD(無料)/Illustrator/Photoshopを推奨しています。アドビでPhotoshopを勉強したい方は、こちらのUdemyのコースでPhotoshopを勉強することができます。

アドビでPhotoshopを勉強したい人はこちらのUdemyのコースでPhotoshopを勉強することができます。セール中に購入すれば約1400円(税抜)(※時期によって変動)で購入できます。全422レッスン & 42時間の動画が1000円代で学べます。

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

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

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

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

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

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

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

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

 

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

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

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

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

①配色の原則を学ぶ

②フォントの基礎を学ぶ

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

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

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

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

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

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

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

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

それでは実践編スタートです!

 1.   作りたいサイトを決める
 2.    作りたいサイトの目的・ターゲット・どんな印象を持ってもらいたか考える
 3.    参考デザインを集め、いいと思う部分や参考にできるものを書き出す
 4.    実際に自分で作ってみる
 5.    デザインのブラッシュアップ をする

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

自分が好きなサービスでもいいですし、興味のあるサービスを選んでください。そういったものがないという方には、実際にある金沢の宿の練習素材をご用意しました。実際のホテルの写真素材やサイトに使える文章など用意してます。

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

何のサイトを作るか決めたあとは、そのサイトの制作する目的やゴールなど、どんなイメージのサイトにしたいかを決めていきます。

例えば60歳のシニア向けの病院の予約サイトを作る場合、ターゲットは60歳以上のシニア層でゴールは病院の予約だと仮定します。

その場合はオシャレなデザインよりもシンプルで操作しやすいデザインが、ターゲットにとって良いデザインになります。

例えば、目が不自由な方でも簡単に操作できるように文字フォントを大きくする、色のメリハリをつける、ボタンを押しやすいように大きくするなどです。

このように、ターゲットによってデザイン内容は変わってくるため、以下の3つのことを意識しましょう。

1. どんなターゲットにサイトを見てもらいたいか?
2. ユーザーをどういう風に(予約、問い合わせ)に導きたいか?
3. どんなイメージを持ってもらいたいか?

実際に制作するサイトと概要が決まったら、次に参考となるサイトを

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

画像

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

WEBデザインを実際に行うときに一番重要なことは、参考になるデザインを多く見ることです。

今表示している左の画像は、1ヶ月マンツーマン講座を行なった方の初めての作品です。

当初、参考デザインを何も見ずに自分の感覚でデザインしていました。

そこで「自分の感覚でデザインするのではなく、必ず他のサイトを参考にする」ことを伝えて修正してもらいました。

右の画像が、合計20個以上のサイトを見て修正したものです。

初学者ほど自分の直感でオリジナルのデザインをしがちですが、他のデザインを参考することで垢抜けたデザインになります。

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

おすすめの参考デザインサイト
Parts. 
Parts.は私が一番使用しているサイトで、ヘッダーやボタンなどパーツごとにデザインがまとまっています。参考デザインがまとまったサイトは沢山あるのですが、このようにパーツごとに分かれているサイトはあまりないので、とても重宝しています。


Pinterest
 Pinterestは画像専門のSNSで、 Web デザインの素材がたくさん掲載されています。

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

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

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

いろんなサイトを見て、まず「どうしてそのようなデザインになっているのか」を考えます。

そのなかにあるルールやデザインの型を探し、自分のデザインに使うようしています。こうすることで少しずつデザインのパターンがストックされます。

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

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

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

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

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

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

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

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

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

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

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

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

Webデザインを学べるおすすめスクール

Webデザインに必要な知識やスキルを学べるスクールを知っておくことで、効率よく学習することが可能です。

具体的におすすめのスクールは、主に以下の2つです。

  • デイトラ
  • shelikes

ひとつずつ解説していきます。

デイトラ

デイトラとは、「1日1題90日でプロのWebスキルを手に入れよう」というキャッチコピーで有名なプログラミングオンラインスクールです。

主に学ぶことができる学習内容は、以下の通りです。

  • Webデザイン
  • 動画制作
  • 広告運用

フリーランス向けのキャリアサポートも充実しています。

比較的新しいスクールなので、最新のWebデザイン情報を学ぶことが可能です。

shelikes

shelikesは、女性専用クリエイティブスクールで、全18コースが学び放題です。

オンラインで学べることはもちろん、オフラインでも学ぶことができるため、自分に合った学習方法を選ぶことが可能です。

さらに、途中で挫折することを防ぐために、月1回のコーチングでモチベーションを維持させることができます。

これからWebデザインの勉強を始めたいと思っている女性におすすめです。

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

540本の教材が月額1,100円(税込)で読み放題の「chot design

“>chot desigh

デザインツールの使い方やコーディング、WEB制作テクニックなどデザインの基礎知識がまるっと学べる素晴らしいサイトです。月額1,100円で勉強することができるので、オリジナルサイトを作りながらわからないことがあったらこのサイトから検索するのもお勧めです。デザインの基本から上級者向けのスキルまで幅広い知識を学べることができ、さらにWebデザイナーとしての市場価値を高めることができます。

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

Cocodaはデザインが学べることはもちろん、Webデザイナーとして働くために求人を探すことができたり、他のユーザーとコミュニティーを形成できるサービスです。

デザインの基本から実践まで学ぶことができ、課題をポートフォリオとしても利用できます。

具体的には、「フードデリバリーアプリのリスト画面」や「名刺作成」など毎日1つの課題が与えられ実践練習をすることできます。

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

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

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

Twitterの最新投稿を見てみる