絶対に知っておきたい！効果的なスマホ最適化【3】～デザイン編～

こんにちは！
毎週配信【らくだのお手紙】担当のTakuです。

【シンプルかつカンタン。でも、ビジネスに使える！】をテーマに、毎週情報を配信しています。
ぜひお気軽にご覧ください。

本日のテーマは、こちらです。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

絶対に知っておきたい！効果的なスマホ最適化【3】～デザイン編～

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
今月からお届けしている【スマホ最適化】シリーズの第3弾です。

スマートフォン（以下、スマホ）の普及が進むに伴い、WEBサイトの構造やデザインなどスマホで利用する際に、
ユーザーが使いやすく最適化することが目的（売上向上、会員登録など）に繋がる重要な要素となってきています。

そこで、今回はキャメルスタジオが考える「スマホ最適化の【デザイン】」について、
工夫や大切にしていることなどをご紹介いたします。

文字サイズや余白は大切な要素！

‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
コンテンツ要素がシンプルになっていく一方で、コンテンツを構成する文字や画像、余白などがとても重要な役割をもってきています。
画像の制作サイズについては、デバイスの画像解像度を考慮して、実際のサイズの幅・高さともに2倍で制作するなど工夫しきれいに表示されるよう対応しています。
また、文字サイズについては、一般的には16pxが適切とされていますが、対象ユーザーの特性（年齢、利用環境など）に応じて試行錯誤することが大切です。少なくとも12px以上で作成することをお勧めしています。
余白についても、狭い画面サイズだからこそ、1つ1つのコンテンツの区切りがはっきりわかるように、十分に設けることも重要となってきます。

「文字サイズなんて、1px変わろうが特に気づかないよ」と思われるかもしれませんが、人間は考えている以上に感覚的に物事を感じとると言われています。

キャメルスタジオでは、こういった細かな構成要素にもこだわることで、ユーザーにとってより利用しやすいデザインを制作できると考えています。

アクションが起きやすいボタン作りを！

‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
前回の記事【スマホ最適化～情報設計編～】でも触れましたが、スマホ対応する場合にはPCとは挙動が異なるため、よりデザインでの創意工夫が求められています。
ボタン等のアクションを求める領域については、他デザインとはっきりと区別できる色や形を採用することが大事です。
また、アクションは指でのタップが基本となるため、ボタン幅も44px以上（横幅640pxでデザインする場合は88px）で制作する必要があります。

スマホだからこそ、もっと感動をうめる！

‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
スマホの場合、画面サイズの縮小やコンテンツ要素の取捨選択により、PCとは異なった対応が必要となることはお伝えしてきましたが、これは決してマイナス要素ではありません。
むしろユーザーにWEBサイトを通じて感動体験をうみやすい環境となったと捉えることができます。
スマホ利用により、いつでもどこでもWEBサイトを閲覧できることができるようになり、情報量の取捨選択でシンプルとなったデザインで、ユーザーに感覚的に訴えることが可能となってきています。

キャメルスタジオでは、幅広い分野の実績から、ユーザーの対象や利用シーンに応じてどのようなデザインが最適化をご提案させていただきます。

いかがでしたでしょうか？
今回は、お客様にご提案している「スマホ最適化の【デザイン】」のポイントについて、いくつかご紹介させていただきました。

スマホ最適化の【重要性】【情報設計】についても、前回の投稿でご説明していますので、参考にしていただければ嬉しいです。

・絶対に知っておきたい！効果的なスマホ最適化【1】
http://businesstimeline.jp/company/camelstudio/timeline_detail/1795

・絶対に知っておきたい！効果的なスマホ最適化【2】　～情報設計編～
http://businesstimeline.jp/company/camelstudio/timeline_detail/1801

ぜひ目的（売上向上、会員登録数増加など）に対して、効果的に、【スマホ最適化】を取り入れてみてはいかがでしょうか？

‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
次回の【らくだのお手紙】
______________________________
次回は、【スマホ最適化】シリーズの第４弾「絶対に知っておきたい！効果的なスマホ最適化【４】～マーケティング編～」を配信予定です。

●「らくだのお手紙」とは？
株式会社キャメルスタジオが【毎週配信】する情報マガジンです。
【シンプルかつカンタン。でも、ビジネスに使える！】をテーマに、 WEBサイトやSNS、業界トレンド等を配信しています。

●2月定期配信【５分でわかる！イマドキSNS活用術】シリーズ
・５分でわかる！イマドキSNS活用術【1】
http://businesstimeline.jp/company/camelstudio/timeline_detail/1695

・５分でわかる！イマドキSNS活用術【2】　～Facebook編～
http://businesstimeline.jp/company/camelstudio/timeline_detail/1713

・５分でわかる！イマドキSNS活用術【3】　～Twitter編～
http://businesstimeline.jp/company/camelstudio/timeline_detail/1716

・５分でわかる！イマドキSNS活用術【4】　～Instagram編～
http://businesstimeline.jp/company/camelstudio/timeline_detail/1775