適切に構成されたWebサイトのナビゲーションは、スムーズで直感的なユーザー体験を提供するための重要な要素です。Zoho Backstageを使えば、Webサイトのナビゲーションメニューやボタンを簡単に作成、整理、カスタマイズでき、訪問者が必要な情報へ迅速にアクセスできるようになります。

Webサイトのナビゲーションを最適化することで、ユーザビリティの向上や訪問者の効果的な誘導、洗練されたプロフェッショナルなイベントWebサイトの構築が可能になります。

1. Design > Webサイト をDockから開きます。
2. 編集 Webサイト をクリックします。Webサイト Designer が開きます。
3. プレビュー中のサイト上でナビゲーション棒グラフにカーソルを合わせ、設定アイコン⚙️ をクリックします。
4. Navigation リンク 設定パネルで、追加する リンク + ボタンをクリックします。
   
   
   
   
5. ナビゲーション棒グラフに表示するリンク件名を入力します。
6. Linking option を選択します:
   
1. Page: ドロップダウンから選択し、メニューを内部ページにリンクします。
   
2. External URL: URLを入力してメニューを外部サイトにリンクします。
   
1. （任意）「開く in a 新規タブ」を選択すると、メニューが別タブで開きます。
   
7. 保存 をクリックします。
   
8. Republish をクリックして、変更内容をイベントWebサイトに反映させます。

ネストされたリンク／サブメニューの追加

1. Design > Webサイト をDockから開きます。
   
2. 編集 Webサイト をクリックします。
   
3. ナビゲーション棒グラフにカーソルを合わせ、設定アイコンをクリックします。
   
4. Navigation リンク 設定パネルで、サブメニューを追加したいメインメニューの横にあるMenuアイコンをクリックします。
   
5. ドロップダウンから追加する Submenuを選択します。
   
6. リンク件名を入力します。
   
7. リンクオプションを選択します：
   
1. Page: ドロップダウンから選択し、内部ページにリンクします。
   
2. External URL: URLを入力して外部Webサイトにリンクします。
   
1. （任意）開く in a 新規タブ を選択すると、サブメニューが別タブで開きます。
   
8. 保存 をクリックします。
   
9. Republish をクリックして、変更内容をイベントWebサイトに反映させます。

1. デザイン > WebサイトをDockから開きます。
   
2. Webサイトを編集をクリックします。
   
3. ナビゲーション棒グラフにカーソルを合わせ、設定アイコンをクリックします。
   
4. ナビゲーションボタンをクリックします。
5. ナビゲーションボタンパネルで、編集したいリンクまたはメニューの横にある編集アイコンをクリックします。 ボタン設定パネルが表示されます。
6. 設定タブに移動します。
7. ドロップダウンからボタン種類を選択します。選択した種類に応じて、以下のボタンタイプと設定が表示されます：
   
   
   
   
1. 今すぐ登録する：参加者を登録ページに誘導し、席を確保します。
1. ボタンのテキスト
2. 代替登録リンク（任意）
   
2. お問い合わせ：訪問者がワンクリックで簡単に連絡できるようにします。
1. ボタンのテキスト
3. カレンダーに追加：参加者がイベントの日付を自分のカレンダーに保存できるようにします。
1. ボタンのテキスト
4. アジェンダを印刷：訪問者がイベントスケジュールをダウンロードまたは印刷できるようにします。
1. ボタンのテキスト
5. 経路案内：参加者にインタラクティブマップでイベント会場を案内します。
1. ボタンのテキスト
6. カスタム：カスタムオプションでは複数のリンク設定があります
1. ページの場合：ページ選択用ドロップダウンが表示されます。
2. 外部URLの場合：URLを入力し、新しいタブで開くかどうか選択します（チェックボックス）。
3. スピーカーの場合：すべての設定済みスピーカーのドロップダウンが表示されます。
4. セッションの場合：すべてのスケジュールされたセッションがドロップダウンに表示されます。
5. スポンサーの場合：すべての承認済みスポンサーのドロップダウンが表示されます。
6. イベントリストの場合：イベントリストページにリダイレクトされます。
7. チケットの場合：チケットクラス選択用ドロップダウンが表示され、登録ポップアップ表示時に購入者用のチケットクラスを自動選択できます。アクセスコードやプロモコードの追加も可能です。
7. スポンサーになる：個人や企業にイベントへの協賛・パートナーを呼びかけます。
1. ボタンのテキスト
8. カスタムフォームをリンク：参加者が問い合わせやフィードバック、その他の目的でフォームに記入できるようにします。
1. カスタムフォームの選択
2. ボタンのテキスト
9. 出展者になる：組織が自社商品をイベントで紹介できるように促します。
1. ボタンのテキスト
10. サインインする：ユーザーが自分のアカウントにログインできるようにします。
1. ボタンのテキスト
11. 言語：訪問者が利用可能な言語間で切り替えられるようにします。
1. 追加設定はありません。
8. 保存をクリックします。
   
