アイコンや記号を、ホームページに並べすぎていないか

1. 「見出しごとに絵を付けたら、にぎやかになると思って」

中小企業の経営者の方とお話していて、こんな言葉をよく聞きます。

「文字ばかりだと寂しいので、見出しごとに小さな絵を付けてもらったんです。箇条書きの頭にもチェックの印を付けて、大事なところは赤い太字にして。でも、できあがったのを見ると、なんだか落ち着かないんですよね」

文字ばかりのページが寂しく見えるのは、そのとおりです。絵や印を足せば、画面はにぎやかになります。作った当時は、少しでも目を引くようにと考えて足したはずです。

ただ、目を引くものが増えるほど、1つずつは目を引かなくなります。全部の見出しに絵があり、全部の行に印があり、あちこちが赤い太字になっていると、読む人はどこが大事なのかを見分けられません。

この記事では、アイコン（小さな絵）、記号、強調の3つを、どこまで使えばいいかを書きます。やめる話ではなく、効く場所に絞る話です。

近い記事との分け方

「アイコン」と呼ばれるものは、ほかにもあるので、先に役割を分けておきます。

• ブラウザのタブに出る小さなアイコン ― ブラウザのタブに出る小さなアイコンを、どう作るか に書きました
• SNSへのリンクのアイコン ― ホームページに並んでいるSNSのアイコン、全部使っていますか に書きました
• この記事 ― ページの本文や見出しに付ける小さな絵・記号・強調の使いすぎに絞った話です

この記事で書くこと

• 飾りが多いと、どこが大事か分からなくなる理由
• アイコンを使ってよいのは、意味が伝わるときだけ
• アイコンには、言葉を添える
• 文の頭の記号は、同じ意味に同じ記号
• 強調は、1つの画面に少しだけ
• 素材のアイコン集を、そのまま並べない

2. 飾りが多いと、どこが大事か分からなくなる

先に、3つの言葉を分けておきます。

• アイコン ― 見出しやボタンに付ける小さな絵。電話の受話器、地図のピン、時計など
• 記号 ― 文の頭や横に付ける印。「✓」「★」のようなもの
• 強調 ― 太字、赤い文字、下線、文字の後ろに色を敷くもの、文字を大きくすること

どれも、「ここを見てください」と知らせるための道具です。道具としての働きは同じなので、使いすぎたときに起きることも同じです。

全部に付けると、付けていないのと同じ

見出しが6つあって、6つ全部に絵が付いているとします。読む人にとって、絵は「この見出しは特別です」という合図になりません。全部が特別なら、どれも特別ではないからです。

同じことは記号にも強調にも言えます。箇条書きの全部の行に印が付いていれば、印は飾りになります。1つの段落の半分が太字なら、太字のところが大事だとは受け取られません。目印は、少ないときだけ目印として働きます。

読む人は、拾い読みをしている

ホームページを読む人は、上から順に一字ずつ読むより、目で拾いながら自分に関係のあるところを探していることが多いものです。拾い読みのとき、目は絵や太字や色に引かれて止まります。

止まる場所が多すぎると、目はあちこちに引っ張られて、どこにも落ち着きません。読む人が疲れて閉じてしまう前に、止まる場所を減らす必要があります。余白で目を休ませる考え方は 「もっと詰めて、たくさん載せて」が、ホームページを読みにくくする に書きました。飾りを減らすことも、余白を取ることも、目的は同じです。

3. アイコンは、意味が伝わるときだけ使う

では、アイコンはどんなときに使えばいいのか。基準は1つです。絵を見ただけで、何のことか分かるかどうかです。

意味が伝わるアイコン

多くの人が同じ意味で受け取る絵は、限られています。

• 電話の受話器 ― 電話番号、電話をかける
• 地図のピン ― 所在地、地図を開く
• 時計 ― 営業時間、受付時間
• 封筒 ― メール、問い合わせ
• カレンダー ― 日付、予約、定休日

これらは、言葉を読む前に何の情報か見当がつきます。探しものをしている人の目印として役に立ちます。住所の横に地図のピン、電話番号の横に受話器。こういう使い方なら、絵は情報を早く見つけるための道具になります。

