プラットフォーム

Squarespace からアプリへ: サイトのモバイル チェックリスト

Squarespace サイトを既存のデザインのアプリに変換します。 Fluid Engine のレイアウト、メンバー アクセス、コマース チェックアウト、同意バナー、埋め込みを確認します。

A painted photographer compares a printed contact sheet with a phone portfolio

A Squarespace to app build starts with the mobile site you already publish. A converter loads it in a branded app shell, keeping your portfolio, services, content, or shop in Squarespace. First check whether visitors can complete their main tasks on a phone and in the app preview.

The checks differ for a portfolio, paid member site, and shop. This guide covers Fluid Engine layouts, member access, Commerce checkout, consent, and embeds.

アプリが実行するジョブを選択してください

Choose a reason people would return to the app: a project gallery, repeat bookings, paid lessons, or a shop.

Turn that reason into three test journeys, such as “open a gallery, choose a collection, send an inquiry.” If you cannot identify a repeat task, reconsider a store build. Apple’s 最低限の機能のルール expects more than a repackaged website; our Guideline 4.2 guide explains the risk. The Squarespace platform checklist adds tests for stores, scheduling, members, forms, and embeds.

Fluid Engine のモバイル レイアウトをセクションごとに確認します

スクエアスペースの Fluid Engine モバイル レイアウト ガイド explains that you can arrange and resize blocks for mobile without changing their desktop arrangement. A good desktop layout does not prove the mobile arrangement works.

モバイル エディタでトラフィックの多いページをすべて開きます。最初に表示されるブロック、画像とコピーの順序、各ボタンが提供する指のターゲットの大きさを確認します。次に、公開されたページを実際の携帯電話にロードします。エディターでバランスが取れているように見えるギャラリーでも、訪問者がプロジェクトの説明や連絡先アクションを確認する前に、いくつかの大きな画像をスクロールするよう求められる場合があります。

ポートフォリオの場合は、明確なプロジェクトのタイトル、高速に読み込まれる画像、明確な次のステップを優先します。サービスページの場合は、サービス詳細の近くにある予約または問い合わせボタンを押してください。ショップの場合は、デザインを調整した後も製品オプションとカート コントロールが引き続き使用できることを確認してください。モバイルで装飾ブロックを非表示にする場合は、重要な情報が含まれていないことを確認してください。

Fix the layout in Squarespace, publish it, then check the app preview.

2 つのアカウントでメンバー エリアとペイウォール コンテンツをテストする

Use one member account with access and another without it. In a fresh preview, test sign-in, password reset, protected content, and a return visit. Check where each account lands after authentication.

コンテンツへのアクセスを販売する場合は、新規顧客がたどるのと同じ道をたどります。オファーを読み、アクセスを選択し、支払いフローを完了し、保護されたマテリアルを開きます。既存の顧客の場合は、サインアウトして再度サインインし、アクセスが表示されたままであることを確認します。特定のサイトで使用されている電子メール検証または外部 ID ステップをテストします。新しいブラウザー タブを開くフローが、期待どおりに埋め込みビューに戻らない場合があります。

Prepare a test login that lets reviewers reach protected content without purchasing. Keep it current and explain the route in review notes.

For a creator site, make the library, new content, or member dashboard easy to reach from app navigation.

Squarespace Commerce チェックアウトをエンドツーエンドで実行する

A site-based app displays your existing Squarespace checkout. Test the whole transaction, not just the product page. Try a product with variants, add it to the cart, apply a discount if you offer one, select delivery or pickup where relevant, and reach the order confirmation.

顧客が使用すると予想される支払い方法を繰り返します。ウォレットプロンプト、支払いリダイレクト、または認証ステップがアプリの外に移動する場合があります。お客様が支払いを完了し、明確な確認に戻ることができることを確認します。デジタル アクセスを販売する場合は、購入後の会員コンテンツへのルートを確認してください。支払い方法を安全​​にテストできない場合は、その制限を記録し、開始前にプロバイダーの文書化されたサンドボックスまたは独自に制御されたトランザクションを使用してテストしてください。

同じ原則がスケジュールにも当てはまります。予定を選択し、時間を選択し、必要な詳細を送信して、確認と再スケジュールのパスを確認します。 Squarespace の正確な構成、統合、支払いプロバイダーによって何が起こるかが決まります。ブラウザーで動作するすべての機能がアプリでも同様に動作すると仮定するのではなく、プレビューを使用して観察してください。

Keep existing Commerce or scheduling charges separate from app costs in the ウェブサイトからアプリまでの費用ガイド.

Cookie バナーは、特にアプリのナビゲーションの下で、電話画面の大部分を占めることがあります。新しいユーザーとしてサイトにアクセスし、テキストを読み、提供された選択肢をすべて試してください。ユーザーが誤ってタップすることなく閉じられ、メインのアクションに到達できることを確認してください。スクエアスペースの サイト立ち上げチェックリスト は、起動チェックとしてモバイル レイアウトとプライバシー コントロールを呼び出します。

