Carrdウェブサイトにおけるナビゲーションバー設定の概要

エグゼクティブサマリー

本ブリーフィングは、YouTubeチャンネル「Rank Utah」が提供する情報に基づき、ウェブサイトビルダー「Carrd」でナビゲーションバーを構築するための2つの主要な手法を要約・分析するものである。各手法は、機能、要件、実装の複雑さにおいて明確な違いを持つ。

1. ネイティブ要素を使用する手法（ドロップダウンなし）: このアプローチは、Carrdに標準搭載されている「ボタン」や「アイコン」といった要素を組み合わせてナビゲーションバーを構築する。モバイル表示時には、デスクトップ用のボタン群を非表示にし、別途用意した「ハンバーガーメニュー」アイコンを表示させることでレスポンシブ対応を実現する。この手法は追加費用なしで実装可能だが、ドロップダウンメニューを作成できないという本質的な制約がある。

2. カスタムコードを埋め込む手法（ドロップダウン対応）: こちらは、提供されるコードテンプレートをCarrdの「埋め込み（Embed）」機能を使ってサイトに挿入する高度な手法である。これにより、ドロップダウン機能を含む、より複雑で高機能なナビゲーションバーが実現可能となる。ただし、この機能を利用するにはCarrdの「Pro」プランへの加入が必要となる可能性が高い。また、メニュー項目のカスタマイズには、コードを直接編集する必要がある。

結論として、どちらの手法を選択するかは、プロジェクトの具体的な要件（特にドロップダウンメニューの必要性）と、利用しているCarrdのプランに依存する。

--------------------------------------------------------------------------------

方法1：Carrdのネイティブ要素を使用（ドロップダウンなし）

この手法は、Carrdの標準機能のみを利用して、シンプルかつ効果的なナビゲーションバーを構築するものである。ドロップダウンメニューを必要としないウェブサイトに適している。

デスクトップ版の実装

• 基本構造: ページの最上部に「コンテナ」を配置し、その内部をカラム（列）に分割する。ソースでは、左20%（ロゴ用）、中央60%（ナビゲーションボタン用）、右20%（追加ボタンやアイコン用）という分割例が示されている。

• ナビゲーションボタン: 中央のカラムに、各ページセクションへのリンクを持つ「ボタン」要素を複数配置する。

• ヘッダー固定: ナビゲーションバーがスクロールに追従するように固定するには、「コントロール（Control）」要素を追加し、そのタイプを「ヘッダー」に設定する。

モバイル版レスポンシブ対応

この手法の核心は、デスクトップ表示とモバイル表示で異なる要素を見せる「表示設定（Visibility）」の活用にある。

• 要素の出し分け:

  • デスクトップ用に作成したナビゲーションボタン群を含むコンテナは、表示設定を「デスクトップのみ（Desktop only）」に設定する。

  • モバイル用に「アイコン」要素を追加し、「ハンバーガーメニュー」のアイコンを選択する。

• モバイル用ナビゲーションパネル:

  • ページの任意の場所（通常は下部）に、モバイルクリック時に表示されるナビゲーション用のセクション（navセクション）を別途作成する。

  • このセクション内に、デスクトップ版と同じナビゲーションボタンを配置する。

• 動作の仕組み:

  • モバイルデバイスでサイトが表示されると、デスクトップ用のボタンは非表示になり、ハンバーガーメニューアイコンが表示される。

  • ユーザーがハンバーガーアイコンをクリックすると、ページはリンク先のnavセクションまでスクロールする。

  • navセクション内のボタンをクリックすることで、サイト内の各セクションへ移動できる。

• メニューを「閉じる」動作: ハンバーガーアイコンの「On Click」イベントに特定のコードスニペットを追加することで、メニューを閉じるかのような動作を擬似的に実現できる。このコードは、クリックされた際にユーザーが直前にいたページ上の位置へ戻す役割を果たす。

制限事項

• この手法における最大の制約は、ドロップダウン（サブメニュー）形式のナビゲーションを構築できない点である。

方法2：カスタムコードの埋め込み（ドロップダウン対応）

この手法は、より高度な機能を求めるユーザー向けであり、ドロップダウンメニューを含む本格的なナビゲーションバーを実装できる。

前提条件

• この手法ではコードをサイトに挿入するための「埋め込み（Embed）」要素を使用する。ソース提供者は、この機能の利用にはCarrdの「Pro」プランが必要であると考えている。

実装手順