意味が伝わらないアイコン

反対に、気持ちや姿勢を絵にしたものは、意味が伝わりません。

• 「安心」を表すつもりの盾
• 「信頼」を表すつもりの握手
• 「スピード」を表すつもりのロケット
• 「提案力」を表すつもりの電球

作った側は意味を込めていますが、読む人には「盾の絵」にしか見えません。絵の意味を言葉で説明しないと分からないなら、その絵は情報を足していません。見出しの言葉だけで十分に伝わるなら、絵が無くても困る人はいません。

確かめ方は、言葉を隠してみること

自社のページのアイコンが伝わるかどうかは、簡単に確かめられます。アイコンの横の言葉を手で隠して、絵だけを見てください。

絵だけで何の情報か言い当てられれば、そのアイコンは働いています。言い当てられなければ、その絵は飾りです。社内の人は意味を知っているので、貴社の仕事をよく知らない人に見てもらうと、より正確に分かります。

4. アイコンには、言葉を添える

意味が伝わるアイコンでも、絵だけで置くのは避けたほうが無難です。絵の横に、短い言葉を添えてください。

絵だけのボタンは、迷われる

よくあるのが、スマートフォンの画面の隅にある、横線が3本並んだ絵です。メニューを開くボタンとして広く使われていますが、誰もがその意味を知っているとは限りません。とくにホームページをあまり使わない方には、ただの線に見えることがあります。

絵の下に「メニュー」と一言あれば、迷う人はいなくなります。電話のボタンも、受話器の絵だけより「電話する」と書いてあるほうが、押したら何が起きるかが分かります。

添える言葉は、押したあとに起きること

ボタンに添える言葉は、押したら何が起きるかを書きます。

• 受話器の絵に「電話する」
• 地図のピンに「地図を開く」
• 封筒の絵に「メールで問い合わせる」

「TEL」「MAP」のような略した英語より、動作を書いた日本語のほうが、年配の方にも伝わります。

画面を読み上げる人にも届く

画面の文字を声で読み上げる機能を使って、ホームページを聞いている人もいます。絵だけのボタンは、読み上げたときに何のボタンか伝わらないことがあります。言葉が添えてあれば、そのまま読み上げられます。

絵を見分けにくい人、色の見え方が違う人にとっても、言葉は同じ意味のまま届きます。色だけに頼らない伝え方は 色だけで伝えていないか ― 見え方が違う人にも読めるホームページ にまとめました。絵だけに頼らないのも、同じ考え方です。

5. 文の頭の記号は、同じ意味に同じ記号

次は、文の頭や横に付ける記号です。

全部の行に「✓」を付けていないか

箇条書きの全部の行の頭に「✓」が付いているページは、よく見かけます。「✓」は本来、確かめた、当てはまる、できるという意味の印です。「こんな方におすすめ」の一覧に付けるなら、意味は通ります。

ところが、サービスの説明にも、会社の沿革にも、注意事項にも、全部の箇条書きに「✓」が付いていると、印は意味を失います。注意事項の頭に「できる」の印が付いているのは、むしろ逆の意味に読めてしまいます。

「★」は、評価に見える

「★」も使い方に注意が要ります。星の印は、多くの人が評価や点数を思い浮かべる記号です。おすすめのサービスの頭に「★」を付けたつもりが、口コミの評価の数のように見えることがあります。

「★」を並べて「★★★」のように書くと、なおさら評価に見えます。評価ではないなら、星は使わずに「おすすめ」と言葉で書くほうが誤解がありません。

記号の意味を、サイトの中で1つに決める

記号を使うなら、1つの記号には1つの意味を決めて、サイト全体でそろえます。

記号は、画面によって見え方が変わる

もう1つ、知っておきたいことがあります。記号の中には、見る画面や機種によって、形や色が変わって表示されるものがあります。とくに、スマートフォンで使う顔や物の小さな絵の文字（絵文字）は、機種ごとに絵柄が違います。

