Design デザイン・UI

 
スマホデザイン・UI

【3選】スマホサイトを作る前に気をつけること

スマホサイトで気をつけること

スマホの普及率が増加するに合わせて、スマホサイトが続々と増えてきていますが、急いでスマホサイトを作成しても「成果」は得られにくいと考えられます。

サイトによりそれぞれのゴール(目標)はあるとは思いますが、まずはスマホサイトを作る上で基本となる3つのデザインを「iOSヒューマンインターフェイスガイドライン|Apple Inc.」に沿って紹介します。

iOSヒューマンインターフェイスガイドライン

1)文字サイズ

基本的なことになりますが、テキストは「読みやすさ」が最も重要になります。
文字が小さく読みにくくては、デザインが良くても意味がありません。
テキストの重要性により文字サイズを変え、メリハリをつけることで読みやすいテキストとなります。

■推奨文字サイズ

小:11ポイント 中:14ポイント 大:17ポイント

フォントサイズ

原則として、サイト全体を通じて同じフォントを使いましょう。フォントの体裁が異なると違和感が生まれ、まとまりのないデザインとなります。

ただ、フォントが異なると目を引く要素となりますので、ポイントとして使うのは良いですが、複数のフォント多用することは避けた方が無難です。

2)ボタン

ボタンで最も重視することは「押しやすさ」です。

iOSヒューマンインターフェイスガイドラインでは、ユーザが操作する要素は、扱いやすいよう適切な間隔を置いて配置するとあります。ボタンを設置する場合、最小でも「約44×44ポイント」の領域を設けてください。

また、ボタンのデザインは統一しましょう。ボタンごとにデザインを変えるとテキスト同様に、煩雑さがでてきます。

ボタンサンプル

3)情報の入力

スマホでの文字入力はパソコンに比べて手間がかかります。

もし入力フォームが多く設置され、すべてを入力しないと次のページに進めないとしたらいかがでしょう? 本当に欲しい商品、情報でない限り、途中で入力を辞めてしまいますよね。

ユーザには最小限の操作で完結できるよう考慮しましょう。たとえば、テキスト入力をプルダウンメニューや、ラジオボタンなどにするだけでもユーザの負担は軽くなります。

また、1ページに入力する要素を詰め込むのもよろしくありません。最大でも2スクロール内に留めましょう。

フォームサンプル

結論:スマホサイトで気をつけること

スマホサイトのデザインは、デザインさえ綺麗であれば良いのではありません。
コンテンツの視認性やユーザの操作性なども考慮し、ストレスなく閲覧できることが重要です。

スマホサイトを設計する際は、自分の意見だけでなく周りの意見も参考にしましょう。ユーザにとって使いやすいと思えるデザインを考え、統一性を欠くことがないよう設計してみてはいかがですか。

この記事を書いた人


モバイルラボ 編集部
ヨコハマ・モバイルラボとは? モバイルならではの表現ってなんだろう? 一瞬のひらめきや感動は手のひらから始まっています。 新しいクリエイティブのカタチをここから探してみましょう。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事