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

アシスタントさん

アイコンを使えばパッと見で意味を伝えられて、良いかなとは思っているのですが。ブログ記事で使うのって難しいんですかね。ちょうどいいアイコンが簡単に使えれば助かるのにな。

じゅん

たしかに、適度にアイコンが入ると、文字だけだと読み飛ばされがちな内容も、グッと伝わりやすくなりますよね。JIN:Rには400種類のオリジナルアイコンが組み込まれていて、すぐに使えるようになっているんですよ。

テキストで延々と説明するよりも、アイコンを表示した方が伝わりやすく、見た目も華やかになり良いのになと感じたことはありませんか。でも、アイコンを設定するのは文字入力より難しいのではと、なかなか手が出せない方も多いと思います。

そこでこの記事では、アイコンを使うメリットから、オリジナルアイコンの種類や使える場所までサンプルを使いご紹介します。この記事を読めば、JIN:Rで使えるオリジナルアイコンをクリックひとつで追加する方法が分かります。

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

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

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

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

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

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

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

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

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

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

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

「Font Awsome」などが使えるメニューがあればもっとたくさんのアイコンが利用できるという気持ちもあると思います。

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

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

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

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

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

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

15ジャンルあるオリジナルアイコンを、ジャンルごとに見られる、タブ形式でご紹介します。

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

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

インラインアイコン機能で入力する

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

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

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

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

のような星による評価です。星ゼロから星５まで、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に出会ったことでこんなに整ったブログが作れて感動です。