作った側の画面ではかわいく見えた印が、別の機種では違う絵柄で出たり、うまく表示されずに四角い枠になったりすることがあります。会社のホームページでは、絵文字は使わず、印が要るところは言葉か、作って載せたアイコンで表すほうが安心です。

6. 強調は、1つの画面に少しだけ

3つ目は、太字や赤字などの強調です。ここがいちばん増えやすいところです。

強調が増えていく理由

強調は、書いた人がそこを大事だと思ったときに付けます。そして、書いている本人にとっては、どの文も大事です。大事なところに付けているうちに、気がつくと半分が強調になっている。これがよくある流れです。

更新のたびに「ここも目立たせたい」と足していくと、さらに増えます。お知らせの「重要」、キャンペーンの赤字、新しいサービスの「NEW」。どれも足した理由はありますが、減らす人がいません。

1つの画面に、少しだけ

目安は、1つの画面の中で、強調は少しだけです。画面を1つ見たときに、強調が目に入る場所が1つか2つなら、読む人はそこを手がかりに読めます。強調が画面のあちこちにあるなら、どれかを外します。

外すものを選ぶときは、「この画面で、読む人がいちばん知りたいことは何か」を考えてください。料金の画面なら金額と条件、アクセスの画面なら住所と目印。それ以外の強調は、外しても話は欠けません。

強調の種類を、2つまでに決める

強調の量と同じくらい大事なのが、強調の種類です。太字、赤字、下線、色を敷く、大きくする。これが全部使われていると、種類ごとに意味があるのかと読む人が考え込みます。

• 本文の中の強調 ― 太字だけ、などと1つに決める
• 注意してほしいこと ― 赤い文字は、ここだけに取っておく
• 下線 ― リンクと見分けがつかなくなるので、強調には使わない

赤い文字を、注意以外のところにも使っていると、本当に注意してほしいところが埋もれます。赤は、見落とされると困ることのために取っておくと決めておくと、強調の数も自然に減ります。

見出しを、強調の代わりにしない

目立たせたい一文を、見出しの形にしてしまうこともあります。見出しは強調ではなく、ページの中の区切りと道しるべです。大きく見せたいだけなら、見出しにせずに文字の大きさだけを変えるのが本来の形です。見出しの付け方は ホームページの「見出し」を、どう付けるか にまとめました。

7. 素材のアイコン集を、そのまま並べない

最後は、アイコンの出どころの話です。

「どこかで見たサイト」に見える

アイコンは、配布されている素材集から選んで使うことが多いものです。素材集は便利ですが、同じ素材を使っているサイトは、ほかにもたくさんあります。

とくによく見かけるのが、丸の中に小さな絵が入ったアイコンが3つ横に並び、その下に「安心」「丁寧」「迅速」と書かれた形です。この形を見た人は、中身を読む前に「どこかで見たサイトだ」と感じます。見た目がどこかで見たものだと、中身も同じようなものだと受け取られやすくなります。

テンプレートの見本に入っていたアイコンが、そのまま残っていることもあります。見本の写真や文章と同じで、見本のアイコンもそのまま公開しないほうがいいものです。テンプレートで作るときの注意は テンプレートで作るか、一から作るか に書きました。

使うなら、そろえる

素材のアイコンを使うなら、形をそろえることで、寄せ集めの印象は減らせます。

• 線の太さ ― 細い線の絵と、塗りつぶしの絵を混ぜない
• 色 ― アイコンの色は1色か2色に決め、サイトの色と合わせる
• 角の形 ― 角の丸い絵と、角の尖った絵を混ぜない
• 大きさ ― 同じ並びのアイコンは、同じ大きさで置く

素材を使うときは、配布元ごとに利用の条件が違います。会社のホームページで使ってよいか、出どころの表示が要るかなどを、配布元の条件で確かめてください。

絵の代わりに、事実を置く

「安心」「丁寧」「迅速」の3つの絵を外したら、そこに何を置くか。いちばん伝わるのは、貴社の事実です。

「迅速」の絵の代わりに「平日の午前中のご連絡は、当日中にお返事します」と一文で書く。「安心」の絵の代わりに、保証の中身を書く。絵は気持ちしか伝えられませんが、事実は比べる材料になります。写真がある会社なら、仕事の様子が分かる写真1枚のほうが、どんな絵よりも多くを伝えます。

