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

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎③
デザインラフについて

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

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

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

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

本日のテーマ

「配置」「文字」「配色」を意識してデザインしましょう

①-4.デザインラフ

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

【配置＝レイアウト】

【文字】

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

【配色】

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

ラフ段階ではファーストビューは高さ600px程度にしましょう。

文字の指定例

・フォントカラー　#333333
・フォントサイズ
　記事タイトル：40px
　大見出し：32px
　小見出し：24px
　本文：16px以上
・行間　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;
}

【オリジナルサイト】20210218_デザインラフ

①-5.コーディングの設計図

コーディングの前にラフ上でマークアップを書いてみましょう。

１、ラフをJPGで書き出し、そのJPGをPhotoshopで開きます。
２、画像のレイヤーを透明度90%にする。
３、タグを書き込んでいきましょう。
４、別名で保存

どのタグが適切か考えましょう（使わないタグがあってもOKです）

▼レイアウトに関するタグ

<header>
<main>
<aside>
<footer>
<nav>
<section>
<article>
▼意味のある主なタグ

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<p>
<ul><li>
<ol><li>
<dl><dt><dd>
<table><tr><th><td>
<img>
▼必要になった時に使うタグ

<div>
<span>

意味がわからなくなったら下記のページを参考に！

htmlの記述【body】

【オリジナルサイト】20210219_設計図