大切なのは、プロジェクトメンバー全員が幸せになること | 17design. & Calmhectic inc. [ビックアイデア]

プロジェクトの経緯 – 「今回の方向性にとても合いそうな人がいる」

まず、こちらのプロジェクトはどういった経緯ではじまったのでしょうか？また、プロジェクトメンバーはどのようにアサインされましたか。

稲田：以前別件にてご一緒させていただいた越境​さんより「ビックカメラのプライベートブランドのブランディングを行っているんですが、そのウェブサイトの制作をご一緒しませんか」とお誘いいただきました。ブランドの方向性が固まり、ウェブのフェーズになってきたところでお声がけいただいた流れですね。

大きいプロジェクトで、プロジェクトマネージメントをしっかり行う必要があったので、こちらも以前お仕事をご一緒したことがあったPM／ディレクターの湊さおりさんにお願いしました。その後、企画やデザインを進めていく中で「今回の方向性にとても合いそうな人がいる」ということで、湊さんから代島さんをご紹介いただきました。

なるほど。稲田さんは基本お一人で活動していて、プロジェクトにあわせてメンバーをアサインしていくスタイルを取られていますね。

稲田：小規模案件だと私自身がディレクションをすることもありますが、中規模以上の案件ではPM／ディレクターをアサインしています。前職のデザイン会社を退職して6〜7年経つんですが、その間に元同僚たちがフリーランスになっていることが多く、そういった方々にお願いすることが多いですね。湊さんもお仕事をご一緒したときのディレクションが素晴らしく、いつかお仕事をお願いしたいと思っていたんです。

サイトの方向性 – 議論を重ねていくことで「VIを押す方向性」から「商品を見せていく」方向に

それでは、先方のオーダーに対して、どのように提案をしていったのでしょうか。

稲田：初回はヒアリングということで、越境さん、ビックカメラさん、私の三者で話し合いながら進めていったんですが、このタイミングで「ウェブサイト企画の種」と称して7つのアイディアを持参しました。既にVI（ブランドロゴである「Bフレーム」や展開ビジュアル）は決まっていたので、VIを活かした表現や、重要なキーワードだった「物欲」をビジュアルに落とし込む提案をしました。アイディアが溢れてくるビジュアルの方向性も比較的早い段階からあり、この企画の種をもとに三者でディスカッションをしていきました。

最初にお見せした時点では、ビジュアルも良くて分かりやすいBフレームを活かした案の評価が高かったんです。当初はブランドムービーをFVに配置したいという話もありました。ただ、そこで議論を重ねていく中で、ふと「言葉で伝えること」や「かっこよく見せること」よりも、「商品そのもの」でコミュニケーションを取ることのほうが大事なのではないか、という話になったんです。

そこから「ビジュアル的」「説明的」なものよりもっと「ワクワク」を感じられる表現を目指そう、という方向が明確になってきまして、ブランド名の「ビックアイデア」に基づいた、アイデアがたくさん溢れ出してくるような見せ方になっていきました。提案をタタキとしていろいろ議論していく中で方向性が明確になっていったんですよね。

VIなどもある中でビジュアルによりがちなところを、議論を重ねることで「ワクワク」の方向にチューニングができたわけですね。

稲田：当初はコンセプトやメッセージをしっかり伝えることを目指していましたが、同時に「自分語り」している印象にはしたくなかったですし、新ブランドだからこそ「商品」を早く伝えたいという気持ちもありました。そのためにも、まずは言葉ではなく「実際のプロダクト（商品の企画）」を見せることでブランドを知ってもらうのがいいのではないかと。

先方のPJメンバーの方からも自分たちは「企画屋なので」という言葉が出ており、そのあたりを強めるためにも、ホバーやモーダルにてコピーを大きめに表示しています。ブランドサイトにはいろんな見せ方があると思いますが、今回の「まずプロダクトを見てもらおう」という考え方はとても腑に落ちたところでした。

ポイント① – 代島さんのハイレベルな実装と、稲田さんのアイデアによる「相互のキャッチボール」

ではウェブサイトを見ながらお話をお聞きできたらと思います。まずFVについて。

稲田：前述の通り、新ブランドの「登場感」と商品でコミュニケーションする「ワクワク感」を大事にして、たくさんの「ビックアイデア」が溢れ出してくるような表現にしました。サイトを表示した際の最初の「おもちゃ箱」をひっくり返したような、たくさんのアイデアが弾けるようなモーション部分も代島さんに実装いただきました。

デザインのGOが出てからの実装フェーズにおいては、最初に私から大枠の動きのイメージを代島さんに説明させてもらったのですが、それを踏まえて代島さんから実装ベースで動きを見せてもらったんですね。そのときの実装レベルが私の想像をはるかに超えていて。それを見て、さらに私が思いついたアイデアやイメージを代島さんにフィードバックする。アイデア→実装→アイデアといった流れでキャッチボールしながらブラッシュアップしていくことができたんです。

