【HSP・INFP向け】Webデザイナーになる方法｜未経験からの始め方と学習ステップ

このブログでは、日常生活で便利だと思ったアイテムや、子育て・暮らしに役立つ情報を実体験を交えて紹介しています。
また、犬グッズや書籍など、実際に使って良かったものや、記事の内容に関連するアイテムもご紹介しています。

INFP/ママ

こんにちは！
HSP寄りのINFPママです🌷

今回は、**HSPさんやINFPさんに向いている職業のひとつ「Webデザイナー」**についてピックアップしてみました！

「なんとなく気になるけど、どうやってなるの？」という方に向けて、未経験から目指すためのステップをやさしくまとめています。📝

🌿 HSP・INFPにWebデザイナーが向いている理由
💻 Webデザイナーになるには？
🌱 Webデザイナーになるためのステップ（未経験からOK）
📘 おすすめ学習リソース
1. 🔸無料〜安価で独学
2. 🔸本格的に学びたい方向けスクール
🎯 HSP・INFPにとってのWebデザイナーの魅力
⏰ 勉強時間の目安
🧘‍♀️ HSP・INFP向けアドバイス：「量」より「質」と「継続」
📅【1ヶ月で基礎を固める】Webデザイン独学計画表（30日間）
🌼 まとめ

🌿 HSP・INFPにWebデザイナーが向いている理由

HSP（Highly Sensitive Person）やINFP（内向的・直感型・感情型・柔軟型）の人は、
繊細で共感力が高く、内面的な価値観を大切にする傾向があります。

そのため、以下のような仕事が向いているとされています👇

自分のペースで集中できる
誰かの役に立てる
意味や美しさを感じられる

Webデザインはまさに、こうした特性を活かしやすい職業です✨

💻 Webデザイナーになるには？

Webデザイナーになるために、学歴や資格は必須ではありません。
独学でも十分に目指せる職種ですが、スキルの習得と実績作りが大切です。

🌱 Webデザイナーになるためのステップ（未経験からOK）

🔹STEP 1：Webデザインの基礎を学ぶ

スキル	内容
デザインの基礎	配色・レイアウト・タイポグラフィなど
Adobe XD / Figma	サイト設計・UIデザイン
Photoshop / Illustrator	バナー制作・ロゴ・画像編集
HTML / CSS	コーディングの基本
JavaScript（簡単でOK）	動きをつける基礎

学び方：

独学（YouTube・本・ブログ）
オンラインスクール（後述）
通学スクール（費用高め）

🔹STEP 2：模写・課題でポートフォリオを作る

就職や案件獲得時にスキルの証明になる
他サイトを見ながら模写（非公開）
架空のサイトを自作（例：カフェサイトなど）

🔹STEP 3：小さな仕事で経験を積む

SNSやクラウドソーシング（ココナラ・クラウドワークスなど）
最初は安価でも「実務経験」として貴重
知人のサイト制作を請け負うのも◎

🔹STEP 4：就職 or フリーランスへ

就職： 未経験OK求人も増加中（Webデザイナー・UI/UXデザイナーなど）
フリーランス： SNS発信や紹介で案件獲得
（例）バナー¥3,000〜、LP¥30,000〜¥100,000以上

📘 おすすめ学習リソース

🔸無料〜安価で独学

ドットインストール
Progate
YouTube（「Webデザイン初心者」検索）
書籍：『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』

🔸本格的に学びたい方向けスクール

スクール名	特徴
デジタルハリウッド STUDIO	未経験から就職・副業サポートまで対応
SHElikes	女性向け。感性を活かした学習が得意
TechAcademy	コーディング＋デザインを両方学べる
CodeCamp	マンツーマンでしっかり学べる

※高額契約は避け、無料体験を受けてから判断するのが安心です。

🎯 HSP・INFPにとってのWebデザイナーの魅力

静かに集中して働ける（在宅OK）
クライアントの想いに共感し、価値を形にできる
作品で自分を表現できる
感性や美意識がそのまま強みに✨

⏰ 勉強時間の目安

