アイコンの意味づけ 4ステップガイド

アイコンは画面上の小さな飾りではなく、インターフェース内でもっとも短い語彙だ。アイコンは語彙であり、装飾ではない という指摘は的確で、ユーザーが文字を見なくても安定して識別できる汎用記号は、せいぜい十数個ほどしかない

印刷現場では、この話はかなり実感しやすい。虫眼鏡は検索、歯車は設定、ゴミ箱は削除、プラスは追加、Xは閉じる、家はホーム、戻る矢印は前の階層へ戻る、再生三角形は開始を表す。これらはよく使う単語のように、単独でも使える

問題は、その十数個を超えたところにある。ハート、星、ブックマークはいずれも「お気に入り」に見えるが、プラットフォームによっては、いいね、マーク、あとで読むを意味する。共有にも単一の記号はなく、Appleでは四角に矢印、Androidでは3つの点を線で結んだ形がよく使われる。印刷業務システムで「審査へ送る」「差し戻し」「プリプレスへ再送」を全部テキストなしのIconに押し込めば、見た目はすっきりする。けれどミスが起きたとき、画面がきれいだったと褒める人はいない

Iconography（アイコンシステム）は、機能、状態、操作を一連の識別可能な図像記号で表す設計手法だ。プリプレスや顧客向けポータルでの役割は、推測を減らすことであって、見た目の負担を増やすことではない

Iconを単独で使えるかどうかは、初めて見た人が短時間で同じ答えを言えるかで判断する。デザイナー自身がそれらしく見えるかどうかではない

私はかなり素朴だが効く方法を使っている。アイコンから文脈を外し、同僚や顧客に単独で約5秒見せて、「押すと何が起きますか」と聞く。答えがばらけるなら文字を付ける。答えがそろうなら、そこで初めて文字を外すか検討する。このテストは、会議室で30分議論するより信頼できる

印刷業務インターフェースでは、とくにこの手順を省けない。多くのボタンの先にはコストがつながっているからだ

・「ファイル削除」はゴミ箱を使っても、文字は残す。顧客が単にリストから外すだけだと誤解しないようにする

・「校正承認」はチェックマーク単独で処理しない。チェックはフローによって、完了、通過、支払い済み、既読を意味することがある

・「再アップロード」は矢印に「ファイルを再送信」を組み合わせる。回転矢印だけを置いて推測させない

・「プリフライトチェックへ送る」のような抽象的な操作には汎用記号がない。文字で書いたほうが早い

チームが見積入口、顧客の入稿ページ、社内の案件追跡パネルを見直しているなら、Mai Strategy ナレッジアカデミーのコンサルティングチーム は、まずリスクの高いボタンを棚卸しし、どのIconを単独で出せるか、どれをlabelと必ずセットにするかを決めることを勧める

引き継げるアイコン語彙表では、各Iconを「機能、文言、状態、使用禁止の場面」まで明確な項目として固定する。SVGをひとまとめにしてエンジニアへ渡すだけでは足りない

中小規模の印刷会社なら、4ステップで十分だと思う。最初から大きなデザインシステムにしなくていい

・1. 高頻度の操作を列挙する：検索、追加、削除、ダウンロード、アップロード、戻る、承認、差し戻し、見積、支払い、案件追跡。毎日クリックされる機能から始める

・2. 単独表示できる記号を見極める：虫眼鏡、歯車、ゴミ箱、プラス、X、ホーム、戻る、再生といった汎用記号は候補に入る。ただし使用文脈は必ず確認する

・3. 1つの記号に1つの操作を紐づける：鉛筆が編集を表すなら、サイト全体で編集だけを表す。別ページで鉛筆をメモの意味に使わない

・4. 視覚仕様を固定する：同じicon family、同じgrid、同じstroke weightにそろえる。太さの違うものを混ぜると、1冊のカタログに3種類の書体を詰め込んだように見える

