Web関連

【Web制作】モバイルファーストとは?スマホが手放せない現代でのWeb設計

0

こんにちは!
デザイナーの勇希です。
普段は主にスマートフォンサイトの制作を行うことが多いです!制作している中で学んだことや、新しい技術の紹介などを積極的にコラムで発信出来たらと思います!

さて、今回は「モバイルファースト」をテーマにコラムを書いていくのですが、みなさんはこの「モバイルファースト」という意味をご存知でしょうか?

近年ではスマートフォンの普及率が上がった事によって、ユーザーのインターネットを閲覧する環境が大きく変わりました。
その為、 Webサイトを閲覧する際にスマートフォンからの接続が多くなり、近年ではスマートフォンサイトのUIや情報設計がユーザー ニーズに合っているかどうかという事を深く考えてWeb制作が行われてきています。
詳しくは下記で説明していきますね!

 

モバイルファーストとは

冒頭でも少し触れましたが、モバイルファーストとは、Webサイトを設計・制作していくうえで、スマートフォンサイトのUI設計やデザインの見せ方を考慮し、モバイル環境への対応を優先して設計・制作・開発を進めていくことを言います。

今までは、PCサイトを先に制作、公開してから、その後にモバイルサイトを制作し公開するような流れが主だったのですが、この流れで制作をしていくとスマートフォンでの機能がPCに比べ制限されていることもあり、情報の配置、設計がおかしくなったり、PCサイトに合わせて作った為にUIがスマートフォンに適さないサイトになることもありました。

近年ではスマートフォンからサイト閲覧をするユーザーが急激に増えてきていることもあり、モバイルサイト制作でもスマートフォンでの閲覧時を考慮した設計や開発をPCサイト制作と同時、もしくはモバイル先行で行っていくようになってきています。つまり、スマートフォンで閲覧した時の使いやすさを優先し、サイト全体の設計を行っていくことがモバイルファーストとも言えます。

モバイルに適した設計

ファーストビュー

モバイルサイトの設計としてはファーストビューにはナビゲーションよりコンテンツをしっかり見せることが大切です。
モバイルユーザーの特性としてはナビゲーションを辿ってコンテンツに流入していくのはほとんどなく、検索結果から直接ページにランディングしていく事のほうが多いので、ファーストビューでひと目でなんのページなのかがわかることが重要です。

レイアウト

基本的にはワンカラムレイアウトが多いです。ここ数年ではPCサイトでもワンカラムのレイアウトが増えてきていますがこれもモバイルファーストを考慮した結果とも言えます。
また、モバイルではレイアウトと言うより、モジュールを活用することで設計が済んでしまう部分もあります。
例えばカード型レイアウトのUI活用、カルーセルやタブ切り替え、Yahoo!などで見られるリスト型のレイアウト組み込む等、複数あるパーツの組み合わせで、モバイルサイトの画面設計は完了できます。

さいごに

モバイルファーストという考えは捉え方で意味が大きく異なってきてしまいますが、正しく理解して、 Web制作に反映していくことでユーザーフレンドリーなサイト制作が行えます。
PCサイト制作ももちろんですが、モバイルサイトの考え方もまだまだ深いですね!
それではまたの機会に!Adios!

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

スマートフォンサイト制作

0

「今夜、星を見に行こう。」前のページ

宅配に不可能はない?こんなものまで届けてくれるWebサービス次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    HTML5で3D表現!?

    昨今HTML5が主流になってきており、HTML5の勉強をされている方も…

  2. Web関連

    ギャップで魅力的なリクルートサイトにしよう

    世の中、ギャップによって印象や魅力が増進・半減とありますが、人やモノだ…

  3. Web関連

    改めて知っておこう!アドテクノロジーの種類と手法の説明

    昨今様々なインターネット広告の形態が浸透していますが、その中でも見…

  4. Web関連

    なるほど!気付けばそこにいる、ゲーミフィケーションについてまとめてみる

    「んん?...げーみふぃけーしょん?」と言う方もいれば、「ああ、ゲーミ…

  5. SEO関連

    「とりあえずコンテンツを増やす」は危険!?パンダに負けないSEO対策とは?

    「パンダアップデート」という言葉を見聞きされること…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    通販サイトの構築や運営で失敗しないための3つのポイント!
  2. Web関連

    スマホ?パソコン?マルチデバイスについて調べてみた。
  3. Web関連

    デジタルファブリケーションで創る!
  4. Web関連

    コピーライトに込められた思い。尾形真理子から学ぶ言葉の作り方
  5. Web関連

    仕事に役立つiPhoneアプリ(上)
PAGE TOP