SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

おすすめのイベント

おすすめの講座

おすすめのウェビナー

マーケティングは“経営ごと” に。業界キーパーソンへの独自取材、注目テーマやトレンドを解説する特集など、オリジナルの最新マーケティング情報を毎月お届け。

『MarkeZine』(雑誌)

第85号(2023年1月号)
特集「2023年、マーケターたちの挑戦 ──未来を拓く人・企業・キーワード」

MarkeZineプレミアム for チーム/チーム プラス 加入の方は、誌面がウェブでも読めます

モバイルファーストなデザインをするときのポイントを改めてまとめてみた

 デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は、モバイルファーストなデザインについてです。

 こんにちは!株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。

 モバイル向けに最適化され、優れたウェブサイトデザインが求められるのはもはや常識となりました。今回は、改めてモバイルファーストについて考察するとともに、モバイルサイトの訪問者により良い体験を提供するためのポイントをまとめて紹介していきたいと思います。

モバイルに向けたデザイン戦略の必要性

 モバイルデバイスを使用するユーザーが急激に増え、デザイン戦略は大きく変わりました。モバイルファーストデザインは、サービスやサイトを成功に導くための重要なカギとなります。

 従来、ウェブサイトはデスクトップのユーザー向けにデザインされていましたが、環境やテクノロジーの進化とともに、モバイル優先のアプローチが必要となりました。

 国内のスマートフォン保有率は85%を超え、2021年時点でスマートフォンからのインターネット利用者は約68.5%とほぼ7割を占めています。現時点でモバイルのインターネット使用率は、デスクトップを上回りました。この先さらに、多くの人々がスマートフォンから情報を探すようになり、モバイルでの利用者が増えると予想されます。つまり、モバイル向けに最適化されたデザインでなければ、素晴らしいユーザー体験を提供できなくなる可能性がますます高まるのです。

情報通信機器の世帯保有率の推移(出典:総務省 令和4年版 情報通信白書 総論)
情報通信機器の世帯保有率の推移(出典:総務省 令和4年版 情報通信白書 総論
インターネット利用率(個人)の推移(出典:総務省 令和4年版 情報通信白書 総論)
インターネット利用率(個人)の推移(出典:総務省 令和4年版 情報通信白書 総論

 また、広告媒体がテレビや雑誌から、スマートフォンに移行していることも一因として考えられます。InstagramやTwitterなどのSNSで、動画やアニメーションを活用した広告は、消費者の認知度や購買欲を高める一般的かつ有効な手段として使われています。

モバイルファーストデザインについて

モバイルファーストデザインとは、モバイルデバイスを優先してデザインプロセスを開始することで、優れたユーザー体験を生み出そうとする考えかたです。

モバイルはデスクトップに比べ画面表示領域が小さいです。そのためモバイルファーストでは必然的にいちばん重要な機能が優先され、ユーザー体験の中核部分をデザインすることが求められます。つまり、機能の本質を抽出し、引き算のデザインが必要となるのです。ここはデザイナーが苦労するポイントのひとつではないでしょうか。しかしモバイルデザインの課題を解決することで、より大きなデバイスに向けたデザインも進めやすくなりますし、小さな画面のコンテンツを最適化することが、タブレットやデスクトップなどのより大きな画面に適応させる近道となります。

レスポンシブデザインについて

今やさまざまな大きさのスマートフォンやタブレットが登場し、サイトのコンテンツを画面に最適化することは必須となっています。

一般的には、画面の表示領域が大きいほど、より多くのコンテンツが一度に表示されますが、レスポンシブなレイアウトは、表示デバイスの画面サイズに応じてレイアウトやコンテンツを最適化して表示させなければいけません。

具体的にはCSS3のメディアクエリやフルード(リキッドとも言います)レイアウトなどを使用し、ユーザーが使用するデバイスや画面サイズ、解像度などに対応したレイアウトに。さらに文字のサイズ、画像、コンテンツの表示方法も最適な形に変更します。またレスポンシブと比較される「アダプティブデザイン」もありますが、お互いが包含しあう部分もあるため今回は割愛します。

この記事の続きは、「CreatorZine」に掲載しています。 こちらよりご覧ください。

※CreatorZineへの会員登録(無料)が必要になる場合があります。

  

この記事は参考になりましたか?

  • Facebook
  • Twitter
  • Pocket
  • note

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2023/01/25 08:00 https://markezine.jp/article/detail/41110

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング