情報構成・サイトマップ作成

情報構成・サイトマップ作成は、Webサイトの骨格を形成する重要な工程です。

情報構成・サイトマップ作成の目的

情報構成・サイトマップ作成を行うことで、以下のようなメリットを得られます。

• 分かりやすいサイト: ユーザーが目的の情報を見つけやすく、迷いづらいサイトになります。
• 効率的な制作: 制作前に情報整理を行うことで、制作後の修正や変更を減らすことができます。
• SEO対策: 検索エンジンにサイトの構造を理解してもらいやすく、SEO効果の向上に繋がります。

情報構成・サイトマップ作成の手順：具体的な例

※例として、30歳男性コピーライターがサイトマップを作成したとします。
また、30歳男性コピーライターの彼は彼自身を商品として売り込みファンを増やす戦略でサイトを作ることを想定しています。
そのため、彼自身に魅力を感じファンとなり購入をしてくれるクライアントを探しています。

1. 情報の整理

サイトに掲載する情報をカテゴリー、コンテンツ分けし、階層構造を整理します。

カテゴリー、コンテンツ分け:

• プロフィール
  • 自己紹介
  • スキル
  • 経歴
• 実績
  • 広告案件
  • 記事案件
  • その他
• サービス
  • ライティング
  • コンサルティング
  • 研修
• ブログ
  • 仕事のこと
  • 趣味のこと
  • その他
• お問い合わせ

階層構造:

• トップページ
  • プロフィール
  • 実績
  • サービス
  • ブログ
  • お問い合わせ
• 実績
  • 広告案件
    • 案件1
    • 案件2
  • 記事案件
    • 案件1
    • 案件2
• サービス
  • ライティング
    • 記事
    • 広告
    • その他
  • コンサルティング
    • 個別
    • グループ
  • 研修
    • 社内
    • 公開

2. サイトマップの作成

整理した情報を表や図を用いて可視化します。

ページ名	URL	カテゴリー	親ページ	説明
トップページ	/	–	–	サイトの入口
プロフィール	/profile	プロフィール	トップページ	自己紹介、スキル、経歴
実績	/works	実績	トップページ	広告案件、記事案件など
サービス	/services	サービス	トップページ	ライティング、コンサルティング、研修
ブログ	/blog	ブログ	トップページ	仕事のこと、趣味のことなど
お問い合わせ	/contact	–	トップページ	問い合わせフォーム
広告案件1	/works/ads/1	実績	実績	案件1の詳細
広告案件2	/works/ads/2	実績	実績	案件2の詳細

3. ページタイトル・メタディスクリプションの検討

各ページのタイトルとメタディスクリプションを検討します。
ここでは「30歳男性コピーライター」をキーに押していますが、例えばこれを「練馬区発甘いイチゴ」など置き換えて考えることもできます。

ページタイトル:

• トップページ: 30歳男性コピーライター｜[氏名]
• プロフィール: 30歳男性コピーライター｜[氏名]のプロフィール
• 実績: 30歳男性コピーライター｜[氏名]の実績
• サービス: 30歳男性コピーライター｜[氏名]のサービス
• ブログ: 30歳男性コピーライター｜[氏名]のブログ
• お問い合わせ: 30歳男性コピーライター｜[氏名]へのお問い合わせ

メタディスクリプション:

• トップページ: 30歳男性コピーライター[氏名]の公式サイト。広告、記事、Webサイトなど、幅広いライティング実績があります。
• プロフィール: 30歳男性コピーライター[氏名]のプロフィール。経歴、スキル、得意分野などを紹介しています。
• 実績: 30歳男性コピーライター[氏名]の実績。広告、記事、Webサイトなど、さまざまな案件を紹介しています。
• サービス: 30歳男性コピーライター[氏名]のサービス。記事作成、広告文案作成、Webサイト制作など、さまざまなサービスを提供しています。
• ブログ: 30歳男性コピーライター[氏名]のブログ。仕事のこと、趣味のことなど、さまざまな情報を発信しています。
• お問い合わせ: 30歳男性コピーライター[氏名]へのお問い合わせ。ご依頼、ご質問などはこちらのフォームからどうぞ。

4. ワイヤーフレームの作成

サイト全体の画面レイアウトを作成します。
※この辺りからはプロにお任せいただくのもいいかもしれません。

ワイヤーフレーム作成ツール:

• Adobe XD
• Sketch
• Figma

ワイヤーフレームの例:

• トップページ:
  • ヘッダー: ロゴ、ナビゲーション
  • メインコンテンツ: プロフィール、実績、サービス、ブログ
  • フッター: 著作権表示、プライバシーポリシー
• 実績ページ:
  • リスト形式で案件を表示
  • 案件ごとにタイトル、サムネイル、概要、詳細ボタンを表示

5. デザインコンセプト

サイト全体のデザインの方向性

ターゲットユーザー: 40代経営者

イメージ:

• 清潔感
• 信頼感
• プロフェッショナル感

配色:

• ベースカラー: 白、グレー
• アクセントカラー: 青

フォント:

• ヘッダー: 太字ゴシック
• 本文: 明朝体

レイアウト:

• シンプルで読みやすいレイアウト
• 余白を適度に使う

参考サイト:

• 自身が持っているイメージに近いサイト
• よく目が止まるサイト
• 自身の印象に強く残るサイト

など、ここはお好みによるかと思います。

6. 機能要件定義

サイトに必要な機能

必須機能:

• 問い合わせフォーム
• ブログ機能
• レスポンシブデザイン

あれば便利な機能:

• ソーシャルメディア連携
• ポートフォリオ機能
• お客様の声

機能要件定義のポイント:

• ターゲットユーザーのニーズを満たす機能
• サイトの目的を達成する機能
• 実現可能な機能

情報構成・サイトマップ作成のポイント

• ターゲットユーザー: ターゲットユーザーにとって必要な情報を整理する。
• 情報の粒度: 情報の粒度を適切に調整し、階層構造を分かりやすくする。
• ナビゲーション: ユーザーが迷わず目的の情報を見つけられるように、ナビゲーションを設計する。
• SEO: 検索エンジンにサイトの構造を理解してもらいやすく、SEO効果の向上に繋げる。

まとめ

情報構成・サイトマップ作成は、サイト制作の成功確率を高めるために必須のステップです。時間をかけて丁寧に検討することで、効果的なサイト運営を実現することができます。