手探りスタートの佐久間宣行さんHPを成功に導いたグッドパッチ。バイブコーディングでこだわりのデザインを実装

「佐久間さん、HP作らせてください」

「佐久間宣行事務所オフィシャルサイト」（以下、佐久間さんHP）の制作は、「グッドパッチ」というデザイン会社を多くの人に知ってもらうためのPR施策として始まっている。つまり、通常の案件受注と違って、クライアントである佐久間氏側に明確な課題や達成したいゴールはなかった。

ただ、佐久間氏がプロデューサーとして在籍したテレビ東京から独立した際に連絡先を公表していなかったため、

• 仕事の問い合わせが古巣のテレビ東京の後輩に届き続けている
• 関係者はさばききれなくて困っているため、導線としてのHPを新設する

ということだけがはっきりしていた。この、まったくの手探り状態から、どのようにゴール設定したのか。栃尾氏は以下のように説明する。

元々、グッドパッチではクライアントさんの「なぜ」から始めることを大切にしています。今回も、「なぜ」を深掘りしていくところから導き出していきました。

「なぜホームページを作りたいのですか」、もっと上流から「なぜ今この仕事をしているのか」「なぜこの挑戦をしているのか」と、佐久間さん自身の価値観やパーソナリティを深掘りしていくことで、“佐久間さんらしさ”を軸にしたコンセプトを立てていきました（栃尾氏）

この、「なぜ」を深掘りし、コンセプトを言語化するというのは、いつものプロセスだという。

佐久間さんHPのターゲットユーザーとして、もっとも重要なのは「仕事を依頼してくれる人」だ。ただし、通常の販売促進と違って、たくさん依頼がくればいいというものではない。佐久間氏本人が「おもしろい、やりたい」と思うような内容の連絡をもらいたいので、人となりや何をおもしろいと思うのかがわかるホームページでなければならない。

そのため、あえて情報量を多くし、“カオスさ”も含めて、佐久間さんらしい熱量が伝わるようなデザインを意識しました。カオスな状態をデザイン上で表現したり、テキストも佐久間さんらしい言葉のテンポやユーモアを感じられる表現にこだわったりしています。

「なんか好きだな」「ちょっとわかるな」と、くすっと笑ってシンパシーを感じるような方からの問い合わせをもらえるように、読めば読むほど世界観に入り込めるような構成で、全体を設計していきました（栃尾氏）

佐久間宣行事務所オフィシャルサイト

成果としては、公式HPを起点とした問い合わせ導線を新設・集約したことで、リリース直後からHP経由の問い合わせが相次ぎ、テレビ東京側の問い合わせ対応負荷が軽減された。

また、佐久間氏の活動はテレビ・配信・ラジオ・書籍など多岐にわたるため、「仕事の全体像が伝わらない」という課題があったが、この点でも人物ブランドとしての理解度・信頼性向上に貢献した。さらに、PV数やX投稿のインプレッション、YouTube連動番組の再生数などは、公開直後から高い数値成果を記録している。

担当した栃尾氏は、現在30人ほどのUI/UXデザインチームを統括する立場だが、今も現場で手を動かし続けている。「作ること自体が好きなんです」と話し、現在も稼働の半分ほどは実案件に入り、コンセプト設計からUIデザインまで携わっているという。

この佐久間さんHPは、通常の仕事の上に追加された。このため、社内で有志を探すところから始める必要があり、その人たちも自分の案件を抱えている。この、人的リソースが潤沢ではないという状態を、AIでどのように解決しているか、かなりおもしろい話が聞けた。

栃尾 行美（とちお・いくみ） 株式会社グッドパッチ クリエイティブディレクター／UIデザイナー。UI/UXデザイナー30名以上を統括するマネージャーでありながら、自身もデザイナーとしてさまざまな案件を手がけ続けている。数百万人が利用する「コープデリ宅配アプリ」のUI設計や、イオンペットの「ペテモアプリ」のサービスブランディングなど、幅広い領域の実績を持つ。

デザイナーを手伝うAI、4つのパターン

グッドパッチには、すでにAIを使いこなしているデザイナーがたくさんいる。ただし、最初のカンプをAIに作らせるのだろうとイメージしたなら、それは完全に違う。

今回のプロジェクトでは、コンセプト設計や基礎となるデザイン、アイデア出しの部分にAIは使いませんでした。そこは、あえて自分たちの手で考え抜いて作っています。

これは私のこだわりなのですが、AIが出してくるのは良くも悪くも平均値だと思っています。もちろん整理や効率化にはすごく有効なのですが、今回私が目指していたのは、そういう「整った正解」ではなく、ある種「外れ値」でしたし、それは自分のこれまでの経験や感覚、ひたすら考え抜いた先にしか出せないと思っています。

だからこそ今回は、コンセプトや核になる部分ほど、人の手で向き合うことを大事にしました（栃尾氏）

