ProtoPie 6.0は、2021年10月にリリースされ、ユーザーに好評だったいくつかの大きな変更を導入しました。ダッシュボードやタブのような生産性を高める機能だけでなく、ProtoPieの見た目を大幅に改善したと私たちが考える多くのビジュアル面の変更も実施しました。これらはすべて、新しいProtoPie Design Systemに由来しており、より堅牢なブランドとユーザー体験を提供するために作られました。これらの変更の背景にあるストーリーを見ていきましょう。
ProtoPie 6.0 — 2021年の大きなアップデートで、まったく新しいルック＆フィールを導入しました。
現実と向き合うとき
ProtoPieのエコシステムは、いくつかの製品で構成されています。ProtoPie Studioは実際のプロトタイピング、ProtoPie Playerはスマートデバイスでプロトタイプを試すためのもの、そしてProtoPie Cloudはコラボレーションと共有のためのものです。ユーザーは、プロトタイピングのプロジェクトに取り組む際に、これらの製品をいつも行き来しています。
ご覧のとおり、ProtoPie エコシステムを構成するさまざまな製品は、見た目がかなり異なっていました。
しかし、これらの製品はそれぞれ独自の世界で動いていました。独自のビジュアル要素（アイコンや色など）と独自のUXを持っていたのです。その結果、私たちはエコシステム全体で一貫性のない体験を提供していました。たとえば、ウェブサイトとProtoPie Playerではコーラルを主要色として使用していましたが、ProtoPie StudioとProtoPie Cloudでは異なるインディゴの色合いを使っていました。この不一致は、ユーザーにとって混乱を招く体験につながりました。これを解決するために、私たちは現実と向き合い、ProtoPieエコシステム全体に対する単一のデザインシステムを作成する必要がありました。
最優先事項：デザイン原則
私たちはProtoPieのブランドデザイナーとプロダクトデザイナー全員を集め、2つの問いを考えました。
ProtoPie はどのようなコアとなるデザイン価値を推進したいのか？
ProtoPie 自身はどのようなデザイン原則に従うべきか？
適切な次のステップを決めるにあたり、まずは異なる意見を持つデザイナーたちが集まり、共通点を見つけられる環境を作る必要があると気づきました。
すべてのアイデアを持ち寄って、共通点を見つけました。
まず、思い浮かんだ関連キーワードをすべて洗い出しました。次に、ProtoPieにどのようなブランドであってほしいのか、そしてユーザーにどのような価値を提供したいのかを探りました。
このプロセスによって、上に示した3つのキーワードに絞り込めました。最終的に、各キーワードに共通する価値はあなた（ユーザー）とあなたのアイデア（ユーザーのアイデア）だと分かりました。ProtoPieは生産性向上ツールであるため、私たちにとって最も重要なのは、ユーザーのアイデアを輝かせ、生産性を高め、ユーザーをより幸せにする製品を作ることです。
デザインの基盤
私たちはまず、アトミックデザイン手法に沿ってプロセスを進めました。この手法では、要素を組み合わせて広げていく前に、可能な限り最小の要素に注目してデザインプロセスを始めるべきだとされています。そこで、全体のデザイン活動の基盤となる最小のデザイン要素を定義することから始めました。
私たちは、製品の原則を直接的にも間接的にも、それぞれの要素に織り込もうとしました。以下では、私たちの判断の背景にある思考プロセスについて、さらに詳しく見ていきます。ProtoPie Design Systemを構成する4つの要素、つまり色、アイコン、タイポグラフィ、レイアウトを見ていきましょう。
色
最初のステップは、コーラルとインディゴという2色を1つのメインカラーに統合することでした。簡単そうに聞こえるかもしれませんが、実はとても複雑でした。
初期のブランドカラーであるコーラルを製品にも使えば、ブランドはより際立つでしょう。しかし、コーラルは一般的に警告や危険を連想させます。そのため、コーラルをメインカラーとして使うと、UIの観点では逆効果になりかねません。
そこで私たちは、新しいメインカラーとして紫を採用しました。これは現在のブランドカラーとかなり近く、比較的ニュートラルな印象があります。また、製品カラーもブルーグレーからニュートラルグレーに変更し、邪魔をせずにユーザーのアイデアを輝かせたいという目標を反映しました。
この方針を踏まえ、ライトテーマとダークテーマという2つの新しいテーマも導入しました。ユーザーは、作りたい作業環境の種類や、最も使いやすいと感じるものに応じて、使うテーマを選べます。
同じ色を微妙に異なる色合いのペアとして設定することで、各テーマの読みやすさを最大限に高めようとしました。たとえば、ダークテーマではライトテーマに比べて紫が少し暗く、彩度が高くなっていることに気づくかもしれません。
デジタル環境では、製品とそのユーザーの間に双方向のやり取りがあるため、状態の変化がどのように見えるかを明確に可視化することが重要です。ProtoPieの各製品で状態変化のルールは以前ばらばらでしたが、このアップデートでそれらを標準化し、統合しました。
アイコン
ロゴタイプに合わせた新しいアイコン体系を確立しました。ご覧のとおり、このアイコン体系は大胆で幾何学的でありながら、製品ごとに異なっていたさまざまなスタイルも統一しています。私たちは、モバイルアプリデザインにとどまらず、さまざまな製品領域で働く多様なユーザー（例：自動車やウェアラブル）にも直感的に理解できる普遍的な形を作ることに細心の注意を払いました。
各アイコンは明確なシルエットで作成し、サイズに関係なくはっきりと見分けられるようにしました。ProtoPieのアイコンは、複雑なメタファーを伝える必要があることが少なくありません。その意味を直感的に伝えるために、主要部分と補助部分を異なるトーンで区別する2トーンスタイルを採用しました。
形は違っていても同じ意味を持つアイコンは1つに統合しました。そのうえで、異なる状態を示すためのアイコン形状バリエーションを作成し、各状態の意味を直感的に伝えられるようにしました。
タイポグラフィ
GilroyはProtoPieのブランド書体で、ブランドアイデンティティに合った美しく高品質なフォントです。しかし、強く装飾的な特徴があります。そこで、不要に目を引くのではなく、ユーザーのプロトタイプをより際立たせる別の補助フォントを見つけたいと考えました。
そこで、セカンダリ書体としてInterを採用しました。Rasmus Anderssonによって作られたこの書体は、読みやすく、コンピューター画面向けに丁寧に作られた、より標準的な書体です。タイトル領域ではブランドアイデンティティを強く打ち出したかったため、それ以外のエコシステム全体にInterを適用しました。まとめると、ProtoPie全体では合計3つのフォントを使用しています。これらはすべて、コードスニペット用のものを含むデザインシステムのガイドラインに基づいています。
さらに、一定の読みやすさを確保するため、全体で使用するフォントサイズの最大値と最小値に制限を設けています。
レイアウト
レイアウトに関しては、没入感のあるユーザー体験を実現するための一連のガイドラインを策定しました。1行あたりの項目数と各項目の理想的なサイズを検討し、ユーザーエンゲージメントを最大化しました。
また、ProtoPie エコシステム全体で1つの連続した体験のように感じられるよう、すべての製品で共有できるブレークポイントも設定しました。ウェブサイト、ProtoPie Cloud、ProtoPie Studio に同じレスポンシブデザインを適用しました。
合意形成
デザイナーからエンジニアまで、デザインシステムの更新に関わるすべてのチームに対して、これらのガイドラインと変更点を継続的に説明するようにしました。質問や確認事項があるたびに、私たちは考え方を説明するために必要な時間を取り、これらの変更がユーザーにどのような良い影響をもたらすのかを伝えました。
これらのガイドラインは、要素の基本や各スタイルの理由から、デザインシステムをさらに拡張するためのステップに至るまで、チーム間の合意形成を促し、これまでに確立したデザイン原則を強固にする役割を果たします。
次は？
ProtoPie 6.0の導入によって、ProtoPie エコシステム全体で、より良く、一貫性があり、より認識しやすい体験をユーザーに提供できるようになりました。私たちは、製品で伝えたいデザイン価値がProtoPieユーザーに響くよう努めています。
しかし、エコシステム全体の一貫性を確立することは始まりにすぎません。ProtoPie Design Systemを整えることで不要な判断を減らし、より重要なことに、より高い機動力で集中できるようになります。言い換えれば、これらの変更は今後さらに改善を進めるための勢いを私たちにもたらしました。ProtoPieを、あなたのチームにとってさらに効果的で楽しいプロトタイピングツールにする、今後の新機能や改善にご期待ください。
