今回の仕上がり
検索アイコンに文字を添えた、実際に使えるリンクです。アイコンの形だけに意味を頼らず、行き先も表示します。
作品を検索する素材：Paweł Kuna様・Tabler Iconsの貢献者の皆様。MITの著作権・許諾表示を保持しています。
この記事の目次 開く・閉じる
まず「何をするボタンか」が伝わるか
検索や設定の小さな絵は、文字ばかりの画面を整理する助けになります。ただし、開発者が分かる絵でも、初めて使う人には分からないことがあります。アイコンを増やすより、操作の意図を一つずつ伝えることから考えたいところです。
今回はPaweł Kuna様と貢献者の皆様によるTabler Iconsから、虫眼鏡のSVGを使いました。以下のサンプルは、絵の隣に文字を添え、押すと説明が変わるだけの小さな実装です。
文字がボタンを説明しているため、画像のaltは空にしています。同じ意味を読み上げで二重に伝えないためです。一方、アイコンしかないボタンは、操作内容が分かる名前を付ける必要があります。画像が表示されることと、操作が理解できることは別です。
この例には実検索・外部送信はありません。説明文が変わることで反応を見せていますが、すべての用途でこの表現が最適だとするものではありません。
SVGを軽くする前に、元のファイルを残す
SVGは図形をコードで記述する形式です。使われていない記述や長い数値を整理すると小さくなる場合があります。今回はSVGOMGで、みっけメディアが用意した単純な角丸四角を最適化しました。
今回の一例：223→159バイト、64バイト減（約28.7%）
Compare gzippedをオフにした入力コードと出力コードの比較です。gzip比較では175→137バイトと表示。比較条件を混ぜないようにしました。
これは一つのSVGの容量比較で、サイト全体の表示速度の測定ではありません。小さな画像を数十バイト減らしても、通信、JavaScript、大きな動画などが遅ければ体感の改善は限られます。何が遅いのかを見ずに、画像だけへ時間をかけすぎないことも大切です。
最適化によってコメントや不要なグループがなくなり、数値・色の表記が短くなりました。元データは別に残し、表示する大きさで比較します。複雑な線、viewBox、IDなど、実装に必要なものを容量だけの理由で消してはいけません。
元の自作SVGと最適化後の作例も確認できます。配布ファイルは末尾の改行を含み、画面の文字列とはそれぞれ1バイト差があります。
「無料で使える」と「条件がない」は違う
今回のTabler IconsはMITライセンス。商用利用や改変を含む許諾がありますが、著作権・許諾表示の保持が条件です。使用例には公式LICENSE全文を残しました。無料アイコンを使うときも、配布元、作者、ライセンスを一緒に保存しておくと、後から条件を確認できます。
最適化ツールがコメントを消しても、利用条件がなくなるわけではありません。作者表示や許諾文が必要な素材なら、配布物のライセンス一覧などに保持します。Tablerの有料商品まで同じ条件だと考えたり、別の素材へそのまま当てはめたりしないようにしましょう。
SVGOMGのMITライセンスはツール自身のもの。入力素材の権利を確認する機能ではありません。インターネット上のSVGを見つけたら、まず正規の配布元を確認してください。
公開前は、実際の画面でこの順に見る
- 伝わる：初見で何の操作か分かるか。絵だけで迷うなら文字を添える。
- 見える：スマホとPCの実際の大きさで、線や文字が潰れないか。明るい背景・暗い背景の両方で確認する。
- 操作できる：タップ・クリック・キーボードで押せるか。押した結果やフォーカスが分かるか。
- 必要な情報が残る：元と出力を比較し、必要な図形や実装上の情報が残るか。
- 条件が残る：作者・公式URL・確認したライセンスを保存し、必要な表示を配布物に含める。
一度に全アイコンを置き換えるより、まず一つのボタンで試すと、色やサイズの調整がしやすくなります。AIに実装を手伝ってもらった場合も、出力コードがあるだけでなく、実際に使えるかを自分で確認する必要があります。
出典・検証範囲
2026年9月29日、PCでSVGOMGへ自作SVGを貼り付け、プレビュー・出力コード・容量の表示を確認。Tabler公式画面でsearchを検索して詳細を開き、公式GitHubから取得したSVGをこのサンプルに使いました。外部ツールでのスマホ編集、複雑なSVG、サイト全体の速度改善量、読み上げソフトでの検証は未確認です。
操作手順を詳しく見たい方はSVGOMGのガイドとTabler Iconsの紹介へ。素材を支える作り手の活動と利用条件も合わせて確認してみてください。