Web関連

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

0

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

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

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

 

モバイルファーストとは

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

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

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

モバイルに適した設計

ファーストビュー

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

レイアウト

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

さいごに

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

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

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

関連するサービス

ホームページ制作

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

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    目指せ印税生活!ミュージシャン気取りになれるWeb楽曲配信サービス

    最近のミュージックシーンは楽器を一切使わないEDMなどの楽曲が流行し、…

  2. Web関連

    WordPressのプラグイン PS Disable Auto Formattingを使ってみた

    WordPressをCMSとして使っていると余計な機能があります。それ…

  3. SNS関連

    その投稿、大丈夫?!SNSユーザーが注意すべき著作権とは

    昨今、キュレーションサイトをはじめとする、Webサイトの著作権問題が話…

  4. Web関連

    今さら聞けない「WEBの出来ること(活用メリット)」とは?

    今回は、WEB担当者の方向けではなく、主に他媒体担当者の方へ向けたコラ…

  5. Web関連

    「LINEHERE」という便利なアプリが登場!

    みなさんは、友達や家族と待ち合わせをした時なかなか相手を見つけられない…

  6. Web関連

    WEBサイトは両利き用?

    あなたは利き腕はどちらですか?今回はWEBサイトが利き腕を考慮…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    HTML5の最新技術を知ろう!~その2~
  2. Web関連

    知ったかぶり、してない?サルでもわかるリードナーチャリング
  3. Web関連

    その言葉、大丈夫?間違いやすい日本語9選
  4. Web関連

    こんな採用サイトあったらいいな。アイデアまとめ
  5. Web関連

    ついに来たか!Web制作者”だけ”が歓喜するお話し
PAGE TOP