代島：私の動きとしては、まずデザイン提案前に稲田さんからの細かい要望が箇条書きでまとめられていたので、フィジビリティのチェックをしました。実装フェーズではモックアップではなく本サイトベースで進めて、テストアップの段階で稲田さんからフィードバックをもらいながら調整していったという流れです。

ホバーするとBフレームが出てくるという、アイデアとVIのつなぎ込みも秀逸です。

代島：ホバー時の動きについては自由演技でしたね。できるだけ心地よく、サイトの雰囲気に合った「ワクワク感」ある動きにしようと考えました。技術選定については、テキスト部分をThree.jsで実装すると、どんどん拡大していく動きの中でギザギザしてしまったり、フォントを読み込むと重くなってしまうため、CSSで実装をしました。実はこのフォント、Noto Sansに長体をかけているんです。Nautsのデザイナーたちに見せたら「このフォント何！？」とワイワイ言っていて（笑）。種明かしをすると驚いていましたね。

代島：また、稲田さんからは「商品が大きくなってくるだけだと単調なので、ちょっとずつ回転するような動きを入れたい」という要望があったんですが、CSSで実装すると重くなることがわかったので、代わりにマウスの動きに合わせてカメラが少し動くようなエッセンスを加えました。

稲田：僕が想像で出してみたアイデアも、実際に実装するとなると現実的じゃないところもあって、そのあたりで代島さんから「これだったらどうですか？」と代案をいただけたので、とても助かりました。

ポイント② – 高揚感を掻き立てられる「黒背景＋レインボー」

ここのステートメントエリアではフォントのパターンやカラー、サイズ感がバラエティに富んでいて、それがメッセージと合致して「高揚感」を掻き立てられます。昔のビックカメラのショップ袋のオマージュなのかな、と。

稲田：そうですね。昔使われていたもので、ビックカメラ社内でもビックカメラといえば「黒背景＋レインボー（黒背景にカラフルな文字が並ぶビジュアル）」を思い浮かべる方が結構いらっしゃるみたいで。先方としても新しいプライベートブランドを立ち上げる際にまた使いたい、という意向があったので、せっかく使うんだったら、メッセージ性が強いところに使いたいと思い、ステートメントやフッターなど「想い」を伝えたいところで使用しています。

元のショッピングバッグは各メーカーのロゴが並んでいるため書体がすべて異なり、カラフルでにぎやかなんですね。それをリスペクトして、今回のウェブ表現でも意図的にフォントをバラバラにしています。丸ゴシック、明朝、細い書体が混在していますが、引いて見たときにブラックの上に「レインボー」が乗るような構成を意識しました。

黒背景＋レインボー表現はここの「ユーザーの欲」がまとめられたエリアにも活かされていますね。

稲田：ここはもともとデザイン的に静的なものでも成立すると考えていたのですが、代島さんのほうでうまく「ワクワク感」や「あらゆる欲がある雰囲気」を演出してくださいました。

代島：ここはですね、是非とも動かしたいと思っていました（笑）。プライオリティが低いとは思っていたのですが、無駄にスワイプとかもできるようになっています。

ポイント③ – サイト全体を通して感じる「さわったときの気持ち良さ」

特集エリアの見せ方、ディテールの演出も面白いですね。

稲田：ここもBフレームを活かして「雑誌の表紙」風のデザインにしているんですが、ホバーするとレイヤー感が出てフレームが際立つ表現になっています。もとのアイディアは私ですが、具体的な実装方法は代島さんが提案してくださいました。

代島：ここは最初稲田さんがFigmaでモックを作ってくれたんですよ。

稲田：Figma Make（FigmaのAIツール）で生成したサンプルを無責任に展開したんです（笑）。あと、左右に移動する矢印部分をクリックした際の「角度がついて動く演出」にしても、私が全然考えていなかったところで、代島さんが楽しく進んでいくような演出を加えてくれました。

ここの小さなBフレームがぴょこぴょこ動くところもかわいいのですが（笑）。代島さんのアイデアですか？

代島：はい、僕のアイディアですね（笑）。

稲田：ここはテストアップのときに代島さんから「ここで何かします」というコメントがあって（笑）。何かが実装されるのだろうなと思い、私も楽しみに待っていました。

PRODUCTSの商品ごとの色分けはどういう意図があるのでしょうか。

稲田：これはクライアントにプロダクトのキーカラーをスプレッドシートに落としているものなんですが、実際の商品のパッケージも色分けされているんです。ベーシックなものは赤なんですが、違うラインのものは黒だったり。その実際のパッケージと合わせたいなと思い、商品ごとに色分けがされています。

