こんにちは!
デザイナーの勇希です。
普段は主にスマートフォンサイトの制作を行うことが多いです！制作している中で学んだことや、新しい技術の紹介などを積極的にコラムで発信出来たらと思います！
さて、今回は「モバイルファースト」をテーマにコラムを書いていくのですが、みなさんはこの「モバイルファースト」という意味をご存知でしょうか？
近年ではスマートフォンの普及率が上がった事によって、ユーザーのインターネットを閲覧する環境が大きく変わりました。
その為、 Webサイトを閲覧する際にスマートフォンからの接続が多くなり、近年ではスマートフォンサイトのUIや情報設計がユーザー ニーズに合っているかどうかという事を深く考えてWeb制作が行われてきています。
詳しくは下記で説明していきますね！
モバイルファーストとは
冒頭でも少し触れましたが、モバイルファーストとは、Webサイトを設計・制作していくうえで、スマートフォンサイトのUI設計やデザインの見せ方を考慮し、モバイル環境への対応を優先して設計・制作・開発を進めていくことを言います。
今までは、PCサイトを先に制作、公開してから、その後にモバイルサイトを制作し公開するような流れが主だったのですが、この流れで制作をしていくとスマートフォンでの機能がPCに比べ制限されていることもあり、情報の配置、設計がおかしくなったり、PCサイトに合わせて作った為にUIがスマートフォンに適さないサイトになることもありました。
近年ではスマートフォンからサイト閲覧をするユーザーが急激に増えてきていることもあり、モバイルサイト制作でもスマートフォンでの閲覧時を考慮した設計や開発をPCサイト制作と同時、もしくはモバイル先行で行っていくようになってきています。つまり、スマートフォンで閲覧した時の使いやすさを優先し、サイト全体の設計を行っていくことがモバイルファーストとも言えます。
モバイルに適した設計
ファーストビュー
モバイルサイトの設計としてはファーストビューにはナビゲーションよりコンテンツをしっかり見せることが大切です。
モバイルユーザーの特性としてはナビゲーションを辿ってコンテンツに流入していくのはほとんどなく、検索結果から直接ページにランディングしていく事のほうが多いので、ファーストビューでひと目でなんのページなのかがわかることが重要です。
レイアウト
基本的にはワンカラムレイアウトが多いです。ここ数年ではPCサイトでもワンカラムのレイアウトが増えてきていますがこれもモバイルファーストを考慮した結果とも言えます。
また、モバイルではレイアウトと言うより、モジュールを活用することで設計が済んでしまう部分もあります。
例えばカード型レイアウトのUI活用、カルーセルやタブ切り替え、Yahoo!などで見られるリスト型のレイアウト組み込む等、複数あるパーツの組み合わせで、モバイルサイトの画面設計は完了できます。
さいごに
モバイルファーストという考えは捉え方で意味が大きく異なってきてしまいますが、正しく理解して、 Web制作に反映していくことでユーザーフレンドリーなサイト制作が行えます。
PCサイト制作ももちろんですが、モバイルサイトの考え方もまだまだ深いですね！
それではまたの機会に！Adios!
