TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

WEB DESIGN

スマートフォンでも見やすく使いやすい、8つのSP版デザインポイント




こんにちは!トミオカです。

最近ではスマホファーストと言う程、
スマートフォンでのサイト閲覧が当たり前となりました。

そうなった以上、WEBデザインもスマホ用のデザインがとても重要となります。

実際スマホでサイトを見ていると、
使いづらかったり、見づらいと思ったことはありませんか?

そこで今回は、
スマホ用のWEBデザインを行う上で
見やすさ、使いやすさを重視した、デザインポイントを8つご紹介したいと思います。

ボタンは高さ90px(45px)が基本

近年では
タブレットの需要が増えたのとPC版でも指でのタップ操作が増えてきたので
スマホに限ったことではないのですが、
ボタンの大きさが非常に重要です。

僕がデザインする際は、
タップ操作があると想定されるボタンは天地の高さを45px以上にすることが多いです。

スマホの場合は2倍(PC版もRetinaDisplayが増えてきたので一概には言えないですが)でデータを制作するので、
90px以上で制作をします。

ボタンの上下に別のボタンがない場合は最悪35px(70px)、これが限界値かなと。

さらに使いやすくする場合は50px(100px)まで大きくすることがあります。

ただ全体的なデザインのトンマナもあると思うので、
ボタンの中のテキストの大きさや、ボタン自体のデザインで調整するようにしています。

そしてそのボタンがちゃんと押しやすいのかを検証するため、
必ずデザインの時点で実機(スマホ)で確認するようにしましょう!

ボタンのアクションをアイコンで示す(スマホ版に限らず)

単純に四角の中に文字だと、ボタンぽく見えずスルーされてしまうことがあります。

それを避けるために、
そのボタンを押すとどのようなアクションがあるかアイコンで示してあげると親切です。

ハンバーガーメニュー(重要なボタン)は追従が基本

ページ数が多いサイトならもちろんですが、
色んなページを回遊させたいのであれば、
ハンバーガーメニューの追従をオススメします。

ページTOPがあれば一番上に戻れますが、
ユーザーが、どのページのどの位置にいても、

すぐにナビゲーションを開ける状態にしてあげると、とても使いやすいと思います。

ハンバーガーメニューに限らず、
たとえば問い合わせボタンなどのサイトのゴールとなるような重要なボタンは、
追従させることをオススメします。

ただ追従させることによってコンテンツの邪魔になってしまうと意味がないので、
すべてを追従させるのではなく、プライオリティを決めて追従コンテンツをしっかり決めましょう。


改行位置を意識する(スマホ版に限らず)

いまやスマートフォンでもさまざまな端末(環境)があるので、
予想される表示崩れはできるだけ事前に避けましょう。

一番多いのは、文字の改行位置です。

デバイスフォントやWEBフォントを使用すると、
意図しない部分で改行されてしまうことがあるので 、
こちらも色んな環境でしっかり実機確認をするようにしましょう。

タブは表示されいている項目をわかりやすく(スマホに限らず)

スマホ版ではあまり縦に長くならないようタブボタンも多く使用しますよね?
その部分もしっかりデザインにこだわりましょう。

今開いているタブと、他のタブを差別化してあげると非常にわかりやすいです。

連続するテキストリンクはマージンを空ける

プライオリティが低いボタンに関してはテキストリンクというボタンを使用します。

テキストリンクも指でタップすることを忘れないようにしましょう。

前項では45px天地を取るようご説明しましたが、
こちらも同様、上下にしっかりマージンをとり、押しやすいように心がけるようにしましょう。




スライダーはページネーションを付ける(スマホに限らず)

スライダーもその場で多くのコンテンツを見れるのでオススメの機能です。

ただ、隠れているコンテンツがあるので、
その量をしっかり示してあげるため、ページネーションを設置しましょう。

スライダーにもたくさん種類がありますが、
あまりユーザーに操作の負担をかけすぎないため、
コンテンツが多くある時のスライダー機能はあまりおすすめできません。

モーダルは可能な限りコンパクトに

モーダルはページ遷移するまでもない少ないコンテンツを表示する際に多く使用します。

そんな時にモーダルまでスクロールして閲覧となると、
少しストレスですよね。

こちらは構成の段階でしっかり固めておくべきですが、
どうしても長くなってしまう場合は、下部にも「閉じる」ボタンを設置してあげて、
簡単に閉じれる状態にしておきましょう。

まとめ

いかがだったでしょうか?

もう一度ポイントをおさらいします。

・ボタン類は高さ90px(45px)が基本
・ボタンのアクションをアイコンで記す(スマホ版に限らず)
・ハンバーガーメニュー(重要なボタン)は追従が基本
・改行位置を意識する(スマホ版に限らず)
・タブは表示されいている項目をわかりやすく
・連続するテキストリンクはマージンを空ける
・スライダーはページネーションを付ける(スマホに限らず)
・モーダルは可能な限りコンパクトに

クリック操作と、タップ操作はまったく別物として考えるようにしましょう。

WEBサイトは人によって操作してコンテンツを見ていくため、
いかなる時もユーザーが使いやすく見やすいデザインを心がけるようにしましょう。

それがUI設計というものです。

ご覧になって頂きありがとうございます。
少しでも参考になれば幸いです。