第10回: 実践（前編）：小規模Webサイトの設計とマークアップ

この回の目標

  • Webサイトを構造から考えてコーディングできる
  • 複数ページを見据えた設計ができる
  • 「理由のあるHTML/CSS」が書ける
目次
  1. デザインカンプを“読む”練習
  2. サイト構造を考える
  3. どのタグでマークアップするか考える
  4. class設計・命名の考え方
  5. 共通パーツの整理
  6. デザインカンプから素材を書き出す
  7. フォントサイズ・カラーを読み取る
  8. ページ内リンクの実装
  9. コーディング開始
  10. まとめ

デザインカンプを“読む”練習

デザインは「見る」ものではなく「読む」もの

コードを書く前に、まずはカンプをバラバラに分解してみよう

  • 情報の優先順位（h1〜h3）
    どこが一番伝えたいメッセージ？
  • 文章（p）とリスト（ul/li）
    単なる文章か、それとも箇条書きか？
  • 共通要素
    他のページでも使いそうなボタンや見出しはある？
  • 繰り返し構造
    同じ見た目のパーツ（カードなど）が何回出てくる？

サイト構造を考える

いきなり1ページ目を書き始めず、他のページとの関係性を整理しよう

  • ページ構成
    全部で何ページ必要？（トップ、サービス、会社概要、お問い合わせなど）
  • 共通パーツ
    ヘッダーとフッターは全ページ共通？
  • リンクの整理
    「ページ内」に飛ぶのか、「別のページ」に飛ぶのかを整理しよう

どのタグでマークアップするか考える

HTMLタグは、ブラウザやGoogle・読み上げソフトへ意味を伝えるための大事な要素

  • section / article: 意味のあるまとまりを作る
  • h1〜h6: 階段を飛ばさずに順番に使う
  • ul / li: ナビゲーションやメニューに使う

「なんとなくdiv」ではなく、「ここはセクションの区切りだからsection」と言えるようになろう！

正解は1つじゃない、でも“理由がある選択”をしよう

class設計・命名の考え方

IDとclassの使い分け

  • ID：そのページに1つだけ（特定用）
  • class：使い回しできる（見た目用）

再利用性を考える

.top-contact-btn よりも .c-btn-primary（共通ボタン）のような名前にしておくと、2ページ目を作るときに自分がすごく楽になる

共通パーツの整理

先に「部品」のルールを決めておくと、コーディングが加速する

  • ボタンの基本形: サイズ、角丸、ホバー演出
  • 見出しのデザイン: フォントサイズ、下線、アイコン
  • セクションの余白（padding）: 上下の余白を統一して、サイト全体にリズムを作ろう。

デザインカンプから素材を書き出す

適切な画像形式を選択して書き出すことで、サイトの軽さや見やすさを上げよう

  • SVG: ロゴ、アイコン
  • 画像（WebP / JPG）: 写真、複雑なグラデーション

画像形式については第6回でおさらいできます

2倍書き出し

Retinaディスプレイ（高解像度・高画素密度ディスプレイ）でもボケないように、2倍のサイズで書き出すのが基本

フォントサイズ・カラーを読み取る

  • 見出しと本文のサイズ差
  • 何度も出てくる数値は、変数化して管理
$primary-color: #28A745;
$accent-color: #F1A3A1;
$text-color: #333;

ページ内リンクの実装

ページ内リンクは「目標」をつける作業

特定の場所に飛ばすためには、id という「目標」が必要

<!-- リンク先に id を指定 -->
<a href="#about">About</a>

<!-- 飛ばしたい場所に id をつける -->
<section id="about"></section>

スムーススクロールの「おもてなし」

ただ飛ぶだけだと、一瞬で画面が切り替わってユーザーが「今どこにいるの？」とびっくりしてしまう
scroll-behavior: smooth; を入れることで、なめらかに移動できる 

html {
  scroll-behavior: smooth;
}

「ヘッダー固定」の罠

ページ上部にメニューがずっと表示されている（固定ヘッダー）サイトの場合、そのまま飛ぶと見出しがヘッダーの下に隠れてしまう
scroll-padding-top を使うことで、ヘッダーの高さをずらした位置に飛ばすことができる 

html {
  /* 固定ヘッダーがある場合は、その高さ分だけ位置をずらそう */
  scroll-padding-top: 80px; 
}

コーディング開始

進め方

準備ができたら、いよいよコーディング
最初から完璧を目指さなくてOK！

  1. まずはトップページから
    全体の雰囲気を掴む
  2. ざっくり組む
    まずは骨組み（HTML）と大きな配置（CSS）から
  3. 最後に微調整
    1pxのズレやアニメーションは、形になってからで大丈夫！

最初から完璧を目指さないのが、完成させるコツ

やってみよう

MVと最初の1セクションまで一緒に作ってみよう
メインビジュアル（MV）とその下の1つ目のセクションまでを一緒に作ろう

残りのセクションを自分で作ってみよう
今までの講座を振り返りながら、トップページを自分で作ってみよう

まとめ

今回のまとめ

  • いきなりコードを書かない（設計が8割）
  • 共通化を意識する（コードを美しく、効率よく使いまわそう）
  • 「意味」のあるタグを選ぶ（誰にでも優しいサイト作り）

次回の予定

コーディングが終わった後に必要な最終チェックについて学びます