こんにちは！ソースクリエイトでウェブデザイナーをしています、林です。

弊社ではコーポレートサイトや採用サイトのリニューアルや新規作成などを行っています。

幅広い業種のお客様からご依頼いただく中で近年よく耳にするホームページの課題に「スマートフォン（以下スマホ）やタブレットなど、各デバイスに適したホームページ」が挙げられます。

既存のホームページがPC向けしかないのでリニューアルでレスポンシブ化したい、ホームページがほぼスマホで見られているのでモバイルファーストのデザインに改修したいなど、多様なデバイス向けのホームページが課題にあげられることが多くなりました。

今回はそんな課題で耳にする「モバイルファースト」を深堀りし、そもそもモバイルファーストとはなんなのか？どういった考えの元モバイルファーストのデザインにすればいいのかを再確認し、より良いホームページになるようにしていきましょう。

パソコン向けのホームページ制作の作り方からモバイルファーストへ

かつてのホームページは主にパソコンで見るサイトのことを指しており、企業もパソコンで閲覧するためのサイトを作成していました。
しかし、スマートフォン（以下スマホ）やiPadなどのタブレットの普及によりホームページはパソコン以外の幅広いデバイスでも閲覧されるようになってきました。

総務省によると、令和3年で携帯電話やスマホなどのモバイル端末の保有は9割を超え、その中でもスマホの普及が進んでおり、8割以上の世帯で保有しているということです。

そのことにより今までのパソコン向けのホームページ制作からスマホを始めとした様々なデバイスに対応できるような考え方に変わってきました。
モバイルファーストはそのような時代背景の移り変わりで考えられるようになりました。

モバイルファーストという考え方を深堀りしてみる

モバイルファーストという考え方をもう少し深堀りしていきましょう。
先述した通りモバイルファーストとは端的にいうと、モバイルを重視したサイトにするという考え方のことです。

ではスマホ向けのホームページを優先的に作ればよいのでしょうか。
スマホ向けのホームページのみを作ればよいのでしょうか。

実はモバイルファーストの「ファースト」とは、作る順番や優先的な意味ではありません。「ユーザーを一番に考える」「お客様第一主義」などに近しい意味になります。

すなわちスマホ向けのホームページはスマホユーザーにとって本当に必要な情報や機能はなんなのか、見やすい・わかりやすいホームページとはなんなのかをしっかりと考えて作らなければなりません。
ユーザーの利用状況などを基にホームページを設計しスマホでもノンストレスで利用できるように考えていきます。

ただスマホ向けにサイズを調整する、小さな画面に入り切れないので要素を削っていく、という考えだと本来の「モバイルファースト」とは程遠い、使いずらいデザインになってしまいます。

モバイルファーストという考え方でデザインをする

ではモバイルファーストという考え方のもと制作をするにあたってどんなことに注意をしながらデザイン、設計をしていけばいいのでしょうか。
気をつけるべきポイントを以下にまとめました。

操作性

スマホなどのデバイスはどのように操作されるでしょうか。
パソコンではマウスでクリックしたりキーボードを使って文字を打ち込んだりしますがスマホでは基本指を画面に触れさせタップやスワイプで操作をすることが基本です。

なのでタップする要素が小さすぎたり要素同士が近すぎたりするとうまく操作することができません。また操作するユーザー層によって指の大きさや文字入力が不得手な人がいるかもしれません。様々な操作パターンを留意しましょう。

画面サイズ

スマホはパソコンよりも画面が小さく限られています。なのでフォントサイズや各要素のサイズ感などが小さすぎると読みづらく、大きすぎると入りきらない問題が生じます。
なので読みやすいサイズ感で設計を行う必要があります。

画面が小さいために入れ込む要素も限定される場合があります。ユーザーにとって必要な情報はなんなのかを先に精査し、本当に必要なコンテンツを取り入れていきましょう。

利用場所

パソコンだと基本的には自宅やオフィスなど室内で利用することが多いですがスマホは室内・室外関係なく利用するタイミングがあります。
また、パソコンは座って見ることが多いですがスマホは立っているときに見ているときもあります。電車やバスなどで移動している間にも操作が可能です。

デザインする際はそういったユーザーの利用場所やシーンも考慮して設計を考えていくとユーザーにとって使いやすい・見やすいホームページを制作することができます。

利用時間

先述した通り、スマホはあらゆる場所で利用されていますがこれに加え利用している時間も様々です。
日中日が出ている時間帯に閲覧していることもありますし、夜の暗い時間帯に閲覧している可能性も十分にあります。
その場合を考えて色味を考えたり、時間帯によってコンテンツを変えるなどできることを洗い出していくことが可能です。

また、日中はオフィスのパソコンで閲覧していたホームページを夜は自宅でスマホで閲覧しているなど様々な時間帯での利用パターンが考えられます。
その場合はログイン状態を保存できる機能を追加したりしてユーザーの利用状況に合わせたパターンを考えることができます。

それらの全てのパターンを考慮することは難しいですが、ホームページが多く見られている時間帯を調査し、考慮した設計を考えることも可能です。

まとめ

スマホをはじめとした各モバイル端末での利用は今後も増加するでしょう。
そういった面でも「モバイルファースト」を考慮したホームページは今後ますます大事になってくると予想しています。

自身のホームページを閲覧してくれているユーザーの特徴を把握し、ユーザーにとってわかりやすく見やすいホームページにしていきましょう。