目標	1日の学習時間	期間（目安）	内容
趣味・副業（月1〜2万円）	1〜2時間	3〜4ヶ月	バナーやLP制作
転職を目指す	2〜4時間	約6ヶ月	ポートフォリオ必須
フリーランス独立	3〜5時間	6〜12ヶ月	営業・案件経験も必要

🧘‍♀️ HSP・INFP向けアドバイス：「量」より「質」と「継続」

あなたのように感受性が高いタイプは、
集中力が高いけど、疲れやすい傾向があります。

✅ 無理なく続けるコツ

長時間よりも「短く毎日」
疲れた日は動画視聴や復習だけでもOK
学習ログを残すとモチベ維持に◎
学ぶ内容を決めてから始める（迷子防止）

📅【1ヶ月で基礎を固める】Webデザイン独学計画表（30日間）

目標：基礎スキルを学び、1ページサイトを自作できるようにする
学習時間：1日1.5〜3時間

🔰【Week 1】Webデザインの全体像 & HTML/CSS入門

日	内容	学習素材例
1日目	Webデザインとは？職種・必要スキルを把握	YouTube、ブログ記事
2日目	HTMLの基本構造を学ぶ	Progate / ドットインストール
3日目	HTMLのタグ（見出し・段落・画像・リンク）を理解	模写練習開始
4日目	CSSの基本（色・文字・背景）	Progate CSS編
5日目	CSSのレイアウト（box・margin・padding）	ドットインストール
6日目	CSSでの装飾練習（ボタン、枠など）	模写練習（静的ページ）
7日目	ミニ課題：自己紹介ページを作ってみる	自作ページ作成

🎨【Week 2】デザインの基礎 & ツールの使い方

日	内容	ツール/教材
8日目	デザインの4原則（近接・整列・反復・コントラスト）	YouTube：ノンデザイナー向け解説
9日目	色彩・フォント・配色の基本	Adobe Color、Google Fonts
10日目	Figmaの基本操作を学ぶ	Figmaの無料チュートリアル
11日目	ワイヤーフレームの作り方	架空のサイト構成を考える
12日目	バナーの構造と要素を知る	Canva / Figmaで模写練習
13日目	バナー模写（1つ）	おしゃれなバナーを1枚真似して作成
14日目	ミニ課題：オリジナルバナー1枚作成	配色・フォントにこだわる

💻【Week 3】サイト設計＆コーディング演習

日	内容	学習素材
15日目	Figmaで簡単なLP（1ページ）を設計	架空のカフェ・美容室など
16日目	HTMLで構造を作る	セクション・見出し・画像
17日目	CSSでデザインを整える（全体）	配色・フォント・ボタン装飾など
18日目	ヘッダー・フッターを作る	レスポンシブ対応意識し始める
19日目	レイアウト調整（Flexbox）	CSS Flexbox Froggyゲームなど
20日目	レスポンシブ（スマホ対応）を学ぶ	メディアクエリ基礎
21日目	完成！→ ミニLPとして公開用に調整	GitHub Pagesなどで公開も可

📁【Week 4】ポートフォリオ準備＆復習

日	内容	アウトプット重視
22日目	今月の学習を復習（苦手なところの洗い出し）	リスト化して対策
23日目	ポートフォリオサイトの構想を練る	自己紹介＋作品一覧ページ
24〜26日目	ポートフォリオサイト制作	HTML/CSS＋Figmaデザイン
27日目	作品ページを追加（バナーやLP）	今まで作ったものを掲載
28日目	スマホ対応、細かいデザイン修正	レスポンシブ最終調整
29日目	GitHub PagesやNetlifyで公開	実績として使えるようにする
30日目	完了！SNSや応募先に使える形にする	X / noteで発信してもOK

📌 使用ツール（無料）

カテゴリ	ツール名	用途
デザイン	Figma / Canva	バナー・UI設計など
コーディング	VS Code	HTML/CSS編集
学習	Progate / ドットインストール / YouTube	入門教材
公開	GitHub Pages / Netlify	Web上に作品を見せる