📋 ウェブサイト制作のための要件定義チェックリスト

ウェブサイト制作を成功させるためには、はじめに「何を、なぜ、誰のために、どのように作るのか」を明確にする「要件定義」が不可欠です。

1️⃣ サイトの目的とゴール（なぜ作るのか？）

目的の明確化

• ☐ 自分の作品やスキルを紹介したい（ポートフォリオサイト）
• ☐ 会社やお店の情報を発信したい（企業サイト、店舗サイト）
• ☐ 知識や情報を共有したい（ブログ、情報サイト）
• ☐ 商品やサービスを販売したい（EC サイト）
• ☐ 仲間と交流する場を作りたい（コミュニティサイト）
• ☐ 個人的なブランディングを高めたい

具体的なゴールの設定

• ☐ 月間 1,000 ページビューを達成する
• ☐ 毎月 10 件のお問い合わせを獲得する
• ☐ 毎月 50 人のメールマガジン登録者を集める
• ☐ 商品を毎月 100 個販売する

2️⃣ ターゲットユーザー（誰に見てもらいたいか？）

ターゲット層の設定

• 年齢層：20 代〜30 代の若手エンジニア
• 職業：学生、新人エンジニア、転職を考えている人
• 興味・関心：プログラミング、技術トレンド、キャリア

ユーザーのニーズ

• ☐ どんな技術スキルを持っているか知りたい
• ☐ 実際のプロジェクト経験を見たい
• ☐ 技術的な知見を学びたい

3️⃣ 提供するコンテンツとページ構成（何を見せるか？）

主要なコンテンツ

• ☐ 文章（ブログ記事、技術記事）
• ☐ 画像（プロフィール写真、プロジェクトスクリーンショット）
• ☐ 動画
• ☐ 音声（ポッドキャストなど）

必要なページ（サイトマップ）

• ☐ トップページ
• ☐ プロフィール
• ☐ ブログ / 技術記事
• ☐ サービス / 商品一覧
• ☐ 料金プラン
• ☐ 実績 / お客様の声
• ☐ お問い合わせフォーム
• ☐ プライバシーポリシー

4️⃣ 必要な機能（どんなことができるようにするか？）

基本機能

• ☐ お問い合わせフォーム
• ☐ ブログ投稿・編集機能（CMS）
• ☐ SNS 連携（シェアボタン、タイムライン埋め込み）
• ☐ アクセス解析ツールの導入
• ☐ サイト内検索機能
• ☐ 多言語対応

5️⃣ デザインとブランディング（どんな印象を与えたいか？）

与えたい印象・雰囲気

• ☐ シンプル、モダン
• ☐ 信頼感、クリエイティブ
• ☐ 温かい、高級感

デザインの方向性

• キーカラー： 緑を基調とした色系
• フォント： 日本語は Noto Sans JP、英語は Inter で読みやすく
• レイアウト： 2 カラム構成でコンテンツを整理

参考サイト（ベンチマーク）

1. Zenn.dev - 情報設計とシンプルさ
2. GitHub - 開発者向けの UI/UX
3. Qiita - 技術記事の見せ方

6️⃣ 運用と保守（どうやって育てていくか？）

運用体制

• コンテンツ更新者： 自分
• 更新頻度： 月 1〜2 回の技術記事投稿

インフラ

• サーバー： Vercel（静的サイトホスティング）
• ドメイン名： izumin-tech.jp
• CMS： Astro Content Collections（Markdown）

予算

• 初期費用： 0 円（無料ツール中心）
• 月額費用： ドメイン代 約 100 円/月

🎨 理想の UI デザイン要件まとめ

1️⃣ デザインコンセプト：「ミニマル × グリーン」

🎨 カラーテーマ

• 背景： 白を基調としたライトモード
• アクセントカラー： 緑系でオリジナリティを演出
• 印象： 落ち着いた信頼感のあるデザイン

2️⃣ サイトの基本レイアウト

📱 各エリアの役割

• ヘッダー： サイトタイトル、ナビゲーション、SNS アイコン
• メインコンテンツ： 記事本文、自己紹介などの主要コンテンツ
• サイドバー： 補足情報、プロフィール、目次

3️⃣ 各ページの UI 詳細

🏠 A. トップページ（自己紹介ページ）

1. 自己紹介エリア

• プロフィール写真
• 簡潔な自己紹介文

1. スキル紹介エリア

   • 言語（JavaScript, TypeScript, Go）
   • フレームワーク（React, Astro, Next.js）
   • インフラ（AWS, Docker, Vercel）

2. 最新記事エリア

   • 最新記事 3 件をカード形式で表示

📝 B. 記事一覧ページ

レイアウト設計

• PC 表示： 2 列のグリッドレイアウト
• 記事カード： 左側にアイキャッチ、右側に記事情報

📖 C. 記事ページ

構成要素

• メインコンテンツ： 記事タイトルと本文
• サイドバー： 自動生成される目次（h1, h2, h3 から）
• 機能： 目次の追従スクロール対応

💡 まとめ

「Zenn.devの優れた情報設計とシンプルさを参考にしつつ、
緑をキーカラーとしたオリジナリティのある、
ミニマルな2カラム構成のポートフォリオサイト」
✅ 技術者らしいクリーンなデザイン
✅ 読みやすさを重視した情報設計
✅ 緑色でオリジナリティを演出

ディレクトリ構成

my-portfolio/
└── src/
    ├── components/
    │   ├── Header.astro
    │   ├── Sidebar.astro
    │   └── Footer.astro
    ├── layouts/
    │   └── Layout.astro
    └── pages/
        ├── index.astro                 # トップページ
        └── articles/
            ├── index.astro             # 記事一覧ページ
            └── [slug].astro          # 記事詳細ページ（雛形）