• コードの埋め込み: ナビゲーションバーを配置したい場所に「埋め込み」要素を追加する。

• if (window.location.hash === ' #nav ') { window.history.back(); } 

• コードの貼り付け: 提供されるHTML/CSS/JSのコードテンプレートを、埋め込み要素内にコピー＆ペーストする。

• 配置設定: 埋め込み要素を内包するコンテナの配置を「左揃え」に設定することで、メニューが意図通りに表示される。

機能とカスタマイズ

• ドロップダウン機能: この手法の最大の利点は、ドロップダウンメニューをサポートしていることである。

• レスポンシブ動作: デスクトップとモバイルの両方に対応したレスポンシブデザインがコードに含まれている。モバイル表示では、クリックするとメニューがスライドして表示される。

  • ソースでは、モバイルメニューの表示位置を中央揃えにすると閉じるための「X」ボタンと重なる可能性があるため、左揃えが推奨されている。

• カスタマイズ: ナビゲーションの項目やリンク先を変更するには、埋め込んだコードを直接編集する必要がある。

  • コードテンプレート内には、トップレベルのメニュー項目とサブメニュー項目を編集するための特定の箇所が用意されている。

  • ソース提供者は、コードの可読性と編集のしやすさから、「VS Code」のような外部のコードエディタを使用することを推奨している。

利点

• ドロップダウンメニューを実装できるため、より複雑なサイト構造に対応可能。

• コードベースであるため、デザインや動作の柔軟性が高い。

結論

Carrdでナビゲーションバーを構築する際には、サイトの要件に応じて2つの選択肢が存在する。

• **方法1（ネイティブ要素）**は、無料で利用でき、コードの知識がほとんど不要なため、ドロップダウンが不要なシンプルなサイトに最適なソリューションである。

• **方法2（カスタムコード）**は、CarrdのProプランが必要となるが、ドロップダウンメニューを含む高度で柔軟なナビゲーションを実装できる。ただし、基本的なコード編集スキルが求められる。

最終的な選択は、機能要件、予算、そして技術的な快適性のバランスによって決定されるべきである。

第2章 ネイティブ要素アプローチ 

ネイティブ要素アプローチについて、提供された資料に基づき、その定義、実装方法、利点、そして重大な限界について解説します。

ネイティブ要素アプローチは、Carrdで高度なナビゲーションを実現するための3つの主要なソリューションの一つとして位置づけられています。

--------------------------------------------------------------------------------

ネイティブ要素アプローチの概要

1. 定義と原則

ネイティブ要素アプローチとは、Carrdに標準搭載されているツールのみを活用し、コード（HTML、CSS、JavaScript）を一切記述することなく、シンプルでレスポンシブなナビゲーションを構築する手法です。

このアプローチは、Carrdの標準機能を巧みに組み合わせることで、コーディングなしでレスポンシブなナビゲーションを実現します。

この手法が理想的な用途は、シンプルなプロフィール、個人プロフィール、フラットな情報アーキテクチャを持つランディングページなどです。また、追加コストが一切かからず、無料プランでも（高度な設定が不要な場合）利用できます。

2. コア原則と基盤となる要素

このアプローチは、Carrdのいくつかの基本的な要素の連携に依存しています。

• 基盤となる要素:

    ◦ Container（コンテナ）: 構造の基盤を提供します。

    ◦ ButtonsやIcons（ボタンやアイコン）: ナビゲーションリンクとして機能します。

    ◦ Control要素: ページの特定領域を定義するために使用されます。

• 制御の要：「Visibility」設定:

    ◦ この技術全体の礎となるのが「Visibility」（表示設定）機能です。

    ◦ 各要素に対して**「Desktop only」（デスクトップのみ）または「Mobile only」（モバイルのみ）を設定することで、単一のページ構造内でデスクトップとモバイルの2つの異なるナビゲーション体験**を創出することを可能にします。

• セクションベースのアーキテクチャ:

    ◦ Carrdにおける「Sections」は擬似的なページとして機能します。

    ◦ #aboutや#menuといったアンカータグを用いて特定のセクションにリンクすることが、このナビゲーション手法の動作における基本です。

3. 実装の主要手順

このアプローチでは、Visibility設定を利用して、デスクトップ用とモバイル用のナビゲーションを同じページ上に作成し、それぞれを必要な環境でのみ表示させます。

デスクトップナビゲーション

1. ヘッダーコンテナの構築: ページの最上部にContainer要素を配置し、Columnsタイプに設定します。

