スマートフォンサイトに適したUI設計とは(1)│東京のWeb制作会社のスマートフォンサイト関連コラム

Columnコラム

スマートフォンサイト

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

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

2015/12/16
このエントリーをはてなブックマークに追加

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

スマートフォンサイトの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制作

text_totop