代島：ここは公開当初はFVと同じ3D空間だったんですが、公開後に商品一覧が必要だなということで、最近改修をしたところだったんです。

その下が欲の窓口のエリアです。欲の投稿に関しては、ユーザーの声を抽出できるようになっていますね。

稲田：欲の窓口に関してはオリエンテーション時からあったもので、お客様の声を反映したものづくりをしていきたいというお話でした。ブランドが商品を提供するだけではなく、ユーザーの体験・感情・物欲を参考に、ユーザーとともに「良いより、よくぞ。」な商品を生み出していく宣言としてのエリアになっています。

フッターエリアまで見終えたところで、おふたりが気に入っている箇所を教えていただけますか。

稲田：個々のイージングを含め、カラフルになるホバー、スクロールした時に出るぴょこんという動きや、FVのモーダル部分のイージングの気持ち良さとか、大きい動きから細かいところまで、代島さんがすべての動きに「心地よさ」を入れてくださっているんです。サイト全体を触った時の気持ちよさがとても気に入っています。

代島：触り心地の良さや気持ちよさはどんな案件でも心がけていますが、今回は今まで作ってきたサイトとは明らかに違います。通常は一つのサイトであまり多くの動きのパターンを作りすぎないようにして統一感を出すようにしているのですが、今回は「おもちゃ箱をひっくり返すようなワクワクするサイト」なので、あえて随所にいろんな動きをつけました。統一感よりもワクワク感を優先した、自分にとってのチャレンジでもありましたね。

まだリリースして間もないですが、ローンチ後の成果はどうでしたか。

稲田：クライアントからは「ワクワクします！」「感動しています」など、ありがたい言葉をいただきました。加えて、ウェブサイト制作時に提案した「欲の窓口企画」は、ブランドの方向性を確立していくための柱になっているそうで、企画が有効に機能したこともうれしかったですね。

また、黒背景＋レインボーをはじめとした、ウェブ用に制作した各種ビジュアルをブランド発表会や各種メディアサイト掲載時にも使っていただけたんです。ウェブ用のクリエイティブがウェブの枠を超えて、ユーザーに届くブランドイメージ・プロダクトの一端を担えたこともひとつのうれしい成果でした。

「チーム全体のグルーヴ」と「関わる全員が仲良くなること」

このプロジェクトを経てチームのみなさんが得たものはありますか。

稲田：「制作側で制約を決めないこと」の大事さと面白さを感じられたことです。通常だと予算、スケジュール、実装難易度など、どうしても様々な制約を考えてしまうのですが、「ワクワクするものを作りたい」という先方の熱意と、湊さん、代島さんとのチームであれば何を提案しても実現できるだろう、という安心感のもと、「気持ち先行」で進められるプロジェクトだったのが私としては大きかったですね。

代島：一言で言うなら「グルーヴ」です。稲田さんも湊さんもとにかく優しくて、こちらに無駄な負荷が発生しないように、常に先回りして対応してくれていました。なので自分も純粋に「サイトがより良いものになること」だけを考えて手を動かすことに集中できましたし、「チームが期待している以上のものを作りたい」という気持ちも自然と高まりました。結果として、チーム全体にとてもいい循環が生まれたと思います。

稲田さんは「気持ち」、代島さんは「グルーヴ」。どちらもコミュニケーション的なことで、おふたりとも感じたことが近いですね。

稲田：そうですね。まずクライアントに熱意がありましたから。だから、こちらも熱意を持って返せる。そして、湊さんのしっかりしたプロジェクトマネジメントと、代島さんの技術力という安心感から、フィジビリティへの不安を超えて「やるべきだからやる」という気持ちで進められました。

代島：今日のインタビューで話してきたことがまさに「グルーヴ」だと思うんです。お互いがリスペクトを持って「こうしよう、もっとこうしよう」というディスカッションができると、どんどんいいバイブスが出てきて、ひとつのバンドのような「グルーヴ」が生まれていくんです。こういうグルーヴを感じるのって、年に数回あるかどうかなんですが、稲田さんが誠実にいろんなことに対応してくださったのでとてもやりやすかったです。

なるほど。今の熱意とグルーヴのお話から繋げてお聞きしたいのですが、みなさんはクライアントワークにおいて、いつも何を重要視していますか？

稲田：重要視しているのは「プロジェクトに関わる全員が仲良くいられること」です。いい関係性があれば、様々な課題にも助け合い、ポジティブに取り組むことができる。それは自ずと良い結果に結びつくはずだと信じています。

