1限目：デザインラフについて
2限目：HTML/CSSをイメージしたレイアウト考案について
3限目~5限目：制作に向けての準備
今日教わったこと
・LP制作の順番は基本通りレイアウト、文字、配色
・レイアウトがダサいとデザインもダサい。余白、グループ化、アクセントを意識
・クライアントさんによってはワイヤーフレームを手書きやExcelで渡してくれたりするところも
・レイアウトの基本は面積
・コーディングに向けての注意点
①画面サイズはどうする？
PCモニターサイズは「1366px」が多いので特に理由がなければ「1280px」を画面サイズの基準として「960px～980px」をコンテンツ幅とすると無難
②見出し（h1～h6）をどうするのかを意識する
③見出し（h1～h6）があったら次は段落（p）やリスト（ulli olli）などの構成
④画像（img）リンク（a）や強調（strong,em）などの構成
⑤どこを画像にするのかテキストにするのか？
⑥画像文字にするのかテキストにするのか？崩したくないなら画像文字もあり
⑦HTMLなら「img」(文法上意味がある)CSSなら「background」(無いので装飾として使う)
⑧テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなる。重すぎると検索順位にも影響する。
・見出しの順番を間違えても表示はちゃんとされるけどSEO対策としてルールはきちんと守った記述をする
▼フォント
・フォントはすでにデザインされたもの。「何処で何をどういう風に使う。」は必ず整理する
・古くから良いと言われているフォント（オールドタイプ）のフォントはWebに対応していないことも。
・バンドルフォント：PCやスマホにインストールされてる標準フォント。これを使うことでどんな環境でもある程度統一された表示が担保される。
・プロポーショナルフォント：同じフォントでも太さなどを変えられる。
・Webフォント：あらかじめサーバー上にあるフォントを呼び出す方法。ただ、最近はバンドルフォントも進化してきているので通信環境に左右されることを踏まえて使いどころを考える必要がある。
・時短のためにコーディングしてるのではなく全部画像を積んでいるところもある。商品の知名度があるような大企業ならありなのかと。
・Mac環境でも確認した方がいいからMac持ってないならiPhoneで見比べる
・Adobeフォント：WEBフォントでの使用は再販不可なので、自分or自社サイトで使う分には問題ないが受託して制作したウェブサイトでWEBフォントを利用するのはライセンス違反となる。依頼元の会社がAdobeのIDを持っているならOK。
ただ画像化したものは二次配布に当たらないので、バナーとかで使っても大丈夫。なのでどうしても使いたければ画像化して使うのもあり。ただAdobeフォントの7割はGoogleフォントに居るからそっちも探す。
▼コーディングに向けての注意点 配色
①配色はデザインラフですべて決定する。コーディング宙に考えることはない。
②16進数のカラーの表記なのかRGB表記なのかを統一する。
③透過表現は、RGBAか、PNG画像の利用か決定する。
・仕事ではデザインラフは必ず2案以上出す。コーダー目指すなら2案出して2案とも作るのもいい。
・蛍光色は思ったより目が痛くて見づらいので使いどころに注意。
・配色には必ず意味と目的がある。
▼配色テクニック
①イメージカラーを使う
②真っ黒（#000）を避けるか否か？目にキツいとされてるが最近のモニターやデータでは目に優しくなるよう微調整されているので使いどころを考えるのがいい。コントラスト強いなと思ったら80くらいのグレーを使うのがおすすめ。あとベージュ
印刷業界では乾かないからあんまり使わないでという風潮。
③色を使わない。無彩色の「白」「黒」「灰」を使う。
④美しい配色バランス（3色がおすすめ）基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされてる
▼コーディングに向けての注意点 全般
①スクロールしても固定位置にいるナビゲーションやボタン、背景などはデザインラフ上だと静止画像なので、補足事項は別途説明する。
②実はセクショニングは後回しでも良い？
セクションを意味するタグ（header,nav,maiｎ,section,footerなど）はHTML5からの登場で、それ以前は全て「div」だったので、デザインラフの段階では「囲ってる箱」を意識すればラフ自体は成立する。分かんないなら無理に使わない。
③リテイク（修正・出戻り・やり直し）に強いデータにしておく。
【ただし、つまらないデザインにならないように注意する！！】
・タグの意識で考えすぎない。
・悩んだらデザインの基本レイアウト、文字、配色から改めて見直す
・課題ではないが、コーダーを意識するならWebサイトを作ると次のステップとして良い
コメント