“見やすさ”と“遊び”を両立する。設計・構造から読み解く「佐久間宣行事務所オフィシャルサイト」

2026年3月26日

デザイン会社グッドパッチのPR施策として制作したYouTube番組から生まれた「佐久間宣行事務所オフィシャルサイト」。公開直後からWeb業界内にとどまらず、佐久間さんファンなど幅広い層の間で大きな話題を集めました。

このプロジェクトを手がけたのは、グッドパッチ・クリエイティブディレクターの栃尾行美さんとPR担当の井上悠斗さんです。前編では、プロジェクト誕生の舞台裏と企画プロセスについてうかがいました。後編となる本稿では、StudioとAIの活用、設計や構造のこだわりについて語っていただきました。

＜前編はこちら＞

プロフィール

栃尾行美
株式会社グッドパッチ
クリエイティブディレクター／サービスデザイナー

2018年にUIデザイナーとして入社し、現在は30名以上のサービスデザイナーが所属するチームを統括。本プロジェクトではクリエイティブディレクターとして、ブランド構築からアプリの体験設計までを管掌するなど、中心的な役割を果たす。
https://x.com/tochio193

井上悠斗
株式会社グッドパッチ
PR・広報

早稲田大学卒業後、コンサルティング企業やHR企業を経て2023年グッドパッチ入社。テレビ東京コミュニケーションズと企画したYouTube番組『佐久間さん、HP作らせてください』においては、協力プロデューサーとしてプロジェクトマネジメントやPRを担当した。

Studio×AIでデザイナーによる高度な実装が可能に

––––「佐久間宣行事務所オフィシャルサイト」の制作では、Studioに加えてAIも活用されたとのことですが、AIはどのような用途で使ったのですか。

栃尾行美（以下、栃尾）　基本的なデザインはStudioで組みつつ、Studioの機能だけでは実装できないインタラクションは、AIを使って“バイブコーディング”しながらつくっていきました。以前にもStudioを使って自社の採用ページをつくったことがあるのですが、そのときは静的なページが中心でした。今回はAIを使うことで、自分でコードを書きながら動きをつくれるようになったのが大きかったですね。

もちろんエンジニアと共創するのもすごく楽しいのですが、細かいニュアンスの調整を何度もお願いするのはどうしてもハードルがあって、「ここまででいいか」と途中で止めてしまうこともありました。でも今回は、自分で触りながら自分で直せる状態だったので、「なんか違う」を放置せずに、納得いくまで詰め切ることができました。

結果的に、ただインタラクションを付けたというよりも、体験としての気持ちよさや佐久間さんらしさを、自分の手で担保できた感覚がありました。

––––他にもAIを使用したところはありますか。

栃尾　　佐久間さんと直接やりとりできない状況で進める必要があったので、Web上にある佐久間さんのインタビューや過去の発言、これまで手がけてきたお仕事の情報などをもとに、「佐久間さんAI」みたいなものもつくりました。

そのうえで、例えば「この言い回しは佐久間さんらしいか」「この温度感は少し違和感がないか」といったことをAIに壁打ちしながら、テキストのトーン＆マナーを詰めていきました。もちろん、最終的な判断は人がしていますが、直接確認できない状況だったからこそ、できる限り解像度高く佐久間さんらしさを捉えるための補助線として、AIはかなり役立ちました。

実はこのWebサイト、テキストにもかなりこだわっていて、細かいネタや言葉のニュアンスをいろいろと仕込んでいます。ただ、そこにはあまり反応がなくて、少し寂しかったのですが（笑）。そのため、じっくり見ていただけたら嬉しいです。

––––わずか1カ月でこれだけのWebサイトを完成できたのは、AIが大きく貢献していたのですね。

栃尾　　そうですね。AIで細かい部分を補えるようになったことで、作業時間を大幅に短縮できたと思います。その分、「どういう体験にするか」とか「どこに“らしさ”を宿すか」といった、本質的な部分にしっかりと向き合う時間が増えたのがすごくよかったと思いました。

