2024年11月、自社Webサイトを約5年ぶりにリニューアルしたスピッカート。初の試みとして、外部のプロフェッショナルとコラボすることを決めたスピッカートがそのパートナーに選んだのは、unshiftの長谷川巧さん。

WebGLをはじめとしたWebのグラフィック技術を活用した表現を得意とする長谷川さんに依頼したのはなぜだったのか？　サイトの構築プロセスを通して何を学んだのか？　開発に携わったスピッカートのメンバー３名と長谷川さんで、この半年間を振り返りました。

参加者

  • 長谷川：unshiftのクリエイティブデベロッパー。フロントエンドの実装を担当。
  • 細尾：スピッカート代表。サイトのディレクションを担当。
  • 井上：スピッカートのデザイナー。サイトのデザインを担当。
  • 金山：スピッカートのデベロッパー。バックエンドの実装および技術選定を担当。

お互い気を遣いすぎていた

細尾：今回、外部の方に依頼した理由を一言で言うなら、変わりたかったからです。ありがたいことにスピッカートの人たちは人が良さそうだから頼みたいというご依頼は多いのですが、制作会社である以上、つくっている制作物の品質で選ばれたいと常々感じていたんです。

スタッフが自分たちの顔を出して積極的に発信していた旧サイトでは、「人」が前面に出ていたというのも一因だと思います。その姿勢は変えないまま、人柄と品質の両軸で勝負していきたいと思ったんですよね。

そこで白羽の矢を立てたのが長谷川さん。表現の奥行きや幅広さなど、ハイレベルな技術や創造性をお持ちの長谷川さんなら、僕たちに新しいエッセンスを注入し、一段階高いレベルに引き上げてくれるのではないか、という期待があったんです。言うなれば、今までやったことのない髪型や服装にチャレンジしてみようという感覚でした。

長谷川：制作会社・デザイン会社さんのコーポレートサイトにはかっこよく洗練されたものが多い中で、スピッカートさんからいただいたデザインには違う印象を受けました。きれいでありながらも、あたたかみや手づくり感が垣間見えるところに“らしさ”を感じたんです。

スピッカートさんのような雰囲気のサイト制作に携わった経験が少ないぶんチャレンジングで、期待に応えなくてはという気持ちがあったのですが、最初にお出しした実装では皆さんに物足りなさを感じさせてしまいました。

今振り返れば、気を遣いすぎたこと、気を遣わせすぎたことが根本的な要因だったと思います。自社のコーポレートサイトなので、こちらが出しゃばって決めていくのはよくないかなと思って遠慮してしまっていた。

細尾：僕らも長谷川さんへの憧れが強すぎるあまり、恐る恐るといった感じで接していて、注文や要望を伝えることにためらっていたのは申し訳なかったなと。粘土をこねながら完成形を考えていくような感じで進めていたので、長谷川さんの意見をもらってはじめて、自分たちのやりたいことや方向性に気付かされたことは数多くありましたね。

金山：最初はお互い、正座で向かい合っていましたよね（笑）。僕らとしては、めちゃくちゃ大きな画用紙とクレヨンを手渡して、めいっぱい使って自由に書いてくださいというスタンスだったのですが、長谷川さんは、通常のサイズ感の画用紙に収めようとしてくださったような印象です。

井上：２〜３回、長谷川さんとミーティングを重ね、アニメーションをどう動かしたかなど、細かいところを詰めていく過程で、徐々にお互いに本音を言い合えるようになり、方向性も掴んでもらえた気がします。

細尾：細部を詰めていくことでコミュニケーションは深まったものの、細部に目が向くあまり全体像がブレてしまったところもあり、最後、全体的に調整していただくことになったのは反省点ですね。

 描いていた理想が形になった

井上：Webサイトだけでなく、チラシ、ポスターなどのグラフィックも制作しているところが、スピッカートの強みなので、デジタルとアナログがうまく融合したサイト、というのが当初からずっと描いていたイメージです。その中で、長谷川さんにはうまくアニメーションを取り入れていただいてとても満足しています。

長谷川：さまざまなアニメーションを活用しながらも、統一感が出るように仕上げたつもりです。普段の仕事から気をつけているところでもあるのですが。サイトを訪れたユーザーに対して、発信している人たちのキャラクターやアイデンティティを明確に伝えるうえで、アニメーションを最大限活用しました。アニメーションの使い方によってはポップになりすぎてしまうので、そのへんのバランス感は意識しましたね。

