目次
そもそも、なぜページ遷移はストレスなのか
・読み込みに時間がかかる..
・遷移時に広告が表示されることがある..
・意図していないページに飛んだ..
・もとのページに戻るのに時間がかかる..
(何回も戻っているうちに迷子になる..)
・遷移時に広告が表示されることがある..
・意図していないページに飛んだ..
・もとのページに戻るのに時間がかかる..
(何回も戻っているうちに迷子になる..)
これを見るとやはり、
極力ページ遷移を減らし、1ページにユーザーが求める情報をまとめるのが理想的ですね。
極力ページ遷移を減らし、1ページにユーザーが求める情報をまとめるのが理想的ですね。
どうしたら減らせる?
もちろん、構成要素を洗練されたシンプルなものにしていくことも重要ですが
サービス内容によっては"SPA"で実装するという選択肢があります。
サービス内容によっては"SPA"で実装するという選択肢があります。
Single (シングル)
Page (ページ)
Application (アプリケーション)
Page (ページ)
Application (アプリケーション)
ページ遷移させずに(非同期で)表示要素を変更する実装の仕方です。
フレームワークとしては、Vue.js / React / Angular が有名どころ。
フレームワークとしては、Vue.js / React / Angular が有名どころ。
◎ SPAのメリット
・ページ遷移が高速
・実現できるUIの幅が広がる
・htmlのコード量を削減できる
etc..
・実現できるUIの幅が広がる
・htmlのコード量を削減できる
etc..
✖︎ SPAのデメリット
・初期ローディングに時間がかかる
・開発できる人が少ない
・開発工数がかかる
etc..
・開発できる人が少ない
・開発工数がかかる
etc..
エンジニアやコーダーじゃなくても、
この手法があることを知っておくと設計・デザイン→実装の流れがスムーズになるのではないでしょうか。
注意点としては、開発を始めちゃってからでは手遅れということです。
設計段階でここまで予測して開発環境を決める必要があります。
設計段階でここまで予測して開発環境を決める必要があります。
より詳しいSPAについては、
わかりやすくまとまっていたサイトをいくつか貼っておきますのでご参考ください。
わかりやすくまとまっていたサイトをいくつか貼っておきますのでご参考ください。
おまけ
(SPAとは全く関係ないですが)
最悪のインターフェースを体験できるという、面白い発想のサイトがあったのでご紹介します。
いくつダメポイントを見つけられるか レッツ トライ!
ツッコミどころが満載すぎて、思わずニヤニヤしちゃいます。
ダメポイントを解説してるサイトはこちらです。(取り上げられていない部分も結構ありますが)
これはかなり極端な例ですが、個々で見るとやってしまいがちなダメポイントもありそう..
このようなダメUIを取り入れないように、ユーザーの気持ちになりきって設計やテストをしていきたいですね。