【iPhone6 Plusも対策?】楽天でスマホデザインを作る時の基本4つの考え方

LINEで送る
Pocket

スマホデザインを作る時の基本4つの考え方

大手企業のほとんどがスマートフォン向けのデザインにきっちりと取り組んでいることから、そろそろ楽天店でもスマートフォンのデザインを検討したいところですね。

最近では、iPhone6 Plusのようなファブレットと呼ばれるような、少し大きめの画面サイズのものも増えてきたので、デザイン制作者にとっては本当に頭の痛い問題です。将来的には楽天などのモール側の機能ででスマートフォンのページを作成できるようなツールがリリースされる可能性もありますが、現時点では簡易的なものしかそれがないので、本格的なスマホサイトをつくるのであれば自前でスマートフォンページを作成するしかありません。

技術的な話はここで話すべきでないので、今回は店長としてデザイナーにスマホデザインをお願いするときなど、抑えておいておきたい超基本的な考え方を列挙します。

基本1 リキッドデザイン(サイズ可変デザイン)を意識する。

スマートフォンを触ったことがある人ならご存知のとおり、スマートフォンは縦持ちと横持ちでサイトの見え方がガラリと変わります。
これはリキッドデザインといわれる、横幅が変更されてもスムーズにデザインが切り替わるようにデザインされているからです。

簡単にいえば、横幅を固定していないだけです。
これを意識してデザインするかどうかで見た目は大幅にかわります。

近いものとして、レスポンシブデザインというものもありますが、考え方はほぼ同じです。
リキッドデザインはレイアウトがそのままで、幅が変化するデザインに対して、レスポンシブデザインは画面サイズによってレイアウトそのものも変化するものを言います。

基本2 タッチパネルを意識した挙動

これが結構見落としがちなのですが、スマートフォンはマウスを使うのではなく指をつかいます。
だからボタンなどのデザインは圧倒的にボタン!とわかるデザインにしないとそこがタッチできる個所かどうかも分からなくなります。

またマウス操作ではマウスオーバー処理でボタンだと理解させることも可能でしたが、それができなくなります。
立体的な処理や、ボタンのデザインルールをもうけて、しっかりとボタンだとわかるデザインが必要ということですね。

基本3 タッチ操作の最適化

先ほどの話と少し重複しますが、マウスのように細かく繊細にタッチできないので、適度な余白や文字サイズを維持しないとリンクの押し間違いなどユーザビリティの低いサイトになってしまいます。
小さなボタンデザインにしてしまうと、大きな指をもった人だとまともにタッチできないことが想定されます。
しっかりと大きな指の人にも対応したものがいいですね。

基本4 ファイルサイズの軽量化

これもLTEが始まったとはいえ、今後はMVNOなどの格安SIMによる回線などの活用が増えていくはずです。
ということは通信データ量に関してもシビアに考える傾向になっていくと思います。

あまりにファイル容量の多いサイトを作ってしまうと、さすがにユーザーの離脱率が一気にアップしてしまいます。

できる限り軽いファイルサイズでサイトを作成しましょう。

まとめ

スマートフォン対策、スマートフォン対策と数年前から言われておきながらも、実際はまだまだ対策ができていないところが多いです!
まだまだチャンスはありますので、しっかりと対策しておきましょう!

参考:【iPhone6発売を前にして考える】ネットショップ運営にスマートフォンは必要か?

守岡 裕志 (Hiroshi Morioka)合同会社ココロザシ 代表CEO

投稿者プロフィール

「合同会社ココロザシ」代表CEO。”ホンモノにスポットライトを。”をテーマに世界を飛び回りながらもホンモノのショップとホンモノのクリエイターをお繋ぎさせていただくことを目指し活動中。毎日休みで毎日志事のディレクター&プロデューサー&ノマドワーカー。

★自社運営中サイト★
ココロザシ守岡裕志ブログ
ココロザシ守岡裕志のfacebookでは言えない話
ココロザシ
世界の空港のラウンジ情報サイト 空港ラウンジ.com
日本のおみやげデータベース OMIYA!
自分で生き抜くためにネットで稼ぐ! ネトビジ!
タレント・俳優・歌手・声優・モデル・舞台などのオーディション情報なら オデ速!

この著者の最新の記事

関連記事

ピックアップ記事

  1. カメラのフラッシュを使用したほうが綺麗な写真が撮れると思っていませんか? それは間違い…
  2. 100%売上を上げる
    まだまだ体力のないショップ様にとって、どんな商品を仕入れるか、またはどんな商品を企画して作る…

ココロザシ運営サービス

合同会社ココロザシ

空港ラウンジ.com

OMIYA!

ネトビジ!

オデ速!

ノマド的節約術

オススメサービス

Feedly

follow us in feedly

ピックアップ記事

  1. 最近「安いものが以前に比べて、高いものが売れるようになった」ような情報をチラホラ聞くことが多…
  2. 楽天SEO
    今回は、楽天でSEOするための重要な要素である商品レビュー数を増やすための方法を考えてみたいと思…
ページ上部へ戻る