【挫折しない】社会人向けwebデザイン勉強ロードマップ5ステップ

社会人でwebデザインを勉強したいという人は増えています。

でも多くの人は、webデザインの勉強の進め方に迷って勉強自体を始められなかったり、勉強を始めても自分の成長が感じられず、最終的に勉強自体を諦めてしまったりします。

今回は社会人でも挫折しない、webデザインの学習ロードマップについてまとめます。

忙しくても実践できるよう5つのステップに分けたので「webデザインの勉強を始めたい」「今度はwebデザインの勉強を挫折したくない」という方は、ぜひ読み進めてみてください。

webデザイン勉強ロードマップ5ステップの概要

社会人が挫折しないでwebデザインの勉強を進めるには、次の5つのステップに沿って勉強をすすめるのがおすすめです。

各ステップについて詳しく解説します。

ステップ1：まずは「土台」！学習を始める前の準備

最初のステップは、学習の土台作りです。

面倒だと思うかもしれませんが、土台をしっかり固めておかないと、この後行う勉強の軸がぶれてしまいます。

迷いなく勉強を進めるためにも、しっかり決めておきましょう。

webデザインを学ぶ上で決めたいのは、次の3つの項目です。

まずは目標をはっきりさせます。

当たり前のように思えますが、目標をはっきりさせておくことは勉強のモチベーションに影響するため、非常に大切な要素なんです。

頭に思い浮かべるだけだく「なぜ学ぶか？」「最終的にどうなりたいか？」を、実際に紙に書きましょう。

目標の例としては

• スキルを身につけて転職する
• 副業で月5万円稼ぐ
• 自社のwebサイトを改善して新規受注を2割増やす

などが挙げられます。

目標があいまいだと、勉強の途中でモチベーションが下がったり「どうして勉強しているんだっけ」と意思が迷子になったりしてしまいます。

しっかりと目標を決めて、そこからぶれないようにしましょう。

次に学習手段を決めます。学習手段は、主に独学かスクール受講の2択です。

独学だと費用は抑えられますが、自分自身を管理する力が必要です。またわからない部分が出てきた際に、解決する手段の確保も必要になります。

対してスクールを受講する方法だと、学習計画が体系的に決まっているため、わからない部分が発生しても解決しやすいです。ただ入学金や受講料など、費用がかかるので注意しましょう。

最後に学習時間の確保を考えます。

特に独学の場合、スマホやテレビといった誘惑が多く、また家族の用事も入るため、学習時間の確保が課題です。

「この時間は必ず勉強時間に充てる」と決めたら、スマホやテレビの誘惑を絶ち、時間を「聖域化」しましょう。

家族にも「この時間だけは自分の勉強時間にさせてほしい」と協力を求めて、話し合いの場を持ちましょう。

ステップ2：webの仕組みと基本スキルを理解する

ステップ2から、いよいよ勉強に入ります。最初は次に挙げる、webの仕組みと基本スキルについて学びます。

まずはwebサイトの仕組みについて。

webサイトは、サイト自体を設置するサーバーや、サイトの住所になるドメインなどによって構成されています。

サーバーやドメインの詳しい役割、webサイトはどのように動いているのか。

webデザインをいきなり勉強するのではなく、まずはwebサイト自体の仕組みから理解を深めましょう。

次に、webデザインを行う上で必須となる「言語」について学びます。言語といっても、日本語や英語など、話し言葉ではありません。

webデザインにおける言語とは、webサイト自体を構成する中身のこと。

言語の中でも特に基本的なのが「HTML」と「CSS」です。

最低限この2つの言語がわからなければ、webデザインの参考書を開いても理解が追いつきません。

見慣れない英数字の羅列に最初は戸惑うかもしれませんが、本腰を入れてじっくり学びましょう。

HTMLやCSSを学ぶ際におすすめなのは「Progate」と「ドットインストール」という学習サービスです。

どちらも初級編は無料で学べます。

ただ、難易度に若干の差があるため、初心者でプログラミングに全く触れたことがないなら、まずはProgateで。

