今回も最近のＷｅｂでの動向を踏まえた技術的なお話しをしていきます。
「モバイルファースト」という言葉をご存知ですか？３年ほどの前にも紹介しましたが、モバイルで閲覧することをまず最初に意識してユーザーの見やすさや使いやすさを意識したサイト構成やデザインにしましょうという意味です。どちらかというと「モバイルフレンドリー」のほうがピンときやすいかもしれません。こちらも似たような意味ですがより見やすい使いやすいを意識しており、Googleの検索順位の評価として認識されています。
最近はスマホも大型化して、だいぶ見やすくなってきましたがそれでもパソコン画面に比べると見づらいです。また、パソコン側もノートパソコンまでほとんどフルＨＤ（1920×1080）以上になってきたため、一画面に表示する情報量をついつい多くしがちです。そのようなことにならないように見やすさ、使いやすさを意識して情報量を絞り込んだシンプルなページをつくりましょうという傾向が出ています。
とはいえ、いろいろな情報を連続してみたくなるのも閲覧者の要望です。そこで登場したのがＳＰＡという仕組みです。
ＳＰＡは「Single Page Application」の略で直訳すると単一ページのソフトといった感じですが、１つのＷｅｂページで画面が遷移することであたかもデスクトップアプリケーションのような使い方ができる仕組みのことです。以前であればFlashのような技術で実現できていたページをJavaScriptフレームワークやHTML5/CSS3で実現しようとするものです。
一番ピンときやすい例としてはGoogle Mapがあげられます。画面としては一画面なのに拡大縮小はもちろん、移動も検索によるピン表示や距離測定などとてもＷｅｂページとは思えない機能がＳＰＡです。
メリットとしては、表現力が豊かになり、遷移しないので使い勝手は向上します。モバイルページでも遷移がない分、負担が少ないと思います。デメリットとしては１ページに情報を詰め込むことになるので、検索結果の上位には上がりにくいことになります。また、設定があるため、１ページを読み込む時間が長くなります。
使い方としては、Ｗｅｂサイト全部ではなく、施工事例検索のような多くの情報を絞り込んでみたい一部のページに適用することをお勧めします。
一部ではなくて、リフォームの自動見積のようなＷｅｂサービスを提供したいという方にはＰＷＡという言葉を覚えておいてください。ＰＷＡは「Progressive Web Apps」の略で進化したＷｅｂアプリといった訳ですが、Ｗｅｂアプリなのにネイティブアプリのように使える仕組みです。
ピンと来ない方もいると思いますので、実例を試してください。お勧めは不動産・住宅紹介サイトの「SUUMO」です。これをスマホで普通にブラウザで見てもらった後で、ホーム画面へ追加を行ってみてください。スマホアプリのようなアイコンが追加されます。それをクリックするとアプリのようなＷｅｂ画面が出ます。これがＰＷＡです。
ＰＷＡのメリットはスマホアプリを特別に開発することなく、アプリのようなサービスを提供できるところにあります。スマホアプリはiOS用、Android用といった形で別々に作る必要がありますが、ＰＷＡは１つ作ればＯＫです。デメリットはまだ機能を十全と使える制作会社が少ない点です。時間が解決するかもしれませんが、もう少し時間がかかりそうです。
これからＷｅｂサービスを提供したいと考えている企業は検討することをお勧めします。