ただし、一般的な企業のWebサイト制作なら、この平均値のアイデアにも使い道はある。栃尾氏の話から、AI活用には4パターンくらいありそうだ。

①発注者側が、AIで作った絵を持ってきてくれる

最近は、発注側の担当者が「とりあえずAIで作ってみたけれど、どうしたらもっと良くなるのか一緒に考えてほしい」という依頼が増えているそうだ。今までは言葉だけから想像しなければならなかったが、絵を見て会話を始められる。

「何が違和感なんですか？」「本当はどういうものを目指していたんですか？」と、そこから対話を深掘りしていくケースがかなり増えています。

AIによってアウトプットを誰でもある程度作れるようになった一方で、「何が違うのか」「なぜしっくりこないのか」を一緒に言語化し、本当に作りたいものへ導いていくことが、むしろデザイナーの価値として強くなっている感覚があります（栃尾氏）

②その人の文章を学習させて専用生成AIを作る

どのような案件でも使うわけではないが、今回はテキストに「佐久間さんらしさ」を出すための手助けとして、汎用生成AIを使った。

佐久間さんのインタビュー記事や発言を大量に読み込ませ、自分のパソコン上に、いわば「佐久間AI」のようなものを作っていったんです。AIに書かせるというより、佐久間さんらしいリズムや温度感を探るための、対話相手として使っていた感覚に近いです（栃尾氏）

完璧なものが出てくるわけではないが、栃尾氏が書いたテキストをAIで変換し、それをさらに栃尾氏が手直しするという手順を踏んで、それらしいテキストができあがっている。

③バイブコーディング

自然言語で指示することでプログラムを書くことを、バイブコーディングと言う。ChatGPTやClaude、Geminiなどの汎用生成AIでも、言葉で指示してWebページを作ることができる。

複雑な要件を持つ大規模なサイトやページを、最初から完成形として一発で作り上げることはまだ得意ではない（2026年4月時点）が、一方で、すでにあるページを少し直したい、試したいアイデアを形にしたい、といった場面では非常に強力だ。これまでソフトウェアエンジニアに依頼していたような小さな修正を、デザイナー自身で試せるようになってきている。

④抜け漏れチェックと客観的評価

まずは自分で作り、できたものをAIにレビューしてもらって、観点の抜け漏れがないかチェックする。

AIは知識の幅が広く、多くの観点を短時間で提示してくれるため、セルフレビューの相手として非常に優秀だ。

一方で、何を目指すべきか、どの案を採用するべきかといった判断は人間が行う必要がある。そのため、最初から答えを求めるのではなく、自分なりの考えを持った上で壁打ち相手として活用することを意識している。

一人でやり続けていると視野狭窄に陥るし、自分の好きな方向に行きがちです。AIを、客観的に見てもらえるツールとして使っているイメージです（栃尾氏）

バイブコーディングでWeb制作ってどうやるの？

バイブコーディングはまだ新しい言葉で、気になっているという人は多い。そこで、栃尾氏がどのように生成AIを使ったのか、少し突っ込んで教えてもらった。

まず前提として、今回の佐久間さんHPの制作には、「Studio」というノーコードツールを使っている。基本的には、ドラッグ＆ドロップの直感的な操作でWebサイトをデザインできるCMSだが、カスタムコードの機能がある。細かい指示をコードで入れることもできるので、デザインの細部にこだわりたい場合にも使えるというツールだ。

たとえば、途中でスクロールと同時に文字がハイライトされる演出があります。この部分は頭の中に明確なイメージがあったので、「テロップみたいな形で、スクロールすると文字がハイライトされる仕掛けを作りたいんだけど、どうしたらいい」のようなプロンプトを、Geminiに相談しました。

もちろん最初から思い通りのものが出てくるわけではありません。返ってきたものに対して、「それは違うから、もっとこうしたい」と、何度もやり取りを重ねながら調整していく。そうして最終的に出てきたコードを、「Studio」に組み込み、自分で動きを確認しながらさらに細かく詰めていきました（栃尾氏）

発注側がデザイナーに説明する際の叩き台なら、生成AIにざっくり作らせたものでもそれなりに役に立つ。それとは別に、プロのデザイナーがこだわり抜いたWebサイトを作りたいときにも使えるということだ。

私はけっこうこだわりが強いタイプで、「違和感があるところをピクセル単位で修正したい」「アニメーションが変化するタイミングをほんの少し速くしたい」と思うことがよくあります。

ただ、そのたびにエンジニアへ依頼するのも申し訳ないですし、特に今回は他案件も抱えているメンバーにお願いしていたので、できるだけ自分で完結させたいという気持ちがありました（栃尾氏）

頭の中でイメージできていても、コードの書き方がわからないから止まっていたことが、いったんAIに聞いてそこから考えればいいと、物事をポジティブに考えられるようになったという。

