《デザイン基礎講座》虫眼鏡、PDF、SNS……アイコン画像の適切な活用方法

Webサイトには、虫眼鏡アイコンやPDFアイコン、SNSアイコンといった、さまざまなサイトで通例として広く使われている公共性の高いアイコンがあります。これらを活用すると、そのアイコンの役割を共通認識として理解してもらうことができます。

目次

小さな画像で役割を伝える 情報をアイコンで表現

共通認識を持つアイコンをデザインに活かす

Webサイトで使われるアイコンは、多くの人が何を意味するか理解し、共通認識を持っているものです。例えば下矢印と線や四角を組み合わせるとダウンロードアイコンだと認識されます。文字で役割を説明することなく意味が伝わり、コンパクトな画像なので、デザインに活用しやすいものです。

公式アイコンには利用規約がある

SNSアイコンなどは、プラットフォームが提供する公式のロゴが使われることが一般的です。使用の際は、提供元が定める規約を確認するよう気をつけましょう。サイトのデザインテイストと揃えるために公式ロゴを独自アレンジして使っている例もありますが、厳密には公式ロゴの改変として規約違反になるかもしれません。

(左)家の形をしたアイコンは、Webサイトのトップページを意味しています
(中)下矢印の下に線や四角を組み合わせたものは、ファイルなどのダウンロードアイコンとして知られています
(右)歯車は、アプリや会員ページなどで設定画面のアイコンとして使用されています
(左)Webサイトでリンクを貼る際には、同じウインドウで開くか別ウインドウで開くかを設定できます。別ウインドウで設定している場合それを明示するために、四角が2つ重なったようなアイコンが使われます
(中)Webサイトでは主にテキスト検索を意味するものとして知られています。しかし、例えば画像にマウスオーバーした際にポインターが虫眼鏡となった場合などには、拡大表示を意味することもあります
(右)PDFをリンクする際には、Adobeで配布されているPDFアイコンを使います。ロゴのガイドラインも参照しましょう
https://wwwadobe.com/jp/legal/permissions/icons-web-logos.html

教えてくれたのは…

ムラマツ ヒデキさん

株式会社クオートワークス代表取締役社長/デザイン会社3社を経て2013年より独立、2015年に法人化。主な守備領域はプロデュース、ディレクション、デザイン。専門誌掲載、書籍寄稿、イベント登壇多数。WebデザインアワードAwwwardsの審査員も務める。最近ではYoutuberとしても活躍中。MUUUUU.ORG / MUUUUU.TV運営。https://quoitworks.com/

Text:平田順子
※本記事は、「Web Designing 2024年2月号」の記事を一部抜粋・再編集して掲載しています。

  • URLをコピーしました!
目次