Help us understand the problem. What is going on with this article?

スマホサイトの製作時に注意することと対策まとめ

More than 1 year has passed since last update.

始めに

スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました。

あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。

(また別の注意点があるということですね)

スマホサイトの制作時に注意すること

デバイス幅は固定されている

PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできません。
デバイス幅は固定幅になります。

どうする?

viewport設定をしてあげます。

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportとは

meta要素に name="viewport" を追加すると、文書の表示領域を設定することができます。

HTML5/ページ全般/meta要素 表示領域を設定する - TAG index

詳しい説明は割愛しますが、スマホの時はこの幅で表示しますよ、って設定してあげることができます。

スマホの画面の大きさに合わせて表示幅を変化させてあげることも出来ます。

(機会があればviewportの詳しい記事も書くかも。)

デバイス幅が機種でバラバラ

iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限です。

どうする?

リキッドデザインで作ります。
幅はpxで指定しません。

    % rem em

上のviewportで表示領域を変化させたら、
次は画像や文字をブラウザの大きさに合わせて変化するように設定します。

px,pt,%,em 文字の大きさ 数値一覧表 - 山崎はるかのメモ

wi-fiのない3G回線など遅い環境を想定

ブロードバンド環境やwi-fiのないところでは、スマホはまだまだかなり遅いスピードになるかもしれません。

重いサイトは表示に時間がかかってしまうので、軽量化を考えなければいけません。

画像やJavaScript、動画を極力減らします。

またはスマホ用の軽量なものを用意するといいでしょう。圧縮はもちろんしましょう。

どうする?

CSS3のanimationの利用も考えます。
JavaScriptでの表現に近いことがanimationでも可能だったりします。

状況に合わせて使い分けるのも大事です。

animation-CSS3リファレンス

タッチパネル操作で作る

スマホでは、タッチ、フリックなど指を使って操作します。よってマウスやスマートパッドを用いて小さなカーソルでの操作とはまた違う画面設計が必要です。

手の大きさ、小さな画面の中でも使いやすいことを意識しなければいけません。

どうする?

直感的に操作できる設計にします。

タッチ操作の指の大きさを意識します。

まとめ

大きく分けてですが、PCサイトの制作と比べてもこれはどの違いが出てきます。

レスポンシブのサイトにしてもそのまま縮めるだけでは、これらの使いやすさは実現しません。

ユーザビリティを意識した設計をしましょう。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away