HTMLやCSSについて少しでも知識があるならドットインストールで学ぶのがおすすめです。

また「忍者CODE」というオンラインスクールなら、基礎から応用まで学べ、サポート体制もしっかりしています。費用に余裕がある場合は、忍者CODEの受講も検討してみましょう。

忍者CODEの詳細については以下の記事にまとめているので、一度目を通してみてください。

最後に、プログラミングとデザインの違いを理解しておきます。

webデザインにおいて、プログラミングとデザインには大きく違いがあります。

簡単に言うと、デザインは「ウェブサイトの見た目や使いやすさ」といった表側を担当し、プログラミングは「ウェブサイトの機能や動作」といった裏側を担当します。

HTMLやCSSの知識が身についた時点で、自分はデザインを担当したいのか、それともプログラミングの知識を深めたいのか決めましょう。

また両方のスキルが求められる「フルスタックデザイナー」という役割もあります。

どちらの知識も深めたい場合は、フルスタックデザイナーを目指すのも1つの方法です。

ステップ3：デザインの基礎を身につける

3つめのステップで勉強するのは、webサイトの見た目に関係するデザインの基礎についてです。

プログラミングの知識を深めたいという方も、デザインの基礎知識については勉強しておきましょう。

デザインの基礎の勉強は、主に次の3つを重点的に行います。

まずはwebデザインを行う上で必要になる、ツールの使い方を学びます。主に必要となるツールは、

• Photoshop（フォトショップ）：写真の明るさ補正や切り抜きなどの加工に使用する
• Illustrator（イラストレーター）：ロゴやカスタムアイコンの作成に使用する
• Figma（フィグマ）：サイトのレイアウト・画面構成・情報の配置など、サイト全体のデザイン構築に使用する

の3つです。

PhotoshopやIllustratorは、webサイトの部品を作成するために使用します。

また近年はFigmaを使用したwebサイトの設計が主流となっているため、まずはFigmaの操作を重点的に学びましょう。

Figmaの勉強に関しては「本で学ぶ」「動画サイトで動画を視聴する」のも方法ですが、「Schoo（スクー）」というオンライン授業動画スクールにも、関連動画が投稿されています。

Schooにはwebデザインに関する動画が豊富に用意されているため、興味がある方はまず無料登録をして動画を視聴してみましょう。

[PR]

次に「デザインの4原則」についても学びます。

「デザインの4原則」とは「近接」「整列」「反復」「コントラスト（対比・強調）」のこと。

「デザインの4原則」を学ぶことで「なぜこのデザインが良いのか・悪いのか」が論理的に説明できるようになり、デザインの品質を客観的にチェック・改善できます。

「デザインの4原則」は、webデザインはもちろんデザイン自体に必要な基礎知識なので、この機会に勉強しておきましょう。

次は「配色とフォント」についてです。

配色とフォントは、サイト自体の雰囲気を決める大事な要素です。

配色は「ブランドイメージと感情の伝達」や「デザインの安定性における配色の黄金比」などで重要になります。

またフォントは「情報の読みやすさ」や「ブランドイメージと印象の形成」のために厳選する必要があります。

配色もフォントも「何を伝えたいか」という意図をはっきりさせ、意図通りにユーザーに情報を受け取ってもらうために必要な要素です。

ここまでデザインの基礎が身についたら、最後にwebサイトを実際に見て、良いデザインを模写してみましょう。

webサイトを模写する際は、ただ真似るだけでなく「なぜ、こうデザインされているのか」を考えながら手を動かすのが大切です。

コツは

• 模写前に徹底的な「観察と分析」を行う
• 「なぜそうしたのか」を常に頭に置く
• 最初はシンプルなバナーやレイアウトから始める

などが挙げられます。

ただ注意点として

• 著作権（知的財産権）に十分配慮し、自分の作品としないこと
• 「単なるコピー」で終わらせないこと
• 8割の完成度でも良しとして、完璧主義にならないこと

が挙げられます。

模写はあくまで勉強のためなので、模写して得られた知識を活かして、自分でバナーやレイアウトを作ることも忘れないようにしましょう。

