ロック画面ページを有効にし、サイトのスタイルに合わせてデザインしましょう。

サイトをまだ構築中の場合、またはアクセスを制限したい場合は、パスワードを使用することで、サイトまたは特定のページを非表示にすることができます。これにより、お客様のコンテンツは一般公開されなくなります。サイトやページがパスワードで保護されている間は、ロック画面が表示され、訪問者はパスワードを入力しないとアクセスできません。

ヒント: メンバー サイトを作成して、サイトのコンテンツを収益化することを検討してください。

ロック画面の作成とカスタマイズの詳細については、このガイドに従ってください。

ロック画面を有効にする

ロック画面は有料サイトと試用サイトの両方で利用できます。

ロック画面を有効にするには、次の手順に従ってください。

1. サイト全体またはページ固有のパスワードを設定します。
2. ロック画面をデザインおよびカスタマイズします。詳細については、以下のセクションをご覧ください。
3. サイトをプレビューしてほしい相手にパスワードを共有します。

ロック画面をカスタマイズする

[デザイン] パネルでは、ブランドやサイトのスタイルに合わせてロック画面のカスタム デザインを作成できます。カスタマイズされたロック画面が役立つ例をいくつかご紹介します。

• 写真家、クリエイティブ プロフェッショナル、代理店が、ロック画面を使用してクライアントにプライベート コンテンツへのアクセスを提供する
• サイトやページが作成中の間、ロック画面を作成中ページとして使用する
• ロック画面を使用して、社内専用の非公開サイトまたはページを作成する

以下は、作成中ページとして使用されるロック画面の例です。

デザインのベスト プラクティス

すべてのロック画面レイアウトはレスポンシブ デザインで構築されているため、どのデバイスでも最適化されて表示されます。ただし、ロック画面を使用する際に留意すべきベスト プラクティスがいくつかあります。

すっきりさせる

ロック画面は、サイトの訪問者が最初に見るページになる可能性があります。訪問者をパスワード入力という1つのアクションに誘導する必要があります。インパクトがあり、素早く機能するデザインを作成するため、レイアウト オプションは意図的に最小限に抑えられています。

すべてのページで統一されたロック画面

サイトでは、パスワード保護されているすべてのエリアのロック画面のデザインが統一されます。ページごとにカスタマイズすることはできません。

ブロックなし

ロック画面は、Squarespaceの他の部分とは動作が異なります。他のコンテンツ領域とは異なり、ロック画面はセクションやブロックを使用して構築されていません。スタイルがあらかじめ設定されたレイアウトから、編集ツールを使用してカスタマイズしてください。

動画を見る

新しいレイアウトを選択する

ロック画面のレイアウトを選択するには、次の手順に従ってください。

1. [ロック画面] パネルを開きます。
2. パネルにロック画面のプレビューが表示され、変更内容がリアルタイムで表示されます。最初は白紙のデザインから始まります。
3. [レイアウトを変更] をクリックして、ロック画面の新しいレイアウトを選択します。背景画像は後で変更することになるので、今はテキストとパスワード フィールドの配置に集中してください。
4. レイアウトを選択するには、レイアウトにカーソルを合わせて [選択] をクリックします。
5. [保存] をクリックします。

ヒント: カスタム コードを追加することにより、カウントダウン タイマーをカスタム レイアウトとしてロック画面に追加することができます。詳細については、Squarespace Forumのこちらの投稿をご覧ください。カスタム コードの変更は弊社サポートの範囲外です。つまり、コード ベースのソリューションのセットアップやトラブルシューティングはサポート対象外です。

ブランディングとテキストを追加する

[ブランディングとテキスト] パネルを使用して、サイトのスタイルに合ったコンテンツを追加します。以下が可能です。

• ブランディング テキストまたはロゴを追加する
• ページの見出しを追加する
• 長い本文テキストを追加する
• 鍵アイコンを非表示または表示する

ロゴ画像を追加する方法は、以下のとおりです。

1. [ブランディング] で [ロゴ] を選択し、[+] アイコンをクリックします
2. [ファイルをアップロード] をクリックすると、デバイスから画像をアップロードできます。[ライブラリから選択] をクリックすると、画像を再利用できます。
3. 変更を確認するには、[保存] をクリックします。

ロゴがベスト プラクティスに従っていることを確認するか、Squarespace Logoを使用して新しいロゴを作成してください。

画像を追加した後、次のことが可能になります。

• 画像の編集。
• 画像の焦点の設定。これを行うには、3つの点をクリックして [焦点] をクリックします。
• 画像の変更。これを行うには、[置き換え] をクリックします。
• 画像の削除。これを行うには、3つの点をクリックして [削除] をクリックします。

以下の点に留意してください。

• ブランディングとテキスト表示はレイアウトによって異なります。
• ロゴとブランディング テキストを同時に表示することはできません。
• 他のページとは異なり、ロック画面のサイトのタイトルとロゴは、サイトのホームページにリンクしていません。
• ロック画面のブラウザー タブには、常にサイトのタイトルと「安全」という文字が表示されます。

背景画像または動画を追加する

[メディア] パネルを使用すると、ロック画面にフルブリードの背景画像、動画、または色を表示できます。以下が可能です。

• 背景画像をアップロードする
• ストック画像を追加する
• 以前アップロードした画像を再利用する
• ループする無音の背景動画をURL経由で追加する
• 背景色を設定する

以下の点に留意してください。

• ロック画面に動画をアップロードすることはできません。背景動画を追加するには、動画をYouTubeやVimeoにアップロードし、動画のURLを使用して動画を追加してください。
• アップロードする前に画像を適切な形式にしてください。
• 組み込みの画像エディターを使用して、元の画像を編集できます。
• 複数の画像をアップロードすると、スライドショーまたはグリッド背景を作成できます。ロック画面のスライドショーでは、画像が自動的に切り替わります。
• 高解像度の画像を複数アップロードすると、ロック画面の読み込み時間に影響が生じる可能性があります。
• レスポンシブ デザインにより、画像や動画は、特にモバイルで、常にある程度トリミングされます。トリミングの量は、画像の高さ、ブラウザーの幅、および選択したレイアウトによって異なります。

背景色を使用する

画像や動画の代わりに単色の背景を表示するには、[なし] を選択します。これにより、プレビューから画像が消えます。背景色は[スタイル] パネルで変更できます。

ロック画面のスタイルを設定する

ロック画面のタイポグラフィーと色を変更するには、[スタイル] パネルを使用します。ロック画面のスタイルは、サイトの他の部分とは別のものです。そのため、[スタイルを既定値にリセット] または [すべてをシステム フォントに設定] クリックした場合、ロック画面のスタイルにのみ影響します。

1. [ロック画面] パネルの [スタイル] クリックします。
2. オプションを使用して、ロック画面のスタイルを設定します。パネルの微調整オプションを使用してスタイルを変更すると、ロック画面のプレビューが変化します。
3. 完了したら、[保存] をクリックします。

注: バージョン7.1のサイトでは、ブランディング、見出し、本文のスタイルを設定することはできません。

パスワード フィールド

[パスワード] セクションの微調整オプションを使用して、パスワード フィールドを調整します。

[スタイル: 長方形] を選択すると、背景色とフォントの色を個別に調整できます。

[スタイル: 下線] を選択すると、次のようになります。

• [色] 微調整オプションは下線とテキストの両方に影響します。
• テキストは下線より50%明るく表示されます。
• テキストがカラーで表示されていて、それを灰色にしたい場合は、セレクターをカラー ピッカーの右側から左側に移動します。