社会人向けwebデザインの勉強ロードマップ5ステップ【準備からポートフォリオまで】

「社会人だけどwebデザインの勉強を始めたい」と、将来のスキルアップのためにwebデザインの勉強に興味を持つ社会人は多いですよね。

でも「どうやって勉強を進めればいいのかわからない…」という方が大半のはず。

社会人でwebデザインの勉強を始めるには、ロードマップを頭に入れておくとスムーズに勉強を進められます。

今回は未経験の社会人向けに、webデザインの勉強ロードマップを5つのステップに分けて解説します。

「今度はwebデザインの勉強を挫折したくない」と、以前勉強して諦めてしまった方にもおすすめの内容です。

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

社会人が未経験の状態からwebデザインの勉強をする際は、学び始める前の準備を含めた「5つのステップ」に沿って進めるのがおすすめ。

特に社会人は勉強自体を挫折しやすい環境に置かれているため、勉強を始める前の土台作りからしっかり行うと挫折も防ぎやすいです。

社会人向けの「挫折しないwebデザインの勉強ロードマップ5ステップ」の概要は次のとおりです。

難しそうに思えますが、着実にクリアしていけば大丈夫。

これから詳しく見ていきましょう。

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

最初のステップは、学習の土台作りです。面倒くさいと思うかもしれませんが、土台をしっかり固めることでこの後行う勉強の軸がぶれません。

webデザインを学ぶうえで決めたい土台は、次の3つです。

目標の明確化【超大事】

1つ目は「目標を明確化する」こと。

webデザインの勉強を行う際は、目標をはっきりさせておくことがとても大事です。

当たり前だと思えますが、目標をはっきりさせておくことは勉強する際のモチベーションや知識習得意欲に直結するため、非常に大切な要素なのです。

目標の例としては

• スキルを身につけて転職する
• 副業で月5万円稼ぐ
• 自社のwebサイトを改善する

などが挙げられます。

また目標は頭に思い浮かべるだけではなく、実際に紙に書いておくのがおすすめです。

目標が曖昧だと、「どうして勉強しているんだっけ」と途中で勉強する意欲がなくなり、モチベーションもガクッと下がってしまいます。

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

学習手段の決定

2つ目は「費用と期間を踏まえて学習手段を決める」こと。

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

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

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

個人的なおすすめは「webデザインの入門書をまずは1冊購入して読み、基礎知識を頭に入れてからオンラインスクールなどのスクールを受講する」こと。

オンラインスクールでは未経験者向けにカリキュラムが組まれているため、基礎知識や用語を少しだけ知っていれば授業内容について行きやすいです。

当メディアではオンラインスクールの「SHElikes（シーライクス）」について記事をまとめています。

女性向けのオンラインスクールではありますが、未経験者でも受講しやすいため、気になった方は以下の記事を参考に受講を検討してみてください。

[PR]

勉強時間の確保

3つ目は「学習時間を確保する」こと。

特に独学の場合、スマホやテレビといった誘惑をはじめ、家族の急用なども入りやすいため勉強時間の確保が課題となります。

勉強時間を確保すると決めたら、まずは24時間の使い方を帯グラフや円グラフにして書き出し、把握しましょう。

通勤・移動時間や昼休憩の後半といったスキマ時間は、積極的に勉強時間に充てます。

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

家族にも「この時間だけは自分の勉強時間にさせてほしい」と協力を求めるのも大切です。

勉強時間を確保できたら「ステップ2」に進んで、さっそく勉強を始めましょう。

ステップ2：勉強開始｜webの仕組みと基本スキルを理解

ステップ2からは、具体的にwebデザインの勉強を始めます。

最初は次に挙げる「基本スキル」について学びましょう。

webサイトの仕組み

まずはwebサイト自体の仕組みを理解します。

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

詳細は割愛しますが、普段目にしているwebサイトの仕組みを知ることが、webデザイン学習の第一歩です。

遠回りに思えるかもしれませんが、webデザインに直接関係する勉強をいきなりするのではなく、まずはwebサイト自体の仕組みを理解することから始めましょう。

必須の「言語」

次にwebサイトを製作するうえで必須となる「言語」を知っておきましょう。

言語と言っても、日本語や英語といった語学ではありません。webデザインにおける言語とは、webサイト自体を構成する「プログラミング言語」のことです。

言語の中でも特に学んでおきたいのが「HTML」と「CSS」という言語。最低限この2つの言語を知っていれば、webデザインの参考書もある程度理解できます。

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

HTMLやCSSを学ぶ際におすすめなのが「Progate」と「ドットインストール」という学習サービス。どちらも初級編は無料で学べます。

難易度に若干の差があるため、初心者でプログラミングに全く触れたことがないならまずはProgateで。HTMLやCSSに関して少しでも知識があるならドットインストールで学ぶのがおすすめです。

