MY WORKSPACE

自分の作成メモ

0/6

VISION NOTE

やりたいこと整理ノートの保存内容はまだありません。

出力できるもの

保存済みの内容をもとに、AI用設計書を作れます。バックアップ用にJSON、共有や確認用にMarkdownを書き出せます。

AI用設計書を作る作成メモページを開く

Learning Article / Lesson 02

Webページ作成は何から学ぶべきか

ツールやデザインの前に、目的、読者、行動、信頼材料の順で学びます。

Story

テンプレート選びで迷子になる前に

テンプレート一覧を眺めていると、どれも良く見えて、どれも違う気がしてきます。これは服を買う前に、行き先を決めていない状態に似ています。面接に行くのか、旅行に行くのかで選ぶ服は変わります。ページも同じで、目的と読者が決まるまでデザイン選びは難しいままです。

Analogy

地図なしで家具を買わない

部屋の広さや用途を測らずに家具を買うと、良い家具でも邪魔になります。ページのブロックやコピー型も、用途を測ってから選びます。

Why Learn This

なぜこれを学ぶ必要があるのか

いきなりデザインやテンプレートから入ると、ページの見た目は作れても、何を伝えるべきかが曖昧になります。最初に学ぶべき順番を知ることで、AIに渡す設計書も一貫します。

01

最初に決めるのはページの目的

売りたいのか、予約を増やしたいのか、信頼感を出したいのか。目的によって、LP、Webサイト、学習、診断のどこから始めるかが変わります。

02

なぜツールやデザインから始めないのか

Web制作では、テンプレート、配色、アニメーションから入りがちです。しかし、読者が何を知りたいのか、何に不安を感じるのか、どの行動へ進めたいのかが決まっていなければ、どれだけ整った画面でも成果につながりにくくなります。

03

商品理解から始めるとAI指示が強くなる

AIに高品質なページを作らせるには、商品名、誰向けか、解決する問題、使った後の変化、選ばれる理由、向いていない人を渡す必要があります。これはコピーライターが最初に行うヒアリングと同じです。

04

次に読者の状態を見る

すでに欲しい人と、まだ必要性に気づいていない人では、必要な説明量が違います。読者の理解度に合わせて、コピー型とブロック構成を選びます。

05

最後にデザインを選ぶ

デザインテーマは、目的と読者心理を支えるものです。清潔感、未来感、安心感、専門性など、伝えたい印象に合わせて選びます。

Before / After

よくある書き方を、伝わる形へ直す

EXAMPLE

順番を間違えた制作

見た目は最後ではなく、設計に従って選ぶものです。

BEFORE

先に高級感のあるデザインを選んでから、何を書くか考える。

AFTER

目的、読者、提供価値を決めてから、それを支えるデザインを選ぶ。

Self Check

読み終わったら確認する

目的を決めてからテンプレートを見ている

読者の検討段階を想定している

不要なセクションを外す判断基準がある

AI Prompt

AIに頼むならこう言う

目的、読者、サービス内容をもとに、最初に入力すべき情報と後回しにしてよい情報を分けてください。

Next Action

次にやること