【WordPress】ナビゲーションにアイコン・フォントを利用

この記事を読むのに必要な時間は約 4 分です。

熊本市のホームページのアドレスが12月25日に変更になった。同時にホームページもリニューアルされた。時流に沿ったフラットデザインで整えられている。
それに倣うわけではないですが、ナビゲーション＝サイトのタイトル下の目次バーのそれぞれに導入したアイコン・フォントを使用しています。

Icon Font アイコン・フォント

小学生の時、社会の授業でみんなの町の地図を作ったことがあるでしょう。学校や交番、工場の地図記号の学習のためのものでした。
住んでいるところにはない灯台やら段々畑なども学びました。天気マークも習っていたし、街をさろいて交通標識も知りました。

インターネット上でも世界共通のデザインが有ります。それがグローバル・アイコンと呼ばれるもので、[icon name=”icon-hospital”]病院、[icon name=”icon-accessibility-sign”]車いすに乗っている人、[icon name=”icon-truck”]トラック、[icon name=”icon-plane”]飛行機、[icon name=”icon-rocket”]ロケット、[icon name=”icon-shopping-cart”]ショッピングカートと地図作りに使えるもの。

[icon name=”icon-time”]時計、[icon name=”icon-volume-up”]ヴォリュームとおなじみのマーク、インターネット上の代表的な企業やサービスのロゴマークと目にとまる頻度が高く認知性の良い物が追加されているので利便性が高くなりました。

[icon name=”icon-calendar”]年間日程
[icon name=”icon-folder-close-alt”]資料室
[icon name=”icon-camera”]ギャラリー
[icon name=”icon-envelope-alt”]お問い合わせ
[icon name=”icon-facebook-sign”]蓄音器を楽しむ会のフェースブックページ

例えばこれらのように指定しました。

数年前は写真やイラスト画像で作っていたりしました。当時もブラウザの文字を大きく表示した時や異なるブラウザを対照に工夫が必要でした。近年はパソコンだけではなく、タブレットやスマホといったモバイルでのアクセスも多くなるとレスポンシブル（画面のサイズに合わせてホームページ全体がはみ出さないように）表示が大切になってきます。
このサイトもパソコンからより、モバイルでのアクセスが多いようです。
フラットデザインが増えているのも、モバイルをターゲットにしたデザインの変化でしょう。
アイコン・フォントは、画像ではなくフォントの拡張されたものですから文字表示の変化にも任意に追従して見難いことが無くなりました。フォントの数も増え、楽しい活用が増えるでしょう。

平行してページの配列も見直しました。一時的に403（そのページは見つかりません）ページが出る場合がありご不便をかけます。