開発用
テストページ（デザインの基礎）
INDEX
目次
Webデザイン基礎入門 | WEBCOACH
WEB DESIGN BASICS

Webデザイン基礎入門
～ Webの世界とデザインの第一歩 ～

対象：Webデザインをはじめて学ぶ方 ／ 所要時間：約1〜2時間

このレッスンのゴール

Webの基本的な仕組みと、デザインの基礎原則を理解して説明できるようになる

🎬 シナリオ

あなたは友人から「カフェのWebサイトを作ってほしい」と相談を受けました。
「Webサイトってどうやって動いてるの？」と聞かれたとき、あなたは説明できますか？
このチャプターを学べば、自信を持って答えられるようになります。

このチャプターで躓きやすいポイント
  • 「HTMLやCSSを完璧に覚えなきゃ」と焦ってしまう ― ノーコードツールがあるので、仕組みの理解だけでOKです。コードを書く必要はありません。
  • 技術的な詳細にハマってしまう ― サーバーの仕組みやネットワークの詳細は、デザイナーには概要の理解で十分です。
  • 「Webデザイナー＝コーダー」と混同する ― デザインとコーディングは別の仕事。あなたはデザイン側のプロを目指しています。
チャプター 1
Webの仕組みを知ろう

Webデザイナーとして働く前に、まず「Webとは何か」を理解しましょう。

1-1. インターネットとWebの違い

「インターネット」と「Web」は、実は別のものです。普段なんとなく同じ意味で使いがちですが、Webデザイナーとして働くなら、この違いを正しく理解しておきましょう。

インターネットとWebの違いを示す図解
図：灰色のネットワーク全体が「インターネット」。赤く強調された部分が「Web」。メールやチャットもインターネット上にあるが、Webではない。

インターネットは、世界中のコンピューターをつなぐ「通信ネットワーク」です。Web（WWW）は、そのインターネットの上で動く仕組みの1つにすぎません。メールやLINE、オンラインゲームもインターネットを使いますが、「Web」ではありません。

用語 意味 たとえると
インターネット コンピューターをつなぐ通信網 高速道路のネットワーク
Web（WWW） ページを共有する仕組み 道路を走る車の1種類
ブラウザ Webページを表示するアプリ カーナビ（道案内してくれる）
ポイント

メールやLINEもインターネットを使いますが「Web」ではありません。
Webは「ブラウザで見るもの」と覚えましょう。

💡 こんな場面で使える！

クライアントに「WebサイトとSNSの違いは何ですか？」と聞かれたとき、「どちらもインターネットを使いますが、Webサイトはブラウザで見るもの、SNSはアプリで使うサービスです」と明確に答えられます。

✏️ 確認クイズ

「インターネット」と「Web」の関係として正しいものは？

正解！ インターネットは世界中のコンピューターをつなぐ通信インフラで、Webはその上で動く「ブラウザで情報を見る仕組み」です。メール・LINE・オンラインゲームなどもインターネットを使いますが、Webではありません。

1-2. ブラウザとサーバーの関係

Webページが表示されるとき、裏側ではどんなやりとりが起きているのでしょうか？実はとてもシンプルで、「お願い」と「お届け」のやりとりです。

ブラウザとサーバーの通信の仕組みを示す図解
図：左のPC（ブラウザ）が赤い矢印で「リクエスト」を送り、右のサーバーがオレンジの矢印で「レスポンス」を返す。この往復がWebの基本。

あなたがブラウザのアドレスバーにURLを入力すると、ブラウザは「このページを見せてください」というリクエストをサーバーに送ります。サーバーはそのリクエストを受け取ると、ページのデータ（HTML・CSS・画像など）をレスポンスとして返してくれます。

クライアント（ブラウザ）

あなたのPC・スマホのこと。「このページを見せて！」とリクエストを送る側です。Chrome、Safari、Edgeなどのブラウザがこの役割を担います。

サーバー

Webサイトのデータを保管しているコンピューター。リクエストを受けて、ページに必要なデータ（HTML・CSS・画像）を返します。

ポイント

この「リクエスト → レスポンス」のやりとりがWebの基本です。1つのページを表示するために、何十回もこのやりとりが繰り返されています。

💡 こんな場面で使える！

「サイトの表示が遅い」と相談を受けたとき、「画像のサイズが大きすぎて、サーバーからの応答に時間がかかっているかもしれません」と技術的な視点で原因を推測できるようになります。

