1限目：RWDの歴史・基本設定Viewportについて
2限目：Media Queries・UI/UXについて
3限目~5限目：課題制作
この日はレスポンシブデザインについて教わった後に、LP用の文言を考えたり素材を集めたりする時間に充てられました。
今日教わったこと
・1/10の成績考査の日にXDの授業もあって、その日にワイヤーフレームの提出がある
・スマホ対応はBox modelとそれに対してMedia Queries、Viewport、UI/UXが分かっていればいい
・Viewportは以下の1行を入れておけばスマホ対応の基準の形ができる。
＜meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>
・↑これを入れれば「どんなデバイスでも画面幅100％の比率は一緒ですよ」と指示できる。
・Media QueriesはCSSをデバイスの画面サイズごとに内容を変えられるので、初期値をきちんと把握しておく。整理整頓する、複雑にしない。バックアップは必須。
「max-width」の場合は大きいサイズから記載する。メディアクエリは同じものだけ使う、ブレイクポイントは同じ数値で切り分ける(パーツごとで変えない)、記述箇所はセレクタの直下が好ましい、プロパティと値は出来るだけ統一する(マージン幅の指定を上か下にくっつけるのか統一しないとこんがらがる)、「.css」のファイルは1ファイルが理想(リセットCSSとスタイルCSSを一緒にした方が読み込みも早い)、インデント・{}をしっかり揃える、そもそもHTML文書に無理が無いのかを確認。
＜p＞タグは特に指定しないと文字サイズが16pxになる。CSSの点数記述ルールを確認しておく
・UI/UXはターゲット層に合わせて自分の体験という経験を活かす。タッチデバイスを意識して「display :block;」を活用してボタン領域を広く持つ。ポインターが無いのでリンクの色を統一するなどして分かりやすくする。リンクの付いたバナーデザインはより分かりやすく。迷子にならないように分かりやすい導線を作る。1クリックの動作で1割のユーザーが離れるといわれているので無駄なページ移動を作らない。ファーストビューで最優先のコンテンツを置いてフッターで各ページへ誘導する。画像の重さや動きの入れすぎ（JavaScript）にも気を付ける。HTML/CSSの記述ミスも表示スピードの低下につながるので気を付ける。
・Webの技術は柔軟に対応する必要がある。
・LPは求人でも需要が高い。LP、バナー、商品の説明の写真は仕事にもよるけど需要が高い
・大きい方から作った方がいいのか、小さい方がいいのかに関しては技術的には小さい方から作った方が楽だけど実務では大きい方から作ることの方が多い。
・LPはチラシのWeb版と思っていた方が分かりやすいかも。
コメント