「クリエイターのたまご」の皆さんに贈る、デジタルハリウッドのお役立ちWebマガジン!「クリエイターになりたいなぁ」と、ちょっとでも思ったことのあるあなたは、「くりたま」です。

スマホサイトのデザインはココに気をつけろ!スマホUI設計のコツ

スマホUI設計のコツ

最近はスマホでWebサイトを見るユーザーが増加し、サイト訪問者のほとんどがスマホユーザーである場合も少なくありません。スマホで見やすく、操作しやすいデザイン設計にするためには、どのような点に気をつければ良いのでしょうか。

 

UI(ユーザーインターフェース)とは


「UI(ユーザーインターフェース)」
とは、ユーザーとの接点のことです。

WebサイトのUI設計を行うときは、「画像やテキストがバランス良く配置されているか」「適当な余白が取られているか」「ボタンはタッチしやすいか」などについて、ユーザー視点で見ていく必要があります。

 

UIを決める上で欠かせないターゲット設定

UI設計をする際にもう一つ押さえておきたい点が、Webサイトのターゲットユーザーです。ターゲットユーザーの年齢や性別などによって、UIも変わります。例えば、ターゲットユーザーの年齢が高い場合、「Webサイトのテキストを大きく表示して読みやすくする」などの対応が考えられます。

ターゲットの設定方法としてよく使われる手法が、「ペルソナ設定」です。アンケートやアクセス解析を参考にして、Webサイトを訪れる人物像(ペルソナ)を設定し、ユーザーが何を求めているかを明確にします。

 

コンテンツの表示方法

記事一覧などコンテンツ一覧ページにおける、コンテンツの表示方法もさまざまです。

コンテンツが縦に並ぶ画面を下にスクロールすることで新しいコンテンツを表示する方法(無限スクロール)、その都度ボタンをタップしてコンテンツを読み込む方法、コンテンツを複数ページに分けて表示する方法(ページング)などがあり、ユーザー視点に立ったコンテンツの表示方法が求められます。

 

Webサイトをスマホ対応にするための方法


スマホは画面が小さく、画面を正確にタッチしたり、文字を入力したりすることが難しいため、スマホサイトでは指で操作しやすいデザインが求められます。

ボタンやリンク同士の距離が近いと、PCでは問題なく操作できても、スマホではミスタッチが起こりやすくなります。

また、Webサイトをスマホ対応にするための方法として、「レスポンシブデザイン導入」と「スマホ専用サイト作成」の2つがあります。

 

レスポンシブデザイン

ユーザーの画面サイズに合わせてページレイアウトを自動調整する方法が、「レスポンシブデザイン」です。

1つのページでさまざまなデバイスに対応させることができるため、PC向けページ・スマホ向けページのようにデバイスごとに別々のページを設ける必要がありません。また、管理の手間を省いたり、URLを統一したりできる点もメリットです。

レスポンシブデザインは、画面サイズ別でCSSを切り換える仕組みです。スマホユーザーに対して、メニューバーをプルダウンで表示したり、横長のテーブルを縦に表示したりすると使いやすさが向上します。

 

スマホ専用サイト

既存のPC向けページをレスポンシブに対応させることが難しい場合もあります。このようなケースでは、スマホ専用サイトを作成します。スマホユーザーに絞ってWebサイトの企画・設計から構築までを行うため、スマホに最適化されたWebサイトを作ることができます。

 

まとめ

今後もスマホユーザーは増加し、スマホサイトのUI設計の重要性は一段と高まるでしょう。PC向けWebサイトの操作性が良くても、スマホに対応していないWebサイトでは、スマホユーザーにストレスを与えてしまいます。他のWebサイトのUIを参考にしながら、ユーザーにとって使いやすいサイト作りを目指しましょう。

 

B!

この記事におすすめのオンライン講座

こんな記事も読まれています

VTuberの作り方は?個人勢向けに制作費用、活動に必要なものを解説!

ポートフォリオサイトのおすすめ21選!無料のポートフォリオサイトも紹介!

【受付終了】デジハリ・オンラインスクール学校説明会

モバイルバージョンを終了