どこに違和感があるのか、何がその人らしさなのか、どうすればちゃんと伝わるのか。そうしたところを詰め切れると、やはり最終的なアウトプットは変わるなと感じました。

膨大なコンテンツを見やすく軽量に

––––Webサイト内のコンテンツには、これまで佐久間さんが手がけた番組一覧から著書、帯文を書いた本のリスト、語録などが掲載されており、膨大な情報がまとめられています。これだけコンテンツを充実させたのはなぜでしょうか。

栃尾　　帯文は、番組内で佐久間さんが楽しそうに話されていたのが印象的で、「これは絶対に入れたい」と思っていました。

また、佐久間さんはラジオなどでの発言もすごく魅力的なので、そうした発言を語録として、吹き出し形式で見せています。この語録については、グッドパッチにいる佐久間さんファンのメンバーにも協力してもらいました。

これまで担当された番組一覧についても、テレビ東京の方々にご協力いただいて、ロゴやキービジュアルをすべて集めています。その際に、ただ一覧で並べるのではなく、VHSのテープが並んでいるような見せ方にしていて、これまでの仕事を振り返るような体験になるようにしました。さらに、無邪気に隠しコンテンツまでつくってしまって（笑）。

最初から「情報を増やそう」と決めていたわけではなく、佐久間さんらしさを拾っていくうちに、結果的にコンテンツが増えていったという感覚に近いです。見ていく中で発見があったり、「こんな一面もあるんだ」と楽しんでもらえるような体験にはしたいと思っていました。

––––情報量が多く、コンテンツごとにUIも異なる遊び心のあるデザインですが、迷うことなく閲覧できました。UIでこだわった点はありますか。

栃尾　　ありがとうございます。このWebサイトは、見やすさと遊びを分けて考えるというよりは、どう同時に成立させるかを意識して設計しました。特に最初にアクセスしたときは、Webサイト全体を一度スクロールする人が多いと考えたので、その体験が気持ちよくなるように、スクロールの違和感を3週間ほどかけてかなり細かく調整しています。

また、スクロール時の視線誘導にもこだわっています。ざっとスクロールしても、「どこに何があるか」をなんとなく把握できるように、コンテンツの区切りやリズムを明確にしました。一方で、佐久間さんのプロフィールのようなしっかりと見せたい情報は、スクロール中でも思わず一度止まってしまうような見せ方にしています。

ユーザーの意識の動きそのものをどうデザインするかを考えながら、インタラクションを設計していきました。

––––アニメーションやインタラクションが多用されているのに、動作がとてもスムーズでした。やはり最適化にもかなり注力されたのでしょうか。

栃尾　　もし重くて動かなかったら、どんなに体験としておもしろくても成立しないですし、グッドパッチとしての信頼にも関わると思っていました。そのため、公開直前までかなり粘ってパフォーマンス改善を重ねました。

このWebサイトは画像や動画も多かったので、画質を必要最低限まで落としたり、動画をできるだけ軽い形式に変換したりしています。また、バイブコーディングで無邪気に書いたコードもそのままにせず、AIを使ってより最適化された形に書き直しました。

普段はフロントエンドエンジニアにお願いしている領域なのですが、実際に自分でやってみると、「ここまでやってくれていたんだな」と実感して、改めて感謝の気持ちが湧きました。今回のように遊びのある表現を成立させるためには、裏側がきちんと整っていることが前提になると改めて感じました。

––––グッドパッチさんは大手企業や自治体などの案件を多く手がけている印象があったので、こうした遊び心のあるWebサイトには意外性も感じました。

栃尾　　実は今回、裏テーマとして、「正解のWebサイトはつくらない」という考えがありました。