9. 再公開をクリックして、変更内容をイベントWebサイトに反映させます。

ボタンのデザイン

1. ボタンの背景色は単色またはグラデーションにカスタマイズできます。background colorをクリックするとカラーツールが開き、solid colorまたはgradientのいずれかを選択できます。
   
2. 同様に、テキストカラーをクリックして色を選択し、選択するをクリックします。
   
3. ボーダーカラーを設定するには、Border Colorの横にあるカラーをクリックして色を選択します。
   

1. Design > Webサイトからドックに移動します。
   
2. 編集 Webサイトをクリックします。
   
3. ナビゲーション棒グラフにカーソルを合わせ、設定アイコンをクリックします。
   
4. Navigation Buttonsをクリックします。
5. Navigation Buttonsパネルで、チョコレートアイコンをボタンの隣にドラッグして並べ替えます。
   
6. 変更内容をイベントWebサイトに反映させるには、Republishをクリックします。

ボタンの削除

1. Design > Webサイトからドックに移動します。
   
2. 編集 Webサイトをクリックします。
   
3. ナビゲーション棒グラフにカーソルを合わせ、設定アイコンをクリックします。
   
4. Navigation Buttonsをクリックします。
5. Navigation Buttonsパネルで、削除したいボタンの隣にある削除アイコンをクリックします。
   
6. 変更内容をイベントWebサイトに反映させるには、Republishをクリックします。
   

初期設定に復元するには、リセットする to 初期設定をクリックします。

ナビゲーション棒グラフのデザイン

1. Dockのデザイン > Webサイト に移動します。
   
2. 編集をクリックし、Webサイトを選択します。
   
3. ナビゲーション棒グラフにカーソルを合わせて、設定アイコンをクリックし、Navigation 棒グラフ 設定パネルを開きます。
   
4. デザインをカスタマイズします：
   
   
   
   
1. Navigation 棒グラフのレイアウト - ナビゲーション棒グラフ内の要素の配置方法を選択します。6つのスタイルから選べます：
1. ロゴ - スペース - リンク - ボタン：ロゴとリンクの間にスペースがあり、その後にボタンが続くシンプルなレイアウトです。
   
2. ロゴ - リンク - スペース - ボタン：ロゴの後にナビゲーションリンク、スペース、最後にボタンが配置されます。
   
3. ロゴ - スペース - リンク - スペース - ボタン：リンクの両側にスペースがあり、バランスの取れたデザインになります。
   
4. ボタン - スペース - リンク - ロゴ：最初にボタン、その後スペース、リンク、最後にロゴが配置されます。
   
5. ボタン - リンク - スペース - ロゴ：ボタンの後にリンク、スペース、最も右にロゴが配置されます。
   
6. ボタン - スペース - リンク - スペース - ロゴ：リンクをスペースで挟み、片端にボタン、もう一方にロゴを配置します。
   
2. 有効リンクのスタイル - 有効（現在選択中）のリンクの表示方法を定義します。次から選択可能です：
1. 箱：有効リンクを長方形の背景で強調表示します。
   
2. Rhomboid：有効リンクをひし形で表示します。
   
3. Pill：有効リンクを丸みのあるカプセル状の背景で表示します。
   
4. 下線：有効リンクに下線を引きます。
   
5. 上線：有効リンクの上に折れ線グラフを追加します。
   
6. 枠線：有効リンクの周囲に枠線を追加します。
   
3. サブメニュードロップダウンアイコン - サブメニュー用のドロップダウンアイコンスタイルを選択します：
1. 折れ線グラフ下向き矢印：下向きの標準的な矢印です。
   
2. 塗りつぶし下向き矢印：下向き矢印の塗りつぶしバージョンです。
   
3. プラス：展開可能なコンテンツを示すプラス記号のアイコンです。
   
4. メニュー遷移 - サブメニュー項目の表示方法を選択します：
1. クリック：クリック時にのみサブメニューが展開されます。
   
2. ホバー：ホバー時にサブメニューが展開されます。
   
5. ナビゲーション棒グラフの色を調整するには、Navigation 棒グラフの色をクリックします。
   ナビゲーション棒グラフ各要素の色をカスタマイズできます：
   
   
   
   
1. 背景：ナビゲーション棒グラフ全体の背景色です。
   
2. リンクテキスト：ナビゲーションリンクの文字色です。
   
3. 有効リンクの背景：有効リンクの背景色です。
   
4. 有効リンクのテキスト：有効リンクの文字色です。
   
5. 影を追加するには：
   
1. Shadowをオンに切り替えると、ナビゲーション棒グラフの下部に影効果が追加されます。
   
2. Shadow Colorを選択し、デザインに合わせた色を指定します。
   
6. 変更を反映させるには再公開をクリックしてください。イベントWebサイトに変更が適用されます。