✏️ 確認クイズ

Webページが表示されるとき、ブラウザはまず何をしますか？

正解！ ブラウザはまずサーバーに「このページのデータをください」というリクエストを送ります。サーバーがHTML・CSS・画像などのデータをレスポンスとして返すことで、はじめてページが表示されます。
さらに詳しく：HTTPとHTTPSの違い

HTTPはデータを「そのまま」やりとりする通信方式です。一方、HTTPSはデータを「暗号化」してやりとりするため、第三者に内容を盗み見されません。

2024年現在、GoogleはHTTPSでないサイトに「安全ではありません」と警告を表示します。クライアントのサイトを作る際は、必ずHTTPS（SSL証明書）を有効にしましょう。

ノーコードツール（STUDIO、Wix）を使えば、SSL設定は自動で有効になるため、特別な操作は不要です。

1-3. URLを読み解く

URLは「インターネット上の住所」です。何気なく使っていますが、その構造を覚えておくと、Webの仕組みへの理解が深まります。 

https :// www . example.com / products / shirt
 [1]       [2]     [3]            [4]
番号 名前 わかりやすく言うと
[1] スキーム 安全な通信を示す暗号化方式（httpsは鍵付きの通信）
[2] サブドメイン サービスの種類を示す名前（wwwは「Webサービス」の意味）
[3] ドメイン サイト固有の「住所」（お店の住所にあたる）
[4] パス サイト内のどのページか（お店の中の棚の位置）
ポイント

ドメインはお店の住所、パスはお店の中の商品棚のようなイメージです。「https」は安全な通信であることを表しているので、サイトを見るときは必ずhttpsになっているか確認しましょう。

1-4. HTMLとCSSの役割

Webページは主に2つの言語で作られています。この2つの役割を理解しておくと、デザイナーとしてエンジニアとのコミュニケーションがスムーズになります。

HTMLとCSSの役割の違いを示す図解
図：左がHTML（灰色の骨組みだけのページ）、右がCSS適用後（色・装飾が加わったページ）。HTMLが構造、CSSが見た目を担当する。

HTML ＝ 構造（骨組み）

ページの内容・テキスト・画像など、「何を載せるか」を定義する言語です。家でいえば柱や壁の「骨組み」にあたります。

CSS ＝ 見た目（内装）

色・フォント・レイアウトなど、「どう見せるか」を定義する言語です。家でいえば壁紙や家具の「コーディネート」にあたります。

HTMLだけでもページは表示できますが、CSSがないと見た目がとてもシンプルになってしまいます。逆にCSSだけではページの中身がないため何も表示されません。この2つが揃って、はじめて美しいWebページが完成します。

ポイント

Webデザイナーの仕事はCSSの設計図を作ることに近いです。「この部分は大きく、この色で、ここに配置して」と、見た目の指示書を作るのがデザイナーの役割です。

💡 こんな場面で使える！

エンジニアに「ここのフォントサイズを大きくして、色を変えたい」と依頼するとき、それが「CSSの変更だけで済む」ことがわかっていると、正確に伝えられます。

✏️ 確認クイズ

HTMLとCSSの役割の違いとして正しいものは？

正解！ HTMLはページの「構造」（テキスト、画像、リンクなど何を載せるか）を定義し、CSSはその「見た目」（色、フォント、レイアウトなどどう見せるか）を定義します。家でいえばHTMLが骨組み、CSSが内装です。

1-5. Webデザイナーの仕事の流れ

Webデザイナーは「見た目をどうするか」を設計する人です。実際のプロジェクトでは、以下のような流れで仕事を進めていきます。

Webデザイナーの仕事の流れを示す図解
図：Webデザインの4ステップ。左から「ヒアリング（吹き出し）→ 設計（鉛筆）→ デザイン（パレット）→ 実装（モニター）」の流れ。
ステップ やること 使うツール
1. ヒアリング クライアントの目的・要望を確認する ミーティング・ヒアリングシート
2. 設計（ワイヤーフレーム） ページ構成・導線をスケッチする 紙・Figma
3. デザイン 見た目を仕上げる（色・フォント・画像） Figma・Photoshop
4. 実装（コーディング） デザインをHTML/CSSで形にする VS Code・STUDIO・Wix
ポイント

デザイナーがコーディングをしない場合も多いです。ノーコードツール（STUDIO、Wix）を使えば、コードを書かずにデザインを直接Webサイトにすることも可能です。

