日: 2021年3月22日

学科 レイアウトデザイン基礎③

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎③
課題制作 

2限目
学科 レイアウトデザイン基礎③
デザインカンプについて

3限目
学科 レイアウトデザイン基礎③
DTPとWEBの違い

4限目
学科 レイアウトデザイン基礎③
課題制作 

5限目
学科 レイアウトデザイン基礎③
課題制作

オリジナルサイト課題

3月22日（月）「ワイヤーフレーム」1限までに提出、「カンプPC」制作
3月23日（火）「カンプPC&SP」制作→5限までに提出
3月24日（水）発表&修正、「HTML設計図」5限までに提出

▼ワイヤーフレームの例（https://web-kanji.com/より）
デザイン要素や写真はまだ入れません。内容の整理が目的です！

【作品】オリジナルサイト_20210322_ワイヤーフレーム

本日のテーマ

PCのデザインカンプに取り掛かりましょう。
「配置」「文字」「配色」を意識してデザインしましょう

①-4.デザインカンプ(PC)

チラシ制作を思い出して、「配置」「文字」「配色」について考えてみましょう。

【配置＝レイアウト】
余白・揃える・まとめる

【文字】
フォントの種類・大きさ・エリア

※IllustratorやPhotoshopの単位の設定をpxにしてから作業を行うとスムーズです。

【配色】
ベース・メイン・アクセント、読みやすさ

DTPデザインとの違いは、ファイルの大きさ（特に高さ）が自由なこと、ファーストビューが重要視されること、後から変更ができることです。
この要素を意識してデザインしてみましょう。

カンプ段階ではファーストビューは高さ550px程度にしましょう。

文字の指定例

・フォントカラー　#333333
・フォントサイズ
　記事タイトル：40px
　大見出し：32px
　小見出し：24px
　本文：16px程度(14〜18px)
・行間　1.5〜2.0
・一行に30文字〜50文字

CSSでの指定

body{
    color: #333333;
    font-size: 16px;
    line-height: 1.7;
}
h1{
    font-size: 40px;
}
h2{
    font-size: 32px;
}
h3{
    font-size: 24px;
}

【提出のファイル名】
work_xxxxx_20210323_pc.jpg

jpgファイルをブラウザで見て、ファーストビューの見え方・文字の大きさを確認しましょう。

【作品】オリジナルサイト_20210323_デザインカンプ