JIN:Rに400種類もあるオリジナルのアイコンをスマートに使う方法

アシスタントさん

アイコンを使えば、パッと意味が伝えられて良いかなと思うんだけど、使い方難しいのかな。あまり、他の人とかぶらないアイコンが使えたらいいな。

じゅん

JIN:Rには実用的な400種類のオリジナルアイコンが搭載されていて、クリックひとつで使えますよ。

テキストで長々と説明するよりもアイコンで伝えた方が、見た目的にも華やかになり良いのになと感じることがあると思います。でも、アイコンを設定するのは難しいと躊躇していないでしょうか。

当サイトでも使っているJIN:Rであれば、クリックひとつでたくさんのアイコンを表示できます。

この記事では、アイコンを使うメリットから、オリジナルアイコンの種類、使える場所までサンプルを使いご紹介します。

私なりのアイコンを活用するアイデアも、参考にしてもらえると嬉しいです。

オリジナルアイコンを使って、華やかで訪問した人にとって分かりやすいサイトにしたいと思う人は、ぜひ最後まで読んでください。

もし、WordPressテーマを「JIN:R」にしようかと迷っているなら、あなたの決断を後押しする情報になっていると思います。

5つのアイコンを使うメリット

アイコンには、見るだけで何を意味しているのかすぐに理解できる特徴があります。

電話のアイコン（）の横に数字があれば電話番号のこと、虫眼鏡のアイコン（）の横に入力できる枠があれば検索できるのだと、ほとんどの人は理解できます。

ビジュアルイメージは言語に依存しないため、世界中の人々にとって理解しやすい普遍的なコミュニケーション手段です。

アイコンを使うことでテキストだけの説明よりも、華やかになりオシャレに見えるので、サイトにプロフェッショナル感が演出できる効果もあります。

アイコンは注目を集められるので、重要なポイントやナビゲーションを直感的に伝えられて、読者がサイト内で迷うことを防ぎます。

ビジュアルで直感的に伝えることで、限られたスペースの中でもたくさんの情報を伝えることができます。特に、スマートフォンのようなパソコンよりも画面が狭い場合に、とても大きなメリットです。

JIN:Rで使えるオリジナルアイコン

WordPress テーマ JIN:Rには、実用的な400種類以上のオリジナルアイコンが搭載されています。オリジナルで400種類もあるので、使いたいと思うアイコンはほとんどあり、他のテーマを使う人と差別化ができます。

400種類もあれば必要十分なんですが、「Font Awsome」などが使えるメニューがあればもっとたくさんのアイコンが利用できるという意見もあると思います。

確かに、様々な表現にジャストフィットした、こだわりのアイコンが見つかるかもしれません。でも、アイコンは種類の多様性ばかりが大切なのではありません。変わったデザインや細かいディテールはおしゃれかもしれませんが、アイコンの示す意味が伝わりにくくなることがあります。

アイコンのメリットを最大限発揮するには、誰もがすぐに理解できるような普遍的な意味を持っていることが大切と考えています。

ブログ・サイト内で同じ意味のアイコンが、微妙に形が違ったり線の太さが違うなどのばらつきは、デザインの統一感を下げてしまいます。特に、同じ記事の中ではプロフェッショナルな印象が損なわれてしまいます。

選択のパラドックス理論（引用：TEDより）で語られているように、提供される選択肢が多すぎると、人々は実際には何も選べなくなることがあります。つまり、アイコンの種類があまりにも多いと、サイトを訪れた人がメッセージや機能を直感的に理解するのが難しくなります。その結果、サイトの使いやすさや訪問者の満足度が低下する可能性があります。もちろん、サイト運営者も選ぶのが大変になります。

アイコンを選ぶときは、目的やブランドイメージに最も適したものを選択することが重要です。JIN:Rのオリジナルアイコンは、実用的な400種類に限定してくれているとも言えます。

オリジナルアイコンをジャンル別に紹介

どのようなオリジナルアイコンが使えるのかを紹介していきます。

ブログアイコン

ブログでよく使われる機能やメニューを表すものが多いです。

家（ホーム）や虫眼鏡、かご、タグなど

一般アイコン

注意や注目を集めるのに汎用的に使えるものが多いです。

以下のジャンルに振り分けられるアイコンも含まれているので、ほかで見つからないときはここも確認してみましょう。

電球やびっくりマーク、拡声器、サムアップ、リボン、鈴、カギなど

マークアイコン

まるばつやチェック、数字など

矢印アイコン

上下左右やなど

お金アイコン

ドルマーク、がま口、紙幣、カード、貯金箱など

キャラクターアイコン

子供や犬、猫、鳥、魚など

