web_900

スマホサイトに取り入れるべきUIの基本原則まとめ


PCの自由さに比べサイズの小さいスマホでのデザインはまた特別です。
片手で操作?屋外で操作?色々なシーンを考えてレイアウトが必要です。
スマホのUIデザインの基本原理を知ってパターンを身につけよう!

 

アイコン

スマホは画面が小さいので情報をいかに集約するのかが大事です。
特に文字ばかりになってしまうとなかなか次のアクションへ繋がりません。
まずはアイコンで分かりやすく誘導することが重要です。
最近のフラットデザインを取り入れ華美でないデザインアイコンの方がいいでしょう。

レイアウト 整列

限られた画面でレイアウトがバラバラしているとユーザーは目がちらついてしまいます。
レイアウトでどれだけすっきりとさせてどこへナビゲートしたいのかを配置することはUIでもかなり重要です。
まずはここを押して欲しい。などユーザーに分かりやすいデザインにしましょう。

web_902

余白マージン

片手で操作することの多いスマホ。親指で操作がメインになります。
その場合アイコンが近いとユーザーの思ったような操作ができなかったり押し間違える場合も出てきます。
押せない。というのはかなりのダメージですね。
ちゃんとユーザーが次へ進みやすいようにきっちりマージンを取りましょう。

ナビゲーション

スマホの画面いっぱいにボタンがあっても押す箇所が次、次と違っていては片手で操作する場合かなり苦痛です。
ユーザーをスムーズにナビゲートできるように押す場所はあまり変わらない方が誘導しやすいです。
ここを押してカートへ、同じくここを押して確認、同じくここを押して決済。など
スムーズな流れを作ってあげることもUIには必要なデザインです。

タイポグラフィ

画面も小さいスマホでも読んで欲しいものはあります。その場合アップルが推奨している11pt以下のサイズだと読み物としてはNGです。
また画面に文字ばかりになってしまってもタイポグラフィの基礎を活用して見せる文字デザインですっきりさせましょう。
文字の大きさ、フォント、太さ、行間などでスマホ内でもしっかりとしたサイトの演出ができます。

リンク

ユーザーのフローを考えて作成したはずなのに、なかなか次ぎへ繋がっていない場合、リンクを確認してみましょう。
そのテキストリンクはリンクだと分かりやすいようになっていますか?
ここは押せるというリンクだということがわかるデザインになっていますか?
このユーザーに伝わっているかどうか。ここがUIのポイントだと思います。
思い通りになっていないサイトはきっとわかりにくいという原因があるはずです。

ビジュアル 色

最近はUIデザインでメインになっているフラットデザイン。
それまでのサイトでは3Dっぽい近未来的な素材やデザインがかっこいいとされていた時代もありました。
でも最近はどれだけシンプルにするか。という流れになっていますね。
そのシンプルにするためには色は重要です。
アイコンやバナーなどがシンプルで飾らないようにするなら後は色で区別するしかないです。
この色で区別し、ユーザーに伝えることがUIには必要です。

アナリティクスでは右下

スマホの画面の中で1番押されている箇所は右下です。
これはアナリティクスから出されている数字です。
スマホを左手で持って左親指だけで画面を押さえてみて下さい。右上などはとても届かないですよね。
でも右下はどうでしょうか?簡単に押さえることができます。
右手で持っていても実は右下が1番押さえやすいです。(ぜひ試してみて下さい)
UIデザインには必ず取り入れたい配置です。

web_901

まとめ

スマートフォンのUIのトレンドはどんどん変化し変わっていきます。Webではよくあることですが、それだけ追いついていかなければいけないということです。でも今回ご紹介したUIの8つの基本原理は流行というよりは、よりユーザー側に立って使用することを考えたものになっているので今後も使えると思います。

流行が変わってもどこをゴールにしたいのか。どこを押して欲しいのか。などこちらの誘導したいポイントをどれだけ分かりやすくするかということは変わらないはずです。
それに親指の押さえる幅がいきなり変わることもないでしょう。ぜひ試してみてください。それでアナリティクスなどで数字で反応を見て独自のパターンを見いだしてみましょう。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


yamatama

紙面のデザイナーからWebデザイナーに転身。紙媒体とWebの違いに戸惑いながら制作・Web解析を学んできました。 現在はフリーで活動中。 一児の母(小学生の娘)

Next ArticleWebデザインでも超重要!タイポグラフィの基本5つ