このページの目的
ページ全体の枠組み（骨組み）をHTMLで作成します。
ワイヤーフレームを見ながら、タグで“構造”を組んでいきます。
checklistやることリスト
- ワイヤーフレームを見ながら、どんな要素があるかを確認
- HTMLで大枠の構造を記述（<header>、<main>、<footer> など）
- <section> や <div> を使ってパーツを分ける
- 画像やテキストの仮入れ（本物はあとでOK）
tips_and_updatesポイント解説
HTMLは「構造」を作るもの
HTMLタグは“なにをどういう意味で使うか”を伝えるものです。この段階ではデザインはまだ考えず、“骨組み”をしっかり作ることを意識しましょう。
segmentよく使うタグ（構造）
例：最小構成の骨組み
<body>
<header>
<h1>サイトのタイトル</h1>
</header>
<main>
<section>
<h2>コンテンツの見出し</h2>
<p>ここに文章が入ります。</p>
</section>
</main>
<footer>
<p>© 2025 サイト名</p>
</footer>
</body>warningよくある間違いと対策
<div>ばかり使う- 意味のあるタグ（semanticタグ）を使いましょう。各セクションがどんな役割を持つのかを意識することが大切です。
<main>を複数使う- ページの主要なコンテンツを表す
<main>は、1ページに1つだけしか使えません。 <header>や<footer>を混同する- サイト全体のヘッダー・フッターと、記事（article）の中のヘッダー・フッターは役割が違います。区別して使いましょう。
- インデントがバラバラ
- コードの親子関係が分かるように、インデント（字下げ）を整える癖をつけましょう。コードが読みやすくなり、エラーが格段に減ります。
visibilityワイヤーフレームをどう見る？
- 左から右へ、上から下へとブロックを意識して分解
- 「これは共通？」「これは何の内容？」と意味で区切る
- <section> や <div> で“囲う”感覚をつかむ
※迷ったら、まずは<div>で囲い、あとで意味に応じて置き換えてOK！
チェックポイント
✅ <header>と<footer>があるか？
✅ <main>の中に<section>や<article>が使われているか？
✅ タグの入れ子（ネスト）は正しく閉じているか？
✅ 仮のテキストや画像で全体が“それっぽく”見えるか？
design_services補足：ワイヤーフレームは“最低このくらい”を目指そう
目的
HTMLを書く前に、ページの全体像を把握するためにワイヤーフレームはとても大切です。
この段階では見た目の美しさではなく、構造が整理されていることがポイントです。
最低限含めたい要素（1ページ構成の場合）
- ヘッダー
- ロゴ、サイト名、ナビゲーション
- メインビジュアル
- キャッチコピーやメイン画像
- セクションA
- 自己紹介・プロフィール・コンセプトなど
- セクションB
- 実績・スキル・ポートフォリオ
- セクションC
- お問い合わせ・SNSリンクなど
- フッター
- コピーライト・利用規約リンクなど
こんな構成ならOK！
[ ヘッダー ]
├─ ロゴ
└─ ナビメニュー
[ メインビジュアル ]
└─ サイトの紹介 or キャッチコピー
[ セクションA：自己紹介 ]
└─ 見出し・テキスト・画像
[ セクションB：スキル紹介 ]
└─ 見出し・リスト・カード型レイアウトなど
[ セクションC：問い合わせ ]
└─ ボタン、フォーム、連絡先など
[ フッター ]
└─ コピーライト・リンクワイヤーフレーム作成のチェックポイント
✅ ヘッダー・メイン・フッターの区切りが明確か？
✅ セクションごとに情報が整理されているか？
✅ ナビゲーションが機能しそうな構成になっているか？
✅ コンテンツの優先順位が上から順にわかりやすいか？
ワイヤーフレームテンプレートを使おう
手書きでもOK！以下のテンプレートを印刷して使うと便利です：
補足アドバイス
- ワイヤーフレームを描くと「なにを作ればいいか」が一気に見えるようになります。
- 完璧じゃなくてもOK。自分がHTMLを書きやすいように描くことが大切です。
- 講師に見せてアドバイスをもらいながら進めてもOK！