フォームには完全な送信テストが必要です。キーボードを開き、すべての必須フィールドに入力し、フォームで許可されている場合はファイルを添付して送信し、成功メッセージと宛先を確認します。ポートフォリオでは、その問い合わせフォームがアプリの最も価値のある機能である可能性があります。サービス ビジネスでは、ランディング ページよりも予定の埋め込みの方が重要な場合があります。

カスタム コード ブロック、ビデオ プレーヤー、マップ、サードパーティの埋め込みには別途注意が必要です。視聴者がそうする可能性がある場合は、モバイルデータにそれらをロードし、携帯電話を回転させてください。全画面モードを試して、アプリに戻ります。埋め込みツールがプレビューで失敗した場合は、そのプロバイダーの現在の埋め込みルールを確認してください。実際の設定で機能することを確認するまでは、顧客に機能を約束しないでください。

サイトベースのビルドの変更点

SiteTo.App を使用すると、アプリ名、アイコン、色、起動画面、ライブ Web サイトのナビゲーションを構成できます。サイトは引き続き、ページ コンテンツ、コマース、スケジュール、メンバー アクセスを制御します。通常の Squarespace ページの変更を公開すると、アプリがそれらのページを読み込むか更新するときにユーザーにその変更が表示されます。 App Shell の変更により、新しいビルドが必要になる場合があります。

ビルドはビルドごとに 1 回限りの支払いです。Android の場合は 29 ドル、iOS の場合は 79 ドル、または両方の場合は 99 ドルです。 Apple と Google の開発者アカウントとストア料金は別です。の 価格ページ これらの選択肢を示し、 プラットフォームディレクトリ は、他のサイト ビルダーに対する同じアプローチを示しています。プッシュ通知が必要な場合は、SiteTo.App で Firebase 接続プロセスを文書化します。 Firebase ガイド;ユーザーは通知を許可する必要があります。

引き続き、ストアの掲載情報、スクリーンショット、プライバシーに関する回答、サポート情報を準備します。 SiteTo.App は Android パッケージを提供し、Apple Developer アカウントを通じて iOS ビルドを TestFlight に送信します。の ガイドを作成して公開する ワークフローを順を追って説明しながら、 Apple 開発者アカウント ガイド iOS接続について説明します。

の conversion guide compares routes, and the 出版ガイド covers store review.

サイトの種類に合わせたチェックリスト

関連する行を機能ショッピング リストとしてではなく、リリース基準として使用します。

  1. Portfolio: On a phone, can a visitor see your work, understand what you offer, and send an inquiry without fighting image sizes or form fields?
  2. Service business: Can a client choose a service, time, and payment path, then find the booking confirmation?
  3. Member site: Can a paid member sign in, reach protected content, return later, and reset a password? Can a reviewer use a test login?
  4. Shop: Can a buyer select variants, complete checkout with each major payment route, and see an order confirmation?
  5. Every site: Can visitors dismiss consent banners, open embeds, use navigation, and recover from an external link?

両方のビルドを販売する予定がある場合は、iOS と Android の両方をテストしてください。大型の携帯電話だけでなく小型の携帯電話も試してください。各行程の結果を記録し、可能な場合はソース ページを修正します。このプロセスは、デスクトップのスクリーンショットや 1 回のタップの成功に依存するよりも信頼性が高くなります。

よくある質問

Squarespace Web サイトを iOS アプリに変換できますか?

はい。サイトベースのビルダーは、公開された URL から開始して、iOS アプリ シェルにパッケージ化できます。独自のモバイル レイアウト、メンバー アクセス、埋め込み、チェックアウトを支払い前にプレビューできます。 Apple は、完成した提出物をガイドラインに照らしてレビューします。

Fluid Engine のモバイル レイアウトはアプリに表示されますか?

アプリは公開されたモバイル ページをロードするため、その表示レイアウトが開始エクスペリエンスになります。 Squarespace でモバイルの変更を公開し、アプリのプレビューをチェックして電話での結果を確認します。

私のショップまたはメンバーエリアは自動的に機能しますか?

これらのエクスペリエンスではライブ サイトのフローが使用されますが、正確な設定と統合が重要です。プレビューで、支払い、サインイン、リダイレクトなどの関連するプロセスを最初から最後まで実行します。

2 セットのコンテンツを維持する必要がありますか?

サイトベースのアプリの場合、Squarespace コンテンツがソースのままになります。アプリのブランディングとナビゲーションは個別に管理しますが、通常のページと製品の更新は Squarespace を通じて公開されます。

プレビューは無料ですか?

はい。 URL を入力し、アプリの初期エクスペリエンスを構成し、有料ビルドを選択する前にプレビューすることができます。ビルドとサードパーティ開発者アカウントのコストは別個です。

次のステップ

主要なカスタマー ジャーニーが公開されたモバイル サイトで機能する場合、 Squarespace サイトをアプリとしてプレビューする。ストアの掲載情報を作成するか準備する前に、そこで同じジャーニーをテストしてください。

Web サイトをアプリとして見る

プラットフォームを選択する前に、エクスペリエンスをカスタマイズしてプレビューします。

プレビューを構築する

読み続けてください

すべてのガイド