実際のクライアントワークでも、生成AIによって仕事の仕方が変わってきているようだ。長く仕事をしているクライアントであれば、プロジェクトの中に判断軸、デザインのガイドライン、ルールなどがすでに溜まっている。それをAIに学習させ、何パターンかデザインを出させて、どれがイメージに近いのかという会話をクライアントとする。さらに、ミーティング中に自然言語で指示してその場で直していくのだという。

クライアント企業側も生成AIに慣れている場合は、「私のAIはこんな案を出してきたけれど、どう？」と返ってくることもある。パートナー関係とはいえ、従来は案を出すのはグッドパッチからのみで、クライアントからはそのフィードバックをもらうだけだった。それが、双方向で具現化して合体させていくような、より本当のパートナーのような形になってきた。

今まではFigma上で自分で手を動かしながらやっていたことが、ミーティングの場で一瞬でできてしまうので、けっこう会話量も増えたという話を、メンバーからも聞きます（栃尾氏）

AI時代のデザイナーの価値とは

今までは、クライアントの持っているイメージを具現化するのが、デザイナーの価値だった。「生成AIを使って企業の担当者でも具現化できるなら、デザイナーの仕事はなくなってしまうのではないか」と心配する人もいる。

だが、頭の中のイメージをきちんと伝えられるプロンプトを書くのは、実は簡単ではない。グッドパッチのデザイナーが介入する価値は、クライアントが言葉にできないことを、培った経験とそのデザイナーのセンスによって、「本当はこういうことをしたいのではないですか？」と問い直しながら方向性を見つけていくことにある。

また、プロダクト／サービス作りはチームで動くので、その人の思っていることだけが正しいわけでもない。

経営、事業、現場、ユーザーなど、いろいろな関係者の思いを集合させたものを具現化することは、AIだけではまだ難しいと思っています。

デザイナーが実際に足を運んで一次情報をヒアリングしたり、関係者と対話したりしながら、それぞれの思いや背景を理解する。その上で、何を残して何を捨てるのか、どこを目指すのかを判断していく。そこにデザイナーの価値があるのかなと、個人的には思っています（栃尾氏）

いくらAIが「こっちの方が正しいよ」と言っても、それで人が動くとは限らない。共感をどう作っていくか、その伝え方をデザインするのは、やはりデザイナーの仕事だ。

確かに、アウトプットは代替されるかもしれない。でも、そこに至るまでの文脈を作ることや、何を良しとするかを決めることは、人間の役割として残り続けるのではないでしょうか。

グッドパッチが大切にしているのも、単に成果物を納品することではありません。自分たちの手を離れてからも、良いものを生み出し続ける文化、デザインする仕組みを企業の資産として残すこと。目に見えるアウトプットだけではなく、それを支える組織や文化までデザインすることです。

この「デザインの力を証明する」というのを、今回の佐久間さんHPでも裏テーマにしていました（栃尾氏）

「Web担当者Forum」として気になるのは、生成AIが出てくると、ユーザーがそもそもWebサイトにアクセスしなくなるのではないかという懸念だ。これについても意見を聞いた。

情報をタイパよく得たいのであれば、ChatGPTなりClaudeなりに聞いて、出てきたサマリーを読んで満足するかもしれません。でも、それはあくまで情報収集の話です。サマリーを読んでもっとグッドパッチのことを知りたいと思ったら、Webサイトにアクセスするはずです。

実際にどんな会社なのか、どんな考え方を持っているのか、どんな人たちが働いているのか。そういったものは、サマリーだけでは伝わりきりません。だからWebサイトはなくならない気がします（栃尾氏）

実際、グッドパッチでWeb制作の案件は減っていない。むしろ、AI時代の差別化のために、そこに投資すべきと判断する企業が増えている。企業らしさ、ブランドらしさを表現できる場はWebサイトやアプリであって、平均値を出すAIではないからだ。

では、発注する企業側の担当者には、何が必要になっているのだろうか。今回の佐久間さんHPの場合は、佐久間氏側に、どのようなホームページを作りたいかというイメージはなかったかもしれない。しかし栃尾氏は、インタビューしていく中で、彼がされたくないことやされると嬉しいこと、価値観のようなものが見えてきたという。だからこそ、あのようなアウトプットができたわけだ。

思いは大事にしてもらいたいと思っています。それが正しい正しくないは脇に置いて、自分が信じているものをきちんと語れる状態でいてほしい。AIは与えられた情報を整理したり、形にしたりすることは得意です。

でも、「自分たちは何を大切にしたいのか」までは決めてくれません。何かしらの起爆剤というか起点みたいなのがないと、それこそ、発注者の方もAIに負けてしまうと思うんですよ（栃尾氏）

発注者側が「今までできなかったけれど、実はこういうことしたかった」とか「わが社のポリシーはこれで、ここは絶対に譲れない」など、思いをぶつけてくれれば、デザイナーとしてはやれることがある。それは、最初から言語化されていなくてもいい。むしろ無邪気に「あれがしたい」「これがしたい」と言うことで、デザイナーと一緒に作っていく楽しいプロジェクトになるのだろう。