こんにちは!ラジャのけんいちです。
本日は 「Wixのページ階層」にフォーカスを当ててご紹介していきます。
Wixは汎用性が高くデザイン性が高い為、サイト編集の幅が広く困ってしまうことが多いと思います。
今回はそんな悩みを解決する為、Wixの基本的な使い方〜編集方法まで徹底的にご紹介。
その中でも階層にフォーカスし、グローバルメニューをスタイリッシュに設定することによって、ユーザーが迷わない動線設定をできる様記事を作成して行きます。
Wixとは?
![](https://wix-media.creative-raja.com/wp-content/uploads/2023/05/image-13-1024x346.png)
Wixのご紹介
Wix(ウィックス)とは、2006年にイスラエルで生まれ、2010年に日本語版がリリースされ、現在全世界で 2.3億人以上の登録ユーザーを有する人気ホームページ作成ツールです。
CMでこのキャッチフレーズを見たことがある方も多いのではないでしょうか。「1.2秒に1人が Wixを使ってHPを作っています」
直感的にHPを作成・ドラッグ&ドロップにて変更が簡単にできる為、幅広いユーザーから支持を受けています。
グローバルメニューの階層の設定方法について
グローバルメニューとは?
サイトのコンテンツが分かれているヘッダーの基本的にヘッダーに格納されているカテゴリの事をグローバルメニューと呼びます。
下記の構成を参考にグローバルメニューを作成してみましょう、そしてページの下にページを作成することで、サブページ(ドロップダウン)メニューを作を簡単に作成する事が可能です。ユーザーがメニューのメインページにマウスオーバーすることにより、サブページが表示されます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/07611794-742f-4d53-8c5b-24ba712a6934/2020/04/19/881e6074-32f3-447b-bcae-5f39a2bb10c7/c70c7c74-909f-4ad5-b534-08b0fa89b6ae.jpg)
グローバルメニューのドロップダウン(ページの階層分け)作成方法
- エディタ左側で「メニュー&ページ」
をクリックします。
- 該当するページをクリックします。
- 「その他のアクション」アイコン
をクリックします。
- 「サブページ」
をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/06/17/da8cb6b8-ccb9-4839-8fe9-e70573a59112/77581c79-2f8e-4611-8d65-433c464a47f8.png)
もっと直感的に簡単に編集がしたいという方に向けて、ドラッグ&ドロップで、ページの階層を作ることもできるので、好きなページを軸として、ドロップダウン表記させたいサイトを下に紐づけてみてください。
グローバルメニューのデザイン変更方法についてご紹介
下記のグローバルメニューを用いてご説明して行きます。
![](https://wix-media.creative-raja.com/wp-content/uploads/2023/07/image-193-1024x131.png)
まずはグローバルメニューをクリックした後
ページの追加方法について
![](https://wix-media.creative-raja.com/wp-content/uploads/2023/07/image-192-1024x809.png)
ページの追加方法はとても簡単です!
左のツールバーより、ページ&メニューをクリックし、登場する「+ページを追加」よりページをクリックするのみです。
Wixの静的ページは100ページまで追加する事が可能です。
基本的なページの階層設定について
![](https://wix-media.creative-raja.com/wp-content/uploads/2023/07/image-194-1024x501.png)
一般的な「コーポレートサイト」のグローバルメニューの項目は以下や類似した要素で構成されております
- ホーム(TOP)
- サービス内容
- 会社概要・取引先
- 製品・サービス
- ブログ
- お問い合わせ
- よくある質問
- ECサイト・予約サイト(CTA)
また、サイトの目的がBtoC向けの場合追加の項目としてECサイト・予約サイトなどを追加することもできます。たとえば、ECサイトであれば「商品一覧」「カート」「注文履歴」などの項目が追加可能です。
グローバルメニューは、ユーザーがサイトの主要なコンテンツや機能を簡単に見つけることができるように、目立つ場所色彩のバランス良く配置する事が絶対条件となります。
また、メニューの項目は、ユーザービリティに特化した、クリックし易く・カテゴリ分けがわかりやすい様に「テキスト」最適表示する必要があります。
グローバルメニューは、サイトのユーザーエクスペリエンスに重要な役割を果たします。ユーザーがサイトを簡単にナビゲートできるように、グローバルメニューの項目作成には時間を費やしましょう。
グローバルメニューを設計する際のポイント
- サイトの主要なコンテンツや機能が含まれている。
- 目立つ場所に配置されている。
- ユーザーが理解しやすく、クリックしやすいテキストで表示されている。
- サイトのデザインと調和している。
- ページの階層のカテゴリわけがはっきりしている
HPの役割として、大きく関わってくるのが下記の2点だと思います。
・信頼性
・ユーザーとのコミュニケーションの場
デザイン性の高く・デザイン崩れの無いサイトをPC・モバイル共に作成し、細かいところにも気が配れる企業をデザインすると共に、お問い合わせの動線をスムーズに設定する事によるユーザービリティの向上でユーザーとのコミュニケーションをより障壁を低く行う事ができます。
まとめ
最後までご覧いただきありがとうございました。
本日はページの階層についてご紹介して行きました、グローバルメニューのカテゴリ分けは、
ユーザーが迷うか迷わないか、ストレスなくサイトを見るためには必ず通る場所になるので
離脱率を低下させてサイト内の回遊率を上げるためにも是非、グローバルメニューの階層分けは思いを持って取り組んでいただきたい箇所になります。
弊社では制作面でのお困りごと・貴社のHPをプロの目線で現行サイトを分析して、アドバイスさせて頂く「無料相談会」を実施しております。
ご興味がある方は下記のボタンより、弊社「株式会社ラジャ」までお問い合わせください。