1ページずつ作る方が、結果的に速いです。
一気にたくさん作ると、あとで全部が似たり、直しが増えたりしやすいです。 1ページずつ確認しながら進む方が、サイト全体がずっと整いやすくなります。
「詳細ページ」とは何ですか？
ここでいう詳細ページとは、セクションの中にある個別ページのことです。 まだセクションの index ページやトップページではありません。
たとえば
/ja/tools/putty-basics.html
/ja/tools/winscp-basics.html
/ja/tools/vi-basics.html
/ja/training/step-01-build-locally-first.html
/ja/training/step-02-define-the-site.html
/ja/training/step-03-decide-filenames.htmlこういうページが「詳細ページ」です。 1つのテーマを1ページでしっかり説明する役割を持ちます。
先に詳細ページを作ると、あとでセクション全体が自然にまとまります。
セクション index ページは、詳細ページがあるからこそ、ちゃんと案内役になれます。
なぜ詳細ページを先に作るのですか？
このサイトの流れでは、詳細ページを先に作ります。 理由はとても実務的です。
1. 1ページ1テーマで作りやすい
詳細ページは話題が絞られているので、内容を組み立てやすいです。
2. セクション index があとで作りやすい
実際のページがあると、index ページはそれを案内するだけで済みます。
3. トップページも強くなる
後でトップページを作るとき、紹介すべき中身がもう揃っています。
4. 内容が空洞になりにくい
先に紹介ページだけ作るより、実際の内容が先にある方がサイトに厚みが出ます。
ここまでで、もう持っているもの
ここへ来るまでに、あなたはかなり大事な準備を終えています。
- サイト定義
- ファイル名一覧
- 画像の種類整理
- 画像URL一覧
site.csssite.js
つまり、今のあなたは「いきなりページを書く」のではなく、 ちゃんと土台のある状態でページを作る段階にいます。
ファイル名一覧にないページを思いつきで増やしすぎない方が安全です。
追加したいときは、まずファイルツリーを見直してからの方が整理しやすいです。
詳細ページの作り方の基本
このサイトでおすすめしている詳細ページの作り方は、次の順番です。
作るファイル名をはっきり指定する
例: /ja/tools/putty-basics.html
そのページの役割をはっきりさせる
何を教えるページか、誰向けかを決めます。
使う画像URLを渡す
必要な画像だけを選び、具体的に指定します。
共通のCSSとJSを使う前提にする
できるだけページ内で style を増やしすぎないようにします。
1ページずつ確認する
作ったらすぐ見て、必要なら直します。
ChatGPT への頼み方の例
たとえば、日本語の PuTTY 基本ページを作るなら:
/ja/tools/putty-basics.html を作ってください。
条件:
- 日本語
- 初心者向け
- やさしい説明
- 実務で役立つ内容
- /site.css と /site.js を使う
- ページ内に長い style を書きすぎない
使う画像:
https://website.co.jp/images/website-putty-terminal.jpg
https://website.co.jp/images/webbie-pointing.jpgこう頼むと、かなりぶれにくくなります。
詳細ページを1ページずつ作る利点
一気に10ページ作るより、1ページずつ作る方が次の点で強いです。
- 内容が重複しにくい
- 画像の役割がぶれにくい
- トーンを調整しながら進められる
- すぐローカル確認できる
- 良い型ができたら次ページに使い回せる
「遅い」のではなく、結果として直しが少なくなるので効率が良いのです。
まず良い1ページを作ると、次のページが楽になります。
最初の数ページで「型」ができると、その後のページがかなり安定します。
よい詳細ページとは何ですか？
| 要素 | 意味 |
|---|---|
| テーマがはっきりしている | 1ページ1テーマでぶれない |
| 読みやすい | 見出しや段落が整理されている |
| 役に立つ | 読む人に実際の助けがある |
| 見た目が揃っている | 共通CSSで全体と一体感がある |
| 次へつながる | 次のページや関連ページへ自然に進める |
このステップで大事なルール
このサイトの流れでは、次のルールがかなり重要です。
- 詳細ページを先に作る
- セクション index はあとで作る
- トップページはさらにあとで作る
これは変な順番に見えるかもしれませんが、実際にはとても強いです。
なぜなら、あとで案内ページを作るときに「本当にある中身」を紹介できるからです。
何ページくらいから始めればよいですか？
最初は少数ページで十分です。
たとえば:
/ja/tools/putty-basics.html
/ja/tools/winscp-basics.html
/ja/tools/vi-basics.htmlあるいは:
/ja/training/step-01-build-locally-first.html
/ja/training/step-02-define-the-site.html
/ja/training/step-03-decide-filenames.htmlのように、流れの見えるまとまりから作るとよいです。
作ったあとに何を見るべきですか？
各詳細ページを作ったら、次のことを確認します。
- ファイル名は合っているか
- ページの役割に合っているか
- 画像は正しいか
- 見出しはわかりやすいか
- 共通の見た目に乗っているか
- 次の導線があるか
この確認を1ページずつやることで、あとで全体がかなり整います。
数だけ増やさない方が強いです。
ページ数が多いことより、1ページずつちゃんと役割を持っていることの方がずっと大事です。
よくある失敗
1. いきなり大量のページを作る
似たようなページが増えやすく、あとで整理が大変になります。
2. ファイル名を指定せずに作らせる
どこに置くページなのかがあいまいになります。
3. 画像指定をしない
せっかく保存した画像URL一覧が活かせません。
4. 共通CSSを使わず、ページごとに style を増やす
後で見た目を揃えるのが大変になります。
5. セクション index を先に作りたくなる
でも、まず中身がある方が index はずっと強くなります。
詳細ページは、サイトの「本当の中身」です。
案内ページやトップページより先に、まずは中身を積み上げる。 それが、この作り方の大きな強さです。
このステップのゴール
Step 09 のゴールは、次の状態になることです。
- 詳細ページを1ページずつ作れる
- ファイル名一覧をちゃんと使える
- 画像URL一覧を使って具体的に指示できる
- 共通の CSS と JS を土台にできる
- あとでセクション index を作るための中身が増えている
最小チートシート
詳細ページを作る流れ:
- どのファイルを作るか決める
- ページの役割を決める
- 使う画像URLを渡す
- /site.css と /site.js を使う
- 1ページずつ確認する
詳細ページ先行
index ページはあと
トップページはさらにあとこの6つができれば次へ進めます。
完了: 0/6