abstract は複数の意味を持ち、デザインの仕事の中でも場面に合わせて少し異なる意図になるため、注意を払う必要がある言葉です。
マーケティングを目的としたウェブサイトの構築に携わったときに、プロダクトの UI のスクリーンショットをそのまま使うのではなく、簡略化して伝えるべき部分を中心に見せるデザインを指して Asbtracted UI と初めて聞いたときには違和感がありました。
私も、抽象絵画が Abstract art と呼ばれることから abstract が「抽象的な」という意味を持つことは知っていて、何となく表現を曖昧にするような印象を持っていたためです。むしろ、分かりやすくする意味合いに聞こえる「簡略化する」という意味でも使われることを学びました。
語源について調べると「何かから引き離す」と言う意味からきているようで、抽象的であることと、簡略化することに共通するものを探すと「大事な部分だけを取り出す」がニュアンスにありそうです。
抽象的
デザインの仕事の中で「抽象的」の意味で使われるのは特にグラフィックを指している場面です。抽象的な模様の背景などのを指して abstract background というように使われます。
The abstract backgrounds work better than photographs as they make the foreground product stand out more effectively.
抽象的な背景の方が、写真よりも手前の製品が際立って良いと思う。
This image feels too abstract – we should add more concrete visual elements.
この画像は抽象的すぎる感じがします。もっと具体的なビジュアル要素を追加した方がいい。
簡略化
マーケティングやドキュメントなどプロダクト自体を説明するときや、プロダクト中の情報の構造を取り扱うときに「簡略化」の意味合いでの abstract が使われます。
簡単にするというよりも、大事な部分を強調することが目的にあり、見る側が効率的に情報を得るための工夫と理解しておくことが重要です。
The marketing website uses abstracted UI to help visitors focus on the core functionality of the app.
マーケティングウェブサイトでは、抽象化されたUIを使うことで、訪問者がアプリのメインの機能に集中できるようにしています。
Can you abstract this complex interface image on the landing page?
ランディングページの複雑なインターフェースの画像を簡略化できますか？
I've abstracted the logo into a graphic pattern that we can use across our materials.
ロゴをグラフィックパターンに抽象化し、様々なマテリアルで使用できるようにしました。
FEATURE
マーケティングデザインにおけるUIの抽象度
最近の私は Visual Designer として mmhmm のマーケティングデザインにも携わっています。仕事の中で、プロダクトの UI を abstracted にする作業を担当することも少なくありません。
面白いことに、abstract とひと口に言っても作るものが一意に定まらないため、抽象度合いを調整することが肝要になり、デザイナーの腕が試される部分にもなっています。切り口として、抽象の度合いごとに分けたデザインの実例をいくつか紹介します。