Carrd.co ウェブサイトビルダーに関するブリーフィングドキュメント

エグゼクティブサマリー

本資料は、YouTubeチャンネル「How to Tool」で公開された複数のビデオトランスクリプトを分析し、ウェブサイトビルダー「Carrd.co」の機能、操作方法、およびベストプラクティスに関する主要なテーマと洞察を統合したものです。Carrdは、特に単一ページのレスポンシブなウェブサイトを迅速かつ直感的に構築するためのツールとして位置づけられています。

分析の結果、以下の重要なポイントが明らかになりました。

• コア機能と使いやすさ: Carrdは、テンプレートベースまたは空白のキャンバスからウェブサイト作成を開始でき、テキスト、画像、ボタンなどの要素を直感的なインターフェースで追加・編集できます。モバイル表示のプレビュー機能も備わっており、レスポンシブデザインを容易に確認できます。

• 豊富なカスタマイズ性: ユーザーは、背景（単色、グラデーション、パターン、画像、動画）、テキスト（フォント、サイズ、スタイル）、画像（形状、影、枠線）、ボタン（色、アイコン）など、サイトの外観を詳細にカスタマイズできます。要素にはロード時やホバー時のアニメーションも設定可能です。

• 高度なコンテンツ統合: 標準的な要素に加え、音声ファイル（SoundCloud, Bandcamp, Google Drive経由）、GIF（アップロードまたは埋め込み）、複数ページ構成を模倣するセクション区切りなどの高度な機能も提供されています。

• Carrd Proプラン: 無料プランでも十分な機能が提供されていますが、カスタムドメイン、フォーム、ウィジェット、埋め込み機能（カスタムフォント、サイズ無制限のGIFなど）、スライドショー、Google Analytics連携といった高度な機能は「Pro」プランで利用可能になります。

• プロモーションとトライアル: ソース内では、Carrd Proの7日間無料トライアル（クレジットカード不要）の存在が言及されています。また、利用可能な割引をスキャンする紹介コード（例：d6b k z26 k）や、特定のプロモーションコード（例：BF 2023で40%割引）も紹介されています。

総じて、Carrdは初心者から上級者まで、個人ポートフォリオ、ランディングページ、リンクインバイオサイトなどを手軽に作成したいユーザーにとって、強力かつ柔軟なツールであることが示唆されています。

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

1. Carrd.coの基本操作

ソースビデオでは、Carrdを始めるための基本的なステップが詳しく解説されています。

1.1 アカウントの作成と認証

Carrdの全機能を利用するには、アカウントの作成と認証が不可欠です。

• サインアップ: carrd.coにアクセスし、「Sign Up」から名前、メールアドレス、パスワードを登録します。

• 認証メールの送信: 登録後、「Send verification email」ボタンをクリックすると、登録したメールアドレスに認証メールが送信されます。

• 認証プロセス: 受信したメール内のリンクを開くと、認証ページに移動します。多くのユーザーがテキストを読むだけで完了したと誤解しますが、ページ内の認証ボタンを明確にクリックする必要があると強調されています。このボタンをクリックすることで、アカウントが完全に認証され、サイトの公開やProプランへのアップグレードが可能になります。

1.2 ウェブサイトの作成プロセス

アカウント認証後、ダッシュボードから新しいサイトの作成を開始できます。

• 開始点の選択: ユーザーは「Choose a starting point」から、完全に白紙の状態である「Blank Canvas」を選択するか、事前にデザインされたテンプレートを利用するかを選べます。

• テンプレート: テンプレートは「Profile」「Landing Page」「Form」「Portfolio」などのカテゴリに分類されています。一部のテンプレートはProプラン限定です。

• デモ機能: テンプレートを選択する前に「Demo」機能を使って、実際の動作やアニメーションを確認できます。

1.3 サイトの公開と管理

ウェブサイトの編集が完了したら、公開プロセスに進みます。

• 公開手順: エディタ画面の保存（公開）アイコンをクリックし、サイトの「Title」（タイトル）と「Description」（説明）を入力します。

