アイコン・ピクトグラムをそろえる|サイトや案内表示の作り方と頼み方

/ 更新 / Lapisデザインラボ

サイトのアイコンや、店内・施設の案内表示(ピクトグラム)がページごと・場所ごとにばらばらだと、見る人が意味を読み取るのに時間がかかります。トイレや駐車場のような一般的な案内は規格に沿った図記号を使い、自社のサービスを表すアイコンは統一したデザインで作るというように、場面によって作り方を分けるのが実務的です。

この記事では、ピクトグラムやアイコンを統一する方法を、規格を使う場合・既製の素材を使う場合・オリジナルで作る場合の3つに分けてまとめます。

場面で変わる、ピクトグラムの作り方

場面向いている方法
トイレ・駐車場・避難口など、不特定多数向けの案内JIS規格の図記号を使う
サイトのメニューやSNSのアイコン既製の素材、またはオリジナル制作
自社のサービス内容を表すアイコン(受付の種類、商品カテゴリーなど)オリジナル制作が向く場合がある

JIS規格の案内用図記号を使う

言葉が通じない人にも伝わる案内表示として、JIS Z 8210「案内用図記号」が定められています。国土交通省の資料によると、不特定多数の人が利用する公共交通機関や公共施設、観光施設などで、文字や言葉によらずに情報を伝える図形です。経済産業省の資料によると、2017年の改正では、外国人観光客にも分かりやすくするため、国際規格(ISO)との整合の観点から一部の図記号が変更されています。

トイレ、駐車場、エレベーター、救護所、AEDの設置場所など、初めて訪れる人が多い場所の案内には、独自の絵柄を新しく作るより、この規格に沿った図記号を使うほうが、見る人の理解が早くなります。図記号の利用許諾などについては、国土交通省のページが日本産業標準調査会(JISC)の「よくある質問」を参照するよう案内しているため、使う前にそちらを確認します。

既製のアイコン素材を使う場合の確認点

サイトのメニューやSNSのアイコンなど、デザイン性が求められる場面では、フリーのアイコン素材を使う会社もあります。素材を選ぶときは、次の点を確認します。

  • 商用利用が許可されているか:個人利用のみを想定した素材もあります
  • 改変してよいか:色やサイズの変更が許可されているかを確認します。コーポレートカラーに合わせて色を変える場合は特に重要です
  • クレジット表記が必要か:出典の表記を求める素材もあり、サイトのフッターなど、どこに書くかを決めておきます
  • 媒体ごとの制限:Webサイトでは使えても、印刷物・商品パッケージでは別途許諾が必要な素材もあります

これらは素材サイトごとに利用規約が異なるため、ダウンロードするページに書かれた規約を確認するのが確実です。社内で複数人がアイコンを使う場合は、使ってよい素材の一覧を共有しておくと、規約に合わない使い方を防げます。

オリジナルで作る場合の進め方

自社のサービス内容を表すアイコン(対応業務の種類、プランの違い、商品カテゴリーなど)は、既製の素材に当てはまる絵柄が少なく、オリジナルで作る会社もあります。進め方は次のとおりです。

  1. 使う場面と数を決める:サイトのメニュー用、パンフレット用など、どこで何個使うかを先に整理します
  2. コーポレートカラー・書体と合わせる方向を伝える:既存のロゴやコーポレートカラーの情報をデザイナーに共有します
  3. 線の太さ・角の丸み・塗りの有無などのルールを統一する:1つのアイコンだけ作っても、増やしたときに雰囲気がばらつくことがあるため、最初に簡単なルールを決めておきます
  4. サイズを変えても読めるかを確認する:小さいファビコンサイズと、大きい案内板サイズの両方で確認します

