株式会社ビジョン・コンサルティング・デジタル様のコーポレートサイトを新規制作いたしました。
依頼内容
株式会社ビジョン・コンサルティング・デジタル様は、デジタル技術を活用したコンサルティングファームとして、新たに設立されました。コーポレートサイトの制作の目的として、以下のご要望をいただきました。
・コンサルタント採用の強化
・企業認知向上
・企業イメージの確立
・信用、信頼、信憑性の向上
特に、スタートアップの機動力を強調した企業ブランドの訴求と、親会社であるビジョン・コンサルティングの安定性を反映するようなサイトデザインが求められました。また、デザインについては以下の具体的な要望がありました。
・インパクト ー 扱う商材は、最先端デジタルを用いたコンサルティングであり、その先進的イメージを強烈に植え付けたい。
・期待感 ー デジタル分野が秘めるポテンシャルを表現し、この分野に挑戦する企業や個人の共感を得たい。
・シンプル、知的、クール ー シンプルイズベストという引き算の美学を取り入れ、知的でクールな印象を演出したい。
ワイヤーフレーム作成
＜ワイヤーフレームの構成＞
「コンサルタントの採用強化」は主に求職者に向けた情報、「企業認知の向上」は主に対外的な企業に向けた情報、この2つをバランスよく訴求できるように、サイト全体のワイヤーフレームを構成しました。
CMSで更新可能な箇所は、クライアント様が容易にコンテンツを編集できるように設計し、更新時の具体的なイメージも伝わるようにクライアント様へ共有しました。例えば、SERVICEページ内のEXPERTSセクションなどは、登録情報が増えた際にどのように表示が追加されていくかなども具体的に示しています。
＜コミュニケーション＞
サイト構成やCMSの更新箇所などを詰めるため、Miroというホワイトボードツールを活用し、クライアント様と密にやり取りを行いました。このツールを通じて、リアルタイムでフィードバックを受け取りながら、サイト全体のワイヤーフレームを作成しました。
ラフデザイン
クライアント様からの下記3つのデザイン要望を言語化し、デザインイメージの認識を揃えるところからスタートしました。
・インパクト
┗太字/ゴシック体の文字
┗文字ジャンプ率（サイズの比率差）の拡大
┗1画面あたり1情報の訴求
・期待感
┗目を引くアニメーションの組み合わせ
┗細部へのこだわり
・シンプル、知的、クール
┗余白感
┗限定した色数
┗ 視線誘導のしやすさ
言語化した要素をもとに、サイトの顔となるメインビジュアルを検討しました。
・インパクトを重視するため、文字を大きく入れるか、写真を大きく入れるか。
・期待感や先進性を感じるような幾何学的なあしらいが良いか、円のようなあしらいが良いか。
・採用を意識したサイトにするためには、人物が入っていた方が良いか、入っていない方が良いか。
メインビジュアルは、アニメーションを入れて印象的に見せたいという要望をいただいていたので、どのようなアニメーションにするかをより具体的にイメージしていただくために、4つのデザイン案それぞれで絵コンテのように複数のデザインカットを作成しました。
クライアント様からのフィードバックを反映し、3案に絞り込みブラッシュアップを行いました。
最終的に、求職者視点でコンサルタントの人物写真が入りつつ、企業のブランドイメージも印象付けられるロゴをモチーフとしたあしらいを入れた「A案（下記画像一番左のもの）」で決定しました。
デザイン
＜全体＞
ラフデザインで固まった方向性をもとに、サイト全体にデザインを展開しました。
インパクトを重視するため、見出しのフォントはサンセリフ体の太字のものを使用しています。
ロゴの「D」を彷彿とさせるような形状のあしらいを取り入れつつ、図などはシンプルな見た目で余白を活かすようなデザインにしました。
全体の色のトーンを統一させ、ロゴに使用されているゴールドは多く使わず、強調させたい要素のみにゴールドのあしらいを入れることで、コントラストが効いてより目に留まるようにしています。
立ち上げから間も無く、開示できる情報がまだ少ないというクライアント様の事情から、どうしてもテキストだけで説明しないといけないページもありましたが、サイトを閲覧するユーザーが文字を読むことに辟易しないよう、図解を入れられそうな部分には入れたり、内容の切り替わりに合わせて白・グレー・黒と背景色を変えることでストレスなくページを閲覧できるように考慮しました。
＜メインビジュアル＞
「コンサルティングとデジタルのかけ合わせ」というコンセプトから「C」と「D」が組み合わさったデザインを採用しました。また、組み合わさった形は「×（かける）」という形状にも読み取れるようにあしらっています。
メインビジュアルの画像はAIを用いて一から生成し、独自の素材を作成しました。これにより、クライアント様の独自性と先進性を強調しました。
サイト全体のトーンを邪魔しないよう、人物の服装や後ろに見える背景にもこだわり、シンプルなもの・黒系のものを使用しました。
アニメーション
＜アニメーション＞メインビジュアルにはAftereffectsで制作した動画のアニメーションを組み込み、「C」と「D」が組み合わさり、写真が出現する動きを再現しました。ご要望のイメージをお聞きしながら、クライアント様ならではのオリジナルアニメーションを作成させていただきました。
これにより、ユーザーにインパクトと魅力的な第一印象を与えることができました。
各セクションにはコーディングで出現時のアニメーションを付与することで、インパクトやこだわりを演出しています。
＜制作過程（Aftereffects）＞
メインビジュアルのアニメーションは、jQueryなどで実装可能なアニメーションではなく、このサイトだけにカスタマイズされたオリジナリティのある動きになるよう意識しています。そうすることで、先進的な企業である印象をユーザーに植え付けることができ、何か新たな提案をしてくれそうなワクワク感に繋げることができます。
図のアニメーションなどは、遅すぎるとサイトの閲覧者にストレスになりますし、速すぎるとアニメーションさせることの必要性が薄れてしまい、さらにサイト全体の雰囲気を壊してしまいかねないので、何がどの順番でどのくらいのスピードで表示されるかや、スピードに緩急をつけるイージング処理など細部にこだわりました。
全体デザイン（TOP）
実装
＜CMSを用いたコンテンツの更新＞
・WordPressの導入
WordPressを導入し、クライアント様が容易にコンテンツを更新できるようにしました。
・動的表示
CMSで投稿がない箇所はサイト上でもセクション自体を非表示にさせる実装を行いました。これにより、不要なセクションが表示されることなく、常に最新の情報のみが表示されるようにしました。
＜各ページの機能＞
【社員紹介】
社員様の追加/編集などの基本的な操作に加え、社員インタビュー内はインタビュー項目の増減や写真のレイアウトなどもCMSを用いて容易に編集が行える仕組みにしました。
【企業情報】
ページ内の「会社概要」や「オフィスギャラリー」はテキスト変更や画像追加などが行えるような実装をしました。また、今後の取引先クライアントが増えた時に備え、「主要クライアント」というセクションも作成しました。
企業からのお問い合わせと、求職者からの採用応募を1つのフォームで対応できるよう、お問い合わせ種別に応じてフォーム項目の表示が変わるような仕様になっています。
その他
静的に実装している部分もクライアント様の方で修正できるようになりたいというご要望をいただいたため、WordPress上でhtmlファイルを編集する方法をご教示しました。
株式会社ビジョン・コンサルティング・デジタル コーポレートサイト