💡 こんな場面で使える！

友人のカフェサイトを作るなら、まず「誰に来てほしい？何を伝えたい？」とヒアリングから始めましょう。いきなりデザインツールを開くのではなく、目的を明確にすることがプロの第一歩です。

🎬 シナリオ

カフェのオーナーが「とにかく全部載せたい！情報量重視で！」と言っています。
でも情報を詰め込みすぎたサイトは読みづらく、お客さんが離れてしまいます。
デザインの原則を知っていれば、「なぜそうすべきか」を根拠を持って提案できます。

このチャプターで躓きやすいポイント
  • 4原則を「全部同時に完璧に」使おうとする ― まずは1つずつ意識するところから。最初は「近接」だけ意識して作ってみましょう。
  • 「センスがないから無理」と思い込む ― デザインはセンスではなくルール。原則を知っていれば、誰でもそれなりのデザインが作れます。
  • 理論はわかるが自分のデザインに活かせない ― Before/Afterを見るだけでなく、必ず自分の制作物で1つずつ試してみてください。
チャプター 2
デザインの基礎原則

良いデザインには法則があります。センスがなくても、原則を守れば伝わるデザインが作れます。

2-1. デザインの4大原則

プロのデザイナーが必ず意識する、4つの基本ルールがあります。この4つを知っているかどうかで、デザインの質が大きく変わります。

デザインの4大原則（近接・整列・反復・コントラスト）を示す図解
図：4大原則の視覚例。左上＝近接（グループ分け）、右上＝整列（左揃え）、左下＝反復（同じ形の繰り返し）、右下＝コントラスト（大小の差）
原則 ひとことで言うと 例
近接 関連するものを近くにまとめる 商品名と価格を近づける
整列 見えない線で揃える テキストを左揃えに統一する
反復 同じスタイルを繰り返す 見出しの色・サイズを統一する
コントラスト 違いをはっきりさせる 見出しと本文のサイズ差をつける
ポイント

この4つを意識するだけで、「なんか変...」が大幅に減ります。デザインに迷ったらまずこの4原則を思い出してください。

✏️ 確認クイズ

デザインの4大原則に含まれないものは？

正解！ デザインの4大原則は「近接」「整列」「反復」「コントラスト」の4つです。「装飾」は4原則に含まれません。むしろ、不要な装飾を減らすことでデザインが洗練されることが多いです。

2-2. 近接 ― 関係性を距離で表す

関係のある要素は近くに、関係のない要素は離すのが基本です。人は「近くにあるもの＝同じグループ」と無意識に判断します。

Before

会社名

所在地：東京都○○区

電話番号：03-XXXX

担当者：田中 太郎
メール：tanaka@example

情報がバラバラで関係性がわからない

After

会社名
所在地：東京都○○区
電話番号：03-XXXX

担当者：田中 太郎
メール：tanaka@example

グループ分けで関係性が明確に

ポイント

近くにあるもの＝同じグループと、人は無意識に判断します。グループ間に余白を設けることで、情報が整理されます。

💡 こんな場面で使える！

カフェのメニューページで、ドリンク名・価格・説明文を近づけてグループにし、別のメニューとは余白で区切る。それだけで「見やすい！」と言ってもらえるデザインになります。

2-3. 整列 ― 見えない線で揃える

すべての要素を「何かに揃える」。感覚で配置しないのがルールです。目に見えない線が通っていることで、デザイン全体に安定感が生まれます。

Before
見出しテキスト
本文が始まります
ボタンはこちら

テキストの揃え方がバラバラ

After
見出しテキスト
本文が始まります
ボタンはこちら

左揃えで統一されて読みやすい

ポイント

左揃え → 日本語の長文に最適
中央揃え → タイトルやボタンに
右揃え → 日付・価格など数字に

💡 こんな場面で使える！

Figmaでデザインするとき、整列ツール（Align）を使って要素を一括で揃える習慣をつけましょう。「感覚で置く」のと「数値で揃える」のでは、仕上がりが全く違います。

2-4. 反復 ― 統一感を生む繰り返し

同じ要素（色・フォント・形）を繰り返すと、統一感が生まれます。「このサイト、なんか洗練されてる」と感じるデザインは、反復が徹底されています。

Before
大見出し
中見出し
小見出し

色もフォントもバラバラ

After
大見出し
中見出し
小見出し

統一されて安心感のあるデザインに

