application)完全ガイドSPAとは一般的に、ページの設計構造を考える時には2つの選択肢があります。application」の2つです。application」とは、コンテンツの切り替えは行わずに、複数のページ間で画面遷移をすることを想定した設計構造のことページの設計構造に正解はなく、かつ両者共にメリット・デメリットが存在するので、現実的にはこれらの中間をとることが一般的な解決策になります。画面遷移の数が増えるSPAのメリットSPAのメリットは、画面遷移の数が減ることです。画面遷移の数が減ることで、ユーザー側は次のような恩恵を受けられます。動作性の向上:画面遷移をせずに素早くページの切り替えをすることができます。ユーザー体験(UX)の向上:ブラウザの挙動に縛られない、幅広いUXを実現できます。ページの切り替えを滑らかなアニメーションの実装や、Twitterのようにプッシュ型の通知の提示をすることが可能です。ネイティブアプリの代用:SPAによって、ネイティブアプリと比べても遜色ないようなUXを実現できるので、Webアプリで作成したものをネイティブアプリの代用として提供することができます。上記のメリットから、SPAはユーザーが頻繁にページ遷移やコンテンツ操作を行う滞在時間の長いサービスに適していると言えます。SPAのデメリットSPAのデメリットは、初期のページ読み込み速度が遅くなることです。これは、1つのページで複数のコンテンツの切り替えをしようとすると、読み込むコンテンツのデータ量が増えるからです。「ページの読み込み時にローディングアニメーションを表示する」などの工夫をすることによって、UXを落とさない工夫をすることが重要になってきます。完成イメージユーザーがトップページから会員登録が完了するまでのフローをSPAで実装していきます。SPAの実装が完了したBubbleエディターはこちらです。SPAの実装には、主にPathを使った実装Paramaterを使った実装の2つの実装方法があります。どちらも大きな違いはないので、今回はPathを使ったやり方を紹介していきます。URL設計どんなURLの時に、どのコンテンツを表示するかを設計します。今回はPathによってコンテンツの切り替えを行うので、Pathの設計を以下のように決めました。Groupを配置するGroupを配置していきます。ゼロからデザインを考えると時間がかかってしまうので、今回はBubbleのConponentsを利用しました。次の表のように、Groupを上から順に配置していきます。