ファングリーの公式サイトができるまで~クリエイター陣の想いやこだわりを取材!

ページのイメージ画像

こんにちは。
ファングリーのコンテンツディレクター、宇佐美です。

会社の「顔」といえば、公式サイト。
そのなかにはさまざまなこだわりが詰まっており、公式サイトを見れば会社の特徴や「伝えたいこと」が浮かび上がってきます。

ファングリーでも、会社の設立に合わせて新たに公式サイトを立ち上げました。
今回は、そんな公式サイトの制作に関わったクリエイター陣の想いやこだわりをご紹介します。

ディレクション:ファーストビューで全部を成立させたかった

八川

――1人目は八川(はちかわ)さん、よろしくお願いします。

八川:「八川です。よろしくお願いします」

――八川さんの今回の役割について簡単に教えてください。

八川:「クリエイターに力を最大限発揮してもらえるように、そして会社として伝えたいことを最適な形で落とし込めるように、全体の調整役として動きました」

――自分たちのサイトだからこそこだわった点などはありますか?

八川:「基本的には『自社のサイトだからどうのこうの』というのはなく、クライアントワークと同じように向き合いました。まず制作目的やサイトの方向性を明確にするために、みなし顧客でもある代表の松岡さんに対して徹底的にヒアリングを行いました。その後、コンセプト設計、ターゲット設計、コンテンツ設計といった上流工程に多くの時間を使いました。正直もっと時間が欲しかったですが、まあ、どんなプロジェクトでもだいたい時間は足りないので(笑)」

――こだわろうとすると、どこまでもこだわってしまいますからね。

八川:「お客様のWebサイト制作と一番違ったのは、『発信者(つまり自分たちのこと)や業界のことを知っていた』という点です。分社化する前からコンテンツマーケティングやメディア運営、クリエイティブ制作の事業に取り組んできたので、業界への理解はありましたし、競合のポジショニングもある程度分かっていました。なので、逆にあまり固定観念に囚われないことを意識しながらクリエイティブの戦略を紐解いていきました」

――そうした分析がサイトの設計などに生きているわけですね。

八川:「そうですね。ファーストビューの見せ方は、こだわったポイントのひとつです。当初から『メインビジュアルには動画を使いたい』という意向があったのですが、ただ動画を見てもらうだけでは工夫がないですよね。動画で雰囲気をイメージしてもらいつつ、ブランドメッセージで当社の核心部分を理解してもらい、気になった方に迷わず行動してもらえるようにする――。デザイナーの宮越さんに相談しながら、これら全部を成立させることを意識しました」

――なるほど。時間が足りないなかで、納得できるサイトに仕上がりましたか?

八川:「みなさんの協力もありサイト自体には満足していますが、進め方については反省があります。もっとうまく舵取りして公開まで持って行くべきでしたが、最後は全体的にバタバタしてしまったので、そこは悔しいです。本当は、松岡さんにドヤ顔で納品のプレゼンをしたかったんですけどね」

――ちなみに、宇佐美のライティングについてはどうでしたか?

八川:「少ない情報から、伝えたい内容に仕上げてもらえました。文脈を意識した解釈といいますか。まさにコンテキスト思考ですね。あと、宇佐美さんには文章に限らず、サイト制作全般における客観的な意見や指摘をたくさんもらいました。『ライターとして自分の仕事がしやすくなるように』という考えのもとでのアクションだったのかもしれませんが、そういった進め方や関わり方は素晴らしいと思ったし、そういったフィードバックがあるからこそ全体のクオリティが上がっていくのかなと感じました。真面目で申し訳ないですが」

――いや、真面目でいいですよ!そういってもらえると嬉しいです。

デザイン:四角形のレイヤーは「積み重ね」のイメージ

宮越

――続いては、デザイナーの宮越さんです。

宮越:「よろしくお願いします」

――宮越さんはファングリーのロゴデザインから関わっています。ロゴデザイン制作の紆余曲折については、また別の機会にお伝えできればと思いますが。

宮越:「そうですね。確かに紆余曲折ありましたので(笑)」

――早速ですが、デザインについてとくにこだわったポイントはどこですか?

