1. nknkt

    No comment

    nknkt
Changes in body
Source | HTML | Preview
@@ -1,43 +1,99 @@
+##始めに
-#始めに
-スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめ。
+スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました
-意外とちゃんと全てできてない気がする
+あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。
-あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではない。
+(また別の注意点があるということですね)
-##デバイス幅は固定されている
-PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできない。
-デバイス幅は固定幅になる。
-###どうする?
-viewport設定をする
+##スマホサイトの制作時に注意すること
-```
+
+###デバイス幅は固定されている
+PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできません。
+デバイス幅は固定幅になります。
+
+
+####どうする?
+viewport設定をしてあげます。
+
+```html
<meta name="viewport" content="width=device-width,initial-scale=1">
```
+viewportとは
+>meta要素に name="viewport" を追加すると、文書の表示領域を設定することができます。
+
+[HTML5/ページ全般/meta要素 表示領域を設定する - TAG index](http://www.tagindex.com/html5/page/meta_viewport.html)
+
+詳しい説明は割愛しますが、スマホの時はこの幅で表示しますよ、って設定してあげることができます。
+
+スマホの画面の大きさに合わせて表示幅を変化させてあげることも出来ます。
+
+(機会があればviewportの詳しい記事も書くかも。)
+
+
-##デバイス幅が機種でバラバラ
-iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限。
+###デバイス幅が機種でバラバラ
+iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限です
-###どうする?
-リキッドデザインで作る
-幅はピクセルで指定しない
-```
+####どうする?
+リキッドデザインで作ります。
+幅はpxで指定しません。
+
+```css
% rem em
```
-##wi-fiのない3G回線など遅い環境を想定
-画像やJS、動画を極力減ら
+上のviewportで表示領域を変化させたら、
+次は画像や文字をブラウザの大きさに合わせて変化するように設定します。
+
+
+[px,pt,%,em 文字の大きさ 数値一覧表 - 山崎はるかのメモ](http://www.nda.co.jp/memo/pxpt.html)
+
+
+
+
+###wi-fiのない3G回線など遅い環境を想定
+ブロードバンド環境やwi-fiのないところでは、スマホはまだまだかなり遅いスピードになるかもしれません。
+
+重いサイトは表示に時間がかかってしまうので、軽量化を考えなければいけません。
+
+画像やJavaScript、動画を極力減らします。
+
+またはスマホ用の軽量なものを用意するといいでしょう。圧縮はもちろんしましょう。
+
+
+####どうする?
+CSS3のanimationの利用も考えます。
+JavaScriptでの表現に近いことがanimationでも可能だったりします。
+
+状況に合わせて使い分けるのも大事です。
+
+
+[animation-CSS3リファレンス](http://www.htmq.com/css3/animation.shtml)
+
+
+
+###タッチパネル操作で作る
+スマホでは、タッチ、フリックなど指を使って操作します。よってマウスやスマートパッドを用いて小さなカーソルでの操作とはまた違う画面設計が必要です。
+
+手の大きさ、小さな画面の中でも使いやすいことを意識しなければいけません。
+
+
+####どうする?
+直感的に操作できる設計にします。
+
+タッチ操作の指の大きさを意識します。
+
+
+
+##まとめ
+大きく分けてですが、PCサイトの制作と比べてもこれはどの違いが出てきます。
+
+レスポンシブのサイトにしてもそのまま縮めるだけでは、これらの使いやすさは実現しません。
+
+ユーザビリティを意識した設計をしましょう。
-###どうする?
-CSS3のanimationを利用
-##タッチパネル操作で作る
-スマートホンはタッチ、フリックなど指を使って操作する。
-手の大きさ、小さな画面の中でも使いやすいことを意識する。
-
-###どうする?
-直感的に操作できる設計をする
-タッチ操作の指の大きさを意識する