自然アイコン

火や水滴、太陽、植物から、テントやビーチパラソルも

ガジェットアイコン

スマホやパソコン、SIMカード、イヤホンなど

美容アイコン

ボトルセットや、お化粧道具、指輪、洋服、ズボンなど

エンタメアイコン

ゲームコントローラーやボールなど

乗り物アイコン

車やバイク、飛行機など

食べ物アイコン

お皿とナイフフォークやワイングラス、ごはん、瓶など

クリエイティブアイコン

羽ペンやコードのマーク、紙飛行機など

SNSアイコン

フェイスブックやユーチューブ、ワードプレスなど

その他

再読み込みやリターンのマークなど

インラインアイコン機能で表示したので、小さくて分かりづらいものもあったと思います。アイコンボックスやデザイン見出しで表示すると、しっかりとイメージが伝わる形になっているので安心してください。

アイコンを使えるブロックやメニュー

インラインアイコン機能で、記事の中にアイコンを使えます。

インラインのツールバーにひつじ（）のアイコンが表示されています。そのアイコンをクリックすると、オリジナルアイコンがポップアップで表示されます。使いたいアイコンを選びクリックすると使えます。

インラインアイコン機能で入力すると、「」このようにテキストと一緒に表示できます。

ツールバーにある星（）のアイコンから、比較表ブロックで使う評価アイコンもテキストと一緒に使えます。

のような星による評価です。星ゼロから星５まで、11段階で評価を表せます。

アイコンボックスではボックスの左側にアイコンが表示されます。

右サイドバーに表示される「アイコンボックスを編集」をONにしてアイコンを置き換えから好きなアイコンを選択するだけで完了です。

アイコンを登録しておくことも、都度選び変更するカスタマイズもできます。

デザイン見出しでもアイコンを選択して表示できます。

レイアウトは左寄せと中央寄せから選べます。

右サイドバーに表示されるシンボル装飾をアイコンにして、アイコンを選択で好きなアイコンを選ぶだけです。

JIN:Rのオリジナルメニューのスマホ専用機能でもアイコンが活躍します。

スマホ専用機能として、スマホメニューとコンバージョンボタンが表示できるようになっています。スマホメニューはヘッダー部分に、コンバージョンボタンはフッター部分に、アイコンを配置して記事へリンクできます。

ひと画面で表示できる文字数が限られるスマホで、アイコンのメリットを最大限発揮しています。

JIN:R公式マニュアル スマホメニューへ

JIN:R公式マニュアル コンバージョンボタンへ

ブローバルメニューやハンバーガーメニューのメニューにも、アイコンを追加できます。

ただし、この2つのメニューに関しては、一覧からアイコンを選択できません。

どちらの場合もメニュー設定するときに、HTMLコードをナビゲーションラベルに入力します。HTMLなんて難しいと思う必要ないです。JIN:R公式からHTMLコード一覧が公開されていますので、コピー＆ペーストで完了です。

JIN:R公式マニュアル グローバルメニューへ

JIN:R公式マニュアル アイコンHTMLコード一覧へ

アイコンを活用するアイデア

私の考えるJIN:Rのオリジナルアイコンを活用するアイデアを紹介します。

全てテキスト入力できるところでインラインアイコン機能で入力しています。

ボタンブロックで、アフィリエイトコードを設定しないときに使えます。

1行書きしたテキストの先頭にアイコンを置いてボックスで囲うことで、箇条書きのようにしています。

通常の箇条書きだとビュレットの種類が点と数字だけですが、アイコンを使えば色々な見せ方ができます。テキストの間隔が開きすぎと感じたら、2位と3位のように幅を詰めることも簡単にできます。

表作成プラグイン「Flexible Table Block」のセル内にも、インラインアイコン機能でアイコンを使えます。

まとめ：ビジュアルでも分かりやすいサイトにしよう

JIN:Rは400種類以上のオリジナルアイコンが、簡単に使えるように出来ています。

デザイン性を高めて、パッと見て分かりやすいサイトや記事にするには、アイコンがとても役に立ちます。

インライアイコン機能でテキストを入力する多くの場所や、JIN:Rオリジナルのアイコンボックスとデザイン見出し、スマホ専用機能のスマホメニューとコンバージョンボタンでアイコンを表示できます。

特に、スマホメニューとスマホのコンバージョンボタンは、アイコンのメリットを最大限発揮していると感じる場所です。

かわいい、おしゃれなオリジナルのアイコンが揃っていますので、いろいろなところで使っていきましょう。

この記事が、JIN:Rを利用してブログを始めようかと検討されている方のお役に立てれば幸いです。

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。