サイト制作の流れ

パワーソリューションズ様
HP制作について

2018.5.8



パワーソリューションズ様のホームページ制作において、最初に支給してもらった社長メッセージを基にホームページのコンセプトを導き出し、トップページ構成案としてはLP構成として、最初の画面では社内のいきいきとした雰囲気を醸し出す写真をメインビジュアルとした。(3月24日)

①企業情報ページデザイン案出し


トップページ構成デザイン


企業情報ページデザイン案


その下の第2セクション会社マネジメントメンバーの紹介では笑顔の写真を掲載し、マウスが写真の上に来ると拡大され、メンバーの詳細に切り替わる画面とした。

第3セクション会社業務内容とし、各業務のボタンを配置して、クリックすると業務詳細ページに遷移する構造とした。

第4セクション取引先のパートとし、現在取引が進行している企業様のロゴを配置した。

第5セクションリクルートの人材募集パートとし、詳しい募集概要についてはREAD MOREボタンを配置して、Recruitページに遷移する構造とした。

第6セクション最新ニュースとコラムリスト、およびパートナーのバナーを配置し、詳しく知りたい人向けにREAD MOREボタンを配置して遷移する構造とした。

最後の第7セクション会社へのアクセスを案内するMAPとした。
上記の構成案を出した次の作業としては、遷移先の下層ページの案出しを行った。

②下層ページフォーマット案出し(3月29日)

まずはページの背景色を決めるため、グレー背景と白背景の2種を制作して、比較検討を行った。


A案(背景白)

B案(背景グレー)

結果として、背景はグレーとした。

③トップページ制作

次に構成案を基にパワーソリューションズ様にページデザイン方針を確認し、 トップページの制作(4月3日)を開始した。

トップの写真は若手の写真の替わりに、信頼感を醸し出すミドル層の男性写真とした。下の役員構成写真には各役員のフォーマルな写真をはめ込み、オンマウスで詳細画面になる構造に決まった。

次のセクションでは各業務のイラストと、スッキリした構成とし、そのイラストをクリックすることで詳細ページに遷移する構造とした。

パートナー以下のセクションについては、最初の構成案のままとした。


トップページ通常時


トップページオンマウス時

④下層ページの制作

次に下層となる企業ページの制作を開始する前に、案として2種類を制作した。

A案としてはすべての内容(構成要素:見出し、会社概要、取引先、売上高、組織図、資格保有者、アクセスMAP、事業所)をページ内にすべて収めたLPスクロール構造とし、B案としては会社概要部分と、アクセスMAP部分とを分割構造とした。


A案


B案(分割表示)

また下層ページの制作では、事業内容を各業務毎にイラスト+簡単な説明と、もっと詳細を知りたい人向けに、read moreボタンを配置した構造とした。


ビジネスソリューションページ


リクルートページ

見出し部分は各ページのイメージが伝わる写真+文字とし、全体基調はブルーグレーな配色とした。

Recruitページは会社に興味を持ってもらえる内容として、PS調査隊という会社の事業に関する詳細をわかりやすいコラムとしたり、各部門の社員インタビュー記事、オフィス環境がわかる内容を掲載した。

最終的なホームページは、トップページとしてLPページ風に大項目を配置して、詳細な内容はリンクして下層ページに遷移する構造とした。


下層ページには会社理念、社長あいさつ、会社概要、アクセス情報を制作した。 


会社理念


社長あいさつ


会社概要


アクセス情報

⑤サイトマップの構成

以上コーディングする前には、以下のようなサイトマップの構成に関して2案を制作して、 全体構成を決めた。


A案


B案

そして、4月24日にはテストサイト公開をして、実際のホームページの使用感についての検証を行なった。
現状をPhase1として、Phase2以降のサイトマップは以下のような構成とした。

Phase1のホームページではスクロールを促す下矢印を2種類制作し、テスト公開においての見栄えや使用感で最終的なデザインを決めることとした。


スクロール [オレンジ案]


スクロール [ブルー案]

まずはお気軽にご相談ください