susan kare and meaning within a pixel grid

スーザン カレとピクセルグリッドにおける意味

一つのマスから意味を組み立てる

小さなグリッドでは、装飾の余地はほとんどありません。認識可能なオブジェクトを簡略化し、状態を区別し、限られたピクセル数を通じてトーンを確立しなければなりません。スーザン・カレの初期のインターフェース作品は、こうした制約を可視化しつつも、その結果が単に制約されたものだと感じさせない仕上がりになっています。

MoMAが所蔵するカレの「Apple Macintosh OS」アイコン・スケッチブックの記録によると、その制作年は1982年とされており、方眼紙が使用され、1マス1ピクセルとして表現されていたことが記されている。この事例は、ドローイング、メタファー、そして慎重な選択によって、複雑なシステムが、ユーザーが認識し始められるような形へと変換される過程を示している。

この比喩は出発点となる

アイコンは、他のオブジェクトから親しみやすさを借りることができます。その親しみやすさは、新しい操作をユーザーがすでに理解しているものと結びつける際に役立ちます。しかし、誤解を招くこともあります。容器の絵だけでは、その操作が「保存」なのか、「アーカイブ」なのか、それとも「削除」なのかは分かりません。意味は、インターフェースとその慣例によって決まります。

アイコンは、そのラベル、配置、および選択後の状態と併せて評価されるべきです。見慣れたオブジェクトを認識することと、それを選択した後に何が起こるかを予測することは別物です。見事に描かれたイラストであっても、操作が曖昧なコントロールである可能性があります。

制約の中での個性

小さな画像であれば、視覚的な複雑さを増すことなく親しみやすさを伝えることができます。表現上の選択は、理解を妨げるのではなく、理解を助けるものでなければなりません。ここで言えるのは、すべてのインターフェースに笑顔が必要だということではありません。技術的な制約があるからこそ、意図的なトーンや人間的な親近感を生み出す余地が生まれるのです。

制約は、関係性への注意を促すことにもつながります。記号を実際のサイズで、また周囲の記号と並べて比較してみてください。拡大すると明確に区別できる形状でも、通常のサイズでは別の形状と区別がつかなくなることがあります。このファミリーは、「無効」「選択済み」「中断中」といった状態を含め、全体として調和して機能する必要があります。

慣習にも更新と維持が必要になる

アイコンの意味は、その指し示す対象が馴染みのないものになっても存続し得る。かつて「保存」を意味していたフロッピーディスクは、この点を説明する典型的な例である。こうした持続性があるからといって、その記号を常に置き換えるべきだということや、説明が一切不要だということにはならない。対象ユーザーを対象に認識度テストを行い、慣例を変更する際のコストも考慮すべきである。

アクセシビリティには、もう1つ要件があります。それは、重要な情報は装飾的な認識のみに依存してはならないということです。ラベルや代替説明は、その操作を正確に記述する必要があります。画像と文章は、同じ情報を伝えるものでなければなりません。

デザインの具体例

あるファイルマネージャーでは、アーカイブと削除の両方に、おなじみのコンテナアイコンが使われています。どちらの操作も、現在の表示から項目を削除するという点で似ているため、アイコンは関連しているように見えます。しかし、その結果は異なります。

チームは、ラベル、配置、状態のフィードバックを通じて動作を明確に区別しつつ、一貫したデザインを維持することができます。ユーザーが単に画像に描かれたコンテナを認識できるかどうかだけでなく、そのファイルに何が起こるかを予測できるかどうかを検証してください。その違いを説明せずに、有用な親しみやすさを捨ててしまうような、目立つ新しいアイコンは、必ずしも改善とは限りません。

アイコンを実際のサイズで、かつインターフェース全体の中で評価する。隣接するコントロールによって、その関係性の認識が変わることがある。カレのスケッチが、小さな視覚的な判断を意味のある操作へと変換したのと同様に、ピクセルグリッドは、より広範な情報システムの中で機能的な制約となる。

実践課題

固定されたグリッド内で、関連する操作を表す3つのアイコンをデザインしてください。描画する前に、その操作を平易な言葉で説明してください。アイコンだけを見た場合と、ラベルや文脈が加わった場合とで、ユーザーが何を予測するかをテストしてください。絵の認識と動作の理解との間に生じる混乱を記録してください。解釈を変える最小限の特徴を修正し、実際のサイズでアイコン群全体を検証してください。

グリッドは、描画における制約であり、意味を深く考察せずに済ませるための言い訳ではない。

画像から考える

スーザン・カレのポートレートでは、このケーススタディの背景にあるデザイナーが紹介されている。彼女の作品は、限られた解像度と認識可能な意味との関係を通じて考察されている。
1. スーザン・カレのポートレートでは、このケーススタディの背景にあるデザイナーが紹介されている。彼女の作品は、限られた解像度と認識可能な意味との関係を通じて考察されている。
マッキントッシュを手にしたスティーブ・ジョブズは、その製品の歴史的背景を物語っている。小さな画面では、限られた表示領域と、当時登場しつつあったインタラクションシステムの中で、アイコンを用いて情報を伝える必要があった。
2. マッキントッシュを手にしたスティーブ・ジョブズは、その製品の歴史的背景を物語っている。小さな画面では、限られた表示領域と、当時登場しつつあったインタラクションシステムの中で、アイコンを用いて情報を伝える必要があった。
この一般的なコンピュータのアイコンは、比較のための例であり、カレによる作品ではありません。わずか数ピクセルで構成されているこのアイコンは、認識が細部をすべて描写することではなく、特徴的な要素を選択することに依存し得ることを示しています。
3. この一般的なコンピュータのアイコンは、比較のための例であり、カレによる作品ではありません。わずか数ピクセルで構成されているこのアイコンは、認識が細部をすべて描写することではなく、特徴的な要素を選択することに依存し得ることを示しています。

関連情報とリンク

f/p コミュニケーションデザイン

情報の設計、階層構造、そして分かりやすい伝達について、引き続き検討する。

f/p ブランドデザインおよびコーポレートアイデンティティ

認識しやすいデザインを、あらゆるタッチポイントで展開可能なアイデンティティ・システムと結びつける。

参考文献

ニューヨーク近代美術館の所蔵品および展覧会記録

画像の出典とライセンス

1. SusanKare2019photo.jpg

作者または記載された出典: Cooper Hewitt · CC BY 3.0

画像の出典およびクレジット情報

ライセンス規約

Word用にサイズ調整およびJPEGエンコード済み。創作上の変更は一切行っていません。この画像には、上記に記載されたライセンスが適用されます。

2. Steve Jobs and Macintosh computer, January 1984, by Bernard Gotfryd – edited.jpg

作者または記載された出典: Photo: Bernard Gotfryd – Edited from tif by Cart · Public domain

画像の出典およびクレジット情報

Word用にサイズ調整およびJPEGエンコード済み。創作上の変更は一切行っていません。この画像には、上記に記載されたライセンスが適用されます。

3. PC ICON – Blue Screen.png

作者または記載された出典: Asterisk.CommonsAccount · CC0

画像の出典およびクレジット情報

ライセンス規約

Word用にサイズ調整およびJPEGエンコード済み。創作上の変更は一切行っていません。この画像には、上記に記載されたライセンスが適用されます。

実践ガイド:グラフィック・コミュニケーションデザイン会社の選び方

このトピックを、コミュニケーションデザインの範囲、成果物、およびパートナー選定と結びつける。

この分野でのプロジェクトをご計画ですか?ぜひf/p designにご相談ください。