宮越:「公式サイトの訪問者は、なんらかの経緯でファングリーという会社があることを知り、『どんな会社なのか』を調べに来た方がほとんどだと思います。そんな方たちに対して、『この会社なら自分たちにしっかり向き合ってくれそう』『課題解決の糸口を見つけてくれそう』『面白い企画を提案してくれそう』『質の高いコンテンツをつくってくれそう』という印象を持ってもらうこと、それを強く意識しました」

――特に時間をかけたポイントはありますか?

宮越:「気を遣ったのは、サイト全体の配色ですかね。配色を考える際はまず、最も大きな面積を占めるベースカラー、サイトの主役になるメインカラー、そしてユーザーの目を引くアクセントカラーの3つを決めます。ファングリーのコーポレートカラーであるゴールドと濃いグレーをそれぞれメインとアクセントにし、文字の視認性やコーポレートカラーとのバランスを考えて白をベースにしました。と、そこまでは良かったのですが、色のバランスがなかなか難しくて」

――具体的には?

宮越:「ゴールドもグレーも、色味によってはぼんやりした印象になってしまいます。彩度を高くすればパキッとした印象になりますが、ビビッドな色同士を合わせると、うるさく見えたり会社として打ち出したい印象を消してしまったりもするんです。なので、色を使う面積や文章の読みやすさなどもふまえて調整する必要がありました。細かい部分で言うと、ロゴで使用しているゴールドとサイトのデザインに使用したゴールドは違う色です。ロゴのゴールドをそのまま使うときつい印象になってしまうので、少しトーンを落としています」

――完成したサイトは、シンプルですがつくり込まれている印象があります。

宮越:「課題を抱えている経営者や事業責任者、Web担当者などが業務の合間に見ることを想定すると、サイトは極力シンプルで分かりやすいほうがいいですよね。ただ、“手抜き感”が少しでも出てしまうと、信頼や期待感を損なってしまう恐れもあります。そのためデザインを通して『つくり込まれている印象』を与える必要があるのですが、今回は大小さまざまな四角形を重ねるように使い、トップページに秩序があるようなないような独特の空間をつくりました。四角形のレイヤーは『コンテンツの積み重ね』のイメージです。プロジェクトは継続性こそが重要ですし、自分たちファングリーにとっても『積み重ね』は重要なキーワードのひとつかなと思っています」

――「単純に見た目をカッコ良く」という思考になりがちなところ、自分たちのエッセンスをきちんとデザインに乗せているんですね。

宮越:「自分たちがつくる意味をまず自分たちで理解し、デザインを通してそれをお客様にも感じてもらうこと。それが私たちの仕事であり、ファングリーの価値だと思っています。……すいません、カッコつけすぎてちょっと恥ずかしいですが(笑)」

コーディング:いい仕事を見せたいというプライドもあった

河島

――3人目は、コーダーとして宮越さんのデザインを形にした河島さんです。

河島:「よろしくお願いします」

――河島さんは普段、マーケティング企画と制作ディレクション業務が中心ですが、デザインやコーディングの実務経験もあるんですよね。今回はコーダーとしての参画でした。

河島:「そうですね。“なんでも屋”みたいな側面もありますが、『なんでも高いレベルでできる人材』になれたら最高ですね」

――河島さんが今回、自身の領域でとくにこだわったポイントについて教えてください。

河島:「今回はコーダーとして、そしてサブのディレクターとして八川さんをフォローするような役割でした。コーダーは、文章・動画といったコンテンツやデザインがインターネット上で閲覧できるように、HTMLやCSSなどを使ってブラウザ上に構築する仕事です。コーディングは後工程なので納期が厳しくなることも多いですが、やはり今回もそうでした(笑)」

「ただ、事前に想定はしていました。なので、できるだけ『作業待ち』『確認待ち』の時間をつくらないように、未完成でもコンテンツがある程度揃った時点でコーディングを行い、すぐに画面でチェックしてもらって修正する――というのを徹底しました。これによって作業はかなり煩雑になりましたが(笑)、迅速かつ着実に状況を進捗させられたのではないかと思います」

――ディレクターっぽい発想ですね。

河島:「そうかもしれません。実際にサブのディレクターでもありましたしね。公開直前の最終盤では、ディレクターとしての実務経験が活きた部分もあると思っています」