ポイント

最初にスタイルガイド（使う色・フォント・余白のルール）を決めておくと、自然と統一感が保てます。

💡 こんな場面で使える！

カフェサイトを作るなら、「見出しは全部Noto Sans JP 太字＋コーラルカラー」「ボタンは全部角丸8px」とルールを先に決める。ページが増えてもブレない仕上がりになります。

2-5. コントラスト ― 差を明確にする

「なんとなく違う」はNG。はっきりと違いを出すことが大切です。見出しと本文、ボタンと背景の差をしっかりつけることで、ユーザーの目が自然に大事な情報に向かいます。

Before
見出し（16px 細字）
本文テキスト（14px）
ボタン

差が小さくて伝わらない

After
見出し（24px 太字）
本文テキスト（15px）
ボタン

役割が一目でわかる

ポイント

全部目立たせると何も目立たなくなります。メリハリが大事です。「一番見てほしい要素は何か？」を決めてから、サイズ・色・太さの差をつけましょう。

💡 こんな場面で使える！

カフェサイトの「予約ボタン」を目立たせたいなら、背景と反対の色（背景が白ならコーラルやオレンジ）を使って、サイズも大きめに。周りの要素は控えめにすることで、ボタンが際立ちます。

実践事例
「高級感を出したい」ときのコントラストの使い方

高級ブランドのサイトでは、コントラストの使い方に特徴があります。

  • 色数を極限まで減らす ― 黒・白・ゴールドの3色だけ。色が少ないほど高級感が出ます
  • フォントサイズの差を大きくする ― 見出しは極端に大きく（40px+）、本文は控えめに（14-16px）
  • 余白を贅沢に使う ― 情報を詰め込まず、1画面に1メッセージだけ
  • 写真は大きく、テキストは最小限に ― 写真そのものがコントラストの主役

逆に「親しみやすさ」を出したい場合は、色数を増やし、丸みのあるフォントを使い、イラストを多用します。カフェサイトなら後者がおすすめです。

2-6. 色の基礎知識

色は3つの属性で成り立っています。色を「感覚」で選ぶのではなく、この3つを理解した上で選べるようになると、デザインの質がグッと上がります。

色の三属性（色相・彩度・明度）を示す図解
図：色の三属性。上段＝色相（赤→紫の虹グラデーション）、中段＝彩度（鮮やか→くすみ）、下段＝明度（明るい→暗い）
属性 説明 デザインでのコツ
色相（Hue） 色の種類（赤・青・黄...） ブランドイメージに合った色を選ぶ
彩度（Saturation） 鮮やかさの度合い 少し下げると上品に、上げるとポップに
明度（Brightness） 明るさの度合い 背景は明るく、テキストは暗くが基本
ポイント

初心者のコツは「彩度を少し下げる」こと。真っ赤より少しくすんだ赤の方が、上品で使いやすくなります。Webでは画面が光っている分、彩度の高い色はキツく感じやすいです。

2-7. 配色の基本 ― 3色でまとめる

色選びに迷ったら、まず3色以内に絞りましょう。「60:30:10」の比率を覚えておくだけで、バランスの取れた配色ができます。

配色の黄金比率（60:30:10）を示す図解
図：配色の黄金比率。ベースカラー60%（グレー）＋メインカラー30%（コーラル）＋アクセントカラー10%（オレンジ）
役割 比率 使いどころ
ベースカラー 60% 背景・余白（白やライトグレーなど）
メインカラー 30% 見出し・アイコン・ナビゲーション
アクセントカラー 10% ボタン・リンク・注目させたい部分
ベース 60%
メイン 30%
10%
ポイント

まず「白 + グレー + ブランドカラー1色」で作ってみましょう。色が少ないほど、洗練された印象になります。慣れてきたら少しずつ色を追加していきましょう。

💡 こんな場面で使える！

カフェサイトなら「白（ベース60%）＋ブラウン（メイン30%）＋オレンジ（アクセント10%）」の3色だけで、温かみのある統一感が出せます。色を増やしたい気持ちをぐっとこらえるのがプロのコツです。

✏️ 確認クイズ

配色の基本ルールで、最も大きな割合を占めるのは？

正解！ ベースカラー（背景や余白）が60%、メインカラーが30%、アクセントカラーが10%が配色の黄金比率です。ベースカラーを広くとることで、メインカラーやアクセントカラーが映えるデザインになります。
さらに詳しく：配色ツールを使いこなす

