⭐️

【Polaris和訳】Design/Illustrations

2021/10/29に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Design/Illustrationsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Illustrations

Shopify の管理者は、マーチャントが迅速かつ明確に物事がどのように機能するかを理解できるように、正確なイラストスタイルを使用しています。

椅子のイラストでは、シンプルな直線で描かれたものから、曲線と色を使ったもの、そして最終的には塗りつぶした形と影を使ったものへと変化していきます。

原則

常に有用であること

イラストは情報を付加します。文脈を提供し、明確にし、次のステップへと導きます。これにより、担当者は今取り組んでいることをより深く理解することができます。

ファミリーであること

イラストはすべて、同じビジュアルファミリーに属しています。一貫性がないと、全体的なエクスペリエンスの質が低下し、マーチャントの気を引いたり、間違った場所にいるように感じさせたりします。

配慮する

イラストはマーチャントの体験を理解し、サポートするものでなければなりません。それぞれのイラストは、どのような状況にあっても適切に感じられる必要があります。

集中する

それぞれのイラストで伝えたいことはひとつです。ストーリーがわかりやすく、お客さまが目的を達成するための方法が直感的にわかるように。

スタイルの要素

カラーパレットとカラーパレットを使ったイラスト

カラー

イラストには、それぞれの場所に適した色が使われています。使う色は限られており、個々のイラストでは白、グレー、2〜3 色が使われています。また、周囲の UI に比べて彩度が低いため、中核となるインタラクションの邪魔にならないようになっています。

国旗、ティーポット、葉っぱ、様々な人種のプロフィールなどのイラスト。

形状

認識しやすいように、オブジェクトはリアルなプロポーションを持っています。角が丸いシンプルな幾何学的な形は、明快で親しみやすいイメージを作ります。人物の表現では、より有機的な形状を採用しています。

白地にノートパソコンのイラストと輸送箱のイラストを分離したもの

空間

パースペクティブはフラットな 2 次元であるため、イラストの全体が重要になります。必要に応じて、ドロップシャドウで微妙な奥行きを出します。また、一面だけではわかりにくいものには、もう一面を加えています。

それぞれのイラストの周りにはネガティブスペースがあり、同じ場所にある他のイラストとのバランスがとれていて、視覚的な重さも同じです。

椅子のスタイライズされたイラストに赤い線で角度をつけたものと、人の横顔のイラストに赤い線で曲線を強調したもの。

ライン

線は、空間に形を作り、配置します。すべてのイラストは、テクスチャーのない滑らかな線です。小さなものには直線的な線が、大きなものには細かい曲線が使われています。

交差する線や連続する線は、アドミンのイラストスタイルの重要な要素ですが、強制的なものではありません。そのため、シンプルなイラストでも、エレガントで視覚的な面白さを感じさせることができます。

配送ラベルの複雑なイラスト、ユーザーのリストが入ったシートのイラスト、そしてURLアドレスバーの非常にシンプルなイラスト。

ディテール

イラストには、意味を持たせるためにある程度のディテールが必要ですが、多すぎるとうるさくなってしまいます。そのため、必要最小限のディテールでリアル感を出しつつ、シンプルに仕上げています。細かい部分は、縦横ともに 4px 以下であることがほとんどです。

イラストが存在する場所

イラストは、常に登場する場所と、たまにしか使われない場所があります。

ハサミがクーポンを切っているイラストは、割引コード管理用のページで割引コードが保存されていないことを示しています。

空の状態

マーチャントは、エクスペリエンスの新しい部分に初めてアクセスしたとき、まだ何もする前に、空の状態のイラストを目にします。これは、ここで何ができるかを紹介し、先の展開を期待させるものです。

管理者用ホームカード。テーマのカスタマイズ方法を説明するテキストの横に、小さなイラストが描かれています。

オンボーディング

オンボーディングタスクは、新しいマーチャントがストアをセットアップするのに役立ちます。それぞれのタスクの目的をイラストで表現しています。また、タスクが完了したときには、見た目が変わることで、そのタスクが完了したことを強調しています。

トラフィックインサイトやローカルデリバリー機能を告知するイラストです。

お知らせ

マーチャントの皆様に、ビジネスに役立つ情報をお知らせします。イラストはメッセージを明確にし、目に留まりやすくします。

Shopify Paymentsについて書かれたカードの横に描かれたイラスト。

スポットイラスト

ごくまれに、特定の目的を達成するためにユニークなスポットイラストが使われることがあります。例えば、忙しいページの中で重要なものに注意を向けさせたり、技術的なコンセプトを説明したりするためです。

次

Sounds

Shopify アプリのご紹介

Discussion

ログインするとコメントできます