振り返り
たかだ
色の黄金比は「70%：25%：5%」と知れたので、この比率を意識してイメージカラーなどを決めていきたいと思った。今回覚えたレイアウト表現をどんどん使用していこうと思う。
学びまとめ
コーディングに向けての注意点
- 「１２８０ｐｘ」を画面サイズの基準として「９６０ｐｘ～９８０ｐｘ」をコンテンツ幅とすると無難
- 現時点でのＥＣサイトの楽天市場やヤフーショッピング店の推奨サイズが「９６０ｐｘ～９８０ｐｘ」になる
- １ページにｈ１は一つがＳＥＯ的にも解り易い
- ｈ２やｈ３の構成も大見出し（ｈ１）に対して小見出し（ｈ２以下）という順序と内容をしっかりと意識して作成する
- 見出し（ｈ１～ｈ６）があったら必ず、その内容が必要になる
- 見出しの次に段落（ｐ）やリスト（ulli ol li）などの内容を入れていく
- 画像よりテキストの方がSEO対策やユーザビリティ・アクセシビリティとして有効
- CSSで実現可能なデザインであれば、積極的にCSSで表現する
- 例えば、ロゴの部分の文字はデバイス環境によってフォントが変化しては都合が悪い場合があるが、そんな時は画像文字としてデザインすると良い
- HTMLなら「img」CSSなら「background」
- 「img」はHTMLなので、文法として意味が必要
- 逆に「background」ならCSSで文法としての意味は必要無い
- テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる
- 配色はデザインラフですべて決定する
- コーディングの時は出来上がったデザインから「スポイトツール」で正確なカラーコードを使う
- 透過表現は、RGBAか、PNG画像の利用か決定しておく
- デザインラフは必ず２提案以上作るのが制作のポイント
- 静止画像なので、補足事項は別途説明しておく
- スマートオブジェクト化し非破壊データの利用、アウトライン化のタイミングなどしっかりと作成をする
レイアウト表現・ワンポイントテクニック
- ボックスボックス（角丸）
- 罫線点線（破線）
- 帯 アーチ（波）
- 居合い（斜め）
- ハチマキ（ヘッダー）
配色テクニック
イメージカラーを使う
Webページのイメージを大きく左右するメインカラーは一番初めに決める。メインカラーの傾向は、文字が読みやすいなどの可読性の問題から、明度を低くした色が使用しやすいとされる。また、サイトに使うロゴのカラーをメインカラーに使用しているサイトも多く見かける。
美しい配色バランス（3色がおすすめ）
配色の効果は、色相、明度、彩度、分量（面積）、配置によって変わる。これらの要素をうまくコントロールしながら組み合わせることで、情報を目立たせたり、イメージを表現したり、雰囲気のある空間を演出したりと目的に合わせた効果を発揮することができる。一般的に、基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされてる。メインカラー・サブカラー・アクセントカラーを決める。
コメント