ホームページを制作する際に「どのような情報をホームページに掲載するのか？」を考え、「どのようなページにどのような情報を配置していくのか？」を決めていく必要があります。

例えば、「コーポレートサイト（会社のWEBサイト）」であれば、

• 会社名
• 会社住所
• 企業理念
• 代表挨拶
• 商品
• サービス
• 時事のニュース
• 採用情報
• 技術情報
• 実績
• プライバシーポリシー
• 利用規約
• お問い合わせ

などの情報をどのように配置していくのかを考えていきます。

このように「ホームページに掲載する情報」をリストアップしていき、情報を「グループ」ごとにまとめていくと「どのようなページ構成が必要なのか？」も考えやすくなります。

「ホームページに掲載する情報」が確定したら、「情報をグループ化」し、「ページの構成」を考えていきます。

これまでの情報をグループごとにまとめていくと、

会社に関する情報

• 会社名
• 会社住所
• 企業理念
• 代表挨拶

商品・サービスに関する情報

• 商品
• サービス
• 技術情報
• 実績

ニュースに関する情報

• 時事のニュース

採用に関する情報

• 採用情報

サイト利用に関する情報

• プライバシーポリシー
• 利用規約
• お問い合わせ

のように分けるごとができます。

このようにグループ化した情報を元に、ページの構成を考えていきます。

例えば、

「HOME」ページ

• 商品・サービス案内
• 時事ニュース一覧
• 技術情報案内
• 採用情報案内
• 会社概要案内

「会社概要」ページ

• 会社名
• 会社住所
• 企業理念
• 代表挨拶

「商品内容」ページ

• 商品名
• 商品説明
• 商品価格

「サービス内容」ページ

• サービス名
• サービス説明
• サービス価格

「ニュース内容」ページ

• ニュース内容

「採用情報」ページ

• 採用職種案内
• 応募方法
• 応募期限

「プライバシーポリシー」ページ

• プライバシーポリシー

「利用規約」ページ

• 本サイトのご利用にあたって

「お問い合わせ」ページ

• 名前
• メールアドレス
• お問い合わせ内容

のように、ページの構成と内容を考えていきます。

「ページ構成と内容」が決定したら「ワイヤーフレーム」と呼ばれる「ページ内の情報配置図」を作成していきます。

「ページの上方」に配置する情報は、訪れたユーザーが一番初めに目にする部分のため、「インパクトがあって興味を惹く情報を配置する」など、「ページに訪れたユーザー」を推察し「どのように行動してもらうことが理想なのか？」を考えながら、最適な情報配置を検討していきます。

「ワイヤフレーム」は下図のように情報の内容は記載せず「配置情報のみ」を作成していきます。

「ページの構成」が完成したら、「デザインカンプ（完成見本）」を作成していきます。

ホームページを作成する前に「ホームページの完成状態」を確認するために「デザインカンプ」と呼ばれる「ホームページの完成図」を作成していきます。

デザインカンプは下図のように「ロゴ・バナー・文章」など「ホームページの全ての情報」が掲載されて「完成された状態の図」になります。

デザインカンプは、

• ホームページの色の構成
• 写真の表示状態
• 全体のイメージ

などを確認する目的もあり、「ホームページの完成状態」が想定した通りになっているかを確認していきます。

完成した「デザインカンプ」を元に「HTML」・CSS」を作成し、「ホームページ」を作成していきます。

パソコンやタブレット・スマートフォンサイズの画面で「レイアウトの確認」や「モバイルメニューの動作確認」などを行っていきます。

アニメーション機能がある場合は「アニメーションの状態」も確認していきます。

コンテンツ一覧