Web関連

モバイルファーストで、ターゲットユーザーにあったWebサイトを作成しよう!

平成が終わり新しい元号に変わるまで、数えられる程になってきました。
世の中が目まぐるしく変わる中で、約30年間を振り返ったとき、一番に思い浮かべることは人それぞれだと思います。
そんな中で所持品として考えると、世界中の人が必ず持つようになったのは、”携帯電話”ではないでしょうか。
肩掛けのように持つ携帯電話から、ガラパゴス携帯、そしてスマートフォンと形は変わりながら、1人1台は持つという世の中になっています。

スマートフォンで電話、メール、チャット、ゲーム、勉強と、たくさんのことが出来る時代の中、Webデザインの考え方・手法として、「モバイルファースト」という言葉が生まれました。

ざっくりと説明すると、その名の通り携帯電話・スマートフォン(モバイル)を一番(ファースト)に作成する、という意味です。
ただ実際には、他にもたくさんの意味・意図を含んでいる言葉です。このコラムでは、モバイルファーストの詳しいところまでご紹介いたします。

モバイルファーストの本来の意味

大体のWebサイトは、パソコン上で見る場合のデザインを考えてから、スマートフォンで見る場合のデザインを作成します。
その作成方法を逆にする、つまりスマートフォンで見る場合のデザインを先に作成することが、ざっくりとした意味のモバイルファーストです。モバイルファーストで作成したデザインには、以下のようなメリットがあります。

1)スマートフォンで見る場合に合わせたコンテンツ量にすることが出来る。
2)ターゲットユーザーに合わせた、デザイン設計が可能。

パソコンで見る場合には、コンテンツ量が多くても、画面サイズが大きい為、見やすくデザインすることが可能です。
ただ、スマートフォンの場合は、画面サイズが小さい為、そのコンテンツ量を入れる場合、ページが長くなりがちになってしまうのです。より伝えたいことは何かを考えて、ユーザーが見やすい上部にそのコンテンツをいれる等、コンテンツ量の調整や、順番等も調整することが出来ます。
またモバイルファーストでは、まずサイトによく訪れるユーザーがモバイルを使用している、という前提が必要になります。モバイルからのユーザーが多い場合には、ターゲットユーザーもスマートフォンを利用しているということになりますので、より使いやすいデザイン作成が可能になるのです。

始める前に大切なことは、顧客の動きを知ること

モバイルファーストについて説明をさせて頂きましたが、まず大切なことは、アクセス解析になります。
パソコンかスマートフォンか、ターゲットユーザーがどちらを多く利用しているかで、モバイルファーストで作成するかどうかを選択することが必要になります。
もちろん、パソコンからが多い場合や、半々の利用であれば、パソコンのデザインから作成を始めた方が良いです。

利用はどちらのデバイスが多いのか、Webサイトを見てすぐにサイトから出て行ってしまうのはどのくらいなのか、また、ゴール(コンバージョン)まで辿り着きやすいのか、などアクセス解析をすることによって、ユーザーが求めること、ユーザーにとって分かりやすい、見やすいデザインを考えることがしやすいです。
そうした結果、スマートフォンを中心にWebサイトを見てほしい、見られやすいのであれば、モバイルファーストで作成を進めることはぴったりと合うのです。

また、モバイルファーストは、スマートフォン優先で考えることだけではなく、ユーザー視点に立ち、サイト内の導線やどの場所にいてスマートフォンからサイトを見ているのか、というシチュエーションを考えることが大切です。
そうすることにより、ユーザーが使いやすい・わかりやすいWebサイト作成を行うことが出来ます。

モバイルファーストが向いているシーンは?

モバイルファーストが向いている企業やサイトは下記が上げられます。

1)B to C企業(飲食店やアパレル等のサービス業)
2)採用サイト

上記に共通していることは、想定されるユーザーがスマホから見ることが多い点です。
特に10代の若い世代は、「スマホネイティブ世代」と呼ばれ、物心ついた時からスマホやSNSに触れてきた世代であり、パソコンよりスマホを利用することが多いと言われています。
その為、気になるショップを調べたり、予約をしたり、また就職活動もスマホで行うことが多いのです。

こうしたスマホを多く利用する方がターゲットの場合は、パソコン上で見るデザインを主軸とするよりは、スマホでの使いやすさ、見やすさを意識することが大切になるのです。

今の世の中にあった、Webサイトを作成しよう!

前述した通り、Webサイトをスマホから閲覧するユーザーが増えています。
スマホから閲覧するユーザーはこれからも増加するでしょう。

もし、アクセス解析や調査を行って、モバイルからのユーザーが多いのであれば、モバイルファーストのWebサイトを作成するべきになります。
モバイルファーストで作成することで、ユーザーを取り逃すことなく、Webサイトを見てもらえる可能性が上がるからです。

よりユーザーが使いやすく、分かりやすいWebサイトを作成しましょう!

ストレスチェックはAIで前のページ

自動運転の「なぜ」を考える〜AIは自動運転をどこまで進化させるか次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    作成する資料をちょっと良くできる!デザインの2ポイント

    最近は自粛&自粛で運動不足に拍車がかかっている、デザイナーの松…

  2. Web関連

    パララックスデザインとUI・UX

    jQueryが普及し、フラットデザインの流行もあいまって、最近はパララ…

  3. Web関連

    タイポグラフィによるクオリティアップ

    デザイナーの藤原です。昨今、「レスポンシブデザイン」や「フラットデザイ…

  4. Web関連

    60年前のデザインがネットで大流行!?話題の「keep calm and carry on」

    2013年頃から、ネット上である古いポスターをパロディ化したバナーデザ…

  5. SNS関連

    災害時に大活躍!ソーシャルメディアを有効活用しよう!

    『ソーシャルメディア』は言葉として知っている方は多いですが、意味を間違…

  6. SNS関連

    SNSボタンがよく押される場所はどこ?

    SNSボタン、サイトによって配置がかなり違いますよね。今回、SNS…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    短時間でクオリティが上がる、Webデザインのテクニック
  2. Web関連

    検索キーワード「ヒッグス粒子」
  3. Web関連

    色って不思議・・・こんな影響があるんだ!
  4. AI関連

    会計・経理処理をAIでスピーディーに効率よくしよう
  5. Web関連

    Webデザインで使える配色ツール5選!
PAGE TOP