メニューを開く

メニューを開く

メガメニュー を閉じる

お電話でのお問い合わせはこちら 0120-388-801

受付時間/平日10時〜19時定休日/毎週日祝日・隔週土曜日

HOME(名古屋のホームページ制作会社 株式会社アババイ)

BLOG

スタッフブログ

12月 2021 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

RANKING

    • 2021/11/11

      【スマホ・タブレット時代はどこまで続く?】モバイルファーストについて

      アババイスタッフ 画像

      坂本智

       

      こんにちは、エンジニアの智治です。

      本日はタイトルにもあります「モバイルファースト」についてご説明を致します。

       

      モバイルファーストとは?

      日頃から私たちが利用しております「パソコン」や「スマホ」「タブレット」といった

      様々な端末で色々なホームページやサイトを見るかと思います。

      その中でも「スマホ」や「タブレット」といった近年パソコンよりも所持率が逆転した

      端末でのサイト確認率が高くなっていることで、そこのユーザーに向けてのデザインや構築を行うことです。

       

      モバイルファーストで多い勘違い

      モバイルファーストに対する誤解はさまざまですが、特に多いのが下記のような間違ったイメージです。

      • 制作:最初にスマホを作って、次にパソコンを作ればOKだな
      • デザイナー:パソコンのデザインよりスマホのデザインにこだわるべき
      • お客様:パソコンはもう古い、これからはスマホだけ作って貰えれば十分

      制作会社の中には、「今やモバイルファーストの時代ですから、スマホだけはしっかり作りましょう!」と主張する会社も少なくありません。

       

      モバイルファーストの目的と手順

      確かに、モバイルファーストを直訳すると「スマホを最初に作る」となり、大きな誤解が生まれます。

      事実、需要の高さからパソコンよりもスマホをはじめとするモバイルユーザーの満足度を優先してサイトを作成する、という考え方は確かに間違ってはいないです。

      しかし、モバイルファーストの本来の意味は作業手順ではなく「スマホを含めた全てのデバイスに対して最適化を行いユーザー満足度を高める」という目的があるのです。

       

      そもそものモバイルファーストの目的と手順

      • 目的:全てのデバイスに対して最適化を行いUI/UXを高めること
      • 手順:全デバイスに共通するベースを作り、各デバイスごとに調整を行う

       

      スマホでの最適化をファーストとして目指すゴールに置くのではなく

      「誰が使用し・何のサイトか明確になっていて・最終的に着地点をどこにおくのか」といった

      「コンテンツファースト」という概念に近いです。

      ちなみに、似たような名称で「スマホファースト」という用語がありますが、こちらも

      ユーザビリティの高いサイト構造やデザインを満たすという根本的な目的はモバイルファーストと同じです。

       

      モバイルファーストで重要視されるデザインポイント

      どういったデザインにすればお客様にとって「見やすくて操作されやすいだろう」

      私たちは何を伝えれば「お客様とお話できる機会に(お問い合わせ)に繋がるだろう」といった疑問も

      以下をご参考いただければ今後素敵なホームページになるかもしれません。

       

      レスポンシブWebデザイン

      パソコン用にデザインしたコンテンツをそのままスマホに表示させると全体が縮小されるため、いちいち拡大しながら読まなければなりません。

      反対に、スマホ用にデザインしたコンテンツをそのままパソコンで表示させると、サイト自体が大きく崩れたり、余分なスペースが邪魔になってしまいます。

      つまり、どんな画面サイズの端末でアクセスしても常に最適なサイズで表示される「レスポンシブデザイン」こそが、モバイルファーストデザインの第一条件となるのです。

      他にも小さな画面でも見やすいデザイン設計・最適なフォントサイズと行間といったポイント、

      中でも重要となるのが 指先の操作性を考慮したタップやスワイプの工夫 です!

       

      液晶をタッチパネルで操作するスマホやタブレットだからこそ、ユーザビリティに直結するのが「指先の操作性」

      皆様もスマホを見る時に指先一本でスイスイ液晶を触るのではないでしょうか?

      そういった事から、片手での使い勝手が重視されるスマホは指先一本での操作性が重要点であり最も求められるポイントのため、

      常にタップやスワイプの利便性を考慮しておく必要があります。

      ユーザーに扱いづらい・操作性が悪いなぁと思われないサイトにする為には、以下の工夫をデザイン構成に取り入れてもいいかもしれません。

      • ボタンやバナーなど、タップができる領域を明確にする
      • 画面中央等にリンクバナーやボタン設置を行い誤ったタップを引き起こす操作性を悪くさせない
      • ボタンやリンクを一カ所に密集させない
      • ターゲット層ユーザーの指先の大きさを考慮し、余裕のあるボタンサイズにする

      等々が一例です。

       

      まとめ

      モバイルファーストでは、サイズの異なるデバイス全てで快適に閲覧できるデザインが求められます。

      言い換えれば、場所やタイミングを問わず誰もが簡単に利用できるサイトこそ、モバイルファーストの理想形と言えるでしょう。

       

      とは言っても、まだまだパソコンだからこそ表現できるコンテンツの見せ方もありますのでスマホとパソコン、一長一短ですね^^

       

       

      弊社へのお問い合わせ・制作実績を以下に記載しますので

      どうぞこちらもご覧くださいませ(‘ω’)

       

      ▶お問い合わせはこちらから https://ababai.co.jp/contact/

      ▶制作実績 https://ababai.co.jp/case_cat/case01/

      ▶今HOTなSNS運用 https://ababai.co.jp/sns/

      ▶Instagramの最新情報 https://ababai.co.jp/blog/blog14326/

       

    CONTACT CONTACT

    お電話でのお問い合わせはこちら 0120-388-801 お電話でのお問い合わせはこちら 0120-388-801

    受付時間/平日10時〜19時定休日:毎週日祝日・隔週土曜日