ここで大事なのは豪華に作ることではない。デザイン、カスタマーサポート、プリプレス、エンジニアリングが同じ言葉で話せるようにすることだ。印刷会社にとって本当に怖いのは、Iconを1つ描き間違えることではない。部署ごとにそのIconの意味を勝手に解釈している状態だ

アイコンの意味は受注と納期に影響する。顧客が入口ページで一度選択を誤ると、その後にカスタマーサポートの確認、プリプレスでの差し戻し、スケジュールの組み直し、納期の再調整へつながることがある

よくある入稿フローで考えると、顧客が「ファイル削除」を「今回のアップロードをキャンセル」と受け取った場合、ファイルはまだ下書きに残っていると思い込むかもしれない。営業担当が状態Iconを見ても「支払い待ち」なのか「校正待ち」なのかわからなければ、確認の電話が1本増える。プリプレスで「承認済み」と「印刷へ送信済み」を似たアイコンで表してしまうと、製造指示が間違った工程に入ったときにかなり面倒なことになる

印刷会社にとって、Iconデザインの検収は画面が整っているかだけで見るべきではない。フローの中で推測が1回減っているかを見るべきだ。これは私がSaaSや印刷業務自動化プロダクトを見るときにかなり気にする点でもある。インターフェースが小さいほど、語彙は正確でなければならない。スマートフォン上のアイコン1つは、デスクトップシステム上の説明文1行より誤解されやすい

顧客ポータルを高カスタマイズ商業印刷のフローにつなげるなら、MINDS のようなサービス場面では、「見積、素材選定、校正、校了、印刷へ送る」を明確な語彙に分ける必要がより高い。各ステップが用紙、加工、色、納期に関わるからだ

中小印刷会社は、最初からインターフェース全体を作り直す必要はない。まずはミスが起きやすい3か所、入稿、校正確認、案件追跡を直すだけで効果が出る

私は、毎日誰かが質問し、毎日誰かが押し間違える場所から選ぶ。きれいなアイコンライブラリを急いで追いかけるより、カスタマーサポートが何度も説明しているボタンを先に片づける

・入稿ページ：ダウンロード、再アップロード、削除、プレビューは汎用Iconに文字を添える。顧客がファイル管理で判断を誤らないようにする

・校正確認ページ：承認、差し戻し、備考、修正依頼は明確な文字を使う。チェックとバツだけにフロー上の責任を背負わせない

・案件追跡ページ：見積待ち、支払い待ち、プリフライトチェック中、製作中、出荷可は状態テキストを主役にし、Iconは補助的な識別にとどめる

・管理画面のツールバー：毎日使う社内機能は段階的にicon-onlyへ寄せてもよい。ただし新人教育とSOPで同じアイコン語彙を使っていることが前提になる

とても単純だ。押し間違えると修正、差し戻し、再スケジュール、クレームにつながる場所では、文字を残す。視覚的なスキャン速度にしか影響しない場所では、Iconを少しずつ絞り込んでいけばいい

・Iconはインターフェース内の語彙であり、意味が安定していないなら単独で使わせない

・十数個の汎用記号を除き、多くのIconには意味を受け止めるためのlabelが必要になる

・プリプレスシステムのIcon検収では、顧客の推測が1回減っているかを見る。画面上の文字がいくつ減ったかではない

・1つの記号には1つの操作だけを紐づける。そうしないと、カスタマーサポート、プリプレス、エンジニアリングがそれぞれ別の意味に訳してしまう

・抽象的なフローに汎用アイコンがないときは、文字で書くことがたいてい一番安いエラー防止設計になる

印刷製造チームとSaaSチームにとって、次の一手はIconをもっと描くことではない。「アイコン語彙表」を作ることだ。入稿、校正確認、案件追跡、支払い、印刷へ送るという各フローの高リスクなボタンを列挙し、Iconを単独で使えるか、labelを必ず付けるべきか、不可逆な操作に関わるかを1つずつ決める。この表はデザイン規定になり、カスタマーサポートの説明文、エンジニアリング上の命名、新人教育の資料にもなる

・アイコンは語彙であり、装飾ではない