Web関連

スマートフォンサイトに適したUI設計とは(1)

0

こんにちは。
育児に家事に大忙しのディレクター、望月です。

スマートフォンサイトのUIは、常に進化しています。以前は、とにかくなんでもアコーディオン、カルーセルメニュー、タブ切り替えを多用したレイアウトが使われていました。そのうち、コンテンツの特性にあわせて、色々なUI設計が出てきました。
今回は、直近でよく使われているUI設計について、個別に紹介していこうと思います。

スマートフォンに適したUI設計とは

スマートフォンサイトのUI設計をするには、基本的に抑えるポイントがあります。画面が縦に長く、指でタップやフリックをして操作する、などの環境が関係しています。

・カラムは、多くても2段組までが理想的です。大画面のスマートフォンも増えてきましたが、やはり3段以上で構成すると、文章の折り返しが増え、1カラムごとの領域も狭く、使い勝手が悪くなります。

・指でタップして操作するため、1つごとのボタンのサイズは、大きめに作った方が良いです。指の腹の領域はユーザー本人が認識するよりも広いため、小さいボタンのサイズでは、押し間違いが発生しやすくなります。また、マウスオーバーという概念が無いので、どこがクリック出来て、どこが出来ないのかの表現は、PCサイトよりもわかりやすくしなければいけません。

・webサイトというよりも、アプリケーションをイメージしたほうが、使いやすいUIとなるようです。特にヘッダー・フッターにどのようなボタンをどういう順番で配置するかによって、サイト全体の使いやすさが影響します。

・画像においては、昨今の高解像度ディスプレイに対応するため、表示サイズの4倍(タテ・ヨコそれぞれ2倍)で作成することが一般的になっています。ロゴやアイコンでは svg ファイルが利用されることが増えてきましたが、写真については jpg/png が一般的です。ただし、文字についてはデバイスフォントでも十分きれいな表現が可能なため、ほとんど画像に起こす必要は無いでしょう。

テキストの表現方法

前述したとおり、スマートフォンはPCサイトに比べ、高解像度なディスプレイの普及率が高く、デバイスフォントのままでも、かなり綺麗に表示されます。タイトルやキャッチコピーなどでも、基本的にデバイスフォントのままで問題無いと思います。また、小さな文字や線の細い文字もかなり綺麗に表示してくれるので、背景色と文字色の組み合わせも、PCサイトより広い範囲で表現できます。
最近はwebフォントも色々な種類がありますので、欧文フォントであれば、色々使えば個性的なサイトにすることが出来ると思います。
注意するのはフォントの種類です。現時点(2015年10月)で、Androidの日本語対応携帯には明朝体のフォントが入っていません。高品質な製品・サービスを提供するサイトではクオリティアップのため、明朝体を使用することがままありますが、この点には注意が必要です。どうしても使いたい場合は、画像にするしかないでしょう。

画面サイズについて

以前に比べ、スマートフォンは様々な画面サイズの機種がリリースされています。以前はiPhone 1機種だけ考慮すれば良かったのですが、Androidの普及により、多種多様な画面サイズが存在します。
古い機種を利用するユーザーもまだまだ多いため、幅広いユーザー層をターゲットにしているサイトは特にこのあたりに注意する必要があります。
目安としては、(スマートフォンをタテに置いた状態で) 横幅 320px を基準にすると良いでしょう。
また、大きな画面の機種や、スマートフォンを横向きに使うことも考慮する場合は、リキッドレイアウトで製作したほうが効果的です。

mochizuki_2015-10-13_01.png

今回は、基本的な設計についての解説をまとめました。次回は、より具体的なUIの設計について、解説していこうと思います。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

スマートフォンサイト制作

関連コラム

テンプレートセットを使ったフルスピードWeb制作

0

繋がりは無限大!マルチデバイスの進歩前のページ

ナビゲーション設計に必要なユーザビリティとファインダビリティ次のページ

ピックアップ記事

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

関連記事

  1. Web関連

    思い通りのWebサイトにぐっと近づく!プロトタイピングツール「AdobeXD」の嬉しいポイント4選!…

    こんにちは!デザイナーの石井です。皆さん、日頃の業務ではどんなツー…

  2. Web関連

    そうだったのか! 簡単にわかる「モバイルファースト」の考え方

    現在、ほとんどの企業がコーポレートサイトやECサイトを持っています。…

  3. Web関連

    リクルートサイトと採用ポータルサイトの役割

    新年度がスタートして数ヶ月、就職活動もピークを迎える中、早くも次年度の…

  4. Web関連

    IoT ・IoEが見せる未来は

    今後、大きく発展を遂げるといわれているIoE・IoTをご存知ですか?…

  5. Web関連

    採用希望者数を増加させたい

    自社のリクルートサイトを最大限に活用し、多くの人材を獲得総合求人サ…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    売り上げ(コンバージョン・問い合わせ数)を上げたい
  2. Web関連

    【ホームページ制作】レスポンシブWebデザインのブレイクポイントってどこですか?…
  3. Web関連

    関係あるのは映像業界だけじゃない!押し寄せる超・高解像度「4K解像度」の波!
  4. Web関連

    色彩や配色を勉強するならコレ!古き良き日本文化を今に生かす
  5. AIさくらさん

    【人工知能・AI×メディア】キャラクター×デジタルサイネージに無限の可能性!
PAGE TOP