⇒「Progate」の詳細を見てみる

⇒「ドットインストール」の詳細を見てみる

デザインとプログラミングの違い

最後にデザインとプログラミングの違いを理解しましょう。

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

簡単に書くと、デザインは「webサイトの見た目や使いやすさ」といった表側を担当し、プログラミングは「webサイトの機能や動作」といった裏側を担当するという違いがあります。

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

目指したい方向によって必要な勉強も変わるため、この時点で決めておくのがおすすめです。

また、両方のスキルが求められる「フルスタックデザイナー」という役割もあるため「どちらの知識も深めたい」という方はフルスタックデザイナーを目指すのも1つの方法です。

ステップ3：デザインとは？｜デザインの基礎の学習

ステップ3では、webサイトの見た目に関する「デザインの基礎」について学びます。

プログラミングの知識を深めたいという方も、デザインについての基礎知識は勉強しておく必要があります。

webデザインの基礎については、主に次の4つを重点的に勉強しましょう。

ツールの使い方

まずはwebデザインを行う際に必要な「ツールの使い方」について学びます。

webデザインを行う際に必要となる主なツールは

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

の3つです。

PhotoshopやIllustratorは、webサイトの部品を作成するために使用することが多いです。

また最近はFigmaを使用したwebサイトの設計が主流となっているため、Figmaについて理解を深めておくと応用が利きます。

ツールの使い方を覚えるだけでも精一杯になるかもしれませんが、慣れればスムーズに操作できるようになります。

コツを掴むまでが大変ですが、1つずつ覚えていきましょう。

デザインの4原則

2つ目は「デザインの4原則」について学びます。

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

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

プログラミングを学びたい場合でも「このコードを実行するとデザインがどう変化・反応するのか」という視点を得られるため、勉強するのがおすすめ。

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

配色とフォント

3つ目は「配色とフォント」について学びます。

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

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

またフォントは「情報の読みやすさ」や「ブランドイメージと印象の形成」において大切な要素です。

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

良いデザインの模写

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

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

模写する際のコツは

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

などが挙げられます。

ただ注意点として

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

が挙げられます。

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

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

ステップ4では、簡単なコーディングとWordPress（ワードプレス）の知識を勉強しましょう。

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

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

現在、webサイトはスマホやタブレットで見られることが主流なので、パソコン以外のデバイスにも対応できる「レスポンシブデザイン」の基礎も学ぶ必要があります。

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

CMSで代表的なのが「WordPress（ワードプレス）」と呼ばれるもので、当メディア「社会人の勉強メモランダム」もWordPressで構築しています。

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

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

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

ステップ5：最終段階｜最強の武器「ポートフォリオ」の作成

ここまで勉強を進めたら、ステップ5ではwebデザイン勉強の最終段階である「ポートフォリオ」の作成に移ります。

ポートフォリオとは、自身のスキルや実績を証明するための作品集のことです。

ポートフォリオには、大きく次の4項目を掲載します。

• 自己紹介・プロフィール
• スキルセット・使用可能ツール
• 作品紹介
• その他（信頼度を高める項目）

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

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

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

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

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

を掲載します。

実務経験が少ない場合でも、作品数は最低でも3〜5点、できれば10点程度が目標です。

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

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

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

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

また可能であれば、学習記録や模写の過程をSNSや「note」といったブログで発信してみます。あなたの作成したサイトに興味を持った人・企業からの連絡があるかもしれませんよ。

ロードマップ5ステップの後は？

ポートフォリオの作成まで完了しても、webデザインの勉強は終わったわけではありません。

webデザイナーとして転職した先で実践的な知識を学んだり、webデザインの技術は日々進歩しているため常に知識をアップデートしたりする必要があるからです。

特に最近はAIが生成したデザインやコードを修正する流れになっているため、webデザイナーを目指すならAIが生成したものの精査をする目も養う必要があります。

ここまで紹介したロードマップの5ステップはあくまでも基本的なことなので、日々進化し続けるwebデザインの仕事をこなすためにも、引き続き勉強は続けましょう。

自身の研鑽（けんさん）を続ければ顧客や上司の目にも留まり、大きな仕事を任されるようにもなりますよ。

まとめ：段階を踏んで着実に

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

webデザインの勉強は、土台をしっかりと固めたうえで「Webの仕組みと基本スキルを理解」「デザインの基礎の学習」「簡単なコーディングとWordPress」「ポートフォリオの作成」と進めると知識が身につきやすいです。

また5つのステップを完了しても、webデザインの勉強を続けることが大切です。

社会人は仕事と並行して勉強を行うため、webデザインの勉強を始めてもその大変さから挫折してしまうケースが多いです。

覚えることは多いですが、今回紹介したロードマップを参考に、1つひとつ着実に知識を身につけていきましょう。

実績が身につけば、webデザイナーとして転職・キャリアチェンジすることもできますよ。

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