【SWELL】グローバルナビにアイコンを設定~ヘッダーカスタマイズ~

SWELLグローバルナビカスタマイズ アイキャッチ画像

では、コーポレートサイトやブログサイトの制作でより自由度の高いカスタマイズができます!

今回紹介するのは、サイト訪問者が最初に目にする「ヘッダー」のナビメニュー部分のカスタマイズ

この記事を見ていただいているということは、

  1. 同じデザインになりがちなヘッダーをおしゃれにカスタマイズしたい
  2. SWELLでヘッダーナビに文字とアイコンを一緒に表示したい
  3. SWELLのアイコンをヘッダーナビに挿入したい

というご要望をお持ちだと思います。

今回この記事ではサイト制作初心者向けにSWELLのグローバルナビでアイコンを活用する手順を徹底的にお伝えしていきます。

最初に「グローバルナビ」の説明や設定のポイントを紹介しているので、設定手順だけ知りたい方は「目次の3」からご覧ください!

自社のヘッダーにこだわりたい・クライアントワークでSWELLを使いたい方は、是非参考にしてください!

目次

グローバルナビとは?

グローバルナビ(グローバルナビゲーション)とは、ウェブサイトの全ページに共通して表示されるナビゲーションメニューのことです。

当サイトで例をあげると下記画像の部分を指します。

ヘッダーグローバルナビ(PC)イメージ画像

パソコン表示だと、ほとんどのサイトがトップ部分にグローバルナビが表示されているので、このスタイルで見慣れている方も多いでしょう。

スマホ表示だと、下記のような「ハンバーガーメニュー」が一般的です。

ヘッダーグローバルナビ(SP)イメージ画像

こちらもよくある「クリックするとメニューが表示されるタイプ」です。

サイトやデザインによっては、サイドバーのように縦にメニューが並ぶサイトもあります。

参考までに今回は左にメニューがある画像を拝借させていただきました。

画像引用元(2024年10月時点):関工務店 | 長野市のリノベーション・リフォーム・新築住宅

ヘッダーグローバルナビ(縦)イメージ画像

他にも、パソコン表示でも「ハンバーガーメニュー」が設置されているものなど、サイトのデザインによってメニューの配置やデザインもさまざまです。

D-AMUS

いろいろなサイトのヘッダーを見ていると、カスタマイズしたくなってきますね・・・!

グローバルナビの役割

グローバルナビの一番の役割は、ユーザーがサイト内の異なるページ間を移動する際にわかりやすく誘導することです。

そのため、ユーザーの使いやすさを考えてメニューを設定・配置する必要があります。

また、メインビジュアル含むヘッダーは、訪れたユーザーに最もインパクトを与えられる部分でもあります。

メニューに画像やアイコンがあることで、ビジュアルからイメージできるため、サイト内の回遊をスムーズにする効果もあります。

別視点だと、グローバルナビをしっかり設定しておくことは、SEO対策にも繋がります

サイト全体の構造を明確にしておくことで、検索エンジンのクロールを助ける役割も果たしてくれます

グローバルナビの設定ポイント

グローバルナビは「ユーザービリティ」「SEO対策」のどちらの観点からも重要だということがわかりました!

ここでは、グローバルナビの作成・設定で注意したいポイントを紹介します。

D-AMUS

実際にお客様からご相談があった内容も紹介させていただきますので、参考になれば嬉しいです!

グローバルナビはわかりやすいことが大前提

企業のコーポレートサイトだと、一般的にどの業種も「会社概要」や「事業内容」などのメニューがあるため、ユーザーも見慣れており、メニュー名からページ内容を推測できるでしょう。

しかし、中には、名称として表現しにくいページもあるでしょう。

たしかに、メニュー名をクリックしたら想像と違う内容だったことあります!

そのようなユーザーとのすれ違いを防ぐために、まず気を付けたいのが、下記の3点です。

  • わかりやすいメニュー名
    (例:”会社概要”や”お知らせ”など)
  • サイト構造がわかるような並び
    (特に、ページ数が多い場合は、グループ分けや階層ごとの表示)
  • ユーザー目線での導線を考慮
    (例:ユーザーが知りたいであろう情報のページにトップページから最短で到達できるようにする)

サイト訪問直後のわかりやすさだけでなく、自社サイトを訪れるユーザーが何を知りたくて訪問してくれるかを推測しておくことは大切です。

なぜなら、ユーザーが必要なページへすぐにアクセスできなければ、短時間でのサイト離脱に繋がります。

サイトの滞在時間は、SEOの結果に直結はせずとも、ユーザーの満足度という観点からSEO対策に繋がるポイントです。

