smartphone-creat-design-point

スマートフォンサイトをデザインする際や作る時の注意したいポイント

  • このエントリーをはてなブックマークに追加

スマートフォンサイトを作ってみたく、色々調べてみるといろいろ注意しなければならないポイントなどあったので忘れないためにまとめてみました。『そんなの当たり前よ!』なんてところなども多々ございますが、これからスマフォサイトに挑戦だ!なんて方にご参考になればと思います!

Retinaに対応したデザイン

解像度が横幅640pxのiPhoneのRetinaディスプレイがあり、Retinaディスプレイではないディスプレイの解像度、横幅320pxでデザインしていくとRetinaディスプレイで表示してしまうと横幅などが伸びて荒く表示されてしまいますので、Retinaディスプレイに対応した横幅640pxでデザインしていくとラクかもしれませんね。

リキッドデザイン

ファミリーマート リキッドデザイン
リキッドデザインとは、ブラウザの横幅を変更した時に、コンテンツ内のデザインも幅に合わせ変わるデザインのことです。
スマートフォンは、回転できる端末のため、縦の場合と横の場合の時のことを考えなければなりません。基本的に、スマートフォンを縦で使うと思いますが、縦のデザインを基準にで大丈夫ですが、横にしてみる場合もあるので横にした際のことも考えなければならないということですね!

デバイスフォントはヒラギノ角ゴ

Andolidは機種ごとにデバイスフォントが違うため、iPhoneを基準に考えるとヒラギノ角ゴを使ってデザインしていくのがいいのかなと思います。

テキストはできるだけデバイスフォントを使う

スマートフォンはPCでみる際などの回線ではなく3G回線なので、画像などを沢山使ってしまうとサイトの表示が重くなってしまったりしてしまうので、テキスト部分はできるだけデバイスフォントを使いたいですね。
ボタンなどもCSS3などを積極的に使って行きたいですね!

極力画像は使わない


左 – 阪急阪神第一ホテルグループ
右 – PSFA オフィシャルサイト
上記でも書いた通り、画像にしてしまうとサイト表示が遅くなってしまったりしてしまうので、ボタンやグラデーションなどできるだけCSS3を使って表現できるところは使って行きたいですね。

ボタン等のサイズは縦か横を44px以上


左 – サントリー
右 – ベネッセコーポレーション
ボタンのサイズは縦か横を44px以上にしておかないとユーザーが押しにくよ!!とAppleガイドラインに書いてあります。
ボタンが小さくて「押しにくいなー」「違うところ押しちゃったよ!」ってことになるとユーザビリティが悪くなってしまいます。

マウス操作ではなく、指のタッチによる操作

基本ですがスマートフォンは、マウス操作ではなく指でタッチで操作するということを考えておきましょう!

おすすめ記事

  1. スペシャル感がでるようなデザインを考える
  2. 宇宙を用いたwebサイト、webデザイン
  3. 色々なサイトを参考にボタンを作ってみました【psd付き】
  4. 過去に作ったデザインを見て素人っぽいデザインから抜け出したい方法!
  5. 色んなwebデザイナーの方の勉強方法まとめてみました

関連記事

PAGE TOP