Adobe Color（color.adobe.com）を使えば、1色を選ぶだけで相性のいい配色を自動提案してくれます。「類似色」「補色」「トライアド」などのルールから選べます。

Coolors（coolors.co）はスペースキーを押すだけでランダムな配色パレットを生成。気に入った色をロックして残りだけ変えることも可能です。

どちらも無料で使えるので、「自分で色を選ぶ自信がない」というときの心強い味方です。まずはAdobe Colorで「ブランドカラー＋補色」の組み合わせを試してみましょう。

2-8. タイポグラフィ入門

フォント選びも、デザインの印象を大きく左右する要素です。日本語のWebデザインでよく使われるのは、大きく分けて2種類です。

明朝体（セリフ体）

文字に「飾り」がある書体

  • 上品・伝統的・高級感のある印象
  • 雑誌・ブランドサイト・和の雰囲気に

ゴシック体（サンセリフ体）

飾りのないシンプルな書体

  • モダン・清潔感・読みやすい印象
  • Web本文に最適（Noto Sans JPなど）
ポイント

まずはゴシック体1種類に統一するのがおすすめです。フォントは2種類まで。それ以上は散らかった印象になります。

💡 こんな場面で使える！

カフェサイトで「おしゃれな雰囲気を出したい」なら、見出しだけ明朝体、本文はゴシック体。この「2種類ルール」を守るだけで、プロっぽさが出せます。

実践事例
フォント選びで「印象」がガラッと変わる

同じ「OPEN」という文字でも、フォントで印象は全く違います。

  • 和食レストラン → 明朝体で「上品さ・伝統」を表現
  • IT企業のサイト → 細身のゴシック体で「先進的・クリーン」な印象
  • 子ども向け教室 → 丸ゴシック体で「やわらかさ・親しみ」を演出
  • カフェ → 手書き風フォント（見出しのみ）+ゴシック体（本文）で「温かみ＋読みやすさ」

フリーランスとしてクライアントに提案するとき、「なぜこのフォントを選んだか」を説明できると、プロとしての信頼感がグッと上がります。

さらに詳しく：無料で使えるWebフォント

Google Fonts（fonts.google.com）は無料で商用利用可能なWebフォントの宝庫です。日本語フォントも充実しています。

おすすめの日本語フォント：

・Noto Sans JP ― 万能型ゴシック体。本文に最適
・Zen Kaku Gothic New ― やや丸みがあり、親しみやすい
・Noto Serif JP ― 上品な明朝体。見出しやブランドサイトに

まずはNoto Sans JP 1つで始めて、慣れてきたら見出しだけ別フォントに変える、という進め方がおすすめです。

2-9. 余白の大切さ

初心者にありがちなミスは「余白が少なすぎる」ことです。「もったいない」と感じて詰め込みたくなりますが、余白はデザインの重要な要素です。

Before
タイトルテキストが詰まっていてとても読みにくい状態です。余白がないと窮屈に感じてしまいます。行間も狭くて目が疲れます。改行もなく延々と続くテキスト。

詰め込みすぎて窮屈

After
タイトル
余白があると読みやすく、
内容がスッと頭に入ります。

ゆとりがあって読みやすい

ポイント

余白は「何もない空間」ではなく、デザインの一部です。
迷ったら余白を増やす。これがプロのコツです。余白を「ホワイトスペース」と呼び、意図的に設計するものだということを覚えておきましょう。

💡 こんな場面で使える！

カフェオーナーに「この辺に何か入れたい」と言われても、「ここは余白として残すことで、隣のメニュー写真がより引き立ちます」と説得できます。余白に意味を持たせるのがプロのデザイナーです。

✏️ 確認クイズ

余白について正しい考え方は？

正解！ 余白（ホワイトスペース）はデザインの重要な要素の1つです。余白があることで情報が整理され、読みやすくなり、視覚的な「呼吸」が生まれます。迷ったら余白を増やす、がプロのコツです。

2-10. レイアウトの基本 ― グリッドで揃える

Webではグリッド（格子）に沿って要素を配置します。「なんとなく」で置くのではなく、見えない格子線に沿って配置することで、整ったレイアウトになります。

代表的なレイアウトパターンを紹介します。

メイン + サイドバー

ブログ・ニュースサイト向き

3カラム均等

ECサイト・ポートフォリオ向き

ポイント

