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

関連記事

  1. Web関連

    動眼(どうがん)でアーティスト気分に浸りたい!

    こんにちは!ティファナコラム編集部 担当の秋田です。今回のテーマは「…

  2. Web関連

    コラムのチェック方法 ~一次チェック編~

    主に中小企業で活発に行われている、社員執筆によるコラムページ。ティファ…

  3. SEO関連

    グーグルアルゴリズムとSEO

    先日、「Japan IT Week春」の展示会に参加しました。昨年…

  4. Web関連

    日本の美徳を活かしたインバウンド接客をとりいれよう!

    みなさん、最近外国人の方とすれ違うこと多くなってきていると思いませんか…

  5. Web関連

    スマートフォンアプリ広告で新たな利益獲得!

    突然ですが、スマートフォンアプリを無料で提供しても、利益を得ることがで…

  6. Web関連

    スマートオフィスで省エネ!

    夏も冬もエアコンフル稼動。オフィスの中で快適に働くには、温度調節が大事…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    運営コスト削減!?CMSを使ったweb制作のススメ
  2. サービス・新技術

    最近よく聞く「フィンテック」、ちゃんと説明できますか?初心者向けに分かりやすく解…
  3. Web関連

    4Pと4Cの関係がやっとわかった~知っているようで答えられない用語 その3~
  4. AIさくらさん

    AIが日本を救う? AIとSDGs(エス・ディー・ジーズ)
  5. AI関連

    マーケティング4.0におけるAI/WEB制作会社としての行動について考えてみる
PAGE TOP