こんにちは、Webディレクターのほそです。
このたび、“人とテクノロジーで世界をつなぐ”を理念にインターネットマーケティング事業やECマーケティング事業などを展開するBULLET GROUP（バレットグループ）様のコーポレートサイトのリニューアルを担当しました。
そして、とても嬉しいことに、今回のリニューアルサイトがCSS Design AwardsのWEBSITE OF THE DAYを受賞いたしました。
- CSS Design Awardsとは
- Founded in 2009 and launched in 2010, CSSDA is an international web design and development award platform that honors and showcases freelance designers, studios and agencies for work that pushes the boundaries of UI, UX and innovative development.
2009年に設立され2010年にはじまった、UI/UX/イノベーティブディベロップメントの限界を突破していくフリーランスのデザイナー、スタジオ、エージェンシーを表彰・紹介する、国際的なWebデザイン＆ディベロップメントのアワードプラットフォームです。
今回は、本リニューアルの舞台裏を少しだけご紹介できればと思います。
目次
課題の発見とリニューアルに向けた戦略
バレットグループ様のリニューアル前のサイトは、さまざまな企業スローガンやフィロソフィーが併記されており、企業にとって一番大切な理念が何か、という点が見えづらくなっていました。
しかしヒアリングを重ねるなかで、
- 世の中を変えていこうとする「開拓者精神」を応援する姿勢
- つまらない常識を変えていこうという精神
の2点が、バレットグループの企業としてのアイデンティティであることが、しだいに見えてきました。
そこで、すでにあるコーポレートメッセージのなかから
「壊すべき壁を撃ち抜く」
というキーワードをリニューアルの軸に据え、サイト全体で表現することに挑戦しました。
LIGの制作が目指す「共創」
LIGはWeb制作を事業の根幹としています。しかし、「クライアントに依頼されたことのみをやる」という受け身の姿勢ではなく、クライアントと共に一つのサイトを作り上げていく、「共創」を理念に掲げて制作にあたっています。
クライアント様に寄り添うため、デザイナーも打ち合わせに同行し、多いときは毎週のようにMTGを重ね、コピーやサイト構成の細かな調整をしていきました。
では、戦略とキーワードをどう具体的にWebサイトに落とし込んでいったのか。デザインとコーディングを担当したスタッフからコメントをもらいたいと思います。
制作工程について
デザインコンセプト設計
|
けんてぃ（デザイナー）はじめにお会いした際に「見たことのないようなデザインにしてほしい」というオーダーをいただきました。そこでバレットグループ様のミッションでもある「壊すべき壁を撃ち抜く」を体現できる、銃の軌跡をモチーフに全体をデザインしました。MV（メインビジュアル）の照準・スクロールに合わせて進む銃の軌跡や撃ち抜くアニメーションを入れるなどして、横スクロールをさせることに意味のあるデザインにしました。
また、バレットグループ様の多様な事業部、職種、社員様同士のシナジーで生まれる新しい価値を、多様な色のテクスチャをモチーフにして背景にランダムに配置し動かすことで表現しました。 |
|---|
アニメーションの制作
今回のサイトリニューアルには、アニメーションによる印象づけが重要な役割を果たしています。そこにどのようなこだわりを込めたのか、フロントエンドエンジニアのしんどうドリルにもコメントをもらいました。
|
しんどうドリル（フロントエンドエンジニア）このサイトにはアニメーションやインタラクティブな要素がたくさんあります。オープニングアニメーションではメインコピーが3次元的に動くようになっており、MVでは弾丸の照準をイメージしたグラフィックを、8つのSVGに分けて回転させています。背景のアニメーションでは、それぞれのテクスチャをランダムに動かすことで無限の色の組み合わせを作っています。
また、MVの照準をマウスポインタの位置に合わせて追従させたり、マウスポインタをボタンに吸着させることで回遊させるきっかけをつくるなど、インタラクションにもこだわっています。 |
|---|
こだわりの「硝煙」
制作も終盤にさしかかったとき、バレットグループ様から、サイトの演出で使われている「硝煙」について「壁を撃ち抜いている感」が足りないのではないか、というご指摘をいただきました。
そこでチームで協力して参考動画を収集し、デザイナーがあらためて硝煙を制作するという一幕も。私たち制作側だけではなく、クライアント様がクリエイティブにこだわりを持っていただくことで、より質を高めることができたと感じています。
|
|
しんどうドリル（フロントエンドエンジニア）トップページのコンタクト部分ではデザイナーに協力してもらい、スプライトシート（連番のアニメーション画像）を作成し、パラパラマンガのように画像を切り替えてアニメーションさせています。 |
|---|
クリエイティブにより、顧客・プロダクトの魅力を引き出す
今回のリニューアルではバレットグループ様から「サイトの制作だけではなく、会社として何を大切しているか、組織の理念のあり方などを見直すことができたことが収穫だ」というお言葉をいただきました。
私たちはサイト制作をおこなう過程で、企業のサービスや理念を精査し、見直すことで、今まで見えてこなかった在り方を提示することを目指しています。だからこそ、この言葉は本当に嬉しい一言でした。また、双方で信頼関係を積み重ねたことで、受賞したことがわかった際には「最高のチームで仕事ができた！」と言っていただけました。
一緒にイケてるサイトを作りませんか
LIGでは、バレットグループ様のように、イケてるサイトを共に制作していくクライアントを探しています。とことんまでクライアントに寄り添い、課題解決に向けて全力で取り組むチームが、貴社のお問い合わせをお待ちしています。
「こんなサイトを作ってみたい！」という担当者様がいらっしゃいましたら、ぜひ下記問い合わせフォームから、お気軽にご連絡くださいませ。
- 追記
本プロジェクトが、10月に発売された「WD（Web Designing）」12月号に掲載されました。こちらも、よろしければご覧いただければ幸いです。どうぞ、よろしくお願いします。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
