見出し画像

アイコン - UIデザインチェックリスト

crage株式会社（くらげ）

こんにちは。デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage（くらげ）株式会社のデザインチームのナンシーです。
crage社内には、デザインを作りながら確認するためのUIデザインチェックリストが存在します。
各案件によって柔軟に対応するため、いつでもこのリストを正しいとはせず、あくまで指針として用意しています。
今回は、「ボタン」のチェックリストをご紹介します。 ※2023年1月26日更新

ボタン編はこちら

テキストフィールド編はこちら



✅チェックリスト

💡一発チェック：5秒ルール
　そのアイコンは、5秒で意味が伝わりますか？

スタイル（太さや丸み など）が統一されているか

サービス内のアイコンのスタイルは統一されていますか？
アイコンセットなどの中に、目的にぴったりなアイコンが無い場合、作らないといけない…手間だなぁと思うことありますよね。
ですが、スタイルが揃っていないと、そもそもUIとして気が付かれないこともあります。
手間を惜しまず作り、そのアイコンの意味がわかるか、人に意見を求めましょう。

新規作成したアイコンがあるか

新しい意味合いを持つ機能や挙動を持つアイコンを作りたい...けどぴったりなアイコンが見当たらない…えーい！作ってしまおう！となっていませんか？基本的には、すでに世の中にあるはずです。
アイコンがアイコンとしての機能を果たすためには、一般的にそのアイコンの意味が認知されている必要があります。
まっさら・新規に作成した場合は、本当に世の中に存在しなかったか、もう一度確認してみてもよいかもしれません。

この世にない新しい機能に既存のアイコンを利用していないか

もし、新しい意味合いを持つ機能や挙動にアイコンを付与したい場合は、既存で存在する「それっぽい」アイコンは利用しない方がよいです。
ユーザーは、そのアイコンが持つ「一般的な意味」で捉えるはずです。ユーザーを混乱させないようにしましょう。

アイコンの中にテキストを利用していないか

テキストで説明していたら、それはアイコンではありません。ユーザーは結局、読む必要が出てしまいます。
他にも、アイコンに記載されたテキストは、ブラウザの翻訳機能などで、翻訳されません。
また、アクセシビリティ観点では、音声読み上げソフト（スクリーンリーダー）を利用するユーザーにも、読み上げられないため、影響が出ます。
テキストを入れたくなる時の気持ちはわかりますが、デザイナーの腕の見せ所です。がんばりましょう。

アイコンにラベルを添えているか

☁（雲のマーク）のアイコンが、アップロードの意味合いにも、クラウドの意味合いにも利用されるように、1つの意味しか持たないアイコンはそんなに無いんです。
なので、「そのサービス」において、「そのアイコン」が意味するところを正しく伝えるには、基本的に、ラベルが必要です。
一部、例外もあります。たとえば、テキストエリアの「太字にする」「斜体にする」といったアイコンは、よく利用されるため、ラベルが不要なこともあります。
ラベルが本領を発揮する場所は、メインメニューやツールバーです。

ラベルが不要なアイコンの例

レスポンシブデザインを考慮しているか

SPの場合、画面が小さいため、ユーザーが受け取る情報量は、PCと比較して少なくなります。そのため、アイコンが小さいことは問題になりません。
PCの場合、画面サイズが大きいため、ユーザーが受け取る情報量が増えます。また、アイコン以外の画像やボタンなどの要素は、SPよりもサイズが大きくなることが多いです。また、一般的に、デバイス別にアイコンのサイズを変更することは少ないかと思います。結果、アイコンは、他の情報や、要素に埋もれ、目立たなくなってしまう可能性があります。
例えばメニューアイコンなど、SPのデザインをそのままPCに展開してしまって問題ないか、確認してみましょう。


✨オプション

絵文字を利用する

絵文字は世界共通言語です。単純でわかりやすくて、かわいいので、使ってみてもいいかもです🦄

ファビコンは 16px × 16px でも認識できるように

サービスロゴ入れることが多いかと思います。ロゴが横長などの際に、最小サイズで潰れてしまったりしませんか？ファビコンの意味がなくなっちゃいます。必ず確認しましょう。


📝 参考記事や本

参考記事

アイコンデータ

アイコンを作るとなったら


🗣 よもやまばなし

アイコンの目的を振り返る

  • 目的は2つ

    • ユーザーが機能を利用する際に、瞬時に識別できるようにすること

    • クリック・タップ領域を提供すること

  • 意識しておきたいこと

    • アイコン自体には、ボタンの説明をする目的はない（例外はあるが）

    • ボタンラベルがボタンの説明をする

    • ユーザーは繰り返しボタンを利用する中で、アイコンのみで、利用したい機能があるボタンを見つけられるようになる


🔖 他のデザインチェックリストはマガジンから


crageでは現在メンバーになっていただける方を募集中です。
ご興味ある方はぜひエントリーください！

新たな才能、求めています。

デザインチームのページはこちらから


この記事が気に入ったらサポートをしてみませんか？