メインコンテンツまでスキップ

AIでは自動化できないスキルの活かし方

4人の漫画のシェフが集まって、チェリーの乗った光るピンクのケーキの周りで、1人がそれをスライスしようとしています。4人の漫画のシェフが集まって、チェリーの乗った光るピンクのケーキの周りで、1人がそれをスライスしようとしています。

より多くのチームがかつてない速さで動いている中で、本当の差別化要因はクラフトです。すべての細部の背後にある好奇心、直感、センス、そして意図です。

AIでは自動化できないスキルの活かし方を共有

イラスト: Angela Kirkwood

誰もが 動作するプロトタイプを促進できる 世界において、良い製品を優れた製品と区別するのは、それに込められた心遣いと品質です。思慮深い人間の入力がなければ、AIツールは理論上は機能する出力を生成しますが、実際には的を外すことになります。そのギャップを埋めるには、好奇心、直感、センス、意図といった明確に人間特有の能力が必要です。ここでは、これらのスキルをどのように育てて活用すれば、AIツールを迅速な結果だけでなく質の高い結果に導くことができるのかに迫ります。

好奇心: 基本原則から始める

3人の漫画のシェフがカウンターの色とりどりの鍋から料理を味見しながら微笑み、話をしています。3人の漫画のシェフがカウンターの色とりどりの鍋から料理を味見しながら微笑み、話をしています。

好奇心というのは、明確な道筋が立てられる前に「なぜ」と「もしも」を問うことを指します。何十もの異なる方向性を考慮し、それから正しいものを確認するまで反復することです。伝統的に、この種の好奇心には時間がかかりますが、AIツールはより多くの方向性を探るための障壁を下げました。Figma Makeなどを使用すると、プロダクトマネージャーがプロンプトを入力してプロトタイプを生成し、実際に追求する価値のあるアイデアを確認することができます。コードを書くことなく全て実行可能です。ClaudeやChatGPTを使用するマーケターは、数分でいくつかのキャンペーンのアウトラインを作成し、どれが自社のブランドの声や目的に最も合っているか比較することができます。しかし、これらの促進剤があるとしても、依然として実際の制限は存在します。AIは、何が起こるのかを見てみるために最初の範囲を飛び越える決断をしたり、範囲自体を変えるべきかを問うことはできません。予想外のアイデアや直感に惹かれることや、時間がかかるのにも関わらず何かを深く探求する価値があると感じることもできません。

好奇心は単にテーブル上のアイデアの数を広げるだけではなく、選択したアイデアへの自信を高めます。初めから幅広く探ることで、後での修正が容易になり、二度考えることや手直しが少なくなります。例えば、FigmaのプロダクトデザイナーであるNatasha Tenggoroは、Figma Makeを使ってFigma Buzzに動画を追加するさまざまな方法をテスト・検証しました。プロトタイプの作成は、「もっと多くの方向性を探り、エッジケースを早期にテストし、自信を持って改良する」ことを可能にすると彼女は言います。これにより、エンジニアも機能の範囲と実現可能性を理解し、チーム全体の高価な手戻りを避けることができました。

抽象化された数字の3抽象化された数字の3

こちらをクリックして、プロダクトデザイナーのナターシャ・テンゴロが、Figma Makeを使用してFigma Buzzに動画再生機能を追加するための初期実験をプロトタイプした方法についてさらに詳しく学びましょう。

好奇心がFigmaのアイコンスイートをどのように再構築したか

FigmaがFigma Make、Figma Buzz、Figma Sites、Figma Drawという4つの新製品を展開する準備をする中で、プロダクトデザイナーのTim Van Dammeは、各ツールを明確に表現し、かつ一貫した視覚言語の一部として共存するアイコンを作成するという課題に直面しました。

表面的には、このプロジェクトは簡単に見えました:4つの新製品を表す4つの新しいアイコンをデザインすること。しかし、Timがそれぞれのアイコンの潜在的な方向性をスケッチし始めたとき、一歩引いて考える必要があることに気づきました。各アイコンを個別に見直すのではなく、より新しく統一感のある印象にするために、Figmaのアイコン一式全体を再デザインしたらどうだろうか?プロジェクトのタイムラインに数週間を追加することになりますが、より包括的な再想像は価値があると感じました。彼はスコープを全面的な刷新へと広げ、新しいアイコンと並行して既存のアイコンも見直し、数百ものバリエーションを検討しました。そのうえで、それぞれのシンボルが単体でも明確に識別でき、同時にFigmaアイコンファミリー全体の一部として統一感を持つことを徹底しました。