気をつけておきたい点

  • 規格に沿った案内と、自社独自のアイコンを混在させる場合は、見た目のトーンが違いすぎないように統一感を持たせます
  • 素材の利用規約は改定されることがあるため、重要な媒体(パッケージや看板など)に使う前に、都度確認しておくと安全です
  • アイコンのデータは、Web用(SVG・PNGなど)と印刷用で形式が異なる場合があるため、使う媒体を先に伝えておきます

依頼するときの進め方

オリジナルのアイコンをデザイナーやデザイン会社に依頼する場合は、次の順で進めると、あとからの手直しが少なくなります。

  1. 使う場所と個数の一覧を作る:サイトのメニュー用、パンフレット用、館内の案内表示用など、用途ごとに必要な個数を整理します
  2. 既存のロゴ・コーポレートカラーの情報を渡す:線の太さや角の丸みを、既存のロゴの印象に合わせるかどうかを伝えます
  3. 1〜2個の試作で方向性を確認する:全部を一度に作ってもらう前に、少数の試作で線の太さや塗りの有無の方向性を確認すると、全体を作り直す手間を避けられます
  4. サイズを変えて確認する:小さいファビコンサイズと、看板など大きいサイズの両方で、形が崩れないかを確認します

社内で複数の部署がそれぞれアイコンを用意すると、スタイルがばらついてしまいます。依頼する窓口を1つにまとめ、既存のアイコンと新しく作るアイコンを並べて確認できるようにしておくと、統一感を保ちやすくなります。

色と形のルールを決めておく

アイコンを増やしていくと、個別には問題なくても、並べたときに統一感がなくなることがあります。最初に次のようなルールを簡単に決めておくと、あとから追加するアイコンもなじみやすくなります。

  • 線の太さ:細い線で統一するか、太めの塗りで統一するか
  • 角の処理:角を丸くするか、直角のままにするか
  • 色数:単色で使うか、コーポレートカラーを含めた複数色を使うか
  • 背景の有無:円や四角の背景を付けるか、アイコン単体で使うか

これらをルールとして文書に残しておけば、新しいアイコンを追加する際や、別の制作会社に依頼する際にも、同じ基準で作ってもらえます。

まとめ

  • トイレや駐車場など不特定多数向けの案内は、JIS Z 8210に沿った図記号を使うのが安全
  • 既製素材を使う場合は、商用利用・改変・クレジット表記・媒体ごとの制限を利用規約で確認する
  • 自社のサービスを表すアイコンは、コーポレートカラーや書体に合わせてオリジナルで作るほうが統一感が出やすい
  • どちらの方法でも、線の太さや塗りの有無などのルールを先に決めておくと、増やしたときにばらつきにくい

オリジナルのアイコンをロゴやコーポレートカラーに合わせて作りたい場合は、サービスと料金で相談できます。

よくある質問

トイレや駐車場のマークは自分で作ってよいのですか。

不特定多数が利用する施設の案内表示には、JIS Z 8210で定められた案内用図記号があります。独自の絵柄を作ることもできますが、初めて訪れる人にも伝わりやすいという点では、規格に沿った図記号を使うほうが安全です。

フリーのアイコン素材をサイトに使うときの注意点は何ですか。

素材サイトごとに利用規約が異なり、商用利用の可否、改変の可否、クレジット表記の要否が分かれています。配布ページに書かれた利用規約を確認し、サイトやパンフレットなど使う媒体ごとに許可されているかを個別に確かめる必要があります。

既製の素材とオリジナル制作、どちらを選べばよいですか。

トイレや階段など一般的な案内であれば、規格に沿った既製の図記号で十分です。自社のサービス内容を表すアイコン(受付対応の種類、商品カテゴリーなど)は、既製素材に当てはまる絵柄が少ないため、コーポレートカラーや書体に合わせてオリジナルで作るほうが統一感が出ます。

参考にした資料

あわせて読みたい

Contact

まずは、どのプランが合うか
ご相談ください。

事業の内容と、いまお使いのロゴや印刷物の状況を伺い、合うプランと日程をお返事します。ご相談は無料です。