製品アイコンの作成
Figmaでの製品アイコンの作成には、数十回、時には数百回の反復作業が含まれます。プロダクトデザイナーのTim Van Dammeが、アイコンデザインへの思慮深いアプローチと、最終結果を形作る創造的な探求について説明します。
製品アイコンの作成を共有
Tim Van Dammeは、Figma用のアイコンを数えきれないほど多く作成してきました。今年、私たちが製品スイートを倍増する準備を進める中で、彼は新しい製品アイコンを4つデザインし、また既存のものを再デザインし、全体の統一感を保つようにしました。
Timにとって、これは予想を超えたもので、その結果は明白なものとなりました。Timは「Figma Buzz」のためにハチのバリエーションを無数に作成したり、「Figma Make」のために星や杖の改定を数え切れないほど行ったりしていますが、そのプロセスは、定型に従うことが必ずしも型にはまった結果を意味しないことを示しています。ここでは、Timが創造性と好奇心を組み合わせて、大きなアイデアを洗練されたシンボルに変えた方法について、その舞台裏を見ていきます。
ステップ 1: まずガイドラインを用意する
製品全体を1つのシンボルに凝縮するにはどうすればいいのでしょうか。そもそも「良い」アイコンとは何でしょうか。これらは、Timが仕事を始めた最初の月からずっと自分に問いかけてきた質問です。Figmaのアイコンを作成するための公式なシステムがないことに気づいた後、Timは自分でガイドラインを作り上げ、非公式ながら実質的なアイコンデザイナーとしての役割を確立しました。
この統一性とビジュアルの一貫性を確保するために、Timはまずガイドラインを作りました。このガイドラインには以下のような原則が含まれています。
- 線幅はすべて1ピクセルにする。
- 切り抜きの厚みは1ピクセルにする。
- キャップはすべて丸くする。
- アイコンのバランスがよくなるようにし、可能な限り空白をなくす。
- 必要などの面でも機能するように、アイコンは3通りのサイズで作成する。
Timはデザインを行う際に、さまざまなフォーマットでアイコンがどのような大きさになるかを考慮します。これらのアイコンは、ツールバーで表示されるだけでなく、40フィートのビルボードやマーケティング素材にも使われ、成長を続けるFigmaのエコシステムの視覚的基盤を形成します。この方法で、アイコンの最初のモックアップを簡単に除去できることがあります。ズームアウトしたときに個別の線が一緒にぼやけ、要素が見分けにくくなると、Timは次のバージョンに進みます。
ステップ2: 製品のルーツを探る
Figmaのブランドガイドラインを満たすことに加え、各アイコンは特定の製品の視覚的なアイデンティティを表現する必要があります。
「狭いスペースで多くの詳細を伝えなければなりません」とTimは言います。最も重要な詳細情報について整合性をもたせるために、Timと、デザインおよび製品チームの他のメンバーは、各製品と関連する主要なコンセプトのリストをブレインストーミングし、関連単語やテーマからインスピレーションを得ます。
例えば、Figmaコミュニティのアイコンを作成するとき、Timは学びとアイデアを共有する精神を表すデザインを求めて探しました。Timは「コミュニティを通じたつながり」「知識を交換する仲間」「一緒に学ぶ」といったフレーズを書き留め、自分の創作に役立てました。これが、人、木、書籍のシンボルを使った実験につながりました。
同様に、Figma Buzzのアイコンをデザインする際、Timとチームは魔法、創造、AI画像生成といったテーマを探求しました。これにより、ガラス玉、星、その他の魔法をイメージさせる形の試作が生まれました。
ステップ3: アイデアを反復し進化させる
Timはバリアブル幅の線を使用し、複数のレイヤーを同時に編集することで、多数のアイコン反復作業の時間を節約しています。
デザインパラメーターと初期のアイデアが用意できたら、Timは本格的に探求を始めます。ここで彼の専門性が生かされます。彼は何年もの経験に基づき、様々なアイコンファミリーの数々のバリエーションを作成し、それぞれのシンボルをゆっくりと確実にプッシュしながら調整していきます。木が顔になり、顔がマンダラになり、抽象的なシェイプが回転し絡み合います。このような反復的なハンズオンの実験は、長年の経験に根ざしていますが、Timの創造的な遊び心からも刺激を受けています。「脳を活性化させるために、クリエイティブな寄り道をいろいろしています」と彼は言います。
Figma Makeのために、彼は動きと変形の概念で何時間も遊んで、ホイール、抽象的な蝶、コンパス、ハンドスピナーのデザインを考案しました。そして、Figma Buzzのために、彼は一日をかけてさまざまな羽のシェイプや線、触角がある蜂のシンボルのバージョンを何百個も作成しました。
Timは、新しいアイコンが全体のコレクションとどのように調和しているかを最終的に確認します。1つが他の中で目立ちすぎていないか。まとまりがなくなっていないか。機能が十分に差別化されているか。「アイコンはそれぞれ独自性を備えたものですが、最終的に20個まとめて置いたときに『これはFigmaのアイコンだ』と言えるものでないといけません」とTimは言います。
アイコンはそれぞれ独自性を備えたものですが、最終的に20個まとめて置いたときに『これはFigmaのアイコンだ』と言えるものでないといけません。
ステップ4: 途中で意見を求める
Timは頻繁にプロダクトデザイナーやプロダクトマネージャーのフィードバックを求め、デザインにどれだけ自信があるかを示すために1から5の星評価に基づく会話を進めます。得られる回答は、「多すぎて複雑すぎる」といった明快なものから、「これがしっくりこない」といった曖昧なものまで様々です。時には、一日分の創作が、「蜂を使うべきではない」というフィードバックの一言で廃案になることもあります。この例では、Figma Buzzのためにメガホンのアイコンを探求することになりました。Timにとって、それはすべてプロセスの一部に過ぎません。「それは人生経験です」と彼は言います。「たとえ方向性が変わったとしても、完璧な蜂アイコンを作り出そうとこれほどの時間と努力を費やす人は他にいないでしょう。」
時には、Timはより広い場所でフィードバックを探します。FigJamアイコンをリメイクするとき、Timは社内の多くの人に、製品に関連する言葉やアイデアを尋ねました。返ってきた言葉のうち最も多かったのは「付箋」だったので、新しいアイコンは付箋のシェイプにしました。Figma Make、Figma Buzz、Figma Sites、Figma Drawのリリース時も同様に、パブリックSlackチャンネルでフィードバックを集めました。「すべてのデザイナーがこういうやり方を好むわけではありません。かなり多くの回答を受け取ることになるからです」と彼は言います。「でも私はデザイナー以外の人と関わり、その考えを聞くのが大好きです。私は『このアイコンを見てください。何が見えますか?どう思いますか?』と言うのが好きです。」
私はデザイナー以外の人と関わり、その考えを聞くのが大好きです。
ステップ5: 最終製品に向けてプッシュ
最後のステップでは、直感が役割を果たします。例えば、新しいコミュニティアイコンをデザインする際、TimはFigmaライブラリの既存のシンボルと告示することを避けるため、本のシンボルの初期の探求を廃止しました。しかし、Figmaの最初のコミュニティアイコンのアウトライン図を本と組み合わせると、ひらめくものがありました。「非常に力強く感じました。まだうまく説明できません。でも、そのアイコンを見ると、何かを感じるんです」とTimは言います。
最終的な選択に絞り込むと、ティムはリーダーシップチームに持ち込むための6つのアイコンを選びます。多くの洗練、反復、フィードバックのラウンドがプロセスに組み込まれているため、最終的な決定はより明確になります。グループは、Figmaのデザインシステム、Timのアイコンガイドライン、より広いアイコンファミリーとの調和度、そして最後に数値化しにくい直感という要素を通して、それぞれの選択肢を検討します。