地球儀、メガホン、そして本を含むFigmaアイコンの列地球儀、メガホン、そして本を含むFigmaアイコンの列
Figma Slides、FigJam、Figmaコミュニティ、Figma Sites、Figma Buzz、およびFigma Make用に新しくデザインされたアイコン

リフレッシュされたアイコンスイートは、より統一され、かつより特色あるものになっています。各アイコンは各製品を明確に表現し、ビルボードのような大きなフォーマットにもシームレスに拡大でき、そして間違いなくFigmaらしさを保っています。

Figmaアイコンのラインナップには、ペン、地球儀、メガホン、付箋が含まれています。Figmaアイコンのラインナップには、ペン、地球儀、メガホン、付箋が含まれています。

詳しくはこちらで、FigmaのプロダクトデザイナーであるTim Van Dammeのアイコンデザインに対するアプローチや、最終的な成果を形作った検討プロセスをご覧ください。

直感: 感覚に従う

漫画のカエルのシェフがトングを使って飾ったケーキの上に慎重にチェリーを置いています。漫画のカエルのシェフがトングを使って飾ったケーキの上に慎重にチェリーを置いています。

AIは市場投入までの時間を短縮することができますが、顧客に最も響くものを教えてはくれません。しかし、製品開発者はそれができます。彼らは、プロトタイプでは技術的には動作していても、混乱するインタラクションを感じ取ることができます。同じ本能が、内容がすべて収まっているにもかかわらず窮屈に感じるレイアウトにもっと余白をアドボケイトすることもあります。「本当のデザインとは、あり得る未来のビジョンを人々とともに描き、促進することです」と、CVS Healthでユーザーエクスペリエンス&デザイン担当バイスプレジデントを務めるEliel Johnsonは語ります。「私はデザインを職業としてだけでなく、動詞として考えたいのです。何かをデザインしながら『それは心地よいか?』と問い続けていたいのです。」

今日の製品を際立たせるのは、単なる機能性だけでなく、感情的な反応を引き起こす能力です。そのレベルの感情的な共鳴を達成するためには、何が本当に響くかを予測する必要があります。「機能によって堀を築こうとする試みは、もはや通用しません」と、FigmaのHead of InsightsであるAndrew Hoganは述べています。「もしチームが意図的に感情的な反応を設計できなければ、競合他社はわずかなコストであなたの機能をコピーしてしまいます。」これは、ユーザーの深い恐れや希望、動機を理解することを意味しますが、これらは捉えにくく、多くの場合、画面の外でしか見えないものです。つまり、より深いレベルで接続する製品をデザインするには、感情的な知性と直感が必要です。

私はデザインを職業としてだけでなく、動詞として考えたいのです。何かをデザインしながら『それは心地よいか?』と問い続けていたいのです。
Eliel Johnson、ユーザーエクスペリエンス&デザイン担当バイスプレジデント、CVS Health

直感が導いたPlaidのブランドリニューアル

長年にわたり、ユーザーが使用するアプリを銀行口座に安全にリンクすることを支援してきた後、Plaidは製品提供を拡大し、本人確認、インサイト、詐欺防止に取り組むようになりました。これらの新しいプロダクトは、消費者だけでなく銀行や規制当局まで対象を広げ、それぞれ異なるニーズや課題を抱える幅広いオーディエンスにリーチするようになりました。この進化は、この製品の拡大に頷くことができ、異なる観客に訴求しながらも、一貫性を保ちながら話すビジュアルアプローチを必要としました。

Plaidは当初、外部エージェンシーとリブランドを進めていましたが、ブランドがどのように進化するか、オーディエンスのニュアンスを捉えるためには、内部チームだけが提供できるレベルのコンテキストが必要でした。プロジェクトはすぐに社内に戻されました。チームはすでに数か月を失っており、社内のデザイナーとマーケターだけで作業を進めると、さらにチームのリソースが奪われました。それでも、オーディエンスと製品を深く理解している内部の専門家に仕事を任せることが結果につながると信じていました。