――CSS設計についてはいかがですか?

河島:「CSSは仕様上、『表示崩れ』がつきものです。また、設計が良くないと運用時にコード量が増えてしまい、場合によってはWebパフォーマンスに影響が出てしまうのですが、それが極力起きないような設計を意識しました」

「それと、自分はバリバリのコーダーではないのですが、新会社の顔となるサイトということもあるので、設計も含めて『ある程度しっかりしたコーダーが作業したんだな』というところを見せたかったというプライドもありました。ちょっとだけ技術よりのお話をすると、FLOCSS(フロックス)というCSS構成案を元に、少しだけ河島流のカスタマイズを加えています。そのあたりは制作者としてのこだわりと言えますかね」

――河島さんのメインミッションであるマーケティングに貢献してくれるサイトになるといいですね。

河島:「私もそう思っています。ファングリーは『見込みの獲得→育成→セールス→サービスの提供(企画・制作・運用)→カスタマーサクセス』と一貫して対応できるのが強みなので、そういった差別化できる部分が伝わるといいですね」

映像制作:働き方や「自分たちの日常」を通して、想いを伝える

内藤

――最後は、サイトのファーストビューにある動画の制作を務めた内藤さんです。

内藤:「内藤です。よろしくお願いします」

――今回の動画には、撮影から携わったんですよね?

内藤:「正確には、企画構成、コンテの作成、そして現場のディレクションから撮影、編集まですべてに関わりました」

――内藤さん自身も出演していましたね。

内藤:「今回のプロジェクトにおいては、自分が出演しているカットを自分でディレクションしながら撮ったのが一番難しかったですね。初めての経験でした(笑)。当初のイメージとしては、ファングリーのロゴをアニメーション化させたものを検討していましたが、Webサイトの初稿デザインを見て合わないなと感じたので、最終的には落ち着いたテイストの実写に切り替えました」

――とてもいい味出していたと思いますよ!内藤さんが動画で表現したかったことは何ですか?

内藤:「ファングリーのブランドメッセージを表現したいなと思っていました。松岡さんとは最初に『映像の中でスタッフは出したいね』という話をしていたので、ブランドメッセージにも含まれている『伝える』をテーマに置いて、それぞれの職種、それぞれの業務の日常を切り取るイメージで撮影しました」

「所作や表情からクリエイターの“職人感”が伝わるようなカットを意識し、同時にクリエイターたちがコミュニケーションを取りながらゴールを目指していく感じも演出しました。その感じがウチっぽくていいかな、と思いまして」

――そうですね。目的を達成するためにスタッフが連携していく感じはファングリーらしいです。クリエイターというと黙々とクオリティを追求するようなイメージですが、お客様の要望を具現化するうえでは「コミュニケーション」も欠かせません。

内藤:「また、新しい情報を発信していく姿勢も表現したかったので、渋谷の街を俯瞰する画を入れました」

――そうそう、あれはオリジナルの映像でしたね。

内藤:「あのスクランブルスクエアから会社方面を映したカットはお気に入りです。スクランブルスクエアの屋上で撮影をした際は、あまりの高さに腰が抜けそうになりましたが(笑)。こだわってよかったなあと思っています」

「自分たちはクライアントが言語化できていない魅力を言語化する、という役割を求められています。『動画で言語化』というのも難しいのですが、動画は文字だけよりも何倍も多くの情報を届けることができるので、その点を強く意識して成果につながる動画をつくっていきたいですね。そういった要望や想いを持ったお客様に、『コンテンツで、伝える。』ことはできたかなと思います」

――うまくまとめていただき、ありがとうございました。最後に、何か伝えたいことはありますか?

内藤:「ええと、そうですね……。ドラマ仕立ての大がかりな動画企画や、ドローンの撮影などもやっています。そういった内容も、ぜひぜひご相談いただければと思っています!」

まとめ

サイトは「公開して終わり」ではなく、公開したタイミングがスタート。
事例コンテンツや採用コンテンツ、ソリューションの掘り下げコンテンツなど、追加予定ページが目白押しなので、今後の運用を通じて、未完成のサイトがどう変化していくのかが楽しみです。

次回もどうぞ、お楽しみに!