2. デスクトップメニューの作成: 中央のカラムにButtons要素を追加し、各ボタンを対応するセクションにリンクさせます。

3. 表示設定: このButtons要素のVisibility設定を**「Desktop only」**にします。

4. グローバルヘッダーの確立: Control要素を追加し、タイプをHeader Markerに設定します。これにより、Header Markerより上にある要素がグローバルヘッダーとして扱われ、永続的なナビゲーション（スティッキーヘッダー）が実現します。ただし、この手法自体ではスティッキーヘッダーは「不可」とされています。

モバイルハンバーガーナビゲーション

1. ハンバーガーアイコンの設置: デスクトップメニューと同様のコンテナ内にIcon要素を追加し、そのVisibilityを**「Mobile only」**に設定します。

2. モバイルメニューへのリンク: アイコンのURLをモバイルメニュー専用のセクション（例：#menu）にリンクします。

3. モバイルメニューパネルの作成: #menuという名前で新しいSection Breakを作成し、そのセクション内に縦に並べたButtons要素などを使って垂直方向のナビゲーションパネルを構築します。

4. 「閉じる」動作のシミュレーション: モバイルメニューパネル内に「閉じる」アイコン（例：「X」アイコン）を追加し、そのURLを**browser:back**に設定することで、メニューを閉じる動作を擬似的に実現します。

4. 利点と決定的な制限

利点

• コード不要: 外部コードを一切必要とせず、Carrdエディタ内で完結します。

• 低コスト: 追加コストなしで実装できます（高度な設定が不要な場合）。

• 簡単な保守: 保守の手間が低く抑えられます。

• 高カスタマイズ性: Carrdエディタ内でスタイリングを完全に制御できます。

決定的な制限

1. ドロップダウンメニューの非対応: サブメニューや多階層のドロップダウン形式のナビゲーションを一切サポートできません。サイトの階層が深くなると、この手法では対応できなくなります。

2. スティッキーヘッダーの非対応: 標準機能のみでは、スクロールに追従する固定ヘッダー（スティッキーヘッダー）は実現できません。

3. 重大なユーザビリティ上の欠陥（browser:back）:

    ◦ モバイルメニューを閉じるために使用されるbrowser:backコマンドは、単に要素を非表示にするのではなく、文字通りブラウザの「戻る」機能を実行します。

    ◦ これは深刻なユーザビリティ上の問題を引き起こします。

    ◦ ユーザーがモバイルメニューのURLに直接アクセスした場合、「閉じる」ボタンをクリックするとウェブサイト自体から離脱してしまう可能性があります。

    ◦ ユーザーがメインページをスクロールしていた場合、メニューを閉じるとページの最上部に戻されてしまい、スクロール位置が失われるという、不快でフラストレーションのたまる体験を生み出します

Visiibility設定とは

Carrdで要素の「Visibility」（表示設定）を操作する場所は、以下の手順でアクセスできます。 

1. 要素を選択する: Carrdのエディタで、表示設定を変更したいテキスト、画像、ボタンなどの要素をクリックします。

2. 設定パネルを開く: 選択した要素の右側に表示される設定パネル（歯車のアイコン）をクリックします。

3. 「Visibility」を探す: 設定パネルを下にスクロールすると、「Visibility」（表示）という項目があります。 

ここから、以下のオプションを選択できます。 

• Normal: デスクトップとモバイルの両方で要素を表示します。

• Desktop only: デスクトップ端末でのみ要素を表示します。

• Mobile only: モバイル端末でのみ要素を表示します。

• Exclude: 要素を完全に非表示にします。 

この機能は、有料プラン（Carrd Pro）の高度な設定で利用可能です。 

Carrdにおけるナビゲーションバー作成：Ziteチャンネルによる解説

要旨

本ブリーフィング・ドキュメントは、YouTubeチャンネル「Zite」の運営者Martin氏が解説する、ウェブサイトビルダー「Carrd」を使用してナビゲーションバー（ナビバー）を作成するプロセスをまとめたものである。解説では、ロゴ、リンク、そして行動喚起（CTA）ボタンを備えた古典的なナビバーをゼロから構築する手順が示されている。主要なポイントは、カラムを用いたレイアウト設計、ホバーエフェクトを活用したボタンのスタイリング、モバイル表示へのレスポンシブ対応、そして「ヘッダーマーカー」機能によるサイト全体でのナビバーの永続的な表示設定である。特に、テキストリンクよりもデザインの自由度が高い「ボタン」要素の活用が推奨されている。

