今回はブレインズコンサルティング様のwebサイトができるまで【デザイン編】をご紹介いたします。

今回、弊社では全体の情報の整理から、「サイトデザイン」「コーディング」までを行いました。

今回はブレインズコンサルティング様のwebサイトをどのように制作したのかデザイン面に特化してご紹介いたします。

ブレインズコンサルティング様完成サイト

サイトが出来るまで

サイトを作成するにあたり、まずはヒアリングを行います。

今回ブレインズコンサルティング様がサイトをリニューアルにする目的は下記の三つになります。

• 情報収集フェーズの企業に対して、オンライン上でBCIが提供可能な支援の適切な情報提供を実施し問合せに繋げる
• 長期内容の見直しをしていないため、事業内容等が古くなっているので実態と合わせる
• 作業者の違いによる、レイアウト等の崩れを防ぐため、頻繁に更新するページをCMSで管理できるようにする

メインターゲット層は主に大手、中堅企業のIT企画、情報システム部門になるので信頼感のあるすっきりとしたデザインのサイトを目指しました。

また、コンテンツ内容としては、

事業紹介、事例紹介、代表メッセージ、企業情報、採用情報、問い合わせ

を入れたいというご要望をいただきました。

デザイン制作

デザイン制作では

トップページ制作から

1. トンマナ設計
2. ワイヤーフレーム作成
3. デザイン設計
4. デザイン制作

までを行います。

トンマナ案とは「トーン＆マナー」の略でデザインを作る際に一貫性を保つ事を意味します。

Webサイト制作においては、企業ブランディングを確立させるため、デザイン制作においては世界観や方針のズレを無くすために使用されます。

今回弊社からはデザイン案としてトンマナ案とメインビジュアルそれぞれ3つの案を提出させていただきました。

まずはトンマナ案の3つをご紹介いたします。

トンマナ案

方向性A　ワクワクする近未来

MV(メインビジュアル)を仮想空間のようにすることで、

テクノロジーや近未来を感じさせる案です。

方向性B　AIを親しみやすく

MV(メインビジュアル)やアイコンにイラストを使用することで、AIを親しみやすく感じさせる案です。

方向性C　シンプルで誠実

なるべくシンプルに見えるデザインで、誠実さを出す方向性です。

このように全く違った方向性のトンマナ案をご提案し、その中から一つ、サイトの方向性と合致する案を一案選出します。

今回はこの三つの案の中からA案「ワクワクする近未来」が選ばれました。

トンマナ案が決まった後はコーポレートサイトデザインに移ります。

今回提案したコーポレートサイトデザイン案を紹介いたします。

コーポレートサイトデザイン案

弊社では今回２パターンのデザイン（＋別案）を提案させていただきました。

メインビジュアルだけでなく、詳細を見せることでクライアントさまによりwebサイトの完成の姿を想像してもらいやすくなります。

A案

【デザイン説明】

・コンサルティングの会社らしい、スマートな印象の案になります。

・オレンジと黒をベースに、重くなりすぎないよう白を入れています。

A案・別案

B案

【デザイン説明】

・親しみやすい印象にした案になります。

・オレンジと白をベースに、軽やかなデザインにしています。

【デザイン詳細】

B案・別案

コーポレートサイトデザインはスマートな印象を一番感じるA案に決定いたしました。

コーディング

全てのデザインが決まった後はコーディング作業に移ります。

コーディングについては別の記事で紹介いたします。

まとめ

今回はブレインズコンサルティング様のwebサイトリニューアル制作の流れをご紹介いたしました。「複数案の中から比べて決めたい」というクライアントさんの希望に添い、全く違った角度からのデザインをご提案をさせていただきました。

n2pはデジタルとクリエイティブで「伝わる」を作ることで、ユーザーに価値ある情報と体験を提供します。webサイト制作のご依頼やご相談がございましたら、お気軽にお問い合わせください。

• 
• 
•