Webサイトの制作方法を実例でご紹介する「Webサイトのつくりかた」シリーズの第二弾!ということで、今回は各業界で注目の「CHILL OUT」ブランドサイトのつくりかたをご紹介します。
前回の「魔法部ブランドサイトのつくりかた」では、予想を遥かに超えた反響があり、チーム一同大変喜んでおります。今回の記事もWeb制作の参考となるように大ボリュームでお届けしたいと思います!
01. CHILL OUTとは
CHILL OUT
https://butfirstchillout.com/
「CHILL OUT」は、I-neと日本コカ・コーラの合同会社Endianから発売されている日本発のリラクゼーションドリンクです。発売後から多くの方に愛飲されており、ゆうこすさんや有吉さんもSNSにアップされているので、ご存知の方も多いのではないでしょうか。
案件概要とクレジットはこちら👇
02. はじまり
はじまりは、弊社でWebサイトを制作した「My BOTANIST」の担当者さまからのお声がけでした。
I-neの皆さんとは他の案件でもご一緒しているので、MEFILASなら自分たちの想像を超えるクリエイティブが出てくるという期待からご指名いただけたそうです。
というのも、I-neでは社内でクリエイティブを担うチーム「ブランディング本部」が存在します。Webサイトもブランディング本部内でいくつも制作されているのですが、あえて「Web制作会社」である弊社に依頼するというところに期待の大きさを感じました…!
初回のお打ち合わせにはプロデューサーの藤原とデザイナーの神杉が参加し、案件が動き始めます。
その中で受けたオーダーはこちら👇
ターゲットの傾向や特徴などをお聞きしたり、CHILL OUTを飲ませていただいたりと商品や方向性に対する理解を深めるお打ち合わせとなりました。
打ち合わせが終わってすぐに、3D表現との相性が良いのでは?とふたりで話していたそうです。
CHILL OUTへの理解が深まったことで、どんどんアイデアが膨らんでいきます。ワクワクしながら帰社し、すぐに企画案の検討に移りました。
クライアントからは、お打ち合わせ後に資料一式(サイトマップ/ワイヤーフレーム/参考サイト/スケジュール/商品パッケージ資料)と、ブランドディレクターへのヒアリング内容を共有いただきました。
ご手配いただいたワイヤーですでにこの完成度...👀
サイト全体の輪郭が見えてきたので、まずは制作にかかる費用を算出。予算もお伺いしていたので、予算に合わせたお見積もりと、プラスαの提案を含めた予算を超えたお見積もりも提出しました。
というのも、目的に対して自分たちがチャレンジできる範囲を示すことが結果的にクライアントのためになると考えているので、予算を超えるものであっても可能性があるものは積極的に提案しています。
それぞれのお見積もりのメリット・デメリットをご説明し、担当者さまが内容に不明な部分や不安な箇所が生じないようサポート。その結果、ご提示いただいていた予算から倍額となる費用で決裁いただきました。
ただ、確定した費用でも、クライアントの要望をすべて満たせる費用ではなかったため、弊社はクリエイティブに注力できるよう作業分担をクライアントに依頼し、役割を整理しました。
03. 企画
費用が確定したところで、企画の提案に向けて走り出します。プロデューサー・ディレクター・デザイナーの3人でブレストを行い、アイデアを出していくところからはじめました。
その中でもポイントとなったのは「リラックス」の捉え方。リラックスという言葉から連想するイメージは幅広く、ふんわりとしたくつろぎ感や心のゆとりなど、様々な捉え方ができます。
ブランドへの理解を深めるにつれ、CHILL OUTのリラックスは昂まった気持ちの落ち着きやリフレッシュといった方向性が、ブランドの合致するものと思い至ります。
この方向性がブレないように、社内メンバーにヒアリングしたり、検索エンジンやSNSでリサーチしたり......とことん調べ抜くことで、目指す「リラックス」を表現できる様々なアイデアが思い浮かびました。
例えば、リラックスと相性の良さそうな「音楽」をWebサイトに入れ込む案も...!
ブレストで洗い出したポイントや、リラックスの方向性を定めていく中から、「CHILL OUT」というブランドとしてどう表現するべきかを考えます。
その中でも軸となったのが、初回お打ち合わせで考えた3D表現案でした。
同じく、お打ち合わせに同席した神杉も同じことを思っていたようで…
実は、弊社では3D表現を使用したデザインの例はほとんどありません。なので、3D表現で本当に「リラックス感」「チル感」を出せる表現・演出ができるのか、新しさを感じられるのかなど、狙った訴求ができるのかを検証することにしました。
しかし、弊社メンバーのほどんどは3Dソフトを触ったことがなく、どうすれば良いのかを手探りで探すところからスタート。まずは絵的なところから検討ということで、Adobe Dimensionを使用して缶のモックを作成し、デザインサンプルを作成して3D表現の見え方を確認することにしました。
こうしてデザインサンプルを作りつつ、エンジニアの金納に技術面の相談も行い、見た目・技術共に検証した結果、プロダクトのイメージが強く訴求できそうだとチーム内で意見が一致。
こうして方向性と軸に沿って案出しを繰り返し、最終的には、「①ビジュアライザー案」「②流体案」の2案をご提案することになりました。
① ビジュアライザー案
② 流体案
リモートでのご提案となったため、サンプルデザインと各案の解説をチャットでお送りし、電話で補足させていただきました。
また、弊社では提案時の目的を明確にするようにしています。
精度の高いサンプルで確認してもらうことで、企画の意図を正しく伝えることができ、認識のすり合わせが高いレベルでできました。
方向性もおすすめのビジュアライザー案で決まりましたが、ご提案内容に含まれていた音楽を使用した演出は予算とスケジュールの都合で残念ながら実現ができなくなったため、ビジュアライザー案を元に、3D表現の浮遊感をベースとしたデザインで進めていくことになりました。
04. デザイン
企画の方向性に合わせてサイト全体のデザインを制作していきます。今回サイトのデザインを担当した神杉に、デザインのポイントを聞いてみました。
要素の大きさが印象的なエリア!
3Dモデルを使うことによって他にも特に気にしていた点があるそうで…
こだわりが詰まった影💪
こうしてトップページを作り上げ、クライアントにご確認いただきました。方向性に関しては大きなチェックバックはありませんでしたが、「もっとチル感・リラックス感が欲しい」とのご意見をいただきました。
改めて社内で検討したところ、全体を通して絵力が強くなっていたため、「リラックス」のイメージに近づけるために強さを抑える必要がありました。
強さを抑える調整は、余白を広げたり要素のレベル感を落とす形でメリハリを効かせていた箇所に調整をかけていきます。
その際に苦労したのがエディトリアル部分の扱いでした。
一見すると左のほうがリラックスを感じれますが、デザイン全体のバランスをみて、文字のまとまりを出しながら要素間の余白を強めにすることで文字としての読みやすさを担保しながら、リラックスを表現しています。
デザインの調整と合わせて、演出プランもクライアントにご説明させていただきました。
こうしてデザインの提案が進んでいた頃に、クライアントの諸事情によりスケジュールに遅延が発生します。公開日は延期できなかったため、今回は「ライト版」と「リッチ版」といった、バージョンを分割して納品させていただくことになりました。
ライト版のWebサイトはこちら👇
ライト版では、パララックス演出はなしで、簡易的に浮遊感とリラックス感を演出するために背景にループ動画を入れています。
ライト版でもパララックス処理を入れることを検討しましたが、3Dとの調整に時間がかかる懸念があったため、パララックス処理はやめ、浮遊感演出でレンダリングと作業工数に影響の少ない、背景にループ動画を入れることで対応しました。
05. 素材作り
デザインの進行と並行して素材の用意も進めていました。特に必要となったのが「缶の3Dモデル」と、ライト版で使用する「背景ループ動画」です。
【3Dモデルの作成】
3Dモデルの発注が初めてだったこともあり、手探り状態で3Dモデルの制作会社を探し、費用感やスケジュールが合う会社にご依頼しました。納品されたデータから更にクオリティを上げるべく、自分たちが納得できるところまで調整することを決めました。
ここで、ディレクターの原田が「やってみたい!」と手を挙げ、3Dデータの調整を担当することになりました!
ちなみに、この時点で3Dモデルを作り上げるスキルも、調整していくスキルも持っておらず、やってみたいという気持ちだけしかなかったそうです。
原田の頑張りが缶に反映され、よりWebサイトに馴染む、リアルな缶に進化しました!
劇的ビフォーアフター...!!
途中途中で何度もサンプルをテストサイトにアップし、見え感を調整しながら制作したそうです。Webサイトに馴染みながら、よりリアルな缶にしていく調整の内容を具体的に聞いてみました。
全員で確認しながら細かく調整を入れ、より質を高めたことで、Webサイト全体のクオリティーが高まりました!
【背景ループ動画の作成】
ライト版では背景に円がたくさん並んで波のように動いているループ動画が必要でした。当初はプログラムで3Dプロダクトに同期した演出をつくる想定でしたが、ライト版では時間の都合でループ動画で対応することに。
スケジュールやメンバーの進捗状況を考え、今回はプロデューサーの藤原が背景動画の作成を担当しました。
藤原はFlashで動画やWebサイトを制作した経験があったので、今回もAdobe Animateですぐに作り出していたそうです...!
今回は原田がやってみたいと挑戦したこと、藤原がAnimateを使用した経験を活かしたことで、デザイナーのスケジュールを圧迫することなく高品質な素材を用意することができました。
06. プログラミング
プログラミングに入るため、エンジニアの金納が本格的にチームに合流しました。企画やデザイン段階でまとめていた演出案をエンジニアに伝え、より良い表現・実現可能か検証しながらプログラミングを進めていきました。
今回のキモとなった「リラックス感」の演出ですが、ここは金納もこだわりを持って実装しています。
缶の表現にもかなり時間をかけて調整しており、Webサイトを閲覧した時の「ちょうど良い」を探ります。
3Dの調整とあわせて大変だったのが缶の影です。デザインでご紹介した通り、缶の影は3Dのデータではなく、画像で作成した影を使用しています。
そのため、WebGL上で処理を行うのではなく、画像の影を缶に付随させることで3Dではありえない影を表現しています。
表現にもこだわりながら、使いにくくならないようにしっかりとチェックします。
「パララックス」と「3Dモデル」という字面だけでもレンダリングの重さが気になりますが、基本を見直すことで軽量化を図りました。
一通り実装が終わり、リラックス表現のなめらかさと操作性の向上、アニメーションの気持ち良さやメリハリといった細かな部分を調整していくことに。
メンバー全員をオンラインで繋げて、修正→実装→確認→調整…をその場で繰り返しブラッシュアップを重ねました。細部まで気を抜かずに調整を重ね、全体のクオリティーを上げていきます。
メンバー全員でひたすら調整を繰り返したブラッシュアップポイントを一部ご紹介いたします👇
■ オープニングアニメーション
デザイナーの神杉が作ったオープニングイメージのGIFアニメに、エンジニアの金納のアレンジを加え、全員でアップデートしていきます。
■ キービジュアルのアニメーション
■ 下層ページのメインビジュアル
こうして細部にまで拘ったブランドサイトができあがりました!
07. 公開
こうして公開直前まで調整を繰り返して完成させたこだわりのサイトが公開されました!
「CHILL OUT」ならではの「リラックス」の方向性を定め、ブランドイメージに沿った3D表現にチャレンジして制作したサイトですが、ご依頼いただきましたI-neの担当者さまからはこのような評価がいただけました。
また、CSS Design Awards・Awwwards などのWebサイトアワードの各賞を受賞することができ、クライアントにもお喜びいただくことができました。
その他にも、ブックマークサイトへの掲載やWebGL総本山さまでご紹介いただくことができました。(エンジニアの金納がとても喜んでおりました🙏)
さらに、Web Designing 12月号の、編集部の選ぶ注目のデジタルコンテンツ「WD SELECTION」のコーナーに取り上げていただきました。
今回は「CHILL OUT」のブランドサイト制作を通して、Webサイトのつくりかたをご紹介しました。
それでは、次回の更新もお楽しみに!