「なんとなく」で置かない。何かに揃える。これがレイアウトの鉄則です。Figmaやデザインツールにはグリッド表示機能があるので、最初から使う癖をつけましょう。

注意

スマホでは画面幅が狭いので、2カラム→1カラムに変化させる「レスポンシブデザイン」が必要です。レイアウトは「PC版」と「スマホ版」の両方を考えて設計しましょう。

まとめ

Webの仕組み（チャプター1）

  • インターネットはインフラ、Webはその上の仕組み
  • ブラウザとサーバーの「リクエスト→レスポンス」が基本
  • HTML ＝ 構造、CSS ＝ 見た目
  • デザイナーの仕事は「ヒアリング→設計→デザイン→実装」

デザイン4原則（チャプター2）

  • 近接 ― 関連するものをまとめる
  • 整列 ― 見えない線で揃える
  • 反復 ― 同じスタイルを繰り返す
  • コントラスト ― 差をはっきりつける
  • 色 — 3色以内、彩度を少し下げるとプロっぽく
  • 文字 — ゴシック体1〜2種類まで
  • 余白 — 迷ったら増やす。余白はデザインの一部
  • 配置 — グリッドに揃える。感覚で置かない
理解度チェック（タップで解説を表示）
インターネットとWebの違いを自分の言葉で説明できる
インターネットは世界中のコンピューターをつなぐ「通信インフラ」で、Webはその上で動くサービスの1つです。メールやLINEもインターネットを使いますが、Webではありません。「Web＝ブラウザで見るもの」と覚えておけばOKです。
リクエストとレスポンスの流れを理解している
ブラウザが「このページを見せて」とサーバーにリクエストを送り、サーバーがHTML・CSS・画像などのデータをレスポンスとして返します。この繰り返しでWebページが表示されます。1ページ表示するだけで何十回ものやりとりが行われています。
URLの4つの構成要素がわかる
スキーム（https＝安全な通信）、サブドメイン（www＝Webサービス）、ドメイン（サイトの住所）、パス（サイト内のページ位置）の4つです。クライアントに「ドメインを取りましょう」と言えるようになります。
HTMLとCSSの役割の違いを説明できる
HTML＝構造（何を載せるか：テキスト、画像、リンク）、CSS＝見た目（どう見せるか：色、フォント、レイアウト）です。家にたとえると、HTMLが骨組み、CSSが内装。デザイナーの仕事は「CSSの設計図を作ること」に近いです。
デザインの4大原則（近接・整列・反復・コントラスト）を覚えた
近接＝関連するものを近くにまとめる。整列＝見えない線で揃える。反復＝同じスタイルを繰り返す。コントラスト＝違いをはっきりさせる。この4つを意識するだけで「なんか変...」が大幅に減ります。
配色の基本ルール（60:30:10）を理解している
ベースカラー60%（背景・余白）、メインカラー30%（見出し・ナビ）、アクセントカラー10%（ボタン・リンク）の比率です。まずは「白＋グレー＋ブランドカラー1色」の3色で始めましょう。
タイポグラフィの基本（ゴシック体 vs 明朝体）を理解している
ゴシック体＝飾りなし、モダン、読みやすい（Web本文に最適）。明朝体＝飾りあり、上品、高級感。フォントは2種類までに絞り、まずはゴシック体1種類（Noto Sans JPなど）で統一するのがおすすめです。
余白とグリッドレイアウトの重要性がわかった
余白は「何もない空間」ではなくデザインの一部です。迷ったら余白を増やす。レイアウトは「なんとなく」ではなくグリッド（格子）に沿って配置する。Figmaのグリッド表示機能を使い、数値で揃える習慣をつけましょう。

次のステップ

この教材を終えたら、次はここへ進みましょう。

1
お気に入りのサイトを3つ見つけて観察する

4原則（近接・整列・反復・コントラスト）がどう使われているか分析してみましょう。

2
Figmaでカフェのトップページをデザインしてみる

今回学んだ原則をすべて意識して、1ページ作ってみましょう。

3
STUDIOやWixで実際に公開する

ノーコードツールを使えば、コードを書かずにWebサイトを形にできます。

4
友人や家族にサイトを見せてフィードバックをもらう

第三者の目で見てもらうことで、改善点が見つかります。

ポイント

まず1ページ、自分でデザインしてみましょう。完成度より完成させることが何より大切です。完璧を求めず、まず手を動かすことがプロへの第一歩です。