その実現のために意識しているのは、約束を守ること、明るくいること、冷たい言い方をしないこと、正直にぶつかること、プロジェクトメンバーが不幸にならないこと。フリーランスのデザイナーは様々な役職の間に立つことが多いので、「ビジュアル面」だけではなく「プロジェクト全体の空気感」もデザインしていけるようになりたいと思っています。
代島：アサインいただいた以上、期待に応えるだけではなく、プラスアルファで「制作物の価値を上げたい」という気持ちは常にあります。そして、これは稲田さんと共通する感覚かもしれませんが、人生において一緒に仕事ができる数には限りがあると思うんです。せっかくご一緒するならプロジェクトを通じて仲良くなって、また次のプロジェクトで一緒にできたら最高ですし、仕事に限らず、それを超えた繋がりになっていくことが、自分の人生の財産になっていくのではないかと思っています。

「プロジェクトの空気感のデザイン」や「仕事を超えたつながり」。これってフリーランスとして毎回異なる方と組む立場だから生まれてくる感覚なのかな、と感じたのですが。「クオリティ」と「人間関係」は相反しがち（組織だと厳しい物言いになりがち）なところもあると思うのですが、おふたりの感覚は、組織に属さないところから生まれているのでしょうか。

稲田：根本的に、友達を作りたいと思って生きていますね。どれだけ素晴らしいサイトができても、その結果みんなの仲が悪くなって二度と会えなくなるのはとても悲しいです。クオリティは追求しながらも「プロジェクトメンバー全員が幸せでいられること」。それを大切にしたいと思っています。もちろん品質が低いと誰にも頼んでもらえなくなるわけで、その点このプロジェクトではみなさんが高いレベルを維持しながら、いい関係性を築けたことがうれしかったですね。

代島：何のために仕事をするかというと、突き詰めると「幸せになるため」だと思うんです。だから、仲が悪くなって終わりでは残念すぎますよね。稲田さんと同じで、一番気をつけているのは「相手をリスペクトする気持ち」を持ち続けること。どんなにきついやりとりがあっても、それがあればなんとかなると思います。

稲田：その点では、ビックカメラさんも熱意を持ちつつ、私たちにリスペクトを持って接してくれました。だからこそ制作チームとしてもしっかりお返ししたいという気持ちになり、モチベーションを維持できた。クライアントの制作チームへのリスペクトもうまくいった要因のひとつだと思います。

代島さんはデザインコレクティブNautsにも参画していますね。先ほどもフォントの話でメンバー同士盛り上がったとのことでしたが、Nautsという場所は、仕事面でもメンタル面でも情報共有できる場として機能しているのでしょうか。

代島：はい、かなり。Slackでいろいろなことをワイワイと話していますよ。ほとんどのメンバーが一人で活動しているので、きっと寂しくて、みんなと話せることがうれしいはず（笑）。話したり相談したりすることで精神的に支えられている部分があって、個人的にもとてもありがたいです。

なるほど。ここ最近はフリーランスから再就職する流れもちらほら出てきているように感じます。「会社に属さない個人のクリエイター」の可能性について、おふたりの今と重ねてお聞きできますと幸いです。

代島：Nautsという形でやってきた2年間を振り返ると、メンバー同士で協業できることももちろんなのですが、それ以上に「精神的な支え」になっていることが大きいんです。一人だと気軽に相談できる人がなかなかできないですし、疲弊している時ほど孤独を感じやすいですよね。そんな時に相談できる仲間がいると思えるだけでも本当に心強い。さらにメンバーが作った素晴らしいアウトプットを見ていい刺激ももらえるというところも良いですね。

また、NautsのSlackには「雑談専用チャンネル」もあって、例えばクラフトビール、美容、猫など、本業とは全く関係のない話題で盛り上がることも多いんです。そういう一見他愛もないやりとりが、心を豊かにし、さらなる活力を与えてくれていると感じています。

稲田：個人のクリエイターの強みは「責任感を持って仕事に向き合えること」だと思います。体調不良でも自分がやるしかないですし、成果物が名刺代わりになるというプレッシャーもあります。でもだからこそ、最後までやりきるという意識が芽生え、「あと一歩」を粘れるのは良いことではないかな、と。

また、提案・アサイン・進行方法・デザインファイルの作り方などを組織の枠に縛られず、自分で自由に考えられるところもおもしろいです。どういう形での仕事ならば、自分の最大のパワーを出せるのか。そこを自由に、毎回実験してカスタムできる。そこがフリーランスならではの面白さではないかと私は思います。

ビックアイデアブランドサイト：制作クレジット
Project Manager/Director：湊さおり
Art Director/Designer：稲田拓郎（17design.）
Front-end Developer（ビックアイデア公式サイト）：代島昌幸（Calmhectic inc.） Front-end Developer（ビックカメラ.com 特集ページ）：Ciraf inc.
Brand Owner/Brand Direction：ビックカメラ
Creative Direction/Planning/Produce：越境
Art Direction/Logo Design/Graphic Design：terminal Inc.
Movie Production：zow films