今日は、LP制作について前回よりもさらに踏み込んだ内容を学びました。
デザインの方法はもちろん、フォントの使用許可範囲などLP制作において必ず覚えておかなければならないことも多く出てきました。
本日学んだ内容をしっかりと自分の中に落とし込み、次回のLP制作に取り組みたいです。
目次
1．デザインラフについて
■デザインラフ：完成のイメージを画像で作成するの
→コーディング（HTMLとCSS）を知らない人に見せるもの
→HTMLとCSSでコーディングした時と同じ見た目のモノを作成しましょう。
※（ワイヤーフレームを）どこまで作り込むかは案件ごとによって違う
作り込むか⇔ざっくり
2．気をつけること（復習）
■制作の順番
（1）最初はしっかりと「レイアウト」を考える
「余白」「グループ化」「アクセント」を意識
（2）次に「文字」に注目
「読みやすさ」を徹底的に意識
（3）最後に「配色」を見てみましょう。
「読みやすさ」を維持しつつ「作品の世界観」を守れているか
■レイアウトデザイン
・レイアウトの目的がは情報設計
・余白、近接、整列、反復、コントラストを意識
■文字デザイン
・視認性
・可読性
・判読性
3．コーディングに向けての注意点
■全般
・画面サイズ
・見出し（ｈ１～ｈ６）をどうするのかを意識する
・見出し（h1～ｈ６）があったら次は段落（ｐ）やリスト（ul li ol li）などの構成
・画像（img）リンク（a）や強調（strong,em）などの構成
・静止画像なので、補足事項は別途説明しておきましょう。
・セクショニングは後回しでも問題ない場合も
・リテイク（修正・出戻り・やり直し）に強いデータにしておく
■文字について
・どこを画像にするのかテキストにするのか？
・画像文字にするのかテキストにするのか？
・HTMLなら「img」CSSなら「background」
・テキストにすればWebサイトは軽くなり、画像が多ければWebページは重くなります。
■配色について
・配色はデザインラフですべて決定しましょう。
・16進数のカラーの表記なのかRGB表記なのかを統一しておきましょう。
・透過表現は、RGBAか、PNG画像の利用か決定しておきましょう
（補足）
・原則ばかりでつまらないデザインにならないように注意しよう
・複数提案を出してクライアントに選択肢を用意する
・綺麗な画像（構図や補正など）を用意しよう
・画像はトーンが同じものを選ぶと統一感がでる
4．フォントの種類と選び方
■フォントは大きく分けて4種類
- ゴシック体 ※視認性が高い
- 明朝体 ※可読性が高い
- デザインフォント
- 毛筆フォント
■フォントの選び方
・オールドタイプ：印刷用に作成されたフォント
・バンドルフォント：ＰＣやスマホに標準搭載されているフォント
・プロポーショナルフォント：同じデザインで異なる幅のフォント
※読みやすさを意識して作られている
・WEBフォント：サーバーに置かれているフォント
※このフォント以外はWEBサイトで表示されない
■フォントの特徴
・UDフォント（ユニバーサルデザインフォント）：
誰にとっても見やすいフォント
・デザインフォントはフリーフォントが多い
■フォントの注意点
フリーフォント
・無料で使用できる範囲はフォントによって異なる
→印刷・ウェブフォント・ゲームに内包・ロゴに使用など目的によっては使えないこともある。
→使用する際に著作権表示やリンクなど制作者を明記する必要があるフォントもある
WEBフォント（Adobeフォント等）
WEBフォントの使用は再販不可
○自社サイトでWEBフォントを使う
×受託して制作したウェブサイトでWEBフォントを利用する※ライセンス違反
→受託制作したサイトでWEBフォントを使う場合は、サイト所有者用に別途 Adobe Creative Cloud のサブスクリプションライセンスに入ってもらう必要になる。
5．配色について
■配色のコツ
（1）イメージカラーを使う
（2）真っ黒（＃000）を避ける
→純黒は目が疲れるから。
→実際にモニターで見ているものは、目にやさしくなるように微調整されている場合がある
（3）レイアウトデザインを考える時は色を使わない
（4）美しい配色バランスを考えよう
（5）配色には必ず意味と目的を持たせる
（参考）色の黄金比率 70：25：5
・ベースカラー
主に背景として使う色で、大きな面積を占めます。文章の可
読性を担保して、余白にも使いメインカラーとアクセントカ
ラーを引き立てます。
・メインカラー
サイト内で２番目に広い面積を占める色です。サイトのトンマ
ナを決め、ユーザーへの印象を大きく左右するカラーです。
※トンマナとはトーン（tone）＆マナー（manner）の略称。
・アクセントカラー
強調したい箇所に使うカラーで、ページ内のメリハリをつけます。
6．Webサイトについて
※今の段階で優先順位は低いため、まずはLPを作成できるようになる。
（未経験ですぐWebサイト作成をすることは稀であるため）
■Webサイト作成で必要なこと
・サイトマップを考える
・グローバルナビを考える
・新着情報等の日々の情報提供のコンテンツを考える
・スマートフォン対策を考える
7．その他
■ファーストビューについて
・魅力的に作成
・必要な情報を入れる
（例）商品名、会社名
■デザインラフと完成形について
・ワイヤーフレームとデザインラフは違いが出ても問題ないが、デザインラフと完成形は一緒になるように。
→実際の仕事はデザインラフをクライアントに確認してから作成に移る
→デザインラフと完成形が大きく異なるのは望ましくない
8．デザイン案 LP「夏季限定 青色のクリームソーダ」
目的
・青色のクリームソーダの購入
ターゲット
・Z世代・ミレニアル世代の女性（10代後半〜30代前半）
SNS映えを重視し、「かわいい」「特別感のあるスイーツ・ドリンク」に敏感な人たち
情報設計
・特徴：ラムネ味、まろやかアイスクリーム、人工着色料0の美しい青
デザイン
・爽やかな海をイメージさせる配色
（例）https://colorhunt.co/palette/4ed7f16fe6fca8f1fffffa8d
参考
https://rdlp.jp/archives/otherdesign/lp/221844