井上：最後の仕上げの段階で、ページが切り替わるタイミングすべてに遷移アニメーションが出るように変更していただいたことで統一感が増したというか、クオリティが一段階高まった印象があります。

細尾：最終的には、まさにこういうものをつくりたかった、と思える理想的なサイトに仕上げていただきました。スピッカートらしさを残しながらも新しい面を見せる、という試みにも成功したと思います。

井上：メニューを開くたび、画面上のイラストや文字が踊るような動きをつけて、それが結果的にサイト全体を貫く軸のようになったこと。フッター部分の手紙のアイコンにホバーするとスピッカートくんが画面の外からやってきて、離すと去っていくように設計したこと。しばらく放置すると、どのページでも５種類の待機アニメーションが出現すること……。そういった細部にもこだわりました。

金山：技術面でいえば、お客さん相手ではリスクがある最新技術を試せる実験の場として機能したと思っています。WordPress を外部に設置してJamstackのようにAPIでデータ取得し、静的ページとして生成したものを公開しています。これによりセキュリティを高めつつ高速化を実現し、皆が使い慣れたWordPressで更新できるようにしました。

「慣れない」からこそ得るものは大きい

長谷川：もちろん予算やスケジュールによってはお断りすることもあるとはいえ、基本的にはジャンルを問わず、ご依頼いただいた仕事はすべてお受けしたいという気持ちでやっています。今回、あまり実装経験のない表現が多い制作となりましたが、そのおかげで表現の幅が広がりました。やっぱり、これまでにない仕事をして、これまでにない領域を開拓するのは、楽しいし得るものも大きい。

僕はデザイナーではなく、デザインを形にしていく人間なので、仕事を選ぶ立場ではないという認識は常日頃から持っています。単純に仕事をいただけるのはうれしいし、頼んでもらった以上、その人たちの力になりたいんですよね。

そのうえで普段から心がけているのが、「ユーザー第一で考えつつも魅力的に演出する」バランス感覚です。会社員時代、このWebサイトは思いきりアニメーションを使おうという号令のもと、デザイナーもエンジニアも張り切ってサイトを作り込んでリリースしたのですが、ユーザーからは「動きすぎて気持ち悪い」「使いにくい」「情報が入ってこない」と軒並み不評だったんです。自分としては自信作だったのでヘコんだものの、その経験は今も「自己満足に陥らないように」と自分を戒めるいい反面教師になっています。

細尾：話を聞いて改めて、物怖じしていた最初のやりとりがもったいなかったなと感じています。長谷川さんに限らず、一級レベルのデザイナーやエンジニアは器が大きいので、はじめから遠慮なくやりたいことをぶつけていれば、もっとスムーズに事は運んだなと。

井上：外部の方とやりとりする経験の乏しさゆえ、手探り状態は続いていましたよね。私自身が実装できないので、アウトプットがどうなるのか想像しきれないところがあったぶん、長谷川さんからその都度、懸念事項を伝えていただいたことはありがたかった。自分がデザインを考えるうえで、想定しておくべき範囲が広がったと感じています。

金山：この“実験”を通してエンジニアとしての手札が増えました。長谷川さんの書いたコードも社内全員が見られる環境にあるので、社内全体の底上げにもつながると思います。

細尾：今後、人柄と品質の両軸で勝負していくために、新サイトではコンテンツの見せ方も変えています。「自分たちでつくったものが一番の営業ツールになる」という考え方のもと、チラシやパンフレット、パッケージなどは撮影し直し、制作実績に語らせるような形を取り入れました。

それと並行して、「週刊スピッカート」と名付けたブログコーナーでは、引き続き、社内のデザイナーやエンジニアが、自分たちで記事を書いて発信していきます。AIの技術力がどんどん高まっている昨今、スピッカートじゃなければならない理由をつくらないと選ばれなくなってしまう恐れがある。制作物にも反映されている自分たちの思いや考え、経験を言葉にすることで、自分たちの“らしさ”や個々のアイデンティティを伝えていきたいと思っています。

Interview & Writing: Screen 中道達也