学科レイアウトデザイン基礎 – ページ 3 – DEAUアカデミー WEBデザイナー養成(午前)科

-本日のアジェンダ-

1限目
学科レイアウトデザイン基礎⑤
デザインカンプの講評

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

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

4限目
学科レイアウトデザイン基礎⑤
マークアップについて

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

コーディングに向けて手順を確認しましょう

ラフを修正でき次第、下記フォルダにアップしてください。

【作品】オリジナルサイト20210324カンプ完成

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

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

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

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

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

<header>
<main>
<footer>
<nav>
<section>

▼意味のある主なタグ

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<p>
<ul><li>
<ol><li>
<dl><dt><dd>
<table><tr><th><td>
<img>

▼CSSの記述の際、必要になった時に使うタグ

<div> ・・・ブロック要素
<span> ・・・インライン要素

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

【作品】オリジナルサイト_20210324_設計図

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

2限目
学科レイアウトデザイン基礎④
スマホのカンプについて

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

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

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

PCとSPのデザインラフを完成させましょう。

①-5.スマホラフ

今回は、スマホラフを幅414pxで作成しましょう。

【覚えておきましょう！】
画像を書き出す際は2〜3倍にします。写真やアイコンは非破壊データ（パスやスマートオブジェクト化）にして起きましょう。

【作品】オリジナルサイト_20210323_デザインカンプ
※PCとSPのjpgを提出してください。

要素をグループ化しましょう。画像とそのテキストの関係性の様に、関連する項目は近くに置く。別の項目とは距離を取る様に。

左寄せ、中央寄せ、右寄せ。揃えるとこを決めましょう。
頭を揃えましょう。

同じレベルの物はデザインにルールを持たせましょう。

文字の大きさや配色に強弱を付けましょう。
タイトルと本文のジャンプ率を意識する。色の組み合わせは読みやすいコントラストにしましょう。（例：黄色に白は避ける。）

ユーザーの目線の動きを意識しましょう。左から右へ、上から下へ目線が動きます。ファーストビューでサイトの要点が伝わる様に。