• 公開オプション:

  • carrd.co URL: 無料で利用でき、[サイト名].carrd.co という形式のURLでサイトを公開します。

  • Custom Domain: Proプランの機能で、独自のドメインをサイトに割り当てることができます。

  • Online Draft: サイトを公開せずに、オンライン上に下書きとして保存するオプションです。

• 更新: サイト公開後も、エディタで変更を加えて「Publish Changes」をクリックするだけで、即座に内容を更新できます。

1.4 ウェブサイトの削除

不要になったサイトはダッシュボードから削除できます。

• 手順:

  1. エディタ画面から「Dashboard」に移動します。

  2. 削除したいサイトの横にある設定アイコンをクリックします。

  3. 「Delete this site」を選択します。

  4. 確認画面で注意事項を読み、「I'm sure, please permanently delete this site」のチェックボックスをオンにして、最終的に削除を実行します。

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

2. デザインとカスタマイズ機能

Carrdは、コーディング不要でサイトの外観を細かく調整できる豊富なカスタマイズオプションを提供します。

2.1 背景のカスタマイズ

サイト全体の印象を決定づける背景は、以下のスタイルに変更可能です。

• Color: 単色の背景を設定します。

• Gradient: 2色以上のグラデーション。スタイル（Linear, Radial, Conic）、角度、色の変更が可能です。

• Pattern: 「Ocean」や「Pixels」といったパターンを背景に適用できます。

• Image / Video / Slideshow: 画像や動画を背景として設定できます。スライドショー機能はProプラン限定です。

• アニメーション: 背景に「Fade in」などのアニメーション効果を追加し、その持続時間（Duration）、遅延（Delay）、フェードインの色などを設定できます。

2.2 テキストの編集

テキスト要素は、内容だけでなく見た目も柔軟に変更できます。

• スタイリング: Markdownに似た記法が採用されており、テキストをアスタリスクで囲むことでスタイルを変更します。

  • **Bold** → Bold

  • *Italic* → Italic

  • ***Bold and Italic*** → Bold and Italic

• 外観 (Appearance): 「Appearance」タブから、フォントの種類、サイズ、色、行間、文字間隔などを詳細に調整できます。

2.3 画像の操作

画像はサイトの視覚的な魅力を高める重要な要素です。

• アップロードと編集: PCから画像をアップロードし、サイズを調整できます。

• 外観 (Appearance):

  • Shape: 「Rectangle」（長方形）や「Circle」（円形）など、画像の形状を変更できます。

  • Corner Rounding: 角を丸めることで、柔らかい印象を与えます。

  • Border / Drop Shadow: 枠線や影を追加して、画像を際立たせることができます。

• リンク化: 画像にURLを設定することで、クリック可能なボタンとして機能させることができます。

2.4 ボタンとリンク

ユーザーを特定のアクションに誘導するためのボタンとリンクは、詳細な設定が可能です。

• URLタイプ: ボタンやリンクには、多様な遷移先を設定できます。

  • 外部サイトURL: https://から始まる通常のURL。

  • Section / Scroll Point: ページ内の特定セクションへのアンカーリンク。

  • Email / Phone: クリックするとメーラーや電話アプリが起動します。

• 新規タブで開く: URLの末尾に #_blank を追記することで、リンクを新しいタブで開かせることができます。これは、ユーザーを現在のサイトから離脱させないために有効な手法です。

• 外観: ラベルのテキスト、アイコン、背景色、ホバー時の色などを自由にカスタマイズできます。

2.5 アニメーション効果

テキスト、画像、ボタンなどの各要素には、動的な効果を追加してユーザーの注意を引くことができます。

• トリガー: アニメーションは、ページの読み込み時、または要素上にマウスカーソルが乗った時（On Hover）に発生させることができます。

• 設定項目:

  • Animation: 「Fade In」「Grow」「Zoom In」など、多様なアニメーションの種類から選択します。

  • Duration: アニメーションが完了するまでの時間。

  • Intensity: アニメーション効果の強さ。

  • Delay: ページ読み込み後、アニメーションが開始されるまでの遅延時間。

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

3. 高度な機能とコンテンツの追加

Carrdは基本的なサイト構築機能に加え、よりリッチなコンテンツを実現するための高度な機能を提供します。

