熱いスタートアップ企業が集まる、福岡の官民共働型スタートアップ支援施設 Fukuoka Growth Next(以下、FGN)のサイトリニューアルに STUDIO が採用されています。そのデザイン制作の裏側について、FGN の「崎山 勇気」さんと、株式会社gaz の「吉岡 泰之」さんにお聞きしました。まずはお二方の自己紹介をお願いします。崎山:FGN事務局の崎山と申します。海外から来たスタートアップの窓口やイベント企画をメインに担当していて、WEB など広報にも関わっています。吉岡:デザインを担当した gaz の吉岡と申します。STUDIO の公式パートナーとして様々な企業さんのサイト制作を支援させて頂いています。入居施設のWebサイトをリニューアルしたプロジェクトまず、FGNとはどんな場所なんですか?崎山:FGNは福岡市にある官民共働型のスタートアップ支援施設で、2017年にスタートしました。2022年5月末時点で198社が入居していて(スポンサーや支援企業含む)、オフィスの他にもアクセラレーションプログラムやメンタリング、イベント開催など、スタートアップ向けに様々なサポートプログラムを提供しています。吉岡:gaz を創業した2019年の6月から FGN に入居しているご縁で、今回 FGN のサイトリニューアルを担当しました。現在はメンバーが増え外にもオフィスを構えていますが、コワーキングスペースの契約は続けていつこともあり頻繁に出入りしていて、FGN事務局や入居企業さんとの関わりは続いています。従来の半分の制作期間で、拡張性の高いWebサイトを納品崎山:サイトリニューアル当時まだ僕は事務局メンバーではなかったのですが、ウェブサイトのリニューアルを実施したいよねという話が持ち上がった時に、入居者の gaz さんに相談したら STUDIO で作りましょうと提案いただいたと当時の担当者から聞いています。吉岡:デザインは僕が担当、素材制作など実装サポートとして他メンバーにも入ってもらって3人体制で制作を進めました。相談を受けた時に、海外でピッチイベントを開催した際のアクセス流入数だったり、とにかくトップページの伸び率がとても高いと伺っていて。官民共働でやっているということもあって、海外含め本当に不特定多数の人がサイトに来る可能性があるから、もう少しグローバルかつユニバーサルなデザインで、でもスタートアップな雰囲気は残したいというオーダーでした。サイト構成はある程度以前のものを引き継がせてもらって、デザインとコンセプトは一から作っていきました。吉岡:相談を頂いたのが4月で、6月には公開したいという短期スケジュールで、正直 STUDIO で作るにしてもこの規模のサイトだとスケジュール的に少し厳しいかなという温度感だったのですが、WordPress だったら確実に4ヶ月以上はかかる仕事量でした。運営面でも、その都度修正やコーディング依頼をするのではなくもう少しフレキシブルに対応したいとのことだったので是非 STUDIO にしましょうと提案して、結果的に2ヶ月で制作しました。崎山:以前のサイトでは、修正の必要がある場合は都度デザイン会社さんにお願いしていたそうですが、STUDIO に変えてからは自分たちでノーコードで編集できる範囲も広がり、サイトに変更を加えるハードルが下がりました。今は軽微な修正であれば、3名のスタッフが直接 STUDIO を触って対応しています。管理費を大幅削減。運用者にも訪問者にも優しいWebサイトへ崎山:サイト訪問者の目線で考えてみると FGN のプログラムやニュースなどの情報がちゃんとキュレーションされた状態で機能していてとても重宝しています。崎山:また、サイト完成後の保守料金をかなり抑えられたのも助かりました。吉岡:gaz としても特に大サービスをしたというわけではなく、STUDIO を利用する場合だと更新や改修がしやすいので、稼働量を考えても当時は無理のない金額感でした。スピーディで柔軟なコミュニケーション、芯を捉えたデザイン提案崎山:制作の中でのgazさんとのコミュニケーションもとてもスムーズに取れていますね。お互い福岡にいながらも、必要であればすぐオンラインでミーティング対応してくれたり。Slack やBacklogも活用してスピーディなやりとりができています。また、僕たちからの要望だけじゃなく、デザイナー目線で色々提案してくださってとても助かりました。吉岡:自分たちが当時 FGN に入居していて、大手からスタートアップまで色んな人で賑わっている雰囲気をリアルに知っていたのも、デザイン提案に大きく影響していますね。崎山:ウェブサイトリニューアルが動き出したのは2019年5月31日のリニューアルオープンから1年経ったくらいのタイミングでした。その1年の間に、海外のスタートアップが入居したり、入居企業の事業属性も多様化するなど、FGNの雰囲気が大きく変化したので、今まで以上に多様性が表現されたデザインに変更したいという思いがありました。吉岡:コワーキングスペースだけじゃなくカフェやバーがあっていろんな働き方、海外含め色んな人が集まって新しいモノを生み出そうよみたいな、その「るつぼ感」をそのまま表現したかったんです。その多様性を表現するために統一感とカラフルが共存するカードビュー型のデザインを提案しました。情報設計の段階からたくさん話しましたね。ずっと会議していた思い出があります。2ヶ月の短期間でまとめるのはとても大変でしたが、結果的にみんな腑に落ちる良いものが出来上がったなと思います。リニューアル時に期待していた目的は達成できましたか?崎山:サイトのコンテンツ量・内容はそのままに、訪問者が必要な情報にストレスなくたどり着けるように動線を整えたいというのが元々の目標で、そこは達成できているんじゃないかと思いますね。吉岡:情報設計をとにかく綺麗にして欲しいと言われて。官民共働で色んな人が使うという前提に立って、グローバルかつスタンダードな情報設計になるよう、とても力を入れた部分です。まず情報や機能をきちんと整え、その上でビジュアルをのせていくという順番は、gaz が普段から大事にしているデザイン思想とも重なります。お気に入りのポイントはありますか?吉岡:メインビジュアルのカード型のファーストビューは、特にこだわりました。レスポンシブでも綺麗に見えるように、そして画像ではなくちゃんと STUDIO の機能を活かした Box で作りこんでいます。%3Ciframe%20src%3D%22https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F735517217%3Fh%3D1b06dc3a2c%22%20width%3D%22900%22%20height%3D%22493%22%20frameborder%3D%220%22%20allow%3D%22autoplay%3B%20fullscreen%3B%20picture-in-picture%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E吉岡:サイト下部のカードが建物に入っていくアニメーションも、色んな人がこの施設にいるという多様性を表現するために入れました。トップにアニメーションを入れすぎるとサイト閲覧を阻害してしまうので、アニメーションをどこにどれだけ入れるかという匙加減にもこだわっています。 崎山:スタートアップの実証実験を兼ねて、トップページに FGN の施設が VR で閲覧できるビューワーを埋め込んでいるんですが、こういった実験的なことも組み込んで頂けて助かりました。クライアントの変化、STUDIOの変化、時代の変化、すべてに寄り添ったサポートを今後どんなサイトに育てていきたいですか?崎山:そうですね。サイトをリニューアルした当時よりも、入居企業さんも増え、情報がかなり増えているので、情報にフィルターをかけるなど取捨選択できるようにしていきたいなと考えています。吉岡:僕にとっては CMS もアニメーションも STUDIO に実装されたばかりのタイミングでのリリースだったので、初めてそれらの機能を使った案件だったんです。スケジュールもタイトで大変でしたが、制作ナレッジをここでかなり貯めることができました。FGN さんの変化や時代の変化に合わせて、今後も寄り添ってサポートしていければいいなと思っています。クライアントと制作パートナーの間柄にとどまらない、おふたりの信頼関係が伝わる和気藹々としたインタビューでした。貴重なお時間をいただき、ありがとうございました!