--------------------------------------------------------------------------------

詳細分析

1. 基本的なコンテナ設定

ナビバー構築の最初のステップは、土台となるコンテナの準備である。

• コンテナの追加: 新しいコンテナをページに追加し、最上部に配置する。

• 幅: コンテナの幅を「フルページ」または「フルスクリーン」に設定し、画面全体に広がるようにする。

• 垂直方向の余白: 通常1から1.5が推奨されるが、今回の例では「1」が選択されている。

• 背景: テンプレートのテーマ（青色）に合わせた単色に設定。

• 配置: ポジショニングは「自動（Auto）」に設定する。

2. レイアウトとカラム構造

次に、ロゴとリンクを左右に配置するため、2カラム構造を構築する。

• カラムの作成: コンテナ内に2つのカラムを作成する。

• 配置設定:

  • 左カラム：コンテンツを「左揃え」に設定。

  • 右カラム：コンテンツを「右揃え」に設定。

• 幅の調整: 左カラムの幅を右カラムより狭く設定する。例として、左カラムの幅は「30」に指定されている。

3. ナビゲーション要素の実装

レイアウトが完成したら、具体的な要素（ロゴ、リンク、CTAボタン）を追加する。

3.1 ロゴの配置

左カラムにはサイトのロゴを配置する。

• 要素の追加: 画像要素を左カラムに追加する。

• 画像のアップロード: ロゴ画像（例では「drag logo」）をアップロードする。

• サイズ調整: ロゴのサイズを調整する。Martin氏は通常「9」か「10」のサイズを使用していると述べている。

3.2 リンクとCTAボタン

右カラムにはナビゲーションリンクとCTAボタンを配置する。Martin氏は、より魅力的なデザインが可能なため、テキストリンクよりもボタン要素の使用を強く推奨している。

• ナビゲーションリンク用ボタン:

  • 複数のボタン要素を右カラムに追加し、「contacts」「projects」「about」といったラベルを設定する。

  • ナビバー用の新しいスタイル（例：「NB white text」）を作成する。

  • スタイル詳細:

    • 背景: 完全に透明に設定する。

    • ホバーエフェクト: マウスカーソルを重ねた際に、エンゲージメントを高めるために半透明の白色背景が表示されるように設定する。これにより、クリック可能な要素であることが視覚的に伝わる。

• CTAボタン:

  • 「Buy Now」などの行動喚起を促すためのボタンを別途追加する。

  • このボタンは他のリンクより目立たせる（"pop a little bit more"）ために、専用のスタイルを適用する。

  • スタイル詳細:

    • 背景色: テンプレートの他の部分で使用されている「ベビーブルー」に設定し、視覚的なアクセントをつける。

    • ラベル色: 読みやすさを考慮し、背景色と同じ青色を選択（白色も選択肢として検討された）。

    • ホバーエフェクト: テンプレートで定義済みのスタイル（例：「eco」）を適用し、インタラクティブ性を加える。

4. モバイルレスポンシブ対応

デスクトップでの表示が完成したら、モバイル端末での表示を最適化する。

• 問題点: デフォルトの状態では、モバイル表示時にレイアウトが崩れる。

• 解決策:

  1. ナビバーのコンテナを選択し、外観設定のレイアウトを「手動（Manual）」に切り替える。

  2. コンテンツの並び方を「スタック（Stacked）」に変更し、要素が縦に並ぶようにする。

  3. 配置を「中央揃え（Center）」に設定し、見た目を整える。

  4. ボタン群が1行に収まるように、可読性を損なわない範囲でサイズをわずかに縮小する。

5. 全ページ共通ヘッダー化

最後に、作成したナビバーがサイト内のどのセクションに移動しても追従するように設定する。

• 目的: ユーザーがサイト内をスクロールしても、ナビバーが常に画面上部に表示されるようにする。

• 手順:

  1. 作成したナビバーのコンテナ全体を、ページ構造の最上部にドラッグ＆ドロップする。

  2. コンテナを選択した状態で「コントロール（Control）」要素を追加する。

  3. コントロールの種類を、デフォルトの「セクション区切り（Section Break）」から「ヘッダーマーカー（Header Marker）」に変更する。

• 結果: この設定により、ナビバーはサイト全体のヘッダーとして機能し、異なるセクションに移動しても常に表示され続ける。この動作は、サイトを公開してライブバージョンで確認することができる。