3.1 複数ページ構成の実現

Carrdは本来単一ページのビルダーですが、「Control」要素を使用することで擬似的に複数ページのような構成を作成できます。

• Section Break: 「+」ボタンから「Control」要素を追加すると、セクションの区切り線が挿入されます。この区切り線以降のコンテンツは、別の「ページ」として扱われます。

• ナビゲーション: 別のセクションに移動するためのボタンを作成し、そのURLに#[セクション名]（例：#about）と設定します。これにより、ユーザーがボタンをクリックすると、指定したセクションまでページがスクロールします。

3.2 メディアの追加

サイトに音声やGIFなどの動的なメディアを追加できます。

• 音声 (Audio):

  • ソース: 「Audio」要素を追加し、Bandcamp、SoundCloud、またはGoogle Driveの公開URLを指定します。

  • 推奨事項: 著作権フリーの音楽などを自身のGoogle Driveにアップロードし、共有設定を「全員に公開」にしてそのリンクを使用する方法が推奨されています。

  • 注意点: SoundCloudのURLを使用する場合、共有リンクに含まれるトラッキングパラメータ（?以降の文字列）を削除しないと正しく認識されない場合があります。

• GIF (GIFs):

  • アップロード: 「Image」要素からGIFファイルを直接アップロードできますが、ファイルサイズは2MBまでという制限があります。

  • 埋め込み (Pro限定): 「Embed」要素を使用すると、Giphyなどのサービスから埋め込みコードを貼り付けることができます。この方法にはファイルサイズの制限がなく、サイトの読み込み速度が向上する利点があります。

3.3 埋め込み機能 (Embed Feature) (Pro限定)

「Embed」要素はProプランの強力な機能で、外部のコンテンツやカスタムコードをサイトに統合できます。

• カスタムフォント (Custom Fonts):

  1. Google Fontsなどのサービスでフォントを選択し、<link>タグ形式の埋め込みコードを取得します。

  2. Carrdサイトに「Embed」要素を追加し、取得したコードを貼り付けます。

  3. サイト設定のカスタムCSSセクションに、特定の要素にフォントを適用するためのCSSコード（例：body { font-family: 'Your Font Name', sans-serif; }）を追加します。

• その他の埋め込み: GIF以外にも、様々なウィジェットや外部サービスを埋め込むことが可能です。

3.4 スライドショー (Slideshows) (Pro限定)

複数の画像を自動で切り替えて表示するスライドショーを作成できます。

• 設定: 「Slideshow」要素を追加し、複数の画像をアップロードします。

• カスタマイズ: 画像の切り替え効果（Transition）、各画像が表示される時間（Delay）、アニメーションの速度（Duration）、画像の動き（Motion）などを細かく設定できます。

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

4. Carrd Proプランとプロモーションコード

ソースビデオでは、Carrdの有料プランである「Pro」とその関連情報について頻繁に言及されています。

4.1 Proプランの主な機能

Proプランにアップグレードすることで、以下の高度な機能が解放されます。

4.2 7日間無料トライアル

Proプランの機能を試すための無料トライアルが提供されています。

• 開始方法: Pro限定の機能（例：Slideshow）を追加しようとすると、無料トライアルの案内が表示されます。「Start Free Trial」をクリックするだけで開始できます。

• 条件: トライアル期間は7日間で、クレジットカードの登録は不要です。

4.3 料金と割引コード

ソース内では、複数のプロモーションコードや割引に関する情報が提供されています。

• 標準価格: 年間19ドルと記載されています。

• 紹介コード:

  • d6b k z26 k または D 6 b k c 2 6K

  • これらのコードは、入力時に利用可能な割引を自動的にスキャンして適用する機能があると説明されています。ただし、Carrdは元々低価格なため、常に割引が適用されるわけではないとも述べられています。

• プロモーションコード:

  • BF 2023

  • このコードを使用すると40%の割引が適用され、年間料金が9ドルから5ドルになると言及されています。

• 推奨事項: 多くのビデオで、概要欄にあるリンクを使用することが最良の割引を得る方法として推奨されています。