ステップ4：実践！簡単なコーディングとWordPress

4つ目のステップで勉強するのは、簡単なコーディングとWordPress（ワードプレス）についてです。

今度はwebサイトの中身について勉強します。

コーディングとは、プログラミング言語などを使って、コンピューターが理解できる命令である「ソースコード」を書いていく作業のこと。

ステップ2で学んだHTMLやCSSの知識を活用して、コーディングに挑戦しましょう。

また現在、webサイトはパソコン以外にもスマホやタブレットで見られることが多くなりました。

様々な機器に対応する「レスポンシブデザイン」の基礎も、この段階で身につけましょう。

次にWordPressについてです。

最近は「CMS（コンテンツ・マネジメント・システム）」という、webサイトの作成・更新・管理について専門知識がない人でも簡単に行えるシステムが主流となっています。

CMSで代表的なのがWordPressで、当メディア「社会人の勉強メモランダム」もWordPressで構築しています。

WordPressはサーバーの契約と同時に導入できるケースもあるので、まずは勉強も兼ねてWordPressを導入し、実際に触れて基本操作を学びましょう。

ここまで勉強を進めたら、既存のサイトやテンプレートから学んだ知識を活かして、自分で考えたデザインをコードで再現してみます。

最初は失敗やコードのエラーに悩まされますが、インターネットやAI検索が発達したので「わからなかったら検索」を合言葉に、webサイトの構築に挑戦しましょう。

ステップ5：最強の武器「ポートフォリオ」を作成する

最後のステップは、勉強の最終段階である「ポートフォリオ」の作成です。

ポートフォリオとは、自身のスキルや実績を証明するための作品集のこと。ポートフォリオには、大きく次の4つの項目を掲載します。

「自己紹介・プロフィール」は、あなたの名前や顔写真の他、自己PRや経歴・スキルなどを掲載しまましょう。

「スキルセット・使用可能ツール」には、FigmaやPhotoshopなどあなたが使用できるツールの他、HTMLやCSSなどのコーディング言語も記載します。またワイヤーフレーム作成や写真撮影・動画編集などのスキルもあれば加えます。

「作品紹介」では、あなたが実際に作成したwebサイトを掲載します。ポートフォリオの核ともいえる部分です。

実務経験がない、あるいは少ない場合は、実績の代わりに

• 卒業制作・課題作品
• 自主制作したサイト
• 既存サイトをリデザインしたもの

を掲載します。

実務経験が少ない場合でも、作品数は最低でも3～5点、できれば10点程度を目標に掲載しましょう。

また実務経験が少ないからこそ「作成に至るまでの思考プロセス」を徹底的に説明することが大切です。

「誰のためのデザインか？」「このサイトで何を達成したかったか？」といった「目的と課題」はもちろん、「なぜこの色・レイアウト・フォントを選んだのか」という論理的な根拠とコンセプト、工夫した点・難しかった点や制作にかかった時間・担当した工程も記載します。

ポートフォリオは書面でまとめることはもちろん、実際のwebサイトとして「ポートフォリオサイト」を作成するのも必要です。

ポートフォリオサイト自体を「自身の最高の作品」にするためにも、デザイン・コーディング・レスポンシブ対応を完璧に行いましょう。

また可能であれば、学習記録や模写の過程をSNSや「note」といったブログで発信してみましょう。

あなたの作成したサイトに興味を持った人・企業からのコンタクトを受けることもありますよ。

まとめ

今回は社会人向けに、webデザインの勉強ロードマップ5ステップについてまとめました。

まずは学習を始める前の準備をしっかり行いましょう。

その上で「webの仕組みと基本スキルの理解」「デザインの基礎の学習」「コーディングとWordPressの勉強」「ポートフォリオの作成」と進めます。

社会人は仕事と並行して勉強を行うため、webデザインの勉強を始めても挫折してしまうケースがあります。

挫折しないためには1つひとつの段階を踏んで、確実に勉強を進めることが大切です。

今回紹介したロードマップを参考にwebデザインの勉強を続けて、案件獲得を目指しましょう。

最後までご覧いただき、ありがとうございました！