Step 1（今日）：アイコン・記号・強調を数える

ここからは進め方です。まず、トップページをスマートフォンで開き、画面を1つ送るごとに、アイコン、記号、強調がいくつ目に入るかを数えてください。多い画面に印をつけます。

Step 2（今週）：言葉を隠して、絵を確かめる

アイコンの横の言葉を隠して、絵だけで意味が分かるかを確かめます。分からない絵は外す候補に、分かる絵は言葉を添える候補にします。記号は、同じ記号が違う意味で使われていないかを見ます。

Step 3（今月）：決めごとを1枚にして、制作会社に渡す

強調の種類、記号の意味、アイコンの色と形を1枚にまとめ、直してほしい場所と一緒に制作会社に渡します。決めごとが残っていれば、更新のたびに飾りが増えていくのを防げます。

8. 雄喜晃の伴走：飾りを足す前に、効く場所を一緒に決めます

私たち雄喜晃のホームページ制作では、寂しく見えるからという理由で、アイコンや記号を足すことはしません。どの情報を探しやすくしたいかを伺って、効く場所にだけ置きます。

私たちがやること

電話番号、所在地、営業時間のように、探しものの目印になる情報には、意味の伝わるアイコンと短い言葉をセットで付けます。アイコンの線の太さ、色、大きさはサイト全体でそろえます。記号は意味を1つに決め、強調は種類を絞って、1つの画面の中で目に入る場所が少しになるように組みます。

組んだページは、スマートフォンで画面ごとにお見せし、どこに目が止まるかを一緒に確かめてからお渡しします。決めた記号と強調の使い方は1枚にまとめておくので、公開後に月5回までの更新代行でお知らせや情報を足すときも、同じ決めごとで反映します。

料金と条件

料金は制作費0円、月額8,800円（税別）からです。6ページ構成のプランは月額13,800円（税別）です。サーバー、独自ドメイン、SSL、保守はすべて月額に含まれます。

最低契約期間は6ヶ月です。7〜35ヶ月で解約された場合、サイトは非公開になります。36ヶ月以上ご継続いただいた場合は、サイトをお渡しします。

私たちがやらないこと

先に書いておきます。「安心」「丁寧」「迅速」のような言葉に絵を付けて並べ、中身の代わりにすることはしません。根拠を示せない「No.1」のような印や飾りで、ページを埋めることもしません。

また、アイコンや強調を整えることで、検索の順位が上がる、問い合わせが増えるとお約束することもいたしません。私たちがやるのは、貴社の事実が読む人の目に入る形に整えることです。

実際にお作りしたサイトは 制作実績、料金と条件は ホームページ制作のページ に載せてあります。神戸市北区鈴蘭台を拠点に、2025年10月から活動しています。

「にぎやかにしたはずなのに、なんだか落ち着かないページになっている」という方は、一度ご相談ください。

9. まとめ：目印は、少ないときだけ目印になる

アイコンや記号、強調で押さえることは、5つです。

• 全部に付けると、付けていないのと同じ ― 目印は、少ないときだけ目印として働く
• アイコンは、意味が伝わるときだけ ― 電話・地図・時計のように、絵だけで分かるもの。言葉を隠して確かめる
• 絵には言葉を添える ― 押したら何が起きるかを書く。読み上げる人にも届く
• 同じ意味には、同じ記号 ― 「✓」「★」の意味を1つに決め、絵文字は使わない
• 強調は1つの画面に少しだけ、種類は2つまで ― 赤は、見落とされると困ることのために取っておく

絵や印を足したくなるのは、少しでも見てほしいからです。その気持ちは正しいのですが、見てほしいものが多いときほど、目印は減らしたほうが届きます。

まずは今日、自社のトップページをスマートフォンで開いて、画面ごとにアイコンと記号と強調を数えてみてください。数が多い画面が、直す場所です。

ぜひ一度、お話を聞かせてください。貴社のページで、どこにいちばん目を止めてほしいかを決めるところから、ご一緒します。