オウンドメディアにアイコンを入れようとして、無料素材サイトのまとめ記事を何本か開いた。そこまでは進んだのに、実際にダウンロードして並べた瞬間に手が止まる。線の太さが揃わない、色味が浮く、そもそもどの場所に何個入れればいいのか判断がつかない。
つまずきの原因は素材の質ではありません。役割の違う3種類が同じ「アイコン」という言葉で語られていることにあります。ブラウザのタブに出る小さな正方形と、記事の見出し脇に置く記号では、必要なファイル形式もサイズも、選ぶときの基準も別物です。ここを分けないまま素材サイトを回遊すると、良さそうなものを1点ずつ集めた結果としてサイト全体の統一感を失う、という順路をたどりがちでしょう。
本記事では、SEO記事とオウンドメディアの制作を数多く手がけてきた弊社の現場感覚をもとに、アイコンを3つの用途に切り分ける考え方から、入手方法の選び分け、商用利用できる素材サイト、ライセンス確認の要点、そして記事が増えてもテイストが崩れない運用ルールの作り方までを順に整理します。
- オウンドメディアの「アイコン」に混ざっている3つの用途と、それぞれ選定基準が違う理由
- アイコンを増やすほど分かりにくくなる境目と、その手前で止める判断のしかた
- 制作依頼・社内制作・素材サイトの3つの入手方法の向き不向き
- 商用利用で確認すべきライセンスの4項目と、外注記事で起きがちな出所の抜け
- 担当者が代わってもテイストが崩れない運用ルールの作り方
オウンドメディアの「アイコン」は3つの用途に分かれる
オウンドメディアでアイコンと呼ばれているものは、置かれる場所によって3つに分けられます。それぞれ、必要なファイル形式も、差し替えるときの手間も、そもそも用意する目的も違います。最初にこの区別をつけておくと、素材サイトで迷う時間がはっきり減るはずです。
サイトの顔になるアイコン（ファビコン・ロゴマーク）
ブラウザのタブ、ブックマーク一覧、スマートフォンのホーム画面、そしてスマートフォンの検索結果に表示される小さな画像がこれにあたります。表示されるサイズはおおむね数十ピクセル四方しかないため、ロゴをそのまま縮小すると文字がつぶれて読めません。頭文字1文字か、シンボル部分だけを切り出した図形にするのが定石になっています。
Google検索の検索結果にファビコンを表示させる場合は、正方形であること、48ピクセルの倍数のサイズであること、クロールを許可していることなど、公式ドキュメントに要件が示されています。デザインの前に、この技術要件を先に確認しておいたほうが手戻りは少なくなります。
3つのうち、外部に制作を依頼する価値がいちばん高いのがこの用途です。点数は1つか2つで済み、しかもサイトが続く限り使われ続けます。
操作の目印になるUIアイコン
検索窓の虫眼鏡、メニューを開く3本線、SNSのシェアボタン、記事一覧のカテゴリ表示、ページ上部へ戻る矢印。読者が「押せる場所」を見つけるための記号がこの層です。
ここで求められるのは独自性ではなく、既視感のほうだと考えてください。虫眼鏡が検索、封筒が問い合わせ、というように、読者は他サイトで見た記号の意味を持ち込んで読みます。凝った独自デザインにすると、押せることに気づかれないという事故が起きかねません。1つのアイコンセットからまとめて選び、線の太さと角の丸みを揃えるのが基本方針になります。
記事の中で情報を区別するアイコン
本文中の「注意」「補足」「手順」といったボックスの頭に置く記号や、見出し脇の小さな図形、比較表の丸バツ記号がこの層です。読者が本文を上から下まで読まずに、必要な段落へ視線を飛ばすための手がかりとして働きます。
3つのなかでいちばん増えやすく、いちばん崩れやすいのがこの層でもあります。記事を書く人が毎回好きな素材を選べる状態にしておくと、100本目には出所の違うアイコンが何十種類も混在することになるでしょう。
関連記事：【2025年最新】オウンドメディア構築の完全ガイド｜手順からコツまで徹底解
アイコンを置くと、読者の読み方はどう変わるのか
アイコンの効果は「おしゃれになる」ではありません。もう少し具体的に言えば、読者がページを読む前におこなう走査の速度に効きます。
Webページを開いた読者は、まず全体をざっと見渡して、自分に関係のある部分を探します。このとき文字だけが並んでいると、判断材料が文字列しかないため、読まないと分からない状態が続く。そこへ記号が入ると、読む前に「ここは注意書き」「ここは手順」と当たりをつけられるようになります。ページ内の移動が速くなれば、読者が目的の情報にたどり着く前に離脱する確率も下がっていきます。
もう1つは、サイト全体の印象の統一です。テイストの揃ったアイコンが各ページに繰り返し現れると、読者は無意識にそれを「このメディアの記号」として認識します。ロゴやカラーと同じく、繰り返しによって覚えられる要素だと捉えたほうが実態に近いでしょう。
経営者記事の見栄えを良くしたいので、アイコンをもっと増やそうという話が社内で出ています。多いほうが分かりやすくなりますよね。
Writers-hub編集部
点数を増やすほど分かりやすくなる、という関係ではないんです。アイコンは情報を足す部品ではなく、情報を区別する記号です。同じページに意味の違うアイコンが10種類あると、読者はどれが重要な合図なのか判断できなくなります。目安として、1記事あたりに登場する種類は3つから5つ程度に抑えると、記号として機能しやすくなりますね。
区別のための記号なので、種類が増えるほど1種類あたりの意味は薄まります。装飾として足したくなったときは、その記号が「他と何を区別しているのか」を一言で説明できるかどうかを判断基準にしてみてください。説明できないものは、たいてい無くても困りません。
関連記事：オウンドメディア運用ガイド｜成功のポイントと効果的な運営方法を徹底解説
入手方法は3つ。判断は「揃えたい点数」で分かれる
アイコンの入手方法は、外部への制作依頼、社内での制作、素材サイトの利用という3つに整理できます。どれか1つを選ぶというより、用途ごとに使い分けるのが実務的です。
| 素材サイトを使う | 社内で制作する | デザイナー・制作会社に依頼する | |
|---|---|---|---|
| 費用の目安 | 無料から。有料でも定額制が中心 | 人件費のみだが工数は発生 | 点数と難易度に応じた制作費 |
| 用意にかかる時間 | ◎ 当日中に揃う | △ 他業務との兼ね合い次第 | ○ 数日から数週間 |
| テイストの統一しやすさ | ○ 同一セットで揃えれば可 | △ 担当者の力量に左右される | ◎ 設計段階から統一できる |
| 他社との差別化 | × 同じ素材が他サイトにも出る | ○ 自社独自にできる | ◎ ブランドに合わせて設計 |
| 点数を増やすときの手間 | ◎ 追加ダウンロードのみ | △ 都度制作が必要 | ○ 追加発注で対応 |
| 向いている用途 | UIアイコン、記事内アイコン | 記事内アイコンの一部 | ファビコン、ロゴ、主要UI |
現実的な進め方としては、サイトの顔になる部分だけを依頼し、点数の多い層は素材サイトで揃えるという組み合わせに落ち着くケースが大半です。ファビコンやメインのロゴマークは長く使われ、しかも点数が少ないため、制作費に対して回収期間が長い。一方で記事内のアイコンは今後も増え続けるので、すべてを都度発注していると、記事1本あたりの制作コストが読めなくなります。
社内にデザイン担当がいる場合でも、その人がサイト運用の専任でなければ、記事公開のたびに依頼が発生する構造は避けたほうがよいでしょう。アイコンの制作依頼が他部署の待ち行列に入った瞬間、公開日が動くようになります。
素材を探す時間より、記事を出す時間を増やしたいなら
アイコンや画像の選定は、記事を1本公開するたびに必ず発生する工程です。弊社では構成・執筆・画像・入稿を分けた体制で記事制作をご支援しています。どの工程を外に出すと更新が止まらなくなるか、現在の進め方をうかがったうえで整理してお伝えします。
関連記事：複数のオウンドメディア運営方法｜戦略設計から効率的な体制構築まで
用途別に見る、商用利用できるアイコン素材サイト
素材サイトは点数の多さで選ぶより、「1つのセットの中で必要なものが揃うか」で選ぶほうが失敗しません。複数サイトから1点ずつ集める方式は、点数が増えたときに必ずテイストが崩れます。以下は用途別に、商用利用に対応した代表的なサイトです。
UIアイコンと記事内アイコンに使う線画セット
同じ設計思想で数百点から数千点が用意されており、後から追加しても線の太さが揃うタイプです。オウンドメディアの土台にするならこの層から1つ選びます。
- ICOOON MONO 6000点以上の単色アイコンを配布する日本語サイト。色とサイズを指定してダウンロードでき、日本語のカテゴリ名で探せるため検索の手間が少ない
- Icon rainbow 同じ運営による色付きアイコン。単色で足りない場面の受け皿になる
- Material Symbols Googleが公開するアイコンセット。太さや角の丸みをスライダーで調整でき、Webフォントとしても読み込める
- Font Awesome Web制作で広く使われる定番。無料版と有料版があり、無料版でも主要なUIアイコンは揃う
- Tabler Icons 線の太さが統一された数千点のオープンソースアイコン
- Feather 点数は絞られているが、細線で軽い印象に寄せたいときに選ばれる
人物や場面を伝えるイラスト寄りの素材
記事の内容を場面として示したいときは、線画のアイコンより人物のシルエットやイラストのほうが伝わります。
- 人物ピクトグラム2.0 人の動作を表すピクトグラム。手順や状況の説明に使いやすい
- シルエットデザイン 人物や物のシルエット素材
- いらすとや 知名度が高く親しみやすい反面、他サイトとの重複が起きやすい。1つの制作物で使える点数に規定があるため、利用規約を必ず確認してほしい
点数と品質をまとめて確保したい場合の有料サービス
迷ったら、まず線画セットを1つ決めてしまうことをおすすめします。オウンドメディアで必要になるアイコンの大半はUIと記事内の記号であり、この2層が同一セットで揃うだけで、サイト全体の印象はかなり整います。イラスト素材はその後に、必要になった記事だけで足していけば十分でしょう。
素材サイトを使う前に確認する4つのこと
「商用利用可」と大きく書かれていても、条件は素材ごとに異なります。利用規約はサイト単位ではなく素材単位で変わります。同じサイト内でも、無料素材と有料素材、通常素材と特別素材で条件が分かれていることは珍しくありません。
- 商用利用の範囲。企業サイトでの利用は可でも、販売物やクライアントへの納品物への利用は別条件になっている場合がある
- クレジット表記の要否。無料プランのみ表記が必要というサービスは多い
- 改変の可否。色の変更、サイズの変更、他の図形との組み合わせがどこまで認められるか
- 再配布の禁止範囲。素材を含んだテンプレートを社外へ渡す行為が再配布とみなされることがある
とくに見落とされやすいのが3つ目の改変です。ブランドカラーに合わせて色を変えるのは実務では当たり前の操作ですが、規約上は改変にあたるため、明示的に許諾されているかを確かめる必要があります。
記事制作を外部に委託している場合、納品された記事に含まれるアイコンの出所を発注側が把握できていない、という状態がよく起きます。誰がどのサイトから取得したか分からないまま数百本が積み上がると、後から規約変更や差し替えが必要になったときに、対象記事を特定する作業から始めることになります。素材名と取得元URL、ライセンス種別を1行ずつ記録した台帳を、納品物の一部として最初から求めておく。この一手間で、将来の調査工数はかなり減らせます。
担当者が代わってもテイストが崩れない運用ルール
アイコンの本当の難所は、選ぶ場面ではなく続ける場面にあります。立ち上げ時は1人で決めているので統一されていますが、記事本数が増えて執筆者やチェック担当が入れ替わると、判断基準が引き継がれずに崩れていく。先に決めるのは素材ではなく、使ってよい場所と数です。
線画アイコンの調達元を1サイトに固定し、社内文書に「アイコンはここから取る」と1行で書きます。例外を認める場合は、誰が判断するかまで決めておきます
見出し脇、注意ボックスの頭、比較表の記号、カテゴリ一覧というように、置く場所をあらかじめ挙げます。列挙にない場所には置かない、という運用にすると判断の迷いが消えます
種類の数に上限を設けます。3つから5つ程度が現実的な水準です。数を制限すると、書き手は「本当に区別が必要な箇所」を選ぶようになります
線の太さ、表示サイズ、使用する色を数値で決めます。CMSのスタイル設定に組み込んでしまえば、書き手が毎回判断する必要はなくなります
使用したアイコンを共有フォルダにまとめ、素材名とライセンスを記録します。次の記事では探し直さずに再利用でき、規約確認も一度で済みます
ルールを作る目的は、書き手の自由を制限することではありません。判断の回数を減らすことです。記事1本につきアイコンの選定に10分かけていたなら、月10本で100分。年間では20時間を超えます。しかも判断が人によって分かれるため、レビュー時の指摘と差し戻しも発生する。ルールを1枚作る手間のほうが、明らかに小さく収まるでしょう。
起きやすい失敗をあらかじめ避ける
運用が崩れていく過程には、決まった型があります。弊社が既存メディアの記事を引き継ぐ際、最初の棚卸しでよく見つかるのが次のパターンです。
- 記事ごとに違う素材サイトからアイコンを取得する。3か月後には由来を追えなくなる
- 意味の重ならない場所に同じアイコンを使い回す。読者にとって記号の意味が壊れる
- ファビコンにロゴ全体を縮小して入れる。タブ上では判別できない塊になる
- アイコンだけで意味を伝える。文字を添えないと、読み上げ環境でも検索エンジンでも内容が伝わらない
- 装飾目的のアイコンに説明的なalt属性を入れる。読み上げ時に不要な情報が読まれる
4つ目は近年とくに重みが増しています。アイコンだけで意味を伝えない。画像は画像でしかないため、音声読み上げを使う読者には届きませんし、生成AIが検索結果を要約する場面でも、テキストとして書かれていない情報は拾われにくい。虫眼鏡だけを置くのではなく「検索」という文字を添える、注意ボックスの記号の隣に「注意」と書く。この程度の対応で、伝わる範囲は広がります。逆に、意味を持たない純粋な装飾アイコンは、代替テキストを空にして読み上げの対象から外すのが適切な扱いです。
運用ルールを決めても、回す人の時間が確保できないときは
素材の統一基準づくり、記事内での使用ルールの整備、納品時のライセンス記録まで含めて、記事制作の工程そのものを組み直すご支援をしています。現在の更新本数と、どの工程で止まりやすいかをお聞かせいただければ、今の体制で出せる本数と、工程を分けた場合の見通しをお伝えします。
オウンドメディアのアイコンについてよくある質問
導入前によく寄せられる質問を、実務上の判断基準とあわせてまとめました。
必須ではありません。文章と見出しだけでも情報は伝わります。ただ、記事本数が増えてカテゴリが複数に分かれた段階で、一覧ページの見分けがつきにくくなるはずです。ファビコンだけは早い段階で用意しておくと、ブックマークやタブ上での識別に効いてきます。
拡大縮小しても輪郭がぼやけず、ファイルサイズも小さく収まるSVGが基本の選択肢になります。ただしCMSやテーマの設定でSVGのアップロードが制限されている場合があり、その際はPNGを表示サイズの2倍で書き出して対応します。
点数よりも、1点あたりの容量と読み込み方法の影響が大きくなります。写真素材をアイコン代わりに使うと1点で数百キロバイトに達しますが、SVGやアイコンフォントであれば数キロバイト単位に収まります。同じ図案を繰り返し使う設計にしておけば、キャッシュも効きやすくなるでしょう。
技術的には可能ですが、商用利用の可否は利用しているサービスの規約によって異なるため、事前確認が必要です。また、複数点を同じテイストで揃えるのが難しいという実務上の制約もあります。長く使うファビコンやロゴではなく、記事内の装飾から試すほうがリスクは小さいでしょう。
まとめ
オウンドメディアのアイコンは、サイトの顔になるもの、操作の目印になるもの、記事の中で情報を区別するものという3つの用途に分かれ、それぞれ選定基準も入手方法も別々に決まります。素材サイトを開く前にこの切り分けを済ませておけば、探す対象が絞られ、集めたあとで統一感を失う事態も避けられます。
そして、アイコンで本当に手間がかかるのは選ぶ瞬間ではなく、記事が積み上がったあとの維持です。使うセットを1つに固定し、置いてよい場所と種類の上限を先に決める。この2点を最初に決めておくだけで、担当者が代わっても崩れない状態を保てます。
合同会社Writers-hubでは、記事の構成づくりから執筆、画像やアイコンの選定基準の整備、CMSへの入稿までを含めた記事制作のご支援をおこなっています。素材選びのような細かな判断も含めて、更新が止まらない工程を一緒に組み立てます。
記事の本数を増やす段階なら、工程の切り分けから始められます
現在の更新本数と社内で回している工程をうかがったうえで、どこを外に出すと止まらなくなるかを整理してお伝えします。アイコンや画像の運用ルールづくりだけのご相談でも構いません。
