生成AI時代、新卒研修はどう変わるのか？グッドパッチの26卒研修を大公開｜Blog｜Goodpatch グッドパッチ
グッドパッチでは毎年4月から7月にかけて、新卒向けの研修を実施しています。 営業、PM、エンジニア、UI/UXデザインなど、さまざまな専門領域を横断して学び、その後は実際のプロジェクトに入りながら実務経験を積んでいきます。毎年少しずつアップデートを続けていますが、今年度は研修設計そのものを大きく見直しました。 最も大きな変更は、研修の一環として、例年より早い5月から新卒を実プロジェクト（実際のクライアントワーク）へ配属したことです。この変更の背景にあるのが、生成AIの急速な普及でした。 生成AIによって、アイデアを形にすることやプロトタイプをつくることは以前よりずっと簡単になりました。デザイン案をつくることも、コードを書くことも、試行錯誤を繰り返すことも、以前より圧倒的に速く行えるようになっています。 一方で、「つくれること」だけでは差別化しづらくなりました。 だからこそ、これからのデザイナーに求められる価値も変化しています。生成AI時代に価値を持つデザイナーとは、単にアウトプットを生み出せる人ではありません。課題を捉え、周囲を巻き込みながら、プロジェクトを前に進められる人だと私たちは考えています。 そして、その力は座学だけで身につくものではなく、実務の中で挑戦し、振り返り、改善する経験を通して育まれていくものです。 そこで今年度の新卒研修では、「スキルを教える研修」から「実務の中で成長する力を育てる研修」へと考え方を見直しました。そのために育成の軸として据えたのが、自走力、思考力、内省力という3つの力です。 また、これらの力を身につけるために、研修全体のフローも見直しました。研修内に実務が入ることで、いわゆる「経験学習サイクル」が回る機会が増えるようにしています。 知識を学ぶだけで終わるのではなく、実務の中でこの成長サイクルを回しながら成長すること。それが、今年度の26卒研修で目指したことです。今回は、その考え方と具体的な取り組みをご紹介します。 26卒研修の全体像 研修は大きく3つのフェーズで構成されています。最初に行う全社研修では、社会人としての基礎や会社理解を深め、部門研修では、営業・PM・エンジニア・UI/UXデザインなど、それぞれの専門領域を学びます。 そして、今年度の研修の目玉となるのが、5月から始まった実プロジェクト配属研修です。 部門研修で実施したこと 部門研修は、それぞれ異なるテーマを扱っています。しかし共通しているのは、「実務の中で成長するための土台をつくること」です。 MD研修｜ビジネスの文脈を理解する デザイナーが価値を発揮するためには、デザインだけでなくビジネスを理解することが欠かせません。 MD（Market Design／営業）研修では営業オリエンテーションや会社紹介に加え、実際の商談にも同席しました。どのようにクライアントと関係を築き、どのような課題からプロジェクトが始まるのか。現場を体験することで、自分たちがこれから関わる仕事の全体像を理解することを目的としています。 また、商談や提案の場で行われている合意形成や期待値調整にも触れながら、「良いデザインをつくること」と「プロジェクトを前に進めること」の両方が重要であることを学びました。 生成AI研修｜「適切に使える」を目指す 今年度から新たに追加した研修です。 生成AIを使うこと自体は、多くの新卒にとって珍しいことではありません。一方で、実際の業務では個人利用とは異なる観点が求められます。 生成AI研修の講義の様子 機密情報はどこまで入力できるのか。生成物の著作権はどう考えるべきか。AIのアウトプットをチームでどう扱うのか。研修では利用ルールや知財の考え方を学んだ上で、デザインプロセスの中に生成AIを組み込む実践ワークを行いました。 また、「AIに作らせる」のではなく、「AIと共創する」こともテーマの一つです。アイデア発散からプロトタイピング、ユーザーテストまでを短期間で繰り返しながら、人とAIが役割分担しながら価値を生み出す体験を行いました。 AIによって試行回数を増やせる時代だからこそ、どのアイデアを選ぶのか、どの方向に進むのかを判断する力の重要性についても学んでいます。 講義資料の一部 プロトタイプ制作の様子 ファシリテーション研修｜場を前に進める力を学ぶ デザイナーはアウトプットをつくるだけでなく、多様な関係者と対話しながらプロジェクトを前進させる役割も担います。 本研修では社内のワークショップデザイナーを講師に迎え、場の設計から合意形成まで、ファシリテーションの基礎を学びました。 実践形式のワークを通じて、目的共有・発散・収束・意思決定といったプロセスを体験しながら、「良い議論を生み出すために何が必要か」を学んでいます。 実際のワークの様子 PM研修｜プロジェクトを設計する視点を持つ PM研修では、グッドパッチにおけるプロジェクトマネジメントの考え方や、クライアントワークの進め方について学びました。 プロジェクトを成功に導くためには、与えられた依頼をそのまま進めるだけではなく、目的や制約を整理し、関係者の認識をそろえながら進めることが重要です。 研修ではケーススタディや擬似プロジェクトを通じて、プロジェクト設計から合意形成までを実践的に体験しました。 エンジニア研修｜AI時代だからこそ、仕組みを理解する エンジニア研修のテーマは、AIを活用しながらデザイナー自身が動くプロトタイプをつくれるようになることです。 ただし、いきなりバイブコーディングから始めるわけではありません。まずはHTMLやCSSを書きながら、Webの仕組みそのものを理解するところから始めます。AIがコードを書いてくれる時代だからこそ、生成されたものを判断するための基礎知識が必要だと考えているためです。 その後はAPI連携やCRUDなどの概念を学びながら、生成AIと協働してアプリケーション制作を行いました。 研修の後半ではバイブコーディングを活用し、デザイナー自身がプロダクトを実装する体験にも挑戦しました。 <img data-recalc-dims="1" loading="lazy" decoding="async" class="wp-image-77042 size-full" src="https://i0.wp.com/cms.goodpatch.com/wp-content/uploads/2026/06/26_img_04-1.jpg?resize=5282%2C3522&ssl=1" alt="エンジニア研修の様子" width="5282" height="3522" srcset="https:/
- 生成AI
- UIデザイン
- UXデザイン
新しいものが大好きなGoodpatchで5月話題になったアプリ、サービス、デザインまとめ（2026）｜Blog｜Goodpatch グッドパッチ
新緑が鮮やかに色づき、爽やかな風が心地よい5月を迎えました。 4月の慌ただしさから少し落ち着き、ゴールデンウィークで心身をリフレッシュできた方も多いのではないでしょうか。新しい環境にも少しずつ慣れ、自分なりのペースを掴み始める時期ですね。 そんななか、毎月お届けしている「まとめブログ」は今月から新体制がスタートします。先月の引き継ぎ期間を終え、今回からは今年の4月に入社した新卒メンバーだけで執筆を担当することになりました。新しい視点を取り入れつつ、皆さんに楽しんでいただける記事を作っていきます！ それでは今月もグッドパッチで話題になったサービスやトレンドを紹介します！ AI 地球のデータを「遊び場」に変える。NASA「Your Name in Landsat」に見るコンテンツデザインの妙 NASA made a typeface using satellite images of the Earth NASAは、2026年のアースデイ（4月22日）に合わせ、地球観測衛星の画像を活用したインタラクティブサイト「Your Name in Landsat」を公開しました。このプロジェクトは、NASAとUSGS（アメリカ地質調査所）が50年以上にわたり蓄積してきた膨大な地球のランドサット衛星データを起点に、一般の人々が宇宙や地球科学に親しみを持てるよう構想されたものです。 「宇宙から見た地球の地形で、自分の名前を綴る」をコンセプトに、アルファベットを入力するだけで、それぞれの文字に似た河川や山脈、氷河などの自然の造形美を組み合わせた画像が生成されます。文字をクリックすれば詳細な緯度・経度が表示され、Googleマップとも連動して実際の場所を探索できるなど、お堅いデータに「遊び心」を交えた新しい知覚体験を提供しています。 これは、単なる科学データの公開や広報活動の枠を超え、専門的で膨大な観測情報を個人のパーソナルな感動へと変換していくプロセスとして大きな意義を持っています。日常的なテキスト入力という行為をフックに、地球の壮大な自然へと意識のアンテナを向けさせることで、これまで見過ごしていた新しい視点が世界に広がっていることを示唆しています。 科学という「論理」の領域で磨かれたデータが、アートやエンターテインメントという「感性」の体験へと昇華される流れは、既存の枠組みに囚われない豊かなアプローチです。専門的で遠い存在に思えるデータを、個人の関心と結びつけて身近なコンテンツへと変換する見せ方の工夫は、企業の広報や情報発信におけるアプローチとしても非常に優れた好例と言えます。 サービス・プロダクト お茶の「香り」を、一生モノの体験へ。伊藤園発のジャスミンブランドが描く、五感を満たすデザイン。 伊藤園、社内ベンチャー発のフレグランスブランド「Crazy Jasmine」を新会社化 株式会社伊藤園は、社内ベンチャー制度から誕生したジャスミン特化型フレグランスブランド「Crazy Jasmine（クレイジージャスミン）」を分社化し、2026年5月1日（金）より事業を本格始動させました。このブランドは、長年ジャスミン茶の製品デザインに携わってきた社員が、自ら育てたジャスミンの花の香りに魅了された原体験を起点に構想されたものです。 「一年中、咲きたてのジャスミンの香りを楽しめること」をコンセプトに、香水やアロマオイル、ハンドクリームなどを展開しています。SNSでの大きな反響や3年間の実証を経て、5月28日からはブランド初となる路面型ポップアップストアを代官山で開催し、お茶づくりで培った「香りの知見」を新しい感性価値として提供しています。 これは、単なる新規事業の枠を超え、個人の深い感動を社会的な価値へと変換していくプロセスそのものに大きな意義を感じます。 今回の事業は、開発者の方が自ら育てたジャスミンの花の香りに魅了された原体験から発起しています。この背景を知ることで、普段の何気ない日常体験から知覚へのアンテナを張ることにより、これまで見過ごしていた新しい視点がいかに広がっていくかを教えられる思いがします。 飲料という「味覚」の領域で磨かれた知見が、フレグランスという「嗅覚」の体験へと昇華される流れは、既存の枠組みに捉われない豊かな発想です。私たちがデザインの現場で大切にしている「ユーザーの心に深く刺さる体験」は、こうした個人の強い偏愛や感性から生まれるのかもしれません。 ビジネス 「自分の絵が靴下になる」感動の裏側に。環境配慮技術GINGAが生む、新しい体験設計。 【ゴールデンウィーク企画】子どもが描いたデザインが“靴下に” 環境配慮型モノづくり体験 米国最大級の靴下メーカーの日本法人、レンフロ・ジャパン株式会社は、イオン株式会社との協業のもと、2026年5月1日（金）〜6日（水・祝）の期間、イオンモール倉敷にて「環境にやさしい靴下づくり体験イベント」を開催しました。ランドセルを購入した子どもたちが自らデザインした絵を、実際に一足の靴下として仕上げるワークショップです。 このイベントを支えているのが、同社独自の環境配慮型プリント技術「GINGA（ギンガ）」です。従来の染色工程を省き、白い靴下に直接インクジェットでプリントする製法により、大量の水使用や染料排水を大幅に削減。また、一足単位での生産が可能なため、アパレル業界が長年抱えてきた廃棄ロスの問題にも応えられる、次世代技術です。 このイベントで注目すべきは、サステナビリティという複雑なテーマを、楽しい体験の中に自然に溶け込ませている点です。「環境のために」と正面から訴えるのではなく、「自分の絵が本物の靴下になる」というワクワク感や、家族みんなでアイデアを出し合う時間を通じて、参加者が環境への理解をいつの間にか深められる設計になっています。デザインとテクノロジーの力で、人々の意識を自然に前向きへと変えていく体験設計の一つといえるでしょう。 イベント 「窓」は内と外をつなぐインターフェース。ガウディ没後100年、YKK AP「未来をひらく窓」が東京で開幕 ガウディ：未来をひらく窓 光をとり込み、内と外をゆるやかに隔てる——窓は、住まいと世界をつなぐ最も身近な「インターフェース」です。その窓に独創的な答えを与え続けたガウディの没後100年を記念し、YKK AP株式会社が展覧会「ガウディ：未来をひらく窓」を主催。バルセロナのメイン展に続き、東京・21_21 DESIGN SIGHTのサテライト展が5月16日（土）から7月12日（日）まで開催されます。 興味深いのは、主催が美術館ではなく、窓やドアをつくる建材メーカーである点です。バルセロナの会場は世界遺産のガウディ建築「パラウ・グエル」そのもので、建具やステンドグラスの実物が並びます。東京工芸大学との共同研究や、手で触れられる窓・取っ手の模型など、知見を「体験」へ翻訳する設計が随所に光ります。 AIで均質なビジュアルが量産される時代に、ガウディが多くの職人と手をかけた有機的な窓は、かえって新鮮に映ります。内と外の境界をどう設計するか——画面の中でインターフェースを扱う私たちにも、その問いは届きます。六本木で、ガウディの窓に出会ってみてはいかがでしょうか。 伝統工芸と先端技術の融合。ZOZO NEXT「呼色（よびいろ）」がコペンハーゲン「3daysofdesign」へ ZOZO NEXT、コペンハーゲンで開催される「3daysofdesign」で伝統工芸と先端技術を融合させた「呼色」のプロダクトを海外初展示 株式会社ZOZO NEXTが展開するプロジェクト「呼色（よびいろ）」が、2026年6月にデンマーク・コペンハーゲンで開催されるデザインフェスティバル「3daysofdesign」に出展します。 ZOZO NEXTは、ファッションをテクノロジーで再解釈し、AIやテキスタイル、XRといった幅広い領域で新規事業の創出やR&Dを行っています。その活動の一環である「呼色」は、各地の伝統工芸と最先端の技術を結びつけ、現代における新たな暮らしのあり方を提案するプロジェクトです。「今の時代の技術によって日本の工芸が変化を遂げるとしたら、どのような暮らしが実現できるのか」というテーマのもと、産地や職人、デザイナーとの共創によってプロダクト開発を行っています。 今回の展示では、伝統的な技法を現代のライフスタイルに合わせてアップ デートした作品群が公開されます。例えば、射出成形と漆塗工を組み合わせることで電子レンジ対応を可能にした漆器「URUSHICA」や、温度変化を色彩として視覚化する花器「ひととせ」など、技術によって伝統工芸に新たな価値が付与されたプロダクトが並びます。 北欧最大級のデザインイベントという舞台で、日本の工芸が持つ文脈に新たな技術的側面を加え、未来のライフスタイルにおける創造的価値を提示する試みとして注目されています。 ストリートカルチャーの未来価値。「agnès b. on aime le graff!! _50年、ストリートとともに」渋谷で開催 agnès b. on aime le graff!! _50年、ストリートとともに パリ発のファッションブランドagnès b.（アニエスベー）による国際巡回展「agnès b. on aime le graff!! _50年、ストリートとともに」が、2026年5月22日から6月8日まで、渋谷PARCOのPARCO MUSEUM TOKYOにて開催されます。 アニエスベーは、1976年の創業当初から絶えず「ストリート」を見つめ、衣服を通じて日常に寄り添いながらアートへの支援を続けてきました。 本展は、ブランド創設者のアニエス・トゥルブレが半世紀にわたりグラフィティアーティストを支え、共に歩んできた軌跡と、カルチャーに対する彼女の先駆的な眼差しに光を当てる展覧会です。 展示では、アニエス氏の膨大な所蔵コレクションからグラフィティの歴史を彩る作品群が一挙公開されます。FUTURA 2000や鈴木ヒラクなど、国内外のアーティストによるアート作品をはじめ、歴代のアイコニックな「アーティストTシャツ」のアーカイブや未公開資料が並びます。 カルチャーの発信地である渋谷という舞台で、ファッションとストリートアートが共鳴し合う文脈を紐解き、未来の創造的価値を提示する試みとして注目されています。カルチャーの交差点である渋谷で、半世紀にわたるストリートの記憶に触れてみてはいかがでしょうか。 【インテリア・建築好き必見】空間から「関係性」の設計へ 国際デザインシンポジウム開催 <img data-recalc-dims="1" loading="lazy" decoding="async" class="alignnone size-full wp-image-76976" src="https://i0.wp.com/cms.goodpatch.com/wp-content/uploads/2026/05/a2f651458a5a09f593784d48b1d27397.png?resize=1989%2C1083&ssl=1" alt="" width="1989" height="1083" srcset="https://i0.wp.com/cms.goodpatch.com/wp-content/uploads/2026/05/a2f651458a5a09f593784d48b1d27397.png?w=1989&ssl=1 1989w, https://i0.wp.com/cms.goodpatch.com/wp-content/uploads/2026/05/a2f651458a5a09f593784d48b1d2
- UIデザイン
- UXデザイン
- デザインイベント
- 生成AI
AI議事録ツール活用術──Notta・Notion・NotebookLM、情報を資産に変えるデザイナー3人のリアル｜Blog｜Goodpatch グッドパッチ
AIツール活用において最初の一歩になることの多い議事録。今は対応しているツールがたくさんあるため、どれを使えばいいのか迷う方も多いのではないでしょうか。しかし、正解はひとつではなく、ツールの組み合わせと貯め方の設計こそが生産性を左右する大事なポイントになるようです。 2026年2月に配信したPodcast「カウンター越しで、AIの話を。#2」から、グッドパッチのデザイナー3人が語るミーティングにおけるAIツール活用の一部をご紹介します。今回のエピソードもSpotifyでお聴きいただけます。トークの全編はぜひ音声でお楽しみください。 ▼ 「カウンター越しで、AIの話を。#2」はこちら Spotify ：https://open.spotify.com/episode/6h0KgKLKsQFVncP8etKylz?si=kt0Q6d-bSVS26U7rGA7Zbw Amazon Music ：https://music.amazon.co.jp/podcasts/cc392353-82aa-4096-a787-8206f3aec0b3/episodes/1b56257d-481e-4e8c-9bf2-b2afc7591e03 ＜Speakers＞ 石田 健二｜プロダクトデザイナー / PdM/ PMM 広告グラフィックデザインを皮切りに、マーケ・開発・事業企画と多彩なキャリアを経てグッドパッチへ。LLM・自然言語処理に10年以上携わり、AIサービスの開発、AIを利用したプロダクト・事業開発に従事。 黒子 知晃｜ワークショップデザイナー / デザインテクノロジスト AI・AR/VRを活用したサービス開発を経てグッドパッチへ。現在は社内AI活用推進や社外研修、ワークショップデザインと幅広く活動しながら、現場で得たナレッジを社内外につなげている。 鵜飼 のどか｜サービスデザイナー グッドパッチで人事（新卒採用 / ピープルエクスペリエンス）として社内イベントや働きやすい環境づくりを担ったのち、サービスデザイナーに転身。リスナーと同じ目線でAIを学ぶ、本番組MC。 あえて「ひとつで完結」させない？組み合わせてこそ機能するAI議事録ツール 3人のAI議事録ツールの使い方を話していく中で浮かび上がったのは「ツールごとに得意分野が異なる」ということ。プロダクトデザイナー / PdMの石田は、NottaとNotionを状況に応じて使い分けていると話します。 石田： 僕はNottaとNotionの2つを利用することが多いですね。Notionはドキュメンテーションに落としやすかったり、要約してくれたり、優秀なまとめ方してくれますね。パソコンのマイクでも拾ってくれるので、事前に自分が話したことをメモとしても活用しています。Nottaは録画・録音をしてくれるので見返しやすいですし、発話者も拾ってくれるので誰が言ったかが分かるんです。 特に、（会議体の流れが分からない）スポットのミーティングだとNottaが優秀ですね。発話者が分かってる方がNotionでまとめてくれる時、精度は高くなるので、組み合わせて活用するのがAIツールとしては正しいのかなと思います。 Notta 文字起こしイメージ 鵜飼： NotionとNottaは、同時に議事録を取ってるんですか？ 石田： 同時に議事録を取る場合もありますし、NottaでまとめたものをNotionで要約する、という使い方もしますね。発話者が分かってる方がNotionもうまくまとめてくれやすいんです。得意なところを組み合わせて使うのが、AIツールとしてはよいのかなと思います。 鵜飼： 確かに言われてみれば、発話者が出てくるのってあまりない印象で、私も発話者がたまに分からなくなるときがあります。議事録を見た時に「これ誰が話してたのかな？」みたいな。 石田： そうですね。そこら辺が分かるAIツールって他にもありますけど、一つの得意技かなとは思いますし。逆に、拾ってくる音声とか言葉の処理は、意外と話者が分からないツールの方が得意だったりして。それぞれの得意分野みたいなものを見極めるのが大切かなと。 貯め方からの逆算思考──NotebookLMへつながるワークフロー ツールが持つ特性と適したシーンを見極めることが、議事録ツールの選び方のキモになる──。その後、3人の話題は「ワークフロー」に。ツールを生産性の向上につなげるためには、自動化する部分の設計も重要になるようです。多くの打ち合わせに参加することの多い黒子は、「議事録をどこに溜めるか」を事前に設計し、Google MeetとGASで自動で分類するワークフローを自作しているといいます。 黒子： Meetが作成した議事録やファイルがGoogleドライブに追加されたことをトリガーに、そのファイルを別の場所に移動する、コピーするというワークフローを組んでおく。そうすると、プロジェクトごとに議事録が溜めていく状態が作れて便利ですね。 鵜飼： ワークフローには、どういうツールを使ってるんですか？ 黒子： GoogleのApps Script、いわゆるGASでやってます。AIに聞けばコードを書けるので、慣れていない方でも挑戦しやすいと思います。 このワークフローの先には、NotebookLMとの連携があります。Driveに蓄積された議事録を、NotebookLMが参照することで、複数回のミーティングをまたいだ情報整理や検索が可能になるのです。さらに、貯めた議事録はアウトプットの素材としても使えます。元の情報はGoogleドライブに溜まると、そこからNotebookLMとも連携しやすいんです。 鵜飼： やはり溜めておくだけではなくて、そこからどのように活用するかも考えて設計しますよね。NotebookLMだとスライド化もできるので、議事録を読むよりもちょっと楽しみがあるというか。視覚的な豊かさを表現できますよね。 今回のPodcastをもとにNotabookLMで作成したインフォグラフィック まとめ 議事録は「共有するもの」から「伝わる形に変換するもの」へと役割が変わりつつあるようです。議事録のAI活用を「記録」ではなく「伝達の設計」として捉え直すことが、次のステップになるかもしれません。 今回の対話を通じて見えてきたのは、議事録を生成した後の活用を見据えた「ツール選び」の重要性です。それぞれのツールが持つ得意分野を理解して組み合わせることで、議事録を正しく取ることだけでなく、情報の活用に付加価値をもたせることができるのではないでしょうか。 今回のエピソードも各配信サービスでお聴きいただけます。トークの全編はぜひ音声でお楽しみください。 番組紹介「カウンター越しで、AIの話を。」とは デザインカンパニー・グッドパッチの中の人が、仕事の合間に一息つきながら、生成AIやテクノロジー、これからのデザインついてゆるりと話すポッドキャストです。 異なる専門性を持つパーソナリティが「デザイン」の視点で気になった話題を取り上げながら、隔週木曜日に台本なしのリアルなトークをお届けします。 ▼番組ページ Spotify ：https://open.spotify.com/show/2vdwnyGHnCxsjIdsCQrcEo Amazon Music ：https://music.amazon.co.jp/podcasts/cc392353-82aa-4096-a787-8206f3aec0b3/
- 生成AI
- Notion
- Google Apps Script
Claude Codeでデザインのワークフローを変えたら、役割の境界が融けていった話──越境するほど鮮明になる、デザイナーの「核」とは｜Blog｜Goodpatch グッドパッチ
こんにちは。グッドパッチのUI/UXデザイナーのナスカです。 最近、仕事で「Claude Code」の話を聞かない日がありません。エンジニアはもちろん、デザイナーやPdMも使い始めていて、「AIが実装してくれる」「コードを書かなくても動くものが作れる」という話があちこちから聞こえてきます。 そんな波の中で、私もプロジェクトでClaude Codeを使い始めました。最初は「デザイナーが使うものなのか？」と半信半疑でしたが、気付いたらワークフローがまるごと変わっていました。 この記事は、Claude Codeがどう仕事を変えたのか、やってみたこと、変わったこと、変わらなかったことを正直に書きます。以下のようなことに興味がある方は、ぜひ読んでみてください！ AI時代にデザイナーのキャリアをどう築いていけばいいか、考えている方 現場でAIがどう使われているか、具体的なイメージが欲しい方 デザイナーの役割がこれからどう変わっていくか、気になっている方 「デザインは固まっているのに、手が足りない」をきっかけに開発にチャレンジ 私は今、APO・デザイナー・フロントエンドエンジニア・バックエンドエンジニア・QAが並走する大規模なスクラムが進む、とあるプロダクトの開発プロジェクトに参画しています。 開発にあたって直面している問題が、「デザインの方向性は固まっているのに、エンジニアの工数が足りない」というものです。VOC（ユーザーの声）を基にしたプロダクトの改善も、優先度の関係でなかなか手が回らない。 この状況を乗り越えるため、私はデザイナーでありながら、初めてフロントエンドの開発に挑戦してみました。その裏には、正直、このままデザイナーとして手を動かすだけでいいのか、キャリアを考えたときに「できることを増やさないと」という焦りもあったように思います。 開発にチャレンジするにあたって、まずは使うツールから見直しました。Web会議もZoomからGoogle Meetに切り替え、Google Geminiでリファインメント（次のスプリントで着手する内容を確認・整理するミーティング）の場で話された内容を文字起こしします。 その文字起こしや過去のリファレンスを基に、Claude Codeが要件定義書の叩きを自動生成します。あとはClaude CodeとUIやUXの要件を対話しながら詰めていくという形です。 Claude Code活用の全体像 開発でもデザインでも、何をするにもWhyが大切です。「なぜ、この機能が必要なのか」「なぜ、このUIなのか」──。その問いを深掘りして問い直し、より良い提案へとつなげていく。その過程をClaude Codeが時間ごと圧縮してくれるようになりました。 Claude Codeを取り入れてワークフローを見直した その後、私はフロントエンジニアとモブプログラミングをしながらGitHubの「お作法」を学び、UIコンポーネントからスタイル定義、テストデータまで自分で作れるようになっていきました（tsx・Stories・Mockなど）。 似たようなデザインパターンがすでに実装されているもの、コンポーネントの改善、軽微な微調整はClaude Code起点で動かせるようになりました。 一方で新規画面についてはFigmaで作成し、MCP経由でリンクを共有。Claude Codeが同じコンポーネントを探し、見た目の再現度が高い状態で実装してくれます。この流れが自分の中で定着してきました。Figmaの役割もマスター管理の場というよりも、新しい画面を検討するための場になってきているように思います。 最初は、VS CodeやCursorといったコードエディタやコマンドにアレルギーがあったものの、ターミナルだけでなくGUIで操作できるツールも充実しているので、一連の操作を繰り返すうちに自然と慣れていきました。 AIはGitHubの操作も自動でやってくれますが、コマンドの意味やコードエディタがどういうものかは、最低限理解しておく必要があると思っています。 今どんな操作が行われているのか、ローカルとリモートにどんな影響があるのかを把握していないと、AIが何をしているのかが分からないまま進んでしまいます。道具に使われないために、仕組みの輪郭だけは自分で把握しておく。それがAIとパートナーを組む上での必須のスタンスだと感じています。 ちなみに、AIが作業を回してくれている間に、Slackの返信やプロジェクト外のタスクなど、小さいサブタスクが並行して回せるようになり、動ける範囲が広がりました。実はこの記事自体も、Claude CodeとグッドパッチのPR観点レビューのSkillsを活用し、AIと行き来しながら書いています。 デザイナーに求められる「評価」の役割 チームのデザイン品質も仕組み化 私自身は、デザイナーからエンジニアの領域に踏み出したわけですが、こうした「越境」はデザイナー以外でも起こっています。 バイブコーディングで誰もがアウトプットを出しやすくなった今、逆に言えば、それを評価できる目の価値が上がっています。 非デザイナーがUIを作る機会が増えているのに、自分でデザインを評価できる仕組みがない。プロジェクトチームが抱えていたこの課題に気付き、品質チェックのGemを作りました。JIS、デザイン原則、プロダクト固有のガイドライン、アンチパターンといったチェック要素を組み込み、非デザイナーでも使いやすい形にしています。 さらに、実装の場でも活用できるようにスキル化して、Claude Codeとの開発フローにも組み込みました。コードを書きながらデザイン品質を確認できるようになったことで、後工程のレビューの手戻りが減っています。 ディレクトリ構成の例 ここで一つ、前提として伝えておきたいことがあります。今回のClaude Codeを使った実装がスムーズに回っているのは、デザインシステムが整っている状態があってこそです。 コンポーネントの命名規則、スタイルの定義、アクセシビリティの基準──こうした土台がなければ、AIは”それっぽいもの”を作ることはできても、人によってアウトプットがバラバラになり、属人化してしまうという課題が生まれます。品質を担保するのは難しい。その環境を整えるには、本来かなりの時間と専門知識が必要です。 グッドパッチのデザインシステム「Sparkle Design」は、この土台作りの工程を大きく省力化してくれます。品質の高い「いいデフォルト」が用意されているので、ゼロから設計しなくてもすぐ使える状態からスタートできます。 さらに、バイブコーディングで出力したコンポーネントが、ガイドラインやアクセシビリティ基準、アンチパターンに沿っているかを自動でチェックしてくれる仕組みが備わっています。デザインシステムを意識しなくても、アウトプットの品質が担保される。この安心感があるからこそ、実装のスピードを上げることができています。詳しくはこちらのブログもぜひ読んでみてください。 AI時代のコンポーネントライブラリ制作──Sparkle Design for Reactで考えたこと 先日ついにガイドラインサイトとReactコンポーネントライブラリを公開した「Sparkle Design」。 グッドパッ … 仕組み化という観点でもう一つ紹介したいのが、グッドパッチ社内で使われているスキルの共有サービスです。 デザインレビュー、コードレビュー、議事録作成、PRの文章生成……チームや個人の「やり方」を言語化して、再利用可能な形にまとめたスキルをインストールできます。「誰かのノウハウ」を「チームの資産」に変える仕組みとして、必要な場面でスキルを探して使う形が社内で定着しつつあります。 境界が融けるほど、デザイナーの「核」が鮮明になる デザイナー、フロントエンジニア、PdMといった職種の境界が融けていく。これはグッドパッチのデザイン組織の方針でもありますが、スクラムの現場を経験して、自分ごととして捉えられるようになりました。 でも、越境する中で気付いたこともあります。実装ができるようになっても、自分の中でずっと変わらない問いがあるのです。 例えばAIのアウトプットを見たとき、「このグレーの色、もう少し調整できないか」「この角丸と余白のバランスが気になる」と思ってしまう。これはスキルではなく「自分が納得できるか」という基準、いわば「審美眼」のようなものです。こうしたレビューは、引き続きデザイナーがやる必要があるのでしょう。 プロダクト開発でも、Why（なぜやるのか）、What（どんな価値を提供したいのか）、How（それをどう提供するのか）の要件整理は、誰かがやらなければ本質的な課題を解決できなくなります。 そして、AIにはできないことがもう一つあります。現場に行き、実際にユーザーになって使うなど、一次情報を取りにいくこと。ユーザーが置かれている状況や、その場の感情の機微は、データや文字起こしだけでは見えてこない部分がほとんど。ユーザーの気持ちと課題を圧倒的に理解できる人間であること。それもデザイナーが守るべき核だと考えています。 非デザイナーのアウトプットに対しても、その観点でフィードバックしながら一緒に学んでいける環境を作りたくて、ガイドラインを整備し、Skillsを共有し、ナレッジを共有するSlackチャンネルも作りました。グッドパッチ社内でもクライアントワークでも、やり方を模索中です。 「デザイナーが手掛ける領域は『デザイン』だけではない」ということと「ユーザー体験の責任を持つのはデザイナーだ」というのは、一見矛盾しているように見えるかもしれませんが、自分の中では整合しています。越境するほど、核として守るべき領域が逆に鮮明になっていく感覚です。 生成AIが普及しても、ユーザー体験の責任を持つのは「人間」に変わりはない AIが普及しても、サービスやプロダクトに込められた想いを届けるのは人間に変わりはありません。たくさんのリファレンス、AIのデータ、ユーザーの声──いろんな文脈を理解した上で、最後に決めるのは人間です。デザインのアウトプットも、コードも、生成AIのアウトプットを鵜呑みにすることはこれからもないと思います。最後は人が評価して、意思決定します。 役割や職種の境界が融けたとしても、最後に体験の責任を取るのは誰か。自分はデザイナーだと答えます。ユーザーとのコミュニケーションも人間が担うべきポイントですし、チームが回る仕組みを作るきっかけも、組織が抱える課題に気付き、解決しようと思えるのも、現場にいる人間に他なりません。 もう一つ、AIが普及したからこそ感じているポジティブな変化があります。かつては「やってみたい」という想いがあっても、技術的なハードルがそれを阻むことがありました。でも今は、AIがその壁を大きく下げてくれています。 ものづくりが好きで、誰かの心を動かしたいという想いがある人にとって、これはすごくうれしい変化です。この観点については、グッドパッチのクリエイティブディレクター・栃尾さんのブログに詳しく書いてあるので、ぜひ読んでみてください。 AIでデザインをつくれる時代に、私がデザイン
- 生成AI
- UIデザイン
- UXデザイン
- デザインシステム
- Figma
気付けば、Figmaで画面を作らなくなっていた。デザイナーがバイブコーディングでプロトタイプを作った話｜Blog｜Goodpatch グッドパッチ
こんにちは。グッドパッチでUI/UXデザイナーをしているKCです。今日は、デザイナーの仕事に欠かせない「プロトタイプ制作」にまつわる話をしようと思います。 ユーザー検証のために、Figmaでプロトタイプを組むのは、多くのデザイナーが経験したことがあると思います。 ただ、画面と画面を線でつなぎまくるあの作業、しんどくないですか……？ 画面が増えるたびにフレームを複製し、線を引き直して、状態違いを作り分けて、インタラクションを一つひとつ設定する。条件分岐を入れようとするとさらに複雑になり、修正が来ればまた張り直し。それだけ手間をかけても、出てくるのは結局“絵の集合”で、ユーザーに触ってもらっても、紙芝居感が残って「本当に使えるか」までは検証しきれないこともある。 手間の割に検証の解像度が上がらない、もったいない時間の使い方をしているのではないか──。そんな違和感を抱えてきた人は、結構多いんじゃないかと思います。正直に言うと、2カ月前の僕もそうでした。 そんな中で、あるプロジェクトで思い切ってFigmaの画面を1個も編集せずに、Claude Codeを使ったバイブコーディングだけで6機能分のプロトタイプを作る、という挑戦をしてみました。 結論から言うと、Figmaで「絵を描く」のをやめ、Claude Codeを相棒に「動きを対話する」。この感覚の切り替えで、Figmaで線をつなぎまくる時間は丸ごと消え、検証の解像度もスピードも別物になりました。備忘録も兼ね、この記事では2カ月で起きたことを順を追って振り返っていこうと思います。 小さく試したら、4日で2機能がFIX 気付けば、Figmaで画面を作らなくなっていた プロトタイプ作成に生成AIの力を使う。そのきっかけは、プロジェクトがこんな状況になっていたからでした。 約1.5カ月で6つの機能のプロトタイプを機能検討段階から作る 検証は実店舗で行い、ユーザーにアプリのプロトタイプを触ってもらう 「この期間ではFigmaで全機能を作りきれない」というほどスケジュールが切迫していたわけではありませんが、むしろ僕が気にしていたのは、検証フィールドが店舗だからこそ、ユーザーが“実際のアプリを触れる感覚”で操作できれば、検証の質がぐっと上がるのではないか、という仮説でした。画面の紙芝居どまりでは、店舗で得られるはずの解像度には届かない。そんな懸念があったのです。 そこでまずは、比較的シンプルな機能を1つ、Claude Codeで組めるかどうか試すことから始めました。いきなり全機能に適用するのではなく、リスクを限定して小さく試すところから。正直なところ、半信半疑のスタートです。 ところがこれが想像以上に早かった。着手から4日ほどで2つの機能がFIXしたんです。Figmaで線をつないでいたら、まだ画面の作り込みをしている段階ですが、もう「触って検証できる完成形」が手元にある。 「え、これ、いけるんだ」。 この手応えが、その後の判断を全部変えました。スピードも検証物の質も明らかに上がるのならと、残りのプロトタイプもすべてバイブコーディングで作る方針に。とはいえ「Figmaは必要な道具」と思っていたので、いつものようにFigmaで画面を組み始めようと考えていました。 ただ、バイブコーディングで作る中で、こんなことに気付いていきました。 既存のデザイン情報は、Figmaから「読み取る」だけで十分だった 画面を組んだり線をつないだりする作業は、Claude Codeに依頼したほうが圧倒的に速くて精度も出る 修正も「ここの色をもう少し落として」「この遷移にローディング入れて」と話しかけたほうがラク 気付けば、Figmaで画面を作る作業が一つもなくなっていました。新しく画面を組んだり、線をつないだり、状態を作り分けたり──以前なら当たり前のようにFigma上でやっていた作業が消えていたのです。 「Figmaを使わない」と決めた瞬間があったわけではなく、一つひとつの作業について「速くて正確な方法」を選んだら、結果的にFigmaで画面を作る作業はゼロになっていた、というのが正確な感覚でした。 もちろん、Figmaそのものを全く使わなくなったわけではありません。デザインシステムを整備するとき、既存画面の情報設計をチームで見直すとき、ビジュアルの方向性をそろえていくとき──Figmaのキャンバスが主役になる場面は、今も変わらずたくさんあります。 今回減ったのはあくまで、「画面を量産する」「線でつなぐ」といった、プロトタイプ制作にまつわる手の動かし方でした。Figmaの役割が消えたのではなく、Figmaに任せる仕事と、Claude Codeに任せる仕事の境界線が、自分の中で引き直されたという感覚に近いと思っています。結局、見直すべきだったのはツールそのものではなく、「プロトタイプはFigmaで作るのが当たり前」という、自分の中にあった思い込みだったのかもしれません。 プロトタイプの制作・検討・共有 3つの場面での生成AIの生かし方 ここからは「Figmaで画面を編集せずにプロトタイプを作る場合、実際にどう進めるのか」というHowの話に入ります。 プロトタイプの制作・検討・共有。大きくこの3つの場面それぞれで、順番に僕が実際にやっていたことをまとめます。これらの作業は並行して進めることが多いため、ステップというより、“3つの場面”くらいの感覚で読んでもらえると、ちょうど良いかもしれません。 【制作】最も手間がかかるのは、既存デザインシステムへの忠実さ Figmaで画面を作らなくなった代わりに、最も手を動かすことになったのが「既存のデザインシステムにどれだけ忠実にそろえられるか」という点でした。 確かにAIは賢いですが、放っておくと「それっぽい」けど微妙にズレたUIを出してきます。色味が少し違う、余白が共通スケールに乗っていない、フォントウェイトが微妙に違う、など。今回のプロトタイプを触ってもらうユーザーは、既存のアプリを使っている人たちなので、できるだけ既存のデザインを踏襲できることが望ましい状況だったのです。 僕が試行錯誤の末にたどり着いた、デザイン情報の渡し方の使い分けがこちらです。 特に「FigmaのCSSコピー機能」と「SVGの直接渡し」は精度が高く、コンポーネント単位ではスクショよりはるかに正確に再現してくれます。 加えて、複数機能・複数バージョンを作り続けると、同じはずの色や余白が少しずつ揺れていく。そのため、デザイントークンを定義したCSSファイルを1枚、すべてのプロトタイプから読み込ませる”おおもとのファイル”として運用する形に切り替えました。Figma側で変更があれば、このCSS1枚を更新するだけで全プロトタイプに伝播します。 そして、進めるうちにもう一つ気付いたのが「言葉で書かれたデザインシステムの取扱説明書」が、AIにはものすごく効果的、ということでした。 途中からは、デザインの原則や命名規則、トークン、コンポーネントの使い分け、運用ルールをMarkdownで言語化した「DESIGN.md」という1枚の索引ファイルを用意して、Claude Codeが常にそれを参照できる状態にしました。 CSSは「数字の正解」を伝える役割、DESIGN.mdは「なぜそのデザインなのか／どう使い分けるべきか」という意図と運用の理解を伝える役割。この二段構えにしてから、AIから返ってくるアウトプットの“ズレ”がさらに減っていきました。 ただ、正直に言ってAIへの指示の出し方については、まだ完成形にたどり着いていません。今も運用改善を進めている領域です。 【検討】Figmaを触らずに、複数案の検討ってどうやるの？ ここまで読んだ人の中には「Figmaで画面を組まないなら、A案・B案を比較検討するときって、どうやって進めるの？」という、疑問が浮かんだ人もいるかもしれません。 その答えは至ってシンプル。複数案をClaudeとの会話で並行して用意します。 「このボタン、A案は強調する方向で、B案は控えめにしてみて」「このシート、A案は下から、B案は中央から出すパターンで作って」。こうしたやりとりを重ねれば、Claude Codeの上で複数のバリエーションがそのまま立ち上がっていきます。 さらに、用意した複数案を1枚のHTMLファイルに並べて、提案書のように仕立てることもできますし、その提案書上で直接プロトを触ってもらうことも可能です。「触れる提案書」という選択肢が手元にあるだけで、検討フェーズの引き出しは一つ確実に増えると感じています。 【共有】プロトタイプの共有ツールも、バイブコーディングで自前で開発 もう一つ、運用面で触れておきたいのが、プロトタイプの共有方法です。 今回作っているプロトタイプはHTMLファイルです。これをユーザーテスト参加者やクライアントに触ってもらうには、配信のための仕組みが必要になります。 そこでプロトタイプを共有するためのサービスそのものも、バイブコーディングで自前で組むことにしました。Claude Codeに「HTMLファイルをアップロードして、URLで限定的に配信できるシンプルな仕組みを作って」と話しかけて、プロトタイプ配信用のミニサービスを内製したんです。 ただし、当然ながらセキュリティ面の設計には、細心の注意を払う必要があります。クライアントワークでは、プロトタイプそのものがNDA対象の機密情報です。アクセス制限、パスワード、配信期限、URLの推測困難性。基本的なセキュリティ要件は、自前で組むからこそ、自分で設計しきる必要があります。手軽さに引っ張られて、ここをおろそかにしては絶対にいけません。 それさえ押さえれば、配信インフラまで自分の手で組み上げられる。これも、Claude Codeを“道具として持つ”ことで広がる選択肢の一つです。 生成AIでプロトタイプを作成して、何が変わった？1.5カ月走って見えた3つの変化 プロトタイプ作りに生成AIを使ってみてまず驚いたのは、Figmaで「絵を描く」ことから、Claude Codeを相棒に「動きを対話する」ことへ、作業の感覚そのものが変わったことでした。この変化を起点に、プロトタイプ制作の前後の工程まで、いろんな場面で「あ、これも変わったな」が連鎖していきました。 1.作る“手間”が丸ごと消え、検証までのスピード感が別物に フレームを複製して、線をつないで、状態の分岐を作り、インタラクションを一つひとつ設定する。正直しんかった作業を、6機能ぶん丸ごとスキップできてしまった。プロトタイプ制作という文脈においては、Figmaは「デザインの情報源」、プロトタイプはコードベース。この役割分担が自分の中できれいにハマった瞬間でした。 そして、これは自分でも驚いた変化ですが「1.5ヶ月で6機能」という量を検討段階から進め、しっかりと触れる検証物としてそろえられたこと自体が、Figmaで線をつないでいたら絶対に起き得なかった結果です。1機能あたり、制作着手から数日でPdMの承認まで到達するスピードで進められて、機能FIXまでの時間は体感で半分以下になりました。 クライアントとの議論も「このボタンを押したらどうなる？」というものではなく、「この遷移、もう少しこうしたい」と具体的な議論から始められる。検証物の設計が精緻になると、フィードバックの解像度も上がる。これは想像以上に大きな変化でした。 支援先のクライアントからも「要望を伝えてから現物が返ってくるレスポンスがとても速く、翌日には、なんなら当日中に、動くものとして見せてくれる。品質は従来のFigmaでのプロトタイプ制作と変わらないまま、スピードが増した分だけ、品質を高めるためのPDCAを惜しみなく回せる感覚があった」と評価いただいており、プロジェクトで実施する価値を感じています。 2.Figmaでは作れなかった検証物が、作れるようになった これも始める前はまったく予想していなかった収穫でした。Figmaのプロトタイプは「画面間をつなぐ」ことでの表現までしかできないですが、今回作ったプロトタイプでは、こんなことができるようになりました。 カメラを起動して、対象物をその場で画面に映せる 検索ボックスのキーワードでリストがリアルタイムに絞り込まれる 入力したメモを保存して、別画面の一覧にちゃんと反映される このように、条件分岐や状態保持、デバイス機能まで含んだ“本物に近い挙動”まで組み込めるようになりました。ユーザーの「あ、ちゃんと動く」という体験まで含めて検証できると、フィードバックは「画面の話」から「体験の話」へと一段上がります。 3.現場でリアルタイムに、プロトタイプの改善ができた 検証の現場で起きることも変わりました。これまでなら「次回までに直しておきます」が精一杯だった「ちょっと分かりにくい」というフィードバックを、検証の合間に一部反映して、次のテストからは改善版を触ってもらう。そんな対応ができたんです。 “検証→改善→再検証”が日単位で回ると、議論は「想定通りに動くか」じゃなく「直したところは本当に良くなったか」「次に潰すべき課題はどこか」という、一段先のレベルに上がります。検証期間を、仮説を確かめる時間から、磨き込む時間に変えられた。これは大きな変化でした。 「これはさっきのインタビューでも同じところでつまずいていたな」という分かりきった検証にならず、毎回新たなポイントを検証できる、という点は、クライアントからも非常に好評でした。 AIで変わるデザインの仕事。だからこそ、まず触ってみることが大事 ここまで書いてきた1.5カ月の変化は、僕個人だけの話ではなく、デザイン制作のあり方そのものがAIで変わり始めている、その入り口の話だと感じています。 「画面を作って」「線でつないで」「ハンドオフする」が当たり前だったプロトタイプ制作の前提が、「言葉で伝える」「動きを対話する」「自分の手で動くものまで組み上げる」という形へ変わりつつある。デザイナーが扱える対象と粒度が、根本から変わってきている
- 生成AI
- UIデザイン
- UXデザイン
- プロトタイピング
コクヨの組織成長ソリューション「TEAMUS」 グッドパッチと進めた、ファンを生むための「ブランドづくり」｜Blog｜Goodpatch グッドパッチ
文具から始まり、オフィス家具、空間デザイン、通販事業と、使う人のニーズや体験に合わせて事業領域を広げてきたコクヨ。2025年5月に人事領域の新規事業となる「TEAMUS（チームアス）」をリリースしました。 「TEAMUS」は、企業が抱える組織課題に、働く人の集まりである「チーム」という切り口に着目し、サーベイの実施、結果分析、伴走支援といったサービスを通じて、組織と個人の持続的な成長を促すソリューションです。グッドパッチはプロダクト開発に加え、リリース後のマーケティングの領域も伴走支援を行いました。 顧客に対してどうアプローチするか、というマーケティングはリリースしてからが本番。ユーザーニーズを把握し、シナリオやアプローチを考え、施策をブラッシュアップしていく──その営みに並行して、新規プロダクトの世界観を守るため、着々とブランド強化のための施策も進めていたと言います。今回はTEAMUSのマーケティングチームとの対談から、リリース後の裏側に迫ります。 ＜話し手＞ コクヨ株式会社 グローバルワークプレイス事業本部 ビジネスディベロップメント本部 HRCAソリューション部 マーケティンググループ 林さん 杉山さん 栗尾さん Goodpatch プロデューサー 木下 Goodpatch UI/UXデザイナー・ブランディングデザイナー 有末 プロダクトリリース前後でマーケティングも大忙し、それでも「ブランディング」が大事だと考えた理由 ──先日は組織成長ソリューション「TEAMUS」の開発背景について伺いましたが、今回はTEAMUSのマーケティングに関する取り組みのお話を聞ければと思います。このプロジェクトはいつ頃から始まったのでしょうか。 コクヨ 林さん： TEAMUSのマーケティングについては、プロダクト開発に並行して議論はされていましたが、正式にチームとして立ち上がったのは2025年、リリースの4カ月前くらいです。4月にWebサイトの立ち上げ、5月はイベント「TEAMUS DAY 2025」の開催、6月は展示会「HR EXPO」への初出展と大イベントが目白押しで、メンバーがそれぞれ準備に走り回っている状況でした。 コクヨ株式会社 グローバルワークプレイス事業本部 ビジネスディベロップメント本部 HRCAソリューション部 マーケティンググループ グループリーダー 林さん コクヨ 杉山さん： 当時は私が主にイベントを、展示会を栗尾さんが担当するという体制でした。ただ彼はまだ入社2年目、少数精鋭のチームで展示会ラッシュに挑む中、アウトプットの質とスピードを高めるために、グッドパッチの皆さんに相談させていただく運びになりました。 ──グッドパッチ側はUIデザイナーの有末さんが中心に動いていたと伺っています。 Goodpatch 有末： 私はもともとTEAMUSのプロダクト開発でUIを担当していて、2025年4月にマーケティンググループの施策にジョインしました。ブランディングの領域に関わりたいとチーム内で提案もしていたので、希望が通った形でうれしかったです。 ──ブランディングの領域に関わりたいと考えていたのはなぜですか？ Goodpatch 有末： 当時はTEAMUSの提供機能などのプロダクト定義は着実に進んでいたものの、対外的なブランディング施策はこれからという状況でした。開発が先行する一方、プロダクトが持つコアな価値や目指すべき全体像は、メンバーそれぞれの「想い」として大切に共有されている状態でした。ただ、これからさらにチームが大きくなっていく中では、その想いを言葉として形にして、みんなが同じ方向性で歩んでいけるようにしたいと考えていました。 Goodpatch 木下： プロダクトローンチ前後はどうしても目の前のスケジュールが優先になりがちですが、だからこそ早い段階でコアとなる指針を持つべきだと林さんと話していました。 アウター向けに「TEAMUSが市場でどう語られるべきか」という軸を作ることはもちろんですが、ちょうどコクヨ様に新しいメンバーが増え始めていた時期でもあったので、インナー向けにも、皆さんが使う言葉やメッセージを揃えていくことが重要だと感じていました。 Goodpatch プロデューサー 木下 コクヨ 杉山さん： TEAMUSは企業の人事部など、これまでコクヨがあまりアプローチしてこなかった顧客を開拓していく必要があります。それこそ初期は「プロモーションでコクヨの名前を出すのか」というところから始まり、どのような見せ方をするか毎週議論し、方針も話し合いを重ねるたびにアップデートされていくような状況でした。 グッドパッチの皆さんからブランディングの提案をいただいた当初は、その重要性を理解しつつも、「今は目の前の施策を動かすことが最優先ではないか」という現場としての率直な葛藤もありましたね。 プロダクトのアピールポイントが人によって違った 展示会での気付きを契機にメッセージを定義 ──さまざまなイベントが迫る中、有末さんはまず何を行ったのでしょうか。 Goodpatch 有末： 最初の3カ月はイベントや展示会に向けて、私は顧客体験の設計、栗尾さんはブース設計と全力疾走していました。6月に展示会が終了したタイミングで振り返りを行った際、来場者にアピールしたポイントがメンバーによって異なっていたことが分かりました。それに対する顧客の反応も含めて整理するため、私がメンバー全員と1on1を行うことになりました。 Goodpatch UI/UXデザイナー・ブランディングデザイナー 有末 ──なるほど。でも裏を返せば、顧客もそうですし、メンバーそれぞれがTEAMUSのどの部分に価値を感じているかを知るチャンスにもなりそうですね。 Goodpatch 有末： そうですね。展示会ではさまざまな職種のメンバーが対応したこともあり、具体的に来場者へお伝えしている内容も三者三様でした。機能について解説する人もいれば、「コクヨのサービスである」というブランドを前面に打ち出す人もいたりと、それぞれの強みでサービスを語っている状態でした。 「TEAMUS DAY 2025」や「HR EXPO」など、立ち上げ期に取り組んだイベント・展示会 ──関係者全員が、それぞれの立場でサービスに対する強い想いがあるからこそ、多様な説明が生まれていたと。 コクヨ 杉山さん： HR EXPOはTEAMUSにとって初めての展示会で、ユーザーの方と初めて会う機会だったこともあり、メンバーそれぞれが持っている仮説をぶつけるという場にしました。 核となる共通のメッセージがあった方がいいとは思っていたのですが、当時は、メンバーそれぞれの思いやアクションを大切にしていました。そのような事業フェーズに、グッドパッチさんのような客観的な視点を持つ社外の方と議論しながら進めていくことは重要だと考えていました。また、プロダクトのリリース直後だったため、固定的なメッセージで可能性を狭めてしまわないよう、柔軟さを残しながら「今の最適解」を探りたかったという狙いもありました。 コクヨ株式会社 グローバルワークプレイス事業本部 ビジネスディベロップメント本部 HRCAソリューション部 マーケティンググループ 杉山さん ──確かに不確定な要素もある中で、メッセージを定めるのは難しいですね。 Goodpatch 有末： 私もそれは理解していたので、林さんには「マーケティンググループ内での方針など、最低限の範囲でプロダクトの提供価値について整理しましょう」と提案し、まずは顧客に提供する価値を階層ごとに整理するバリューピラミッドを作成しました。開発途中の機能があるので、不確定な要素もあるものの、林さんの協力を得てコクヨ社内でも検討を重ねていただき、作成していきました。 最終的にビジョンは「チームを起点に組織と人の成長を結び、はたらく未来を創る」とコクヨのビジョンと絡めたものに、ミッションは「チームに向き合い行動する機会をつくり、持続的な成果へとつなぐ」と具体的な内容まで落とし込みました。 策定されたTEAMUSのビジョン「チームを起点に組織と人の成長を結び、はたらく未来を創る」とミッション「チームに向き合い行動する機会をつくり、持続的な成長へとつなぐ」 生成AIも活用、ブランドガイドラインを実務に取り入れるための仕組みづくり ──ビジョンとミッションが定まった後は、マーケティングチームとして何を行っていったのでしょう。 コクヨ 栗尾さん： メンバーそれぞれが仕事を進める中で、判断に迷った際に立ち戻れる「ブランドガイドライン」を作る必要があると考え、有末さんと共に制作しました。イベントや展示会を準備する過程で、ビジュアルアイデンティティは随時アップデートしていましたが、「TEAMUSらしい表現」など、ビジュアル以外の部分の基準は明確には決められていなかったため、ブランドガイドラインとして整理しました。 ただ、ブランドガイドラインのような「ルール」というのは、日常業務でその都度確認することが減っていく恐れもある、ともすると活用されない「置物」のような存在になってしまうリスクもあります。 <img data-recalc-dims="1" loading="lazy" decoding="async" class="size-full wp-image-76784" src="https://i0.wp.com/cms.goodpatch.com/wp-content/uploads/2026/05/img_07.jpg?resize=1440%2C960&ssl=1" alt="コクヨ株式会社 グローバルワークプレイス事業本部 ビジネスディベロップメント本部 HRCAソリューション部 マーケティンググループ 栗尾さん" width="1440" height="960" srcset="https://i0.wp.com/cms.goodpatch.com/wp-content/uploads/2026/05/img
- ブランディング
- マーケティング
- UXデザイン
- 生成AI
Howを提案するだけじゃない。グッドパッチの営業は「Why」を設計する──フィールドセールス 関本｜Blog｜Goodpatch グッドパッチ
グッドパッチで働く人、というとデザイナーをイメージする方が多いと思いますが、彼らだけでは事業は成立しません。 今回インタビューをしたのは営業、グッドパッチでは「マーケットデザイン」という部署名であり、さまざまなプロジェクトを組成する、はじめの一歩を担う役職です。 商品を売るのではなく、クライアントが持ってきた課題の「理由」を問い、グッドパッチが手掛けるデザインとどう組み合わせるかを設計する──デザイン会社ならではの営業の仕事について、映像制作会社、デザインファームを経て、グッドパッチに入社した関本さんに話を聞きました。 グッドパッチの営業「マーケットデザイン」 仕事の具体的な内容は？ ──今日はよろしくお願いします。まずは、関本さんのこれまでのキャリアを簡単に教えてください。 グッドパッチは3社目になります。最初は映像制作会社にいたんですが、コロナ禍のときに撮影ができず、仕事がほとんどなくなってしまって。その頃から「社会とカルチャーをつなぐ仕事がしたい」という気持ちが強くなって、デザインの世界に興味を持ち始めました。大学が文化構想学部だったので、そういう素地はあったと思います。 2社目はロフトワークというクリエイティブデザインファームで、プロジェクトマネジメントとクリエイティブディレクションを担当していました。地域創生やR&Dなど、社会的意義のあるプロジェクトが多く、やりがいがありました。ただ、段々と「もっとプロジェクトの初期段階からクライアントと一緒に方向性を決めていけたら」というもどかしさが出てきて。 プロフィール：関本 武晃／Takeaki Sekimotoマーケットデザイン担当（フィールドセールス）。大学で文化構想学を学んだ後、映像制作会社を経て、デザインファーム「ロフトワーク」にてプロジェクトマネージャー・クリエイティブディレクターとして地域創生やR&Dプロジェクトに携わる。「プロジェクトの上流から関わりたい」という思いからグッドパッチに入社し、現在はインバウンドを中心に、クライアントの課題をデザインのケイパビリティで解決する提案設計を担う ──それがグッドパッチに来た理由につながるわけですね。でも「営業」というポジションは、これまでの関本さんのキャリアとはだいぶ毛色が違うようにも感じます。 そうですね。プロジェクトの本当に最初から関わろうとすると、お客さまと最初にコミュニケーションをするのは営業というポジションになります。ただ、グッドパッチにおける営業は「マーケットデザイン」という部署名になりますが、その名の通り、一般的な営業とは少し違って、提案の初期設計からクライアントと向き合って、プロジェクトの全体像を形作るのが仕事です。 だから、前職のプロジェクトマネジメントの経験を生かしながら、「なぜこれをするのか」という問いを仕事の中心に置ける場所だと感じて入社しました。 ──改めて、グッドパッチのマーケットデザイン担当の仕事内容について、教えてもらえますか？ いわゆるアウトバウンドで飛び込み営業をかけるというより、インバウンドでグッドパッチに来た問い合わせに対して、「デザイナーたちのケイパビリティを使って、こんなことができますよ」と提案していくのが主な業務になります。 大切なのは、ヒアリングや提案の中で「Why」と「How」をどう整理するかという点です。クライアントが「Webサイトをリニューアルしたい」と言ってきたとき、そのまま要件とするのではなく、「なぜ今それが必要なのか」「何を変えたいのか」「誰に何を伝えたいのか」といった要素を掘り下げることから始めなければいけません。 ──Whyを突き詰めるというスタンスは、グッドパッチのデザイナーと似ていますね。 そうですね。言ってしまえばデザインもHowの1つです。画面をどう作るか、ブランドをどう表現するか。でもその前に「なぜそれが必要か」というWhyを考えることが、本質的な課題を捉えることにつながると考えています。Whyの部分を整理できれば、提案の軸もブレにくくなるわけです。 一方で、Howの詳細についてはデザイナーに頼る部分が多いです。「どのくらいの工数がかかるか」「この要件ではどういった進め方が現実的か」といったことは聞かないと分からないので、現場のデザイナーの方と協力して提案を進めていくことになります。 デザイナーとの「ワンチーム」の体制が、グッドパッチの営業の武器 ──デザイナーと協力して提案するというのは、実際どのような形で行うのか、もう少し具体的に聞かせてもらえますか？ まず、商談にはミドルレイヤー以上のデザイナーの方が同席してくれることが多いです。これは他のデザイン会社ではなかなかないのではないでしょうか。 例えば、アプリのリニューアルといった案件であれば、方向性に加えて画面のプロトタイプなども検討していただくこともあります。提案の段階からデザイナーがガッツリ入ってくれるのはグッドパッチならではだと感じますし、前職でPMとして外部のクリエイターと仕事をしてきた感覚とはまた違った良さがあります。 私は提案を一つの1〜2週間で完遂するミニプロジェクトのように捉えているのですが、営業はそのPMとして動くと考えるとイメージしやすいかもしれません。クライアントとの接点では自分が価値を出し、Howの詳細は社内のデザイナーと連携していく。そのワンチームの感覚が、グッドパッチの営業の面白さだと思っています。 ──デザイナーとの連携というのは、すぐにできるようになるのでしょうか。慣れるまで時間がかかりましたか？ 最初は掴むのに少し時間がかかりました。外注に話す感覚ではなく、仲間として接点を持てるようになると、一気に動きやすくなりますね。自分の経験から「ここがプロジェクトのネックになりそう」という勘所をある程度持てているので、デザイナーの皆さんとうまく役割分担ができているのかなと思っています。 ──関本さんはどんなプロジェクトを担当してきたのでしょうか。 入社してすぐの頃ですが、大手企業の企業向けサービスの画面デザインの案件を担当しました。RFP（提案依頼書）を受け取り、クライアントの課題をヒアリングして、QCD（品質・コスト・納期）の観点から施策の優先度を整理してプロジェクト設計を進めるという形でしたね。 本件については、Whyを深掘りするよりも、プロジェクトマネジメントの視点で確実に成果を届けることが求められる案件でした。入社して1カ月で商談から内示を獲得できたのは、運も良かったと思いますが、前職のPMの経験が生きた部分があったと思います。 もう一つ、今も進行中の案件が、大正時代から続く老舗企業へのブランディングの提案です。老舗企業へのブランディングとコーポレートサイトリニューアルの提案です。食品や不動産など多角的に事業を展開している一方で、多角的に事業を展開しているんですが、「何をしている会社なのか」というのが社内外に伝わりにくい状況があって。海外展開も視野に入れる中で、インナーとアウターのブランディングを同時に整理する必要がありました。 ──社会的な意義もありそうな案件ですね。 グッドパッチだからこそ提供できる価値と社会的な意義の両面が叶えられるプロジェクトになると思い、先方の本社までプレゼンに足を運びました。入社して半年くらい経っていたので、グッドパッチがどのようにブランドを作っているのかといったことも、経験から説明できるようになっていたので、「なぜ、グッドパッチがこのプロジェクトに関わるべきか」を自分の言葉で話せたように思います。 オリエンテーションの推進から全体の素案設計、社内での価格交渉まで。営業としての所作はまだまだ学ぶことが多いですが、プロジェクトの初期段階からクライアントと一緒に考えられるのはやっぱり楽しいですね。 ──ちなみに提案について、裁量はどのくらいあるのでしょうか。 かなりあると思います。初期設計の部分から金額や期間の素案まで、自分で組み立てていける。品質の高さをきちんと説明して、クライアントの持っている金額感や期待値に対して提案を持っていく。そこは営業として責任を持って動ける部分ですね。 ビジネスの視点や視座でデザインを語れるのが、グッドパッチで働く魅力 ──提案をする中で、他のデザイン会社とコンペになることもあると思います。競合他社とグッドパッチの違いについては、どう見ていますか？ 「ビジネス上の成果を出す」ことを重視しているのは、他のデザイン会社と異なるポイントですね。 デザインに対して、アートやカルチャーの側面で価値をアピールすること自体は、別に否定されるものではないのですが、社会的に価値のあるものとして認められるには、ビジネス上の効果を示すことも重要だと思っています。これはグッドパッチのミッションである「デザインの価値を証明する」にも通ずる点です。 だから、グッドパッチのプロジェクトは、感性的な観点で「なんとなく良くなった」ではなく、「ビジネスとして良くなったと言える再現性を出そう」という姿勢が強いですね。ここは他のデザインファームとは大きく違うところです。 デザインは価値があるものだと信じていても、それだけで相手が価値を認めてくれるわけではありません。ビジネスの言葉でデザインの価値を語り、成果として届けられる人間が必要で、グッドパッチの営業はその橋渡し役だと思っています。 AIが変えるのは「How」の部分。だからこそ「Why」を考える人間の価値が上がっている ──今、デザイン業界は生成AIの影響を大きく受けていますが、関本さんの仕事にはどのような影響がありますか？ AIによる影響は大きいですね。僕はまだ入社してから1年経っていませんが、その期間でも、プロジェクトの進め方やスケジュール感が変わりました。AIでできることが増えたことで、Howのコストが下がり、提案内容そのものも変わってきています。 でも逆に言えば、Whyを設計する重要性は上がっていると思っています。使えるツールも、かかるコストも、必要な工数も、AIによってHowの部分は変わっていくんですよね。でもクライアントが「なぜこれをやりたいのか」というWhyは変わりません。そこを一緒に考えられる人間の価値は、むしろ高まっていると感じています。Whyの軸を持っていれば、Howが変わっても提案の核はブレない。そこが今の仕事の面白さでもあります。 ──ありがとうございました。最後に、どんな人にグッドパッチに来てほしいか教えてください。 個人的な感覚ですが、「死ぬ気で働けます！」みたいなタフさよりも、状況に応じて方向性をピボットできる柔軟性の方が大事だと思っています。変化する状況の中で、自分の武器を一度抽象化して、グッドパッチの文脈で使える形に再構築できる人。型にハマりすぎず、でも芯を持っている人ですね。 バックグラウンドはコンサルでも制作会社でも事業会社でも、それぞれの知見がここでは武器になります。僕自身は営業の経験はあまりないので、その点は勉強しているところですが、逆に営業畑出身の方が持っていないデザインやPMの知識は伝えることができます。さまざまな個性や特技を持つ仲間が、補い合って価値を作っている。グッドパッチはそういう会社だと思っています。 AIによってビジネスが変わっていく時代だからこそ、Whyを考える軸を持っている人と一緒に働きたいと思っています。Howは変わる。でもWhyは変わらない。そこを大切にできる人は、きっとこの仕事が面白いと思うはずです。 アカウントセールスの募集要項はこちらから グッドパッチが募集している求人の一覧はこちらから グッドパッチの採用ページはこちら
- UXデザイン
- プロダクトマネジメント
- 生成AI
新しいものが大好きなGoodpatchで4月話題になったアプリ、サービス、デザインまとめ（2026）｜Blog｜Goodpatch グッドパッチ
入社や入学、異動やクラス替え——4月は人生の節目が重なり、あちこちで「はじめまして」が生まれる季節ですね。 新しい環境に飛び込んだばかりの人も、迎える側として新しい出会いを楽しんでいる人も、今この時期ならではの空気を感じているのではないでしょうか。 まとめブログも今月がちょうど引き継ぎのタイミングで、これまで担当してきたhatchメンバーと、来月から担当する新卒メンバーが一緒に執筆しました。いつもよりボリューム多めでお届けします！ それでは今月もグッドパッチで話題になったサービスやトレンドを紹介します！ サービス・プロダクト デジタルに宿る「異彩」の感性。Google Pixel×ヘラルボニーが日常に問いかける新たな視点 ヘラルボニー、Googleと共創。Google Pixel 10a日本限定コラボモデル「Isai Blue」誕生、5月20日発売 株式会社ヘラルボニーは、「Google Pixel」誕生10周年を記念し、日本限定コラボレーションモデル「Isai Blue」を共創したことを発表しました。2026年5月20日（水）より発売を開始します。 本プロジェクトの象徴となるのは、自閉症啓発デーのテーマカラーであり、ヘラルボニーのブランドカラーでもある「ブルー」です。単なるカラーの変更に留まらず、限定のソフトウェア体験として契約作家のアートを生かしたオリジナル壁紙やカスタムテーマを搭載。デジタルプロダクトでありながら、まるでアートを持ち運ぶような感覚を実現しています。 最先端のAIテクノロジーに、障害のある作家たちが放つ「異彩」を掛け合わせることで、ユーザーは日々の操作を通じて自然に多様な価値観や視点に触れることになります。機能としての便利さを超え、一人ひとりの可能性を肯定する思想が、手のひらの上で体現されています。 また発売に先駆け、5月15日（金）から5月21日（木）まで下北沢reloadにて特別展示「Google Pixel｜HERALBONY Isai Blue展」が開催されます。作家の表現を全身で感じられるこの空間は、私たちの感性をひらく「遊び場」となるはずです。 この共創をきっかけに、「ちがい」を可能性へと変える「異彩」という価値が、より多くの人の日常へと鮮やかに広がっていくことが期待されます。 課題を「整理する」から「構造で見る」へ。課題の因果を可視化する「Kadai」 チャーリー（近藤哲朗） on X: 課題可視化のWebアプリ「Kadai」、いよいよ公開します！！！ 「バス路線が減る」→「交通空白地域が深刻化する」→「買い物環境が悪化する」→「高齢者の健康が悪化する」——。課題は単独で存在することはほとんどなく、複雑に絡み合うことで「どこから手をつければいいか」が見えなくなります。これは、図解総研の近藤哲朗氏が2026年春に公開した課題可視化Webアプリ「Kadai」が向き合っている問いです。 Kadaiは、こうした課題同士のつながりを「因果マップ」として可視化するツールです。課題をノードとして配置し、影響関係をつないでいくことで、全体構造が一つの地図として見えてきます。マップビューに加え、階層構造・カテゴリーでの整理（テーブルビュー）、ヒアリング内容の蓄積と課題への紐づけ、解決策のカンバン管理、KPIのダッシュボード追跡まで、課題を「発見する」から「管理する」までを一貫して扱える構成になっています。 興味深いのは、このツールの出発点が”プロダクト開発”ではなく“暗黙知の言語化”にあるという点です。図解総研がこれまで多数のプロジェクトで培ってきた「課題を構造的に可視化するノウハウ」をシステムに落とし込んだもので、介護課題デザインマップなどの実績もあります。さらに、生成AIを活用して、コード未経験の社内メンバーがほぼ一人で実装を進めたとされています。 複雑な社会課題に、シンプルな構造で立ち向かう。Kadaiが開く新しい景色に期待が膨らみます。 事前調査の再設計。「Hmhm」が示す、クイックに見える価値 なぜURLをいれたら課題がわかるAIツール「Hmhm」を作ったのか？ 『「聞けばわかる」と「クイックに見える」の間には、想像以上に大きな溝がある』——これは、株式会社プレイドのWicleチームが2026年4月にリリースしたAIツール「Hmhm（ふむふむ）」の開発背景に記された言葉です。 Hmhmは、調べたいサイトのURLを入力するだけで、ペルソナ・課題・グロースモデル・競合情報を自動で可視化するツールです。マーケターやPdMの事前調査を想定して設計されており、サインアップも不要で、プロンプトを考える必要もありません。 このツールの特徴は、AIの出力をそのまま見せるのではなく、情報量のバランスや見せ方まで含めて体験設計している点にあります。サービス名やロゴに遊び心を持たせつつ、アイコンと文字を使って情報を構造化し、待機時間も期待感につながるよう設計されています。 さらに、デザインはFigmaで丁寧に設計し、Figma MCPを経由してClaude Codeで実装しています。AIにすべてを委ねるのではなく、まず人が体験の土台を設計し、その上でAIを実装に活かす流れです。 noteでは、Hmhmのデザインに込めた意図や、開発プロセスの詳細も紹介されています。AIを使った開発が広がる中で、どこをAIに任せ、どこを人が担うのかを考える上で参考になる内容です。 バルミューダから「時間を感じる」ための時計The Clockが登場。光と音で時間を体験するプロダクト バルミューダから“時間を感じる”ための時計雨音や光を体験する「The Clock」が登場 3月18日（水）にバルミューダから発表された「The Clock」は、ただの時計ではなく私たちの生活を含めた“体験”に焦点を当てたプロダクトです。 最大の特徴である「Light Hour」は、時刻を数字で追うのではなく、光のまたたきとして感じさせてくれます。秒針の動きさえも柔らかな光で表現されており、1時間ごとに訪れる時報では、かつての振り子時計のような光のモーションが空間を彩ります。 また人間が心地よく感じる“音”にもこだわっている点も特徴的です。朝はアラームが鳴る前から静かに立ち上がる環境音で眠りを妨げず自然な覚醒へ、集中したい時はホワイトノイズが周囲の雑音を消し作業への没入を手助けるなど、今までの時計とは少し違った体験へ導いてくれます。 さらに専用アプリ「BALMUDA Connect」を使えば、世界各地の時刻の設定や、光り方のカスタマイズも自由自在とのこと。 効率や正確さが求められる現代だからこそ、「数字」ではなく「心地よさ」で時間とつながるインターフェースという提案が、私たちの日常をそっと豊かにしてくれるはずです。 東京の輪郭を、建築からたどる書籍『TOKYO ARTRIP 建築 改訂版』 書籍『TOKYO ARTRIP 建築 改訂版』｜事例紹介｜CCCアートラボ 『TOKYO ARTRIP 建築 改訂版』は、東京を建築の視点から楽しむためのガイドブックです。2018年に刊行された書籍をもとに内容を見直し、新たなスポットも加えて、CCCアートラボより改訂版として2026年4月11日（土）に発売されました。 名建築家が手がけた名作だけでなく、ファッションブランドのアイコニックな建築や昭和レトロな建物まで幅広く掲載されており、専門知識の有無を問わず、東京という街の多層的な魅力に触れられる構成になっています。 本書の特徴は、建築を単なる鑑賞の対象として扱うのではなく、街を歩くなかで出会う文化や空気感とあわせて紹介している点にあります。日本語と英語のバイリンガル仕様のため、国内の読者はもちろん、海外から東京を訪れる人にとっても開かれた一冊です。写真を大きく見せる紙面構成や印象的な表紙イラストも魅力で、街歩きのガイドとして楽しめるだけでなく、手元に置いておきたくなるアートブックのような佇まいも備えています。 東京をよく知る人にとっては街の新たな見方に出会うきっかけとなり、これから歩いてみたい人にとっては最初の入口にもなる——。建築を通して東京の輪郭を改めて感じられる、そんな軽やかで奥行きのある一冊です。この本を片手に、見慣れた街の景色を少し違う目で楽しんでみてはいかがでしょうか。 『とんがり帽子のアトリエ』魔法陣における記号論と、線が紡ぐ機能美 TVアニメ『とんがり帽子のアトリエ』 白浜鴎による人気漫画を原作とし、4月からアニメ放送が始まった『とんがり帽子のアトリエ』では、魔法を「唱える」ものではなく「描く」ものとして表現しています。羊皮紙にインクを落とし、定規とコンパスで円を引き、記号を丁寧に配置していく——。その所作は、Figmaでコンポーネントを組み、Illustratorでベジェ曲線を整える私たちUI/UXデザイナーの仕事と、驚くほど共通点があります。 作中の魔法陣は、円の中に記号を配置して意味を接続する、厳密な論理体系によって動いています。独立したモジュールを組み合わせることで複雑な現象を生み出す構造は、UIにおけるアイコンとインタラクションの関係に通じるものです。登場人物が未知の魔法陣を読み解くシーンには、デザインシステムのコンポーネントを再構成するときの感覚と重なる部分があります。 本作がとりわけ印象的なのは、インクの濃淡や筆圧といったアナログな身体性が、魔法の精度を直接左右するという描写にあります。線が揺らげば魔法は不発に終わる。ピクセル単位でアイコンを詰め、わずか1pxのズレに向き合うクリエイターの執念を、本作は魔法の発動条件として投影しています。 「描き方さえ知れば誰でも魔法が使える」という世界観は、「生成AI時代における技術の民主化」という問いにも通じます。アクセシビリティと悪用防止の倫理をどう両立させるか。それはフィルターやアルゴリズムを設計する現代のデザイナーが日々直面する課題でもあります。 ビジネス “見える化”のその先へ。意思決定を支えるダッシュボード設計ガイド ダッシュボードデザインの実践ガイドブックとデザインテンプレート 今回ご紹介するのは、デジタル庁が3月31日（火）に公開した「ダッシュボードガイドブック」です。 このガイドブックは、政策やサービスの状況を“見える化”するためのダッシュボード設計について、その考え方から具体的な作り方までを整理したもの。行政向けの資料ではありますが、プロダクトやサービスの可視化を扱うデザイナーにとっても学びの多い内容になっています。 特に印象的なのは、「誰のためのダッシュボードか」を起点に設計するという点です。ありがちな“データを並べただけ”の画面ではなく、意思決定や行
- UIデザイン
- UXデザイン
- プロダクトマネジメント
- 生成AI