はじめに
本書の目的
このドキュメントは「サイトマップ アイコン」について、実務で役立つ情報をわかりやすくまとめたガイドです。アイコンの役割や選び方、設置方法、活用のコツまで網羅し、Web担当者や制作者がすぐに使える実践的な内容を目指します。
誰に向けているか
サイト運営者、デザイナー、コーダーなど、サイトの見やすさや利便性を高めたい方に向けています。専門知識がなくても理解できるよう、具体例を交えて説明します。
本書の使い方
各章は独立して読み進められます。まず本章で全体像を把握し、必要な章に移ってください。実際の導入手順や設定例は後半で詳しく扱います。
本書の構成
第2章から第8章まで、サイトマップとアイコンの関係、種類、素材サイト、設置・設定、活用のコツ、Googleマップの例、画像サイトマップとの関係を順に解説します。
サイトマップとアイコンの関係
サイトマップの役割
サイトマップはWebサイトのページ構成や階層を一覧にしたものです。訪問者は全体の構造を把握しやすくなり、運営者はページの抜けや重複を見つけやすくなります。検索エンジン向けのXMLサイトマップとは別に、視覚的なHTMLサイトマップや構造図も有用です。
アイコンが果たす役割
アイコンは視覚で情報を伝える道具です。例えば、電話は連絡先、地図はアクセス、お知らせはニュースという具合に、一目で目的が分かります。文字だけの一覧に比べて、視認性と記憶性が向上します。
具体例で分かりやすく
オンラインショップなら「カート」「配送」「返品」などのアイコンを各カテゴリに付けます。学校のサイトなら「入学案内」「学科紹介」「アクセス」をアイコンで区別します。小さな絵で直感的に選べるため、利用者の操作が早くなります。
ツールとテンプレートの活用法
多くの作図ツールはアイコンを豊富に揃え、ドラッグで簡単に配置できます。テンプレートを使えば、色やサイズの統一も短時間でできます。まずは主要ページにだけアイコンを置き、使い勝手を確認してから全体に広げると良いです。
サイトマップアイコンの種類と用途
サイトマップで使うアイコンは、構造の把握や操作のしやすさに直結します。ここでは代表的な種類と用途をわかりやすく説明します。
階層図・構造図用アイコン
ページ、フォルダ、リンク、カテゴリなどを表すアイコンです。例: ページは紙のアイコン、フォルダはフォルダ形、リンクは鎖や矢印。階層を視覚化し、どの要素が親子関係にあるか一目で分かるようにします。
ナビゲーション用アイコン
ホーム、検索、設定、カテゴリ切替などの操作に使います。小さくても意味が伝わるシンボルを選ぶと操作性が向上します。特にモバイルではタッチしやすいサイズが重要です。
アクセシビリティ向上のアイコン
音声、拡大、コントラスト切替、キーボード操作のヒントなどを示します。視覚に不安のある利用者が使いやすくなります。代替テキストも忘れずに設定してください。
デザインとサイズのポイント
統一感とシンプルさを優先します。色数を絞り形状を揃えると見やすくなります。アイコンは十分な余白とタッチ領域を確保してください。情報量が多い場合は色や太さで階層を示すと効果的です。
活用例と注意点
ツリー表示は階層把握に向き、カード型は一覧性に優れます。配色やライセンスを確認し、読みやすさを最優先に調整してください。
サイトマップアイコン素材のおすすめサイト
おすすめサイト一覧
- Font Awesome：WebフォントとSVGが揃い、よく使われます。操作が簡単でサイト全体の統一に便利です。
- Flaticon：多種多様なPNG/SVGを提供。カテゴリ検索が充実しています。
- Material Icons：Google提供。シンプルで可読性の高いデザインが特徴です。
- Icons8：アイコンだけでなく編集ツールもあり、カスタマイズがしやすいです。
- Heroicons：モダンなライン系が多く、UIに馴染みます。
- The Noun Project：独自性のあるアイコンが豊富。商用利用は条件を確認してください。
- Bootstrap Icons／Ionicons／Feather Icons／Iconmonstr：軽量で用途別に使いやすいです。
- Canva／ICOOON MONO／icon-pit／Tabler Icons：日本語対応や作業効率に優れた選択肢です。
選び方のポイント
- ライセンスを必ず確認する：商用利用やクレジット表記の有無を確認してください。
- 形式はSVG推奨：拡大縮小しても劣化せず、色やサイズをCSSで制御できます。
- 見た目の統一：線の太さや塗り（塗りつぶし／線画）を揃えると見栄えが良くなります。
使い方のちょっとした注意
- ファイルサイズを最適化すると表示が速くなります。
- 必要ならアイコンを編集して配色やサイズを調整してください。
- 無料でも利用規約で制限がある場合があるので、安心して使うには購入やライセンス確認をおすすめします。
サイトマップアイコンの設置・設定方法
概要
サイトやページにアイコンを設置する基本手順を、CMS（WordPress等）、HTML自作、オンライン作図ツールごとにわかりやすく説明します。推奨サイズや確認方法もまとめます。
1) WordPressなどCMSでの設置
- 管理画面にログインし、「外観」→「カスタマイズ」→「サイトアイデンティティ」へ進みます。
- 「サイトアイコン」または「ファビコン」を選び、画像をアップロードします。
- 推奨は正方形で512×512px以上。アップロード後にトリミングできる場合もあります。
- テーマやプラグインで個別に設定する場合は、該当メニューから同様に画像を指定します。
2) HTMLを自分で作る場合
- アイコン画像をサーバーにアップロードします（例: /images/icon.png）。
- head内になどを追加します。
- モバイル用や高解像度用にPNGやSVGで複数サイズを用意し、sizes属性やtype属性で指定します。
3) オンライン作図ツールでの追加
- 素材ライブラリやテンプレートからアイコンを選びます。
- ドラッグ＆ドロップで配置し、サイズを正方形に調整します。
- 書き出し時にPNG/SVGで保存し、上記の手順でサイトにアップします。
共通の注意点
- ファイル形式はPNG（透過）かSVGが使いやすいです。
- サイズは512×512px以上の正方形を基準にします。
- 変更後はブラウザのキャッシュクリアやシークレットモードで表示確認してください。
- アイコンをサイトマップに反映させたい場合は、その画像を画像サイトマップや構造化データ（JSON-LD）で指定します。
この章で紹介した手順を順に行えば、ほとんどの環境で問題なくアイコンを表示できます。問題が出たら、まずキャッシュとパスの確認を行ってください。
サイトマップアイコン活用のコツ・注意点
デザインはサイト全体で統一する
アイコンは形・線の太さ・色味をそろえて使います。統一したセットを採用すると視認性が上がり、ブランド感が出ます。用途ごとにサイズ基準（例：ナビ16–24px、サムネイル32–48px）を決めるとバランスが取りやすくなります。
著作権とライセンスを必ず確認する
商用利用の可否や帰属表示の有無を確認します。無料でも利用規約が限定的な素材があります。素材を配布・改変する場合は条件を守ってください。
アクセシビリティに配慮する
色だけで意味を伝えない、十分なコントラストを確保する、説明的な代替テキスト（alt）やaria-labelを設定するなどの配慮が必要です。装飾目的ならalt=””やaria-hidden=”true”にしてスクリーンリーダーの負担を減らします。操作可能なアイコンはタップ領域を広め（例：44×44px程度）にします。
表示とパフォーマンスの注意点
SVGは拡大縮小で劣化せず軽量なのでおすすめです。複数アイコンはスプライトやSVGシンボルでまとめるとリクエストを減らせます。幅・高さ属性を設定してレイアウトシフトを防ぎ、画像は最適化して読み込みを速くします。
サイトマップとSEOの関係で気をつけること
アイコン自体が直接SEOを左右することは少ないですが、サイトマップに含めるページの可読性やリンク構造は重要です。HTML・XMLサイトマップを正しく配置し、公開ページがクロールされるようにします。画像を重要なコンテンツとする場合は画像サイトマップに登録します。
実践チェックリスト
- 統一されたアイコンセットを使っているか
- ライセンスは商用利用可能か
- alt/ariaを適切に設定しているか
- SVGやスプライトで最適化しているか
- HTML/XMLサイトマップが正しく設置されているか
Googleマップ等、施設・店舗のアイコン設定例
概要
Googleマップに表示される店舗・施設のアイコンは、主に業種カテゴリに応じて自動で割り当てられます。直接アイコンをアップロードして変更することはできません。ここでは実際にできる対策と、ウェブ上での回避策をわかりやすく説明します。
できる対策（Googleビジネスプロフィール）
- 主カテゴリの見直し：正確な主カテゴリを設定すると、より適切なアイコン表示につながります。Googleビジネスプロフィールにログイン→「情報」→「カテゴリ」を編集します。
- 副カテゴリや属性の追加：複数カテゴリを追加すると検索との関連性が高まります。写真や営業時間も正確に登録してください。
- 確認済みの状態にする：オーナー確認が済んでいると設定変更が反映されやすくなります。
ウェブサイトやアプリ上でのカスタム表示
自分のサイトに埋め込んだ地図では、Google Maps JavaScript API等を使い、任意のマーカー画像を設定できます。例えば店舗ページではブランドアイコンを使い視認性を上げるとよいでしょう。API利用は利用規約と料金を確認してください。
実例の手順（簡単）
- Googleビジネスプロフィールにログイン
- 「情報」→「カテゴリ」を編集→保存
- サイト表示をカスタムにしたい場合は地図埋め込みでマーカー画像を指定
注意点
- マップ上の公式アイコンはGoogleが管理するため、確実に変更できるわけではありません。
- APIや外部サービスを使う場合は利用規約に従ってください。
画像サイトマップとアイコンの関係
なぜ重要か
画像サイトマップは検索エンジンにページ内の画像を明示的に伝える手段です。アイコンも画像なので、適切に通知すると認識率が上がり、検索結果や画像検索での表示につながりやすくなります。
主なタグと使い方
- image:image：画像ブロックの開始。
- image:loc：画像の絶対URLを指定します。必ずフルパスにします。
- image:title：画像の名前や短い説明を記載します。ファイル名だけでなく意味を伝える文にします。
- image:caption：画像の説明や文脈を書きます。アイコンが何を示すかを明確にします。
- image:license（任意）：著作権情報がある場合に使います。
実例（簡単なXML）
https://example.com/shop
https://example.com/images/shop-icon.png
カフェロゴ
営業時間と位置を示す店舗アイコン
設置時のポイント
- URLは絶対パスにする。相対パスは避けます。
- アイコンが装飾のみで意味を持たない場合は除外しても構いません。意味を持つアイコンは必ず登録します。
- HTML側ではalt属性や周辺テキストで文脈を補うと効果的です。
- 多数の画像がある場合はサイトマップを分割して管理します。
注意点とコツ
検索エンジンは画像の内容を自動解析しますが、文字情報で補うことで誤認識を減らせます。説明は具体的に短く記載し、ファイル形式やサイズは実際の表示に適したものを使うと良いです。