チームは視覚的な方向性について新たに考え、通貨から引き出した視覚パターンをテストし、ホログラフィックエフェクトを試しました。彼らはより速く、より協力的なリズムに移行しましたが、新しいアプローチにはトレードオフが伴いました: 迅速に動くということは、長期的なリサーチサイクルの代わりに直感を受け入れることを意味し、広く探索するということは、より多くの時間を無駄にするリスクを伴っていました。「最終的にどんな家になるのか正確には分からないまま、『家を建てる』と言ってレゴを組み立てているようなものです」と、PlaidでHead of Designを務めるChristophe Tauzietは語ります。「とにかく進み続けて、途中で調整していけばいいのです。」

最終的には、トレードオフは価値があり、Plaidと共に成長するのに十分柔軟で、一方でモダンで特徴的でありながら、消費者や銀行、規制当局との信頼を築くためにしっかりとしたブランドアイデンティティが得られました。

テイスト: 細部にこだわる

3人の漫画のシェフが様々な色の具材を大きな赤いボウルに混ぜて、困惑しています。3人の漫画のシェフが様々な色の具材を大きな赤いボウルに混ぜて、困惑しています。

直観とは何かがうまくいくかもしれないという直感的な感覚ですが、センスとはどのアイデアを洗練し、どのアイデアを捨てるかを判断する能力です。「ほとんどの企業はセンスを美学と混同しています」と初期のFigma投資家であるSarah Guoは書いています。「しかし、本当のセンスはもっと深いところにあります。それは、エラーメッセージや読み込み状態、本当に重要ではないが良いだけだったために排除した機能にあります。」

テイストとは、TimがFigma Buzzのためのハチのアイコン案に、何日もかけて数百のバリエーションをデザインしていたにもかかわらず、そのアイデア自体を完全に捨てたように、愛着のある案を手放すことでもあります。テイストとは、時間が限られている中で何を優先すべきかを見極めることでもあります。たとえばDuolingo Mathチームは、新しい算数ゲームをテストする際、機能を追加するのではなく、コアとなるインタラクションを磨き込むことを選びました。それは、手を加え続けるのをやめてリリースするタイミングを見極めることでもあります。たとえ、まだいくらでも改善できそうに感じたとしても。Sarahの言葉を借りれば、「本当のテイストは痛みを伴います。もしその「テイスト」に何の代償も伴っていないなら、それはテイストではありません。それは単なる好みです。」

本当のテイストは痛みを伴います。もしその「テイスト」に何の代償も伴っていないなら、それはテイストではありません。それは単なる好みです。」
Sarah Guo、Figmaの初期投資家

AIによってチームが生み出せるアイデアの数が増えるにつれ、テイストは編集者の役割を担い、人間に本質的に備わった「見極める力」として機能するようになります。AIはルールに従い、一貫性を強制し、視覚的不規則性を見つけることができますが、二つの技術的に正しい解決策のどちらがより信頼と喜びを生むかを判断することはできません。

Figmaのレイヤーパネルで横スクロールを改善する

Figmaのレイヤーパネルにおける水平スクロールバーの設計では、閲覧に収まらないレイヤーを表示するために横に移動するオプションを加える際、多くの小さな決断と考慮が必要でした。パネルは、ユーザーを混乱させたり作業を遅らせたりすることなく、数千もの要素をハンドルする必要がありました。課題は、機能的でありながら、直感的に感じられる解決策を見つけることでした。

Figmaのデザインおよびエンジニアリングチームは、ユーザーが数千のレイヤーを状態を変えながらスクロールする際に、異なるアイデアがどのように保持されるかを確認するために迅速なプロトタイプを作成しました。いくつかのオプションは紙の上では有望に見えましたが、実際にはうまくいきませんでした。例えば、レイヤーに自動的にジャンプする機能は、人々が自分の作業の中で場所を見失う原因となり、非表示のレイヤーを示す小さなマーカーを追加することは、パネルを混雑させるだけでした。他の疑問、例えばどれだけの空白スペースを可視レイヤーの上に残すべきか、といったことには「正解」などありませんでした。そうした判断を下すために、デザインチームとエンジニアリングチームは反復と洗練を重ね、インターフェースがバランスよく、かつ主張しすぎないと感じられる状態になるまで仕上げました。

