マルチデバイス対応の教科書②
今日のテーマ
Box modelについて（RWD）
Box model
横幅の合計値をデバイスの画面幅（100%）を超えなければ、横スクロールのバーは出ません！
【ボックスモデルに関わるセレクタ】
☑ width ☑ padding ☑ margin ☑ border☑ height
【ボックスをレイアウトさせるセレクタ】
☑ float ☑ clear ☑ position ☑ overflow ☑ display
Viewport
このMetaタグを入れると、デバイスの画面サイズに合わせた数値で表示されるようになります。
・いまのところパターンは数えるほど
・コピペして使う事が多いのか現状
・実機検証を最後に忘れずに
Media Queries
CSSをデバイスの画面サイズ毎に内容を変えられます。
・使うコツは整理整頓
・初期値の把握
・複雑にしない
【制作作業時のコツ】
バックアップ必須！（復活の呪文を唱えられるように）
行き当たりばったり絶対ダメよ～！
UI/UX
「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。
・タッチデバイスを意識したボタン（リンク）
・迷子にさせない導線
・ページの表示スピード対策「画像」
・ページの表示スピード対策「プログラム」
・使い易さの追求
タッチデバイスを意識したボタン（リンク）
■ タッチデバイスではボタンの領域を広く取りましょう。 ～の要素タグはインライン要素になります。 その為、幅と高さを持たせる為に「 display :block;」を上手く活用してみましょう。
■ポインターが無いので、リンク箇所のデザインルールを変えてみましょう。 サイト全体でテキストリンクの箇所は「このデザイン」というルールを統一しリンクが付いていることを 解りやすくしてみましょう。
■リンクの付いたバナーデザインはより解りやすく 画像で作るバナーは、よりクリックしたら詳しい説明のページへ飛んでいくと解りやすく デザインしてみましょう。
迷子にさせない導線
■ 画面の面積が少ないデバイスでは、解りやすい導線を組みましょう。
サイト設計の段階で、無駄なリンク無駄なページは排除するのが理想です。
PCの特性、スマートフォンの特性を考えレイアウトを設計してみましょう。
■ 1クリックの動作で、1割のユーザーが離れると言われています。
無駄なページ移動はお客様が離れるだけです。スマートフォンやタブレットで縦に長いページは、
そんなにストレスを感じさせないハズなので、1ページの内容（ストーリー）を充実させましょう。
■ ファーストビューで「最優先のコンテンツ」フッターで「各ページ」へ
ページを開いて最初に見えるのが「目的の内容」⇒深く読み進めて「次への誘導」
そこに興味のない方には「他の興味」へご案内出来るようにしてみましょう。
ページの表示スピード対策「画像」
■ Retinaディスプレイや４Kテレビ等々への対応
Retinaディスプレイの場合解像度が2倍になるので、2倍のサイズの画像を用意し50%のサイズで指定をして
画像は表示させましょう。ただし容量には要注意です！
■ imgとbackground-imageの違いを確認しましょう。
「img」要素はHTMLの文章構造で存在する意味が必要になります。
「background-image」は背景のCSSなので、文法上の意味はありません。上手く使い分けてみましょう。
■Webアイコンや「canvas」「SVG」を上手く取り入れましょう
「jpg,gif,png」以外の画像表示やコンテンツが実装出来る段階に入って来ているので、
上手く取り入れてみましょう。
ただし、実機検証やブラウザ依存には要注意です！
ページの表示スピード対策「プログラム」
■ 動的プログラムは表示スピードを低下させます。
JavaScriptはとても便利！…ですが、プログラムとしてはページの表示速度を低下させます。
ユーザビリティ、アクセシビリティという部分を考えて最低限の利用方法を考えてみましょう。
■ CMS等のテンプレートについて
簡単にWEBサイトを作成してくれるというツールがあったら理想的ですが、便利な分「何かしらの処理」を
行われている場合、表示スピードに影響します。良く確認をしてから利用していきましょう。
■ 誤ったプログラムも表示スピードの低下に繋がります。
HTMLやCSSの記述が誤っていてもブラウザは独自解釈して表示してくれます。
これも表示スピードの低下に影響しますし、SEO（検索エンジン対策）にもマイナスの影響がでます。
検証サイト等を利用し、正しく記述できるよう頑張りましょう！
使い易さの追求
■ WEBフォントの利用
日本語に対応したWEBフォントも多く出てきました。無料で使える「源ノ角ゴシック」「源ノ明朝」が
国内でも多く広まって来ています。上手く取り入れてみましょう。
■ jQuery の利用
HTML5やCSS3でまだ実現できない動きはまだまだあります。
ページを重くするという問題はありますが、それよりも優先すべき「使い易さの追求」なのであれば、
上手くjQueryを取り入れてみましょう。
■ Googleアナリティクスの利用
ページのアクセス数や表示スピード、滞在時間等のデータを取得出来るGoogleアナリティクスは無料で
利用することが出来ます。数字から解析しより良いコンテンツを作成しましょう。
まとめ
Webの技術は柔軟に対応しましょう。
昨今では、スマホ対応は出来て当たり前になってきました。
また様々な書き方があり、参考書や技術サイトや動画で、様々な言われ方
をしています。
まずは、仕組みの理解をして簡単でシンプルな方法で実装してみましょう。
お仕事の現場で、様々な使い方をしている場合があります。
まず、１つを理解しておけばそこから柔軟に対応していきましょう。
郷に入っては郷に従えです。
情報や流行りや時代背景を考えると、コーダーのお仕事で、いまデザイ
ナーに求められるのは、「柔軟性」です。
RWD 対応のサイトについて
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入