前回の復習
本日の訓練内容
「デザインの考え方」の教科書⑦
Webページの作成②
ワイヤーフレームを「デザインラフ」として仕上げていく。
実際のWebページの見た目を再現する
デザインラフとは？
コーディングを知らない人に見せるもの
ワンポイントアドバイス
- 最初はしっかりと」レイアウト」を考える
「余白」「グループ化」「アクセント」を意識 - 次に「文字」に注目
「読みやすさ」を徹底的に意識 - 最後に「配色」を見る
「読みやすさ」をいじしつつ「作品の世界観」を守れているか
れいあうとでざいんのおさらい
レイアウトの目的は情報の明確化
それぞれの「面積の意識」をしてみる。
レイアウトの5つの基本原則
- 余白を取る
- そろえる
- グループ化する
- 強弱をつける
- 繰り返す
コーディングに向けての注意点①
注意点① 画面サイズはどうする？
PC版ページの作成→スマホ版ページの作成
スマホ版ページの作成→PC版ページの作成
PC版ページの画面幅の目安「1280px」
注意点② 見出し（h1~h6）をどうするのかを意識する
h1は原則ページに1つ（複数つけることも可能ではある）
大見出しに対する小見出し順序と内容を意識して作成する。
小見出しはh1から順に使用し、 h3はh2の下位に存在するなどの構造が必要
注意点③ 見出し（h1〜h6）ふぁあったら次は段落（p）やリスト（ul, ll, ol, liなど）の構成
内容にはかならず<p>などのタグをつける。
注意点④ 画像（img）リンク(a)や強調（strong, em）などの構成
レイアウト表現・ワンポイントテクニック
- ボックス
- ボックス（角丸）
- 罫線
- 転線（破線）
- 帯
- アーチ（波）
- 居合（斜め）
- 鉢巻（ヘッダー）
文字デザインのおさらい
- 視認性
- 可読性
- 判読性
コーディングに向けての注意点②
注意点① どこを画像にするのかテキストにするのか
SEO対策や読み上げブラウザへの対応のために積極的にCSSで表現する。
imgタグにはalt属性の付与が必須なので画像で全てをひょうげんする場合にはalt属性をしっかり入力する。
注意点② 画像文字にするのかテキストにするのか？
注意点③ htmlなら「img」、CSSなら「background」
注意点④ テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる
ふぉんとは既にでざいんされたもの
フォントの歴史と選び方と考えかた
- オールドタイプ
- バンドルフォント（標準フォント）
- プロポーショナルフォント
文字ごとに固有の幅を持ったフォント - Webフォント
予めサーバー上・インターネット上に置かれたフォントを呼び出して表示するフォント。OSやデバイスごとの表示差が出ないというメリットがあるが、デバイスが持つフォントを利用する場合よりも表示に時間がかかるというデメリットがある。
コーディングに向けての注意点③
注意点① 配色はデザインラフですべて決定する。
注意点② カラー表記を統一する（16進数／RGB）
注意点③ 透過表現はRGBAかPNG画像利用かを決定しておく
クライアント（発注者）さまへは複数提案を出して選択肢を用意する。
デザインラフはかならず2種類以上作成する。
「配色」には必ず意味と目的を
主な色の特徴
配色テクニック① イメージカラーを使う
配色テクニック② 真っ黒（#000）を避けるか否か
配色テクニック③ 色を使わない
ワイヤーフレームやデザインカンプの作成などは白黒で作成することによりレイアウトデザインに集中することができる。
配色テクニック④ 美しい配色バランス（3色＋無彩色）
色の黄金比率70:25:5
- ベースカラー
- メインカラー（サブカラー）
- アクセントカラー
配色の種類・ワンポイントテクニック
配色の印象・ワンポイントテクニック
コーディングに向けての注意点④
注意点①静止画像なので、補足事項は別途説明しておく
位置固定のナビゲーションなどは1枚の画像で表現が難しい。
Adibe XDで表現する方法などもある。
注意点② セク署にんぐは後回しでもよい
注意点③ リテイク（修正・出戻り・やり直し）に強いデータにしておく。
「スマートオブジェクト化」した非破壊データの利用、アウトライン化前データの保存
悩んだらデザインの基本から見直す
Webサイトについて
Webサイトで必要なもの① サイトマップを考える
Webサイトで必要なもの② グローバルナビを考える
Webサイトで必要なもの③新着情報等の日々の情報提供のコンテンツを考える
Webサイトで必要なもの番外編 スマートフォン対策を考える
STEP② デザインラフ
コーディングを意識したデザインラフを作成する
