「いい感じのサイトを作ってください」
これだけでもCodexは何かを作れます。けれど、返ってくるのはCodexが想像した“いい感じ”です。落ち着いた企業サイトを考えているのに、派手なグラデーションのページができても不思議ではありません。
Webサイト作りで最初に決めたいのは、色でも技術でもなく、「誰に、何を伝えるか」です。そこが言葉になっていれば、コード経験が少なくてもCodexと話を合わせやすくなります。
この記事の要点
- 最初に、読者とサイトの役割を一文で決める
- ページを一気に増やさず、土台から順番に確かめる
- 公開ボタンを押す前に、文章と表示を人の目で読み直す
1. まず、サイトの役割を一文にする
「AIに興味はあるけれど、何から試せばいいかわからない人のための入門メディア」。このように、読者と役割を一文にします。
続けて、必要なページ、記事の更新方法、公開先を書き出します。立派な企画書は要りません。迷ったときに戻れる短いメモがあれば十分です。
このサイトの場合は、白を基調とした日本語メディア、5つのカテゴリ、MDXで更新できる記事、Cloudflare Pagesでの公開、という条件から始めました。先に枠を決めたことで、途中の判断がかなり楽になります。実際に公開するまでの記録は、Codexでアフィリエイトサイトを作ってみた｜公開までの全手順にまとめました。
2. 技術は、更新する人に合わせて選ぶ
新しい技術を使うこと自体は、目的ではありません。記事をテキストファイルで追加したい、表示を軽くしたい、複雑な管理画面は要らない。そう考えるなら、AstroとMarkdownやMDXの組み合わせは有力です。
一方、複数人がブラウザから毎日更新するサイトなら、管理画面のある仕組みが合うかもしれません。「何で作るか」は、「公開後に誰がどう触るか」から逆算します。
このサイトではAstroを選びましたが、依頼者が管理画面から更新する案件ならWordPressも候補に入ります。WordPressと静的サイトを選ぶ基準に、費用と保守を含めた違いをまとめました。
3. 最初の依頼で、好みより条件を伝える
「おしゃれに」だけでは、人によって意味が変わります。白を基調にする、ビジネスメディアのように見せる、スマートフォンで本文を読みやすくする、過剰な動きは付けない。観察できる条件に言い換えるのがコツです。
初心者向けの日本語メディアをAstroで作ります。
白を基調にし、落ち着いたビジネスメディアの雰囲気にしてください。
まずトップ、記事一覧、記事詳細の3種類を実装します。
記事はMDXで管理します。スマートフォン表示とアクセシビリティを確認し、
最後にビルド結果を報告してください。既存のプロジェクトを直す場合は、触ってよい場所と残したい機能も伝えます。「全面的に作り直す」のか「文章だけ直す」のかで、作業はまったく変わるからです。
4. 一度に完成させず、層を重ねる
おすすめは、土台、代表ページ、共通部品、残りのページ、公開設定の順です。まずトップページだけを見れば、文字の大きさや余白、色の方向性を早い段階で直せます。
全部できた後に「雰囲気が違う」と気づくと、直す範囲も大きくなります。小さく作って、小さく注文を付ける。その繰り返しのほうが、結果的に早く進みます。
5. 観客ではなく、編集者として確認する
画面がきれいに見えるだけでは、公開準備は終わりません。読者になったつもりで、スマートフォンから記事を一つ読み、リンクを実際に押してみます。
- スマートフォンで文字が小さすぎないか
- メニューと内部リンクが正しく移動するか
- 見出しの順序が自然か
- 画像に代替テキストがあるか
- 下書き記事が公開対象から除外されているか
文章も同じです。「わかりやすく解説します」が何度も続いていないか。具体例のない正論ばかりになっていないか。AIが作った下書きは、声に出して読むと不自然なリズムに気づきやすくなります。
6. ビルド成功の先まで確かめる
公開用のビルドが通っても、仕事はあと少し残っています。公開URLを開き、主要ページが表示されるか、canonicalが仮のURLになっていないか、サイトマップやRSSが読めるかを確認します。
問い合わせ先、プライバシーポリシー、広告表記など、コードだけでは決められない情報もあります。空欄を見つけたら、勝手に埋めず、保留だとわかる表示にしておきます。
次の一歩
最初の一作なら、1ページで十分です。自己紹介でも、好きな道具をまとめたページでも構いません。「自分で説明できる小さな完成品」を公開し、Gitに変更履歴を残してみてください。
コードの基礎から始めたい人は、Web制作は独学できる？AIを先生に変える学び方もあわせてどうぞ。