これまでグッドパッチは、UI/UXに強い会社として「わかりやすい」「正しい」体験をつくることでブランドを築いてきたと思っています。ただ、このプロジェクトに私がアサインされた意味を考えたとき、それだけではなくて「グッドパッチってこんなこともできるんだ！」とか、「グッドパッチと一緒に仕事をしたい」と思ってくれるファンを増やすことが求められていると感じました。

そのためには、ある程度正解から外れることも含めて、誰もやっていない挑戦をする必要があると思ったんです。

特に今回は、デザイン業界や普段お付き合いのある企業だけでなく、より幅広い層に見てもらうことが目的でした。だからこそ、情報設計として正しいだけでなく、エンタメとして成立することを強く意識していました。思わずスクロールしてしまうとか、誰かに共有したくなるとか、そういった「体験としての熱量」を設計することが大事だと考えていました。

これまでに築いたブランドをさらに超えていく

––––「佐久間宣行事務所オフィシャルサイト」を公開した際には、Web業界でも「Studioでここまでつくれるのか！」と大きな話題になりました。

栃尾　　あそこまで世間の反応が大きくなるとは想定していなかったので、正直かなり驚きました。ただ振り返ってみると、自由度の高いデザインができたのは、私と後輩が表層よりのデザイナーで、いわゆる実装前提で考えすぎなかったことも大きかったのかなと思っています。

最初から制約に合わせて考えるのではなく、まず「どういう体験をつくりたいか」「どこまでやりきりたいか」を起点に設計して、実現方法はあとから考える、という順番で進めていました。その中で、AIがあることで「なんとかなるかもしれない」というマインドで、楽しみながら進めていけたのは大きかったですね。

実現できるかどうかではなく、やりたいかどうかで意思決定できたことが、結果的に表現の幅を広げたのかなと思います。

––––番組の中で、完成したWebサイトを見た佐久間さんもかなり喜ばれていましたね。

栃尾　　個人的に一番嬉しかったのは、佐久間さんが「もはや引き始めています」と言ってくださったことです。ご本人が引くくらいの熱量を出せたという意味で、きちんと振り切れたんだなと感じました。

また、佐久間さんがSNSをはじめ、さまざまな媒体に出演する際に話題にしてくださったのも嬉しかったです。ご本人が思わず話のネタにしたくなるものをつくれたのかなと、ホッとしました。

テレビ東京を辞めて5年目。
なぜかテレビ東京(とグッドパッチ)が、佐久間宣行事務所のHPを作ってくれました。

マジで凄いです。なんだこれ。https://t.co/sRtnQYnhRn
— 佐久間宣行 (@nobrock) December 18, 2025

Webサイトを紹介する佐久間さんのXでの投稿

––––Web業界以外の方々の間でも、ネット上ではポジティブな反響が多かったですね。

栃尾　　佐久間さんの影響力もあって、幅広い方々に見ていただけました。多くの反響をいただき、グッドパッチの株価まで上がったのには驚きました（笑）。SNSのコメントで特に嬉しかったのは、「あの頃のグッドパッチのアツい感じが全開」という言葉です。

グッドパッチはこれまで、UI/UXの会社として「正しさ」や「わかりやすさ」を強みとしてきたと思うのですが、その一方で、人の感情を動かすような熱量のあるものづくりも大事にしてきた会社だと思っています。今回のプロジェクトは、そうしたグッドパッチらしさのもう一つの側面を、しっかりと表に出せた取り組みだったのかなと感じました。

井上悠斗（以下、井上）　佐久間さんのWebサイトの一番下に「Website designed by Goodpatch.」と入れさせていただいているのですが、以前、実はグッドパッチがまだ創立して間もない頃、ご支援したクライアントのサイトに「UI Designed by Goodpatch Inc.」と記載させていただいたことがありました。

そのサービスが次第に有名になっていくことで、グッドパッチやUIデザイン自体の評判も広まっていき、我々の会社も一緒に成長できたと聞いています。先ほどのコメントを書かれた方は、そんな当時のことを思い出してくださったのだと思います。