Web関連

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

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

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

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    HTML5の最新技術を知ろう!

    今回は、html5の技術を使って作られたゲームを紹介させいただきます。…

  2. Web関連

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

    戦略的な導線設計が、売上アップに繋がるコンバージョンまでの道のりを…

  3. Web関連

    離脱されないECサイトに必ずある9つのポイント

    最近一人暮らしを始めてから、食糧からマンガ、家具までほとんどネットで購…

  4. Web関連

    Web制作会社社員だからこそ知りたい!手書きの案件メモを整理するためにやっていること!

    今回は今やっている情報を整理するやり方ついて書いてみようと思います。…

  5. Web関連

    ブログにコーポレートサイトにどうぞ!WordPressテンプレートの紹介

    こんにちは!ブログを始めてみたものの3日で書くネタに詰まったデザイナー…

  6. Web関連

    Kindle Paperwhiteを買ったので自慢させてくださ い。

    題名の通り、先日Kindle Paperwhite(2015年モデル…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    あなたの顧客、本当に大切にできていますか?
  2. AI関連

    【人工知能(AI)×災害対策】AIが台風を予測しビジネスにも変える!?
  3. Web関連

    運営コスト削減!?CMSを使ったweb制作のススメ
  4. AI関連

    経営の在り方を大きく変えるデータ分析は、AIの活用でより容易に
  5. Web関連

    マーケティング大成功!人気アニメ作品はなぜ「人気」となったのか?
PAGE TOP