そのため、上記の3つは、ユーザーへの基本的な配慮として気を付けたい部分です。

ナビメニューの表記は日本語サイトなら”日本語”を推奨

サイトのデザインを決めるときに、グローバルナビの表記を日本語にするか英語にするかという問題。

制作実績を紹介するポートフォリオサイトなどは「英語」表記のみがわりと多く見受けられます。

D-AMUS

WORKS=制作実績で使われることが多いですね。

個人的には「company=会社概要」など、頻繁に使用されており、ある程度見慣れているユーザーが多いものに関しては英語だけでも良いと思います。

ただ、クライアント案件の場合は「日本語」もしくは「日本語+英語」という形をとることが多いです。

その理由としては、webサイトを訪問する全員が英語のナビメニューを見慣れているとは限らないからです。

中には、英語が苦手で単語の意味がわからない人や、普段webで調べ物をせず見慣れていない人もいるでしょう。

上記も考慮して、私の場合、グローバルナビの表記は「ターゲット層+サイトのデザイン」で決めることが多いです。

例えば、

  1. 基本的に日本語サイトなら「日本語」か「日本語+英語」
  2. ターゲット層が高齢層含む幅広い年代なら「日本語」
  3. ページ数が多いなら「日本語」
  4. webに慣れている層をターゲットに絞るなら「英語」か「英語+日本語」
  5. 海外からの閲覧も考慮するなら「英語」か「英語+日本語」

という感じでおおまかに分類しています。

ちなみに、当方のポートフォリオサイトのグローバルナビは英語表記です。

当ブログサイトは、サイト内のわかりやすさを考慮して英語+日本語表記にしています。

D-AMUS

もちろん正解はないのですが、当サイトの場合
・ロゴと合わせたデザイン
・ポートフォリオサイトとスタイルを統一したい
・初心者向けにwebに関する記事を発信
という部分を重視して、ナビ表記を決めました。

ハンバーガーメニュー設置はターゲット層も考慮する

サイト制作に携わるようになってから、当たり前のように使用していた「ハンバーガーメニュー」。

ヘッダーグローバルナビ(SP)イメージ画像

すでに上記コンテンツで紹介しましたが、スマホの場合によく見かけるメニューアイコンです。

私の場合、スマホのグローバルナビは、学習当時に覚えた「ハンバーガーメニュー」をフル活用していました。

そんな時に、実際にサイトを制作をしたお客様から

「上にある線は何ですか?」と来店したお客様に聞かれた

いうお話がありました。

D-AMUS

その場で使い方をお伝えしたそうですが、普段スマホをあまり見ない方だと、クリックして使うものだとわからない方も多いようで、ハッとさせられたのを覚えています。

ハンバーガーメニューは、シンプルでメインビジュアルやデザインの邪魔をしないというメリットがある反面、使いにくい・慣れていなければわからないというデメリットもあります。

スマホでのユーザビリティを考慮するなら

  • クリックできるものだとわかるようにする
    (MENU表記を追加・ボタン風のデザインにするなど)
  • ハンバーガーメニューをなくし、トップやボトムへのメニュー設置へ切り替える
    (メニューの数が少ない場合は、わかりやすく表示できるのでおすすめ)
  • ターゲットとなる層への配慮をする
    (スマホの使用に慣れていないであろう高齢層などもwebでのターゲットにしたい場合)

など、デザインや配置を考えてグローバルナビの設置をするのが良いでしょう!

D-AMUS

結論、グローバルナビ設置のポイントは「わかりやすさ」と「使いやすさ」が重要ということです!

SWELL版:アイコンをグローバルナビに設定する手順

それでは、実際にSWELLアイコンをグローバルナビに追加してみましょう。

STEP
設置したいアイコンを選ぶ

まずは、グローバルナビに使いたいアイコンをそれぞれピックアップします。

SWELLで使えるアイコン一覧とショートコードはこちら ▶

SWELLでは「Font Awesome」アイコンも使用できます。

読み込み手順は公式サイトで解説してくれていますので、参考にしてください。

Font Awesomeのアイコンの使い方 ▶
STEP
外観→「メニュー」へ移動

管理画面からメニュー設定画面へ移動しましょう。

STEP
ナビゲーションラベルへショートコードを貼り付ける
[icon class="○○"]

のショートコードでSWELLアイコンの呼び出しができます。

○○の部分に使いたいアイコンのクラス名を貼り付けます。

今回は、TOPのナビ部分を

[icon class="icon-home"]

で入力しています。

変更後は「メニューを保存」を忘れずにクリックしましょう。

ヘッダーグローバルナビアイコン設定手順1
STEP
グローバルナビへの反映を確認をする

