Agently/Skill Store/HP制作スキル
💻

HP制作スキル

Webサイト全体の設計・実装を支援するスキル。サイトマップ設計、ワイヤーフレーム、

codingby agently-team

HP制作スキル


概要

Webサイト全体の設計・実装を支援するスキル。サイトマップ設計、ワイヤーフレーム、

ナビゲーション構造、レスポンシブデザイン、アクセシビリティまで包括的に対応する。


発動条件

「ホームページ」「Webサイト」「HP作って」「サイト制作」に関する依頼を受けたとき。


入力で確認すべき情報

1. **サイトの目的** — コーポレート / ポートフォリオ / メディア / EC

2. **ページ数の目安** — 5ページ以下 / 10ページ程度 / 大規模

3. **ターゲット** — 誰に向けたサイトか

4. **参考サイト** — デザインの方向性（あれば）

5. **技術要件** — 静的HTML / Next.js / WordPress 等

6. **素材** — ロゴ、写真、テキスト原稿の有無


制作フロー


Phase 1: サイトマップ設計

ページ構成を階層で整理する:

```

/ (トップページ)

├── /about (会社概要)

├── /services (サービス一覧)

│ ├── /services/consulting

│ └── /services/development

├── /works (実績)

├── /blog (ブログ)

│ └── /blog/{slug}

├── /contact (お問い合わせ)

├── /privacy (プライバシーポリシー)

└── /sitemap.xml

```


Phase 2: ページ別ワイヤーフレーム

各ページの構成要素をテキストで定義する:

  • セクション順序
  • 各セクションの目的と配置要素
  • CTA の位置と文言

    • Phase 3: デザイン方向の決定


    #### カラー設計

  • **メインカラー**: ブランドカラー（1色）
  • **アクセントカラー**: CTA やハイライト用（1色）
  • **ベースカラー**: 背景・テキスト（白系/グレー系/ダーク系）
  • コントラスト比: WCAG AA 基準（4.5:1 以上）

    • #### フォント設計

  • **見出し**: 印象的なフォント（Noto Sans JP Bold 等）
  • **本文**: 可読性重視（Noto Sans JP Regular, 16px, 行間1.8）
  • フォントファミリーは最大2種類に絞る

    • #### トーン

    | 方向性 | 特徴 |

    |--------|------|

    | 高級感 | 余白多め、セリフ体、ダークカラー |

    | カジュアル | 丸み、イラスト、明るいカラー |

    | 信頼感 | ブルー系、整然としたグリッド |

    | 先進的 | グラデーション、アニメーション |


    Phase 4: 実装


    #### ナビゲーション構造

  • ヘッダー: ロゴ + メインナビ（5項目以内）+ CTA ボタン
  • モバイル: ハンバーガーメニュー（閉じるボタン明確に）
  • フッター: 全ページリンク + 会社情報 + SNS リンク
  • パンくずリスト: トップ以外の全ページ

    • #### レスポンシブ設計

  • ブレークポイント: `sm:640px` `md:768px` `lg:1024px` `xl:1280px`
  • モバイルファースト: 基本スタイルはモバイル向け
  • 画像: `srcset` + `sizes` でレスポンシブ対応
  • テーブル: モバイルではカード表示 or 横スクロール

    • #### アクセシビリティ（a11y）

  • セマンティック HTML: `header`, `nav`, `main`, `footer`, `article`, `section`
  • `aria-label`: アイコンボタン、ナビゲーション
  • キーボード操作: Tab でフォーカス移動、Enter で実行
  • スキップリンク: ページ先頭に「メインコンテンツへ」
  • フォーム: `label` と `input` を紐付け、エラーメッセージを明示

    • #### SEO対応マークアップ

  • 各ページに固有の `title` / `meta description`
  • `h1` はページに1つ
  • 画像に `alt` テキスト
  • 構造化データ（Organization, BreadcrumbList）
  • `sitemap.xml` / `robots.txt` の生成

    • コード出力ルール

  • HTML5 + Tailwind CSS をデフォルト
  • セクションごとにコメントで区切る
  • 共通パーツ（ヘッダー、フッター）はコンポーネント化
  • 画像プレースホルダー: `https://placehold.co/600x400` + `alt` テキスト

    • チェックリスト

  • [ ] 全ページがモバイルで正しく表示されるか
  • [ ] ナビゲーションが直感的か
  • [ ] CTAが目立つ位置にあるか
  • [ ] フォームのバリデーションが機能するか
  • [ ] ページ読み込み速度が良好か
  • [ ] OGPタグが設定されているか
  • [ ] 404ページが用意されているか

    • 出力フォーマット

    1. **サイトマップ**（ページ構成図）

    2. **デザイン方針**（カラー・フォント・トーン）

    3. **ワイヤーフレーム**（ページ別の構成）

    4. **コード**（ページ単位、コメント付き）

    5. **公開前チェック**（確認項目リスト）