コードなしでWebサイトを作る

🔄 Quick Recall: 前回のレッスンでプロジェクトに合ったプラットフォームの選び方を学んだ。今回は実際にWebサイトを構築する——レイアウトからコピー、公開まで、AIの力を借りながら。

作る前に設計する

Webサイト構築でありがちな失敗は「いきなりデザインを始める」こと。まず答えるべき質問：

目的： 何のためのサイトか？（集客、採用、ブランディング、EC） 対象： 誰に見てほしいか？（年齢層、職業、関心） ページ構成： どんなページが必要か？ CTA： 訪問者にどんな行動をとってほしいか？

以下の情報でWebサイトの構成を提案して：

ビジネス：[業種・内容]
目的：[集客/ブランディング/EC/採用]
ターゲット：[誰向け？]
競合との差別化ポイント：[何が違う？]

提案してほしいこと：
1. 必要なページのリスト（各ページの役割つき）
2. トップページの構成（セクション順）
3. CTAの配置場所と文言案
4. 参考にすべきデザインの方向性

構築の5ステップ

ステップ1：ページ構成を決める

一般的なビジネスサイトの構成：

ステップ2：コンテンツをAIで生成

ページ構成が決まったら、各ページのコピーをAIで生成：

[ビジネス名]のWebサイトの[ページ名]の文章を書いて。

ビジネス内容：[説明]
ターゲット：[誰向け]
トーン：[プロフェッショナル/カジュアル/温かみのある]

含めてほしい要素：
1. キャッチコピー（7語以内）
2. サブヘッド（価値提案を1文で）
3. 本文（3〜4段落）
4. CTA文言

出力は日本語で、敬体（です/ます調）で。

AIの出力は下書き。 必ず自分の言葉で編集すること。AIには知り得ない具体的なエピソード、数字、個性を加える。

ステップ3：デザインを組み立てる

ノーコードビルダーでの実装：

• テンプレートから始める： ゼロからより、近いテンプレートを選んでカスタマイズが速い
• 画像： Unsplash、O-DAN（商用利用可の画像検索）を活用
• 配色： AIに「[業種]に合う配色を3パターン提案して」と聞く
• フォント： 日本語はNoto Sans JP、游ゴシック、源ノ角ゴシックが定番

ステップ4：モバイル最適化

日本のWebトラフィックの約7割はスマートフォンから。チェックポイント：

• テキストがスマホで読みやすい大きさか
• ボタンが指でタップしやすい大きさか
• 画像が画面幅に収まっているか
• 表示速度が遅くないか

ステップ5：公開前の最終チェック

Webサイトの公開前チェックリストを作って。

チェック項目：
1. 全ページのリンクが正しく動作するか
2. お問い合わせフォームのテスト送信
3. スマホ/タブレット/PCでの表示確認
4. Googleアナリティクスの設定
5. OGP（SNSシェア時の画像・タイトル）設定
6. SSL（https）の確認
7. メタディスクリプションとtitleタグ
8. ファビコンの設定

✅ Quick Check: 自分のWebサイト（または作りたいサイト）を思い浮かべよう。「訪問者にとってほしいアクション」は明確？ CTAが不明確なサイトは、どんなに美しくても成果が出ない。

日本のWebサイトで気をつけること

情報量の多さ： 日本のユーザーは詳細な情報を求める傾向がある。海外のミニマルなデザインをそのまま適用すると「情報が足りない」と感じられることも。

信頼性要素： 会社概要、所在地、電話番号の掲載は日本のビジネスサイトでは信頼性の基本。特にBtoB。

フォーム設計： 日本のフォームは項目が多い傾向があるが、コンバージョン率を考えると必要最小限に絞るのが正解。AIで「このフォームの項目を必要最小限にするとどれを残すべき？」と相談すると良い。

Key Takeaways

• デザインの前に戦略——目的、ターゲット、ページ構成、CTAを先に定義する
• AIでコピーの下書きを素早く生成し、自分の声で編集——ゼロからの10倍速い
• テンプレートから始めてカスタマイズが最速の構築方法
• 日本のWebトラフィックの約7割はスマホ——モバイル最適化は必須
• 公開前チェックリスト（リンク、フォーム、モバイル表示、アナリティクス）を必ず実施
• 日本市場では情報の充実度と信頼性要素（会社情報、連絡先）が特に重要

Up Next

レッスン4：アプリと社内ツールを作るでは、ユーザーがログインしてデータを操作するインタラクティブなアプリの構築に進む。