保存後は、反映されているか確認しましょう。

色やサイズなど細かいカスタマイズが必要な場合は、追加CSSから変更できます。

同様の手順でその他のメニューにもアイコンを追加しましょう。

ヘッダーグローバルナビアイコン設定手順2

以上でアイコンの追加は完了です。

アイコン設置できたけど、やっぱり文字もないとわかりにくよね・・・

D-AMUS

そうですね、アイコンと文字は一緒に使う方が良いです!
既存の文字メニューも一緒に表示できるので、やってみましょう!

SWELLアイコンと文字を一緒に表示させる手順

上記アイコン設置の手順に+αで追加できます。

STEP

ナビゲーションラベルに文字を追加する

上記でアイコンのショートコードを追加しましたが、一緒に文字も入力します。

ヘッダーグローバルナビアイコン設定手順6
STEP

グローバルナビへの反映を確認をする

アイコンと文字が横並びで表示されます。

ヘッダーグローバルナビアイコン設定手順7

フッターも共通メニューの場合は、フッターにも反映されています。

ヘッダーグローバルナビフッター共通イメージ

また、下記のように、ショートコードと文字の間に改行ダグを挟むと、アイコンの下に文字を表示することができます。

[icon class="icon-home"]<br>TOP

アイコンと文字の間隔調整をするなら、CSSでの編集が必要です。

参考までにCSSでの追加修正をしていない状態のイメージ画像を載せておきます。

ヘッダーグローバルナビアイコン設定手順8

以上、アイコンと文字を一緒に表示させる手順を紹介しました!

やっぱり両方ある方がわかりやすい!

D-AMUS

そうですね、イメージの捉え方は人それぞれなので、ナビメニューでInstagramなどのSNSロゴ以外のアイコンを使うなら文字とセットが良いですね!

番外編:サブテキストを挿入する手順

アイコンと文字の組み合わせだけでなく、文字の下にサブテキストを表示させることもできます。

例えば、下記のような「日本語+英語」でのナビメニュー表記など。

ヘッダーグローバルナビアイコン設定手順5
STEP

「メニュー」の「表示オプション」で「説明」を選択

アイコン表示と同様、メニュー画面から設定します。

まずは、メニュー画面の右上にある「表示オプション」を開き、「説明」にチェックを入れます。

この表示オプションで「CSSクラス」にチェックを入れると、個別にクラス名を付与できるので、CSSでの変更ができます。

ヘッダーグローバルナビアイコン設定手順3
STEP

説明の箇所に文字を入力

「説明」の箇所に英語などサブで表示させたい文字を入力し、保存しましょう。

ヘッダーグローバルナビアイコン設定手順4
STEP

グローバルナビへの反映を確認をする

入力したテキストが表示されていれば完成です!

説明に入力した文字はフッターには反映されません。フッターも共通のナビメニューで設定している場合は「ナビゲーションラベル」のみフッターに表示されるので、注意しましょう。

以上、サブテキストの表示方法を紹介しました。

ちなみに、説明のチェックボックスは以外のテーマにもありますので、WordPressでカスタマイズするなら参考にしてください!

  • グローバルナビなどのメニュー設定方法
  • ヘッダーデザインの設定手順

なども知りたい方は、下記記事で手順解説していますので、参考にしてください!

まとめ:グローバルナビへのアイコン設置でユーザーの導線をサポート

最後まで読んでいただきありがとうございます!

今回の記事では

  1. グローバルナビの役割とは?
  2. グローバルナビ作成時のポイント
  3. SWELLでグローバルナビにアイコンを設置する方法

以上、3点について解説させていただきました!

特に重要なポイントは、以下の3つです。

  1. わかりやすいグローバルナビは、ユーザーのサイト内でのストレス軽減だけでなくSEO対策にも繋がる
  2. SWELLでは、グローバルナビにもショートコードでアイコンを呼び出して活用できる
  3. グローバルナビのサブテキストは、表示オプションから「説明」を追加で入力できる

ホームページ制作にSWELLを活用したい方の参考になりましたら幸いです。

今後もwebに関する運用情報を発信していく予定ですので、是非ご覧ください!


お問い合せはこちらから承っております。

サイト制作・運用をサポート!

カスタムプランもご用意
サイト制作&運用サービスはこちら

ホームページサブスク用バナー
SWELLグローバルナビカスタマイズ アイキャッチ画像

この記事が気に入ったら
フォローしてね!

\ サイトの制作や更新をするなら知っておきたいweb知識

キャッシュクリアの前に試す2つのこと アイキャッチ画像
キャッシュクリアの方法 アイキャッチ画像

SWELLカスタマイズと合わせてご覧ください!

目次