IN FOCUSのコーポレートサイトが、7年ぶりにリニューアルしました。長年のパートナーであるCREBAR FLAVOR（クレバーフレーバー）さんに実装を依頼したこのプロジェクト。「走りながら形にしていった」という制作の舞台裏や、なぜ今、どんなことを考えリニューアルしたのか、プロジェクトに関わった6人に話を聞きました。
登場人物
IN FOCUS
・井口（CEO）｜プロジェクトの大枠と方向性を担当
・兼石（Chief Creative Director）｜クリエイティブの統括、プロジェクトの推進
・山田（Web Designer）｜デザイン制作
CREBAR FLAVOR (https://cfv.co.jp/)
・コバタクさん（CEO）｜プロジェクト初期の枠組み整理を担当
・クロスさん（代表取締役CTO）｜テクニカルディレクション、インフラ設計、CMS構築
・カズさん（Web Engineer）｜フロントエンド実装
ーきっかけは「一緒にやりませんか？」
井口：
最初は、コバさんから「何か一緒にやりませんか？」と声をかけてもらったのがきっかけでした。何がいいかな、としばらく考えていたのですが、IN FOCUSのコーポレートサイトもそろそろ手を入れてもいい頃だよな、と思いいたり。前回のリニューアルから7年くらい経っていて、課題も出てきていたところでした。
兼石：
7年前のリニューアルでは「とにかくカッコいいサイトを作ろう」と力みすぎて深みにはまったりして、色々と大変でした。その時の経験から、今回はあえて力を抜いて、まずは走り出しやすい流れを作ることを意識しました。
今見えている課題——読み込み速度やCMSの改善など、機能的な部分の解決を主軸に据えて、そのついでにデザインも少し整えよう、というくらいのテンションで動き出しました。
やり出したらこだわりたくなるのは自覚しているので、そのスイッチが入ってからギアを上げればいい、と考えていました。
ベースのデザインは自分と、当時まだ在籍していた王くんとでさっと組み上げて、その後新しく入社した山田さんに引き継いでもらいました。
山田：
入社する前に「かっこいいサイトだな」と思いながら見ていたので、まさかそのサイトのリニューアルを自分が担当することになるとは想像していませんでした（笑）。
井口：
クレフレさんとは付き合いも長いし、お互いの性格も仕事ぶりも分かっている関係です。BLUE NOTE JAPANやASOBI SYSTEM、TOGA ARCHIVESなど、これまで多くのWebサイトを一緒に手がけてきました。今回のような柔軟な進め方ができたのも信頼関係があったからこそ。ざっくりいうと、仲がいいからできたって感じです。
コバタクさん：
井口さんとはサウナにも一緒に行く仲です（笑）。
実はタイミングも良くて。もともと、自分たちの新しいサイトのデザインをIN FOCUSさんにお願いしたいと思っていたんです。そんな折だったので、「それぞれの強みを活かしてお互いのサイトをリニューアルしましょう」という話になり。それですぐに共同代表のクロッシーにも相談しました。
クロスさん：
IN FOCUSさんの作る物は年々レベルが上がっているので、「どんなデザインが来るんだろう」というちょっとした恐怖もありました。きっとクオリティの高いものを求められるんだろうな、と。そこでもう一人ビビっていたのがフロントを担当するカズです（笑）。
カズさん：
始まる前は、「自分でちゃんと実装できるかな」という不安と緊張がありました。3Dとか凝ったエフェクトとか、そういうのが来ると予想して、自分なりにいろいろ準備したりして。結果的に、その想定はほとんど使われなかったんですけど（笑）。
ーリニューアルに込めたもう一つの意図。「今ならできる」と思えた理由
井口：
機能面とは別に、もう一つ大きな課題がありました。「何の会社か分かりにくい」という点です。クライアントから、「IN FOCUSさんって他にも色々やってたんですね」と言われることもあったり。複数の部門を持っている自分たちの強みをもっと分かりやすく伝える必要がありました。
兼石：
新しいサイトでは、まず映像でIN FOCUSが掲げる「デジタルブランディング」の具体的なイメージを可視化しました。その下にプロジェクトをタイル状に並べ、事業領域が俯瞰的に伝わるようにしています。普遍的なレイアウトではありますが、サムネイルを動画にして情報の密度を高めたり、遊び心のあるパネルを混ぜ込んだりすることで、IN FOCUSとしてのトーンも押し出しています。
前回は、サイト自体に 「らしさ」 を強く背負わせようとしていました。あれから実績もかなり増えて、その一つひとつにIN FOCUSならではの表現が込められています。7年経って、今はそれらが並んでいるだけで、「らしさ」や「強み」がストレートに伝わるような会社になっていました。
井口：
前のサイトを作ったのが2018年。当時と今とでは、会社の状態も取り巻く環境もかなり変わりました。クリエイティブスタジオ「CONTRAST」を立ち上げたり、オフィスの移転、さらにIN FOCUS NEW YORKも本格的に始動したり。やっていることも、会社の構造そのものも変わってきている。
当時は社員が15名だったのが、今は40名を超える規模になっています。組織がこれだけ変わってきているのに、サイトがいつまでも同じというのも、どこか違和感がありました。みんなのためにもアクションを起こしたかった。「会社が次のフェーズに入った今なら、ちゃんと整理できるかもしれない」という感覚がありました。
クロスさん：
デザイン案を見せてもらったときは、最初に構えていた分、少し拍子抜けしたというか、「想像していたよりだいぶシンプルだな」というのが率直な印象でした。でも、実績自体が強いので、「ただ並べるだけでも成立する」というのは伝わってきて。ファッションで言えば、Tシャツ一枚でサマになる人、みたいな感覚ですね。余計なことをしなくても十分かっこいい。
カズさん：
僕も最初は、「すごくシンプルだな」と思いました。でもよく見ると、画像の並べ方や余白の取り方、文字組みがとても丁寧で。単に置いているわけではなくて、ちゃんと意味のある配置になっているんですよね。
実装に入ると、「どう組もうかな」と悩むポイントはいくつもありました。ある程度形になってきてからは、特に余白やフォントサイズの調整についてIN FOCUSさんとやり取りを重ねました。
ー技術的なチャレンジと設計の工夫
クロスさん：
表層のデザインだけでなく、裏側の構造もアップデートすることが、今回の大きな挑戦でした。表示速度を早くするために、CMSをヘッドレス化したJamstack構成を採用しています。前のサイトもNuxt.jsを用いた擬似的なヘッドレスになっていましたが、仕組みとしてはもう古くなっていました。
カズさん：
個人的に大きかったチャレンジは、まだ扱ったことのなかったAstroというフレームワークを採用したことです。
従来のAPIベースの構成だと、データを取得してから表示するまでにどうしてもわずかな“間”が生まれてしまう。Astroを使うことで、事前にページを生成する形にできたので、表示時間のブランクをかなり抑えられたと思っています。技術的にも自分にとって新しい挑戦になりました。
クロスさん：
フロントのホスティングはCloudflare Pagesを使っています。サーバー構成を一から組もうとすると結構手間がかかるのですが、CloudflareはGitHubとの連携やドメイン接続、デプロイ構築などを手軽にセットアップできるところがとても楽で。そして何より、無料枠で十分まかなえてしまう。おかげでサーバー側の工数と費用をかなり削減できました。
CMSとの連携で少し複雑なことをやっているのですが、Cloudflareじゃなかったらもっと大変だったと思います。
井口：
IN FOCUSのサイトでも無料枠で成立する。ちゃんと設計すれば最適化できる。そういう選択肢を持てるのも大事ですよね。
クロスさん：
ニュースや実績の投稿が合計で数百件あるので、できればデータを引き継ぎたいという話もありましたよね。新しいサイトでは情報構造が変わっている部分もあったので、旧サイトのデータを変換して、できるだけ再利用できる形で移行しました。
兼石：
それは本当に助かりました。最悪、ゼロから流し込みをやり直す覚悟をしていたのですが、その手間がごっそり省けて整える程度で済んだのはありがたかったです。
他にも、前のサイトではできなかったことを色々と実現してもらいました。検索やフィルター機能の追加や、実績ページの中身を柔軟に組めるようにしてもらったり。細かい部分まで丁寧に対応してもらいました。
井口：
個人的に嬉しかったのは、プロジェクト一覧ページで、カテゴリーごとに掲載順を設定できるようになったことです。例えば、Web案件の一覧と映像案件の一覧とでは、それぞれ出したい順番が違うのですが、前のサイトではそれができなかった。かゆいところにも手が届くようになりました。
ー完成まで残り1割からの飛躍。コードの美しさという価値
https://www.youtube.com/watch?v=YFFWAwAwB1s&t=27s
兼石：
「今回は機能改善がメインで、演出はそんなに入れるつもりはない」という始め方をしたわけですが、実際に実装が9割ほど完成した段階でも、動きはほぼ入っていませんでした。そこまで来て、ついにスイッチが入りました。「なんかものたりないかな」と（笑）。
平面のデザインとしてはほぼ完成していましたが、Webはそこに触り心地やモーションを掛け合わせることで、体験に奥行きを出すことができる。半分わかっていたことですが、やっぱりそこまでやりたくなってしまいました。ただ、全体像が見えていたからこそ、どこに演出を足したいかは迷いなく決められました。
井口：
前のサイトでは、どんな表現を作るかに重心を置いていたところがありましたが、今回は事業の分かりやすさを重視しました。ただ、分かりやすさだけを突き詰めると個性も薄まってしまう。「ものたりない」と感じた部分を埋めていくことが、「らしさ」の純度を上げていくことにつながるんだと思います。
クロスさん：
兼石さんから、「9割は出来上がってるんですが、最後1割の詰めを自分たちでやってもいいですか？」と相談されて。リポジトリのブランチを切って開発環境を共有しました。元々、公開後の保守はIN FOCUSさん側でやられるという話もあったので。
カズさん：
保守の話は聞いていたので、わかりやすくて綺麗なコードを書くことは、今回とても重視していました。他の人にも分かる、モダンである、将来を見据えた設計、そこを意識していました。
兼石：
実際に共有いただいたコードを見ると、すごく整理されていて驚きました。説明がなくても、どこをどう触ればいいかすぐに分かる構造になっていて。おかげで特に迷うことなく、入れたい箇所に演出を足していくことができました。
コバタクさん：
社内でも、カズは「次の人が保守しやすいように」考えてコードを書いてるよね、と話していました。それを今回感じてもらえて素直に嬉しいです。
ー最後に生まれたアイデアたちと、サイトに宿った “らしさ”
兼石：
演出まわりは、ホバーアクションやマイクロインタラクションを追加していくところから始めました。その後、図やグラフにモーションを付けていったり。
目立つところでいうと、TOPページのリール映像にポストエフェクトのインタラクションを加えました。映像の上でカーソルを動かすと周辺の領域がランダムな区画で抽出され、モザイクやノイズ、カラーバーといったエフェクトがかかります。「対象をユニークな角度で切り取る」——そんなIN FOCUSの視点をイメージしています。
山田：
新しく作った「CAREERSページ」もぜひ見てほしいです。CEOメッセージを追加したり、男女比や平均年齢といった社内データをグラフで見せたり、テキストだけでなくビジュアルでも会社の輪郭が伝わるようにしました。もともと私自身、IN FOCUSのサイトを見て「独自の世界観を持っている会社だな」と感じて入社した経緯があるので、その印象がより伝わると嬉しいです。
兼石：
CAREERSページの背景では、「独立した集団」というIN FOCUSの理念を表現したモーションが動いています。ドットが離散と集合を繰り返して自由に動き回りながらも、全体のアイデンティティを確立した状態で前進していく。その周りでは稲妻のようなラインがエネルギーをバチバチさせながら予測不能な軌跡を描く。
IN FOCUSのメンバーがそれぞれの才能を発揮しながら縦横無尽にクリエイティブを生み出しているイメージを表現しています。
カズさん：
その他で見てほしいポイントで言うと、404ページのタイポグラフィのアニメーションですね。
クロスさん：
404見てほしいです。めちゃくちゃ派手だった。すごいの作ってると思った。クレフレのリニューアルでもちょっと使わせてもらうかもしれません（笑）。
兼石：
404ページも含めて、サイト完成間際に一気に演出や遊びを入れたのですが、最後に『だるまの目を入れる』ような感覚でIN FOCUSらしさを具現化できたように感じています。
ーこのチームだからできた「走りながら形にしていく」というやり方
井口：
今回、「一度作ってもらったものにブラッシュアップを重ねていく」というやり方をしました。これ、つくり手側は本当にきついんですよね（笑）。通常の案件では中々できない。でも制作の過程で生まれるアイデアを吟味しながら取り入れることで、完成の強度が上がっていく。そこを、クレフレさんも一緒に踏ん張ってくれた。クロスさんとカズさんは本当に細かい調整をたくさんしてくれました。長い付き合いがあるからこそ、遠慮せずに相談できました。
クロスさん：
フィードバックが止まらないなと思っていました（笑）。あとは、2025年内に公開できてよかったというのはありますね。もともとはもう少し早く公開する予定だったんですが、お互いに他の案件の進行が重なったりもして。
カズさん：
公開された時は、「なんとか無事に着地できてよかったな」という安心感が一番大きかったです。形にしていく中でいいアイデアが出てきたら試してみる、制作って本来そういうものなのかもしれない、と感じました。クリエイティブの本質って、たぶんそこにあるんだろうなと。
ー走り切って、最後に思うこと
山田：
出来上がったサイトは動きも入って、見ていて飽きない体験になっていると感じます。リニューアルで「さらにかっこよくしなきゃいけない」というプレッシャーは正直ありましたが、何パターンもアイデアを出して細かく詰めていく、そのプロセス自体が純粋に楽しかったです。完成したサイトは、胸を張って「かっこいい」と言えるものになったと思います。
井口：
シンプルに見えるけど、裏では難しいことをやっている。今回のサイトにはそれが詰まっています。技術の選択肢を広く持てるのがクレフレさんの強みだと思ってて。クロスさんやカズさんがいることで手数が多い。「この幅がある」ということは、長く一緒にやってきた中で分かっている。技術だけでなく、信頼関係があったからこそ実現できました。
兼石：
通常の案件も回しながらの自社プロジェクトだったので、まず動き始めること、そして途中でスローになることはあっても止めないこと、を意識して進めました。なんとかゴールまで辿り着けてよかったです。リニューアルを通じて、自分の中でも改めてIN FOCUSの独自性や強みを再認識できましたし、どこを伸ばしていけばさらに面白くなりそうか、みたいなことも見えてきました。
カズさん：
振り返ってみると、最初のデザインや方向性からは、実はそれほど変わっていないんですよね。でも出来上がったものは、細部まで確実に研ぎ澄まされている。フィードバックを積み重ねるたびに、クオリティがどんどん上がっていくのを体感できました。
コバタクさん：
ちょうど自分たちも10期目を迎えるタイミングだったので、何か節目になることをしたいという思いもありました。IN FOCUSさんのデジタルブランディングに対する姿勢を間近で体験できたことは、自分たちにとっても大きな財産です。常に最前線にいるIN FOCUSさんと、一緒に取り組めたことが嬉しかったですね。
クロスさん：
IN FOCUSさんのサイトが一段落したので、今はうちのサイトのリニューアルに取り掛かっています。完成したらそっちもぜひ見てほしいですね。
コバタクさん：
あと今着てるこれ、IN FOCUSさんのスウェットなんです。2年前のIN FOCUS展で買わせてもらいました。今日これ言い忘れてたなと思って。これだけは言っておかないと（笑）。