最終デザインは、微妙さと明瞭さを慎重な空白とヒューリスティックスで調和し、ユーザーがキャンバスのレイヤーを深くクリックしたときの自動スクロールの頻度と距離を決定します。結果として、ユーザーにとってシームレスに感じられますが、最小の詳細に細心の注意を払った判断によって形作られました。

数字の3のイラスト数字の3のイラスト

Figmaのレイヤーパネルに水平スクロールバーを追加することは複雑な取り組みでした。詳細は、最終結果に至るまでの探求とその過程での教訓についてお読みください。

意図: 規模のためのシステム設計

クリップボードを持った漫画のシェフのクマが、店の棚にある色鮮やかな箱を調べている。クリップボードを持った漫画のシェフのクマが、店の棚にある色鮮やかな箱を調べている。

AIツールはデザイン作業を加速することができますが、提供されたコンテキスト次第でしかありません。デザインシステムは、AIが理解できる一貫したフレームワークに技術をパッケージ化し、再作業を削減し、品質やデザインの忠実性の問題を防ぎます。例えば、AIは、チームが8pxのパディングを好むのか12pxではないのか、CTAに赤500を決して使わないのかを推測することはできません。AIはまた、ブランドの成長がデザインシステムを新しいコンポーネント、色、またはタイポグラフィで再考することを求めているのかを告げることもできません。AIが使えるアウトプットを生成するために必要なガードレールを提供するデザインシステムを作成するには、Designの専門知識が必要です。

Figmaのプロダクトエンジニアリング担当バイスプレジデントであるMarcel Weekesの言葉を借りれば: 「[AI]はデザインシステムの構造を理解することに非常に長けています。」ウェブサイトやアプリケーションが自分のアイデンティティのように見えることを望むなら、AIにデザインシステムのコンテキストを提供できることに投資する価値があります。

デザインシステムがどのようにしてポラロイドの新時代を形作ったか

ポラロイドがデジタル時代に向けて再発明を図ったように、そのデザインは断片化されたツールと不統一なワークフローによって妨げられていました。デザイナーは孤立したファイルで作業し、ブランドを製品全体で統一するための集中型デザインシステムはありませんでした。摩擦は非常に破壊的で、チームはIOSアプリしか設計しませんでした。

この痛点を解決するために、ポラロイドのUXチームはFigmaでデザインシステムを構築し、単一の真実の情報源として機能することを目指しました。まず、各プラットフォーム間で色、フォント、テーマを管理するために、共有コンポーネント、トークン、およびバリアブルを構築しました。そこから、iOSとAndroidのデザインが並行して維持できるようにコンポーネントを標準化し、重複作業を削減しました。その結果、チームが今日信頼できるシステムが完成しました。このシステムを用いて、ポラロイドはより迅速で、より一貫性のある出荷を実現しています。デザイナーは複数の製品やプラットフォームにわたって作業をスケールでき、開発者は同じ一連のルールに基づいて作業することで、アウトプットが一貫してポラロイド独自のものとして保証されます。

4つのスマートフォン画面が、PolaroidのウェブサイトとPolaroid Flip即時カメラを宣伝するInstagram広告を示しています。4つのスマートフォン画面が、PolaroidのウェブサイトとPolaroid Flip即時カメラを宣伝するInstagram広告を示しています。

こちらでは、Polaroidがデザインシステムとワークフローに新しいアプローチを取り入れることで、新たな世代のユーザーにどのようにリーチしているのかを紹介しています。

AIの時代において、スピードとスケールは簡単に手に入れることができます。より難しく、そしてはるかに価値が高いのは、何かを芸術的で生き生きとしたものに感じさせる、人間ならではの選択です。Sarahの言葉を借りれば、「AIが瞬時にCRUDアプリを生成したり、あらゆるWebサイトを再現できる世界において、最終的な差別化要因となるのがテイストなのです。」機能はコピーできます。機能性は一致させられます。しかし、意図を持って作られたものを使うときの感覚は?それは代えがたいものです。」

Abstract pastel gradient background with bold white text reading ‘Software is culture.’Abstract pastel gradient background with bold white text reading ‘Software is culture.’

Explore Software Is Culture, a collection of stories tracing the impact of design on how we think, feel, and connect.

Figmaを使った制作とコラボレーション

無料で始める