湊 有加里 先生
アジェンダ
1限目
学科 ユーザーインターフェイス基礎④
デザインラフについて
2限目
学科 ユーザーインターフェイス基礎④
HTML/CSSをイメージしたレイアウト考案について
3限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備
4限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備
5限目
学科 ユーザーインターフェイス基礎④
制作に向けての準備
ポイント
- 訓練授業ではデザインラフ（カンプ）では自分がコーディング可能なレイアウトか注意する（画像への文字のオーバーレイ等）→スマホでのレイアウトを考慮
- クライアントと合意したデザインは1ミリも変えずにHTML、CSSで再現する。
- 「余白」「グループ化」「アクセント」を意識
- 文字の「読みやすさ」を徹底的に意識
- 配色「読みやすさ」
- 情報の整理とは、情報の構造や情報同士の関係を明確にする
- 「面積の意識」
- 注意点① 画面サイズ 「１２８０ｐｘ」を画面サイズの基準として「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅とすると無難 （ショッピング店の推奨サイズ）
- 注意点② 見出し（ｈ１～ｈ６）
- 注意点③次は段落（ｐ）やリスト（ul li ol li）構成
- 注意点④ 画像（img）リンク（a）や強調（strong,em）
- ボックス/ ボックス（角丸）/ 罫線/ 点線（破線）/帯/アーチ（波）/ 居合い（斜め）/ハチマキ（ヘッダー）
- 注意点① どこを画像にするのかテキストにするのか？
- 注意点② 画像文字にするのかテキストにするのか？
- 注意点③ HTMLなら「img」(文法として意味)、CSSなら「background」（意味は必要無い）
- 注意点④ テキスト、画像（サイトの表示スピードは検索順位への評価にも影響するとgoogleも正式に公表）
- フォントの歴史(Webサイトの歴史と印刷業界の歴史の長さの違い) オールドタイプ/バンドルフォント/プロポーショナルフォント/Webフォント
- ゴシック体/明朝体/デザインフォント(+UDフォント フリーフォント)/毛筆フォント ※各デザインフォントはライセンス注意
- おすすめ Noto フォント「Noto Sans」「Noto Serif」
- 透過表現 CSSで「 例：rgba(255,0,0,0.7) 」という記載・PNG透過で
- デザインは複数提案を基本とする。（レイアウト変更、フォント変更）
- 配色には意味が必要
- 真っ黒（#000）を避けるか否か →純黒は目にキツイ、目が疲れる →最近のモニターは目にやさしくなるように微調整されている場合
- 「白」「黒」「灰」の「無彩色」を上手く活用する
- ベースカラー/メインカラー（サブカラー）/アクセントカラー
- コーディングに向けての注意点
- 注意点① 静止画像なので、補足事項は別途説明
- 注意点② 実はセクショニングは後回し HTML５からの登場で、それ以前は全て「div」なのでdivで問題はない
- 注意点③ リテイク（修正・出戻り・やり直し）に強いデータ 実務では「リテイクに強い」事も重要
- 制作のコツは、最初は癖の無いフォントと色で「①レイアウト」に集中し作成を進めましょう。ある程度形になったら、改めて「①レイアウト」を見直していきましょう。しっかりと違和感を消せるように調整が出来たら、次に「②フォント」を変えてみましょう。そして最後に「③カラー」
- Webサイト ① サイトマップ ② グローバルナビ（ハンバーガーメニュー/LPには不要） ③ 新着情報等のコンテンツ 番外編 スマートフォン対策
- 同系統色でのコーディングはCSSでRGBAより、HSL関数が便利（イラレはHSBなので注意）→CSSでは統一すること
幅によるレイアウト変更（要素の順番）
- 塊（箱）、かこみを意識してコーディングする
- ul,ol自体も箱なので過剰なdivは要らない
- 画像部分も一旦テキストで文字起こししておくと良い。コーディング中の全角半角変換で無駄なエラー取りを省ける。
コメント