デザインが苦手でも、Webサイトは作れます。センスで勝負せず、「誰に、何を、どの順番で見せるか」へ分解すればいいからです。
私はデザインが得意ではありません。
「きれいなサイトにしたい」「もっと魅力的にしたい」と考えても、手が止まります。そもそも、きれいとは何か。魅力的とは何か。その答えが曖昧なままでは、色や写真を変えても良くなったのか判断できません。
そこで、感覚だけで考えるのをやめました。見る人、情報、順番、余白、文字、写真、ボタン。Webデザインを小さな判断に分けて考えることにしました。
この方法なら、デザインが苦手でも迷いを減らせます。考え方をMarkdownへ残せば、AIやCodexにも同じ判断基準を渡せます。
デザインは才能ではなく、小さな判断に分けられる
完成したWebページを一枚の絵として見ると、何から直せばいいのか分かりません。
しかし、ページは部品の集まりです。
- 誰に見せるか
- 最初に何を伝えるか
- どの写真を使うか
- 文字をどの大きさにするか
- どこに余白を取るか
- どのボタンを押してもらうか
- 何を上に置き、何を下に置くか
一つずつなら考えられます。良し悪しも比べられます。
デザインを分解するとは、見た目を細かくすることではありません。曖昧な感想を、答えられる質問へ変えることです。
良いデザインかどうかは、見る人が決める
デザインは作り手の自己満足のためではありません。見る人が迷わず使うためにあります。
作り手が美しいと思っていても、見た人が内容を理解できなければ良いデザインとは呼べません。文字が読めない。料金が見つからない。申し込み方が分からない。これでは、装飾が整っていても役割を果たしていません。
見る人にとって大切なのは、次のようなことです。
- 内容をすぐ理解できる
- 不安が減る
- 必要な情報を見つけられる
- 次に何をすればいいか分かる
だから、最初に決めるのは好きな色ではありません。「誰が、何を知るために見るページなのか」です。
見ない人ではなく、見てくれる人へ届ける
誰にでも見てもらえるページを作ろうとすると、情報が増えます。言葉もぼやけます。
興味がない人は、きれいに作っても見ません。見ない人を無理に引き止めるより、必要としている人へ分かりやすく伝えるほうが自然です。
たとえば、同じ宿でも「小さな子どもと初めて泊まる家族」と「静かに一人で過ごしたい人」では、最初に見たい写真が違います。知りたい設備も、不安も違います。
誰のためかが決まると、見せる写真、文章、情報量、順番が決まります。何を載せないかも決めやすくなります。
「すべての人」ではなく、今このページを見る一人を思い浮かべる。そこからデザインが始まります。
Webページは上から順番に重要度を決める
Webページは、基本的に上から下へ見られます。最上部は多くの人の目に入ります。下へ進むほど、読む人は少なくなります。
だから、ページ全体を一度に飾るのではなく、上から順番に役割を決めます。
- ファーストビュー：何のページかを一目で伝える。主役の写真、短い言葉、最も大切な行動を置く。
- 何のページか：商品、サービス、記事のテーマを言い切る。曖昧なキャッチコピーだけにしない。
- 誰のためか：自分に関係があると感じられる悩みや状況を示す。
- 興味を持つ理由：得られる変化、強み、続きを見る理由を見せる。
- 詳細や比較：機能、料金、事例、選び方など、判断に必要な材料を並べる。
- 不安の解消：よくある質問、保証、運営者、利用の流れを示す。
- 最後の行動：問い合わせ、購入、予約、次の記事など、次の一歩を一つ示す。
すべてを最上部へ置く必要はありません。しかし、最も伝えたいことを最下部だけに置くのは危険です。
ページ上部で「自分向けだ」と分かり、読み進めるほど疑問が減る。この順番なら、デザインが内容を助けます。
「きれい」は意図がそろい、違和感が少ない状態
きれいなデザインは、装飾が多いデザインではありません。
余白の幅が場所ごとに違う。見出しの大きさに規則がない。似た役割のボタンが別の形をしている。こうした小さなズレが重なると、ページは落ち着かなく見えます。
反対に、次の要素がそろうと画面は整います。
- 余白に一貫性がある
- 文字サイズに規則がある
- 色数が整理されている
- 写真の明るさや雰囲気がそろっている
- ボタンやカードの形が統一されている
- 情報の優先順位が明確になっている
- 役割のない装飾が少ない
きれいとは、意図がそろっていて、違和感が少ない状態です。
大切なのは、全部を同じにすることではありません。同じ役割には同じ見た目を与え、違う役割には必要な差をつけることです。
「魅力的」は、見る人が続きを知りたくなる状態
魅力的とは、万人が美しいと感じることではありません。
見る人が「自分に関係がある」「続きを見たい」「もっと知りたい」「行ってみたい」「使ってみたい」と感じることです。
高級感のある黒い画面が、子ども向け施設にも合うとは限りません。明るく楽しい画面が、静かな相談サービスに合うとも限りません。
魅力は、デザインだけで決まりません。見る人と、見せる内容の関係で決まります。
「この色は魅力的か」ではなく、「この人がこの情報を見たとき、次を知りたくなるか」と考える。すると、曖昧だった魅力を検討できます。
良いサイトは「なんとなく良い」で終わらせない
デザインを学ぶとき、良いサイトを見ることは役に立ちます。ただし、眺めて終わると自分のサイトへ持ち帰れません。
私は次の質問に分けて見ます。
- 誰に向けているか
- 最初に何を見せているか
- 写真は何を伝えているか
- 見出しは何を約束しているか
- 余白はどこで広く、どこで狭いか
- どこで信頼を作っているか
- どこで行動を促しているか
色をそのまままねるより、判断の理由を持ち帰るほうが応用できます。
デザインは才能だけで決まるものではありません。観察し、分解し、試し、見る人の反応を確かめる。その繰り返しで学べます。
AIは実装を助けるが、目的までは決めない
AIやCodexは、デザインが苦手な人にとって頼れる補助役です。
- レイアウト案を出す
- 配色の候補を作る
- ボタンやカードを実装する
- デザインルールをコードへ反映する
- 複数案を短時間で比べる
ここまではAIが速く進めてくれます。
しかし、「誰のために作るか」「何を最優先にするか」「何を捨てるか」「何を伝えたいか」は、人間が決める仕事です。
目的が曖昧なまま「魅力的なサイトを作って」と頼めば、AIは一般的な答えを返します。見た目は整っていても、自分の事業や読者に合うとは限りません。
人間が判断を言葉にする。AIが案を出し、実装する。できた画面を人間が見て、また判断を更新する。この役割分担なら、AIに丸投げせず速さを生かせます。
5つのMarkdownでAIの判断をそろえる
毎回チャットだけで説明すると、判断がぶれます。前に決めたことを忘れたり、依頼するたびに表現が変わったりします。
そこで、変えてはいけない考え方をMarkdownファイルに残します。Markdownは単なるAIへの指示書ではありません。人間の考え方を固定し、チームとAIが読み返せる設計書です。
business.md：この事業は何か
- 何を提供するか
- 何で利益を生むか
- 最終的に何を目指すか
事業の土台です。ここが曖昧だと、サイトが何を売る場所なのか分からなくなります。
customer.md：誰のためか
- 誰が見るか
- 何に困っているか
- 何を知りたいか
- 何に不安を感じるか
写真、言葉、情報量を決める基準です。
positioning.md：なぜ選ばれるか
- 競合との違い
- 自分たちの強み
- 提供する価値
- 約束する体験
- 何では勝負しないか
目立たせる内容と、捨てる内容を決めやすくします。
conversion.md：何をしてほしいか
- 最後に取ってほしい行動
- CTAの言葉と場所
- ページ内の導線
- 確認する数字
- ページごとの役割
ページを見たあと、どこへ進んでもらうかを決めます。
design.md：どう伝えるか
- 情報の順番
- ファーストビュー
- レイアウト
- 文字と色
- 写真と余白
- ボタンやカード
- やってはいけない表現
ほかの4ファイルで決めた内容を、画面へ落とすためのルールです。
Markdownは質問に答えるだけで作れる
最初から立派な設計書を書く必要はありません。まずは質問に短く答えます。分からない項目には「未定」と書いても構いません。
使ってみて違ったら直します。設計書は完成品ではなく、運用しながら育てるものです。
以下は、そのままコピーして使える簡易テンプレートです。
business.mdの簡易テンプレート
# Business
## この事業は何か
-
## 誰に何を提供するか
-
## 何で利益を出すか
-
## 最終的に何を目指すか
- customer.mdの簡易テンプレート
# Customer
## 誰が見るか
-
## 何に困っているか
-
## 何を知りたいか
-
## 何が不安か
-
## 何があれば安心するか
- positioning.mdの簡易テンプレート
# Positioning
## 他との違い
-
## 選ばれる理由
-
## 約束できること
-
## 勝負しないこと
- conversion.mdの簡易テンプレート
# Conversion
## 見た人にしてほしいこと
-
## 行動前に理解してほしいこと
-
## CTAを置く場所
-
## 確認する数字
- design.mdの簡易テンプレート
# Design
## 誰に見せるか
-
## 最初に伝えること
-
## 読んでほしい順番
1.
2.
3.
## 目立たせるもの
-
## 目立たせないもの
-
## 雰囲気
-
## 文字・色・写真・余白のルール
-
## 禁止すること
- 5つを一日で完成させる必要はありません。まず customer.md に一人の読者を書き、conversion.md に一つの行動を書く。それだけでも、AIへ渡す指示は具体的になります。
センスで勝負せず、人間が設計してAIに助けてもらう
私はデザインが得意ではありません。だから、センスだけで勝負しません。
誰のためかを決めます。上から順番に情報を分けます。「きれい」「魅力的」という曖昧な言葉も、余白、文字、写真、順番、見る人の気持ちへ分解します。
その考え方をMarkdownへ残し、AIに渡します。
AIにデザインを任せきるのではありません。人間が目的と判断基準を設計し、AIに案と実装を助けてもらう。その形なら、デザインが苦手でもWebサイトを少しずつ良くできます。
