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

関連記事

  1. Web関連

    世界の「美しい女性」の基準

    皆さん、ご存知ですか?毎年おこなわれている、「世界で最も美しい顔1…

  2. Web関連

    Webシステムを安く、早く、便利に使えるASPサービス

    こんにちは!IAの中條です!インターネットの普及により、世の中便利な技…

  3. Web関連

    サイト設計で変化するサイトイメージ

    人間は思っているより変わりやすい生き物です。色や物によって大きく気…

  4. SNS関連

    Facebookユーザー必見!10倍早く読み込めて、しかも感情も表現できる「インスタント記事」

    皆さんは、コミュニケーションアプリは何を使っていますでしょうか?L…

  5. SNS関連

    ソーシャルメディアをターゲットユーザーによって使い分けよう

    ソーシャルメディアにはFacebook, Twitter, Insta…

  6. Web関連

    楽にできる?!レスポンシブWEBデザイン

    皆さんもスマホ対応しなければと思い、ホームページをリニューアルされ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    あなたは大丈夫?就職面接時に気を付けたい4つのポイント
  2. Web関連

    web担当者必読!注目のLINE@ 企業のビジネス活用まとめ
  3. AI関連

    人手不足とAI
  4. AIさくらさん

    AIさくらさんとAIチャットボットはどう違う?!他社製品との違いを徹底解説!
  5. Web関連

    ブログネタがない時におすすめのブログネタ10選
PAGE TOP