本日のアジェンダ
1限目
学科 ECサイトデザイン基礎⑤
デザインラフとは？
2限目
学科 ECサイトデザイン基礎⑤
コーディングに向けての注意点
3限目
学科 ECサイトデザイン基礎⑤
XDの活用について
4限目
学科 ECサイトデザイン基礎⑤
課題制作
5限目
学科 ECサイトデザイン基礎⑤
課題制作
本日のテーマ
コーディングの準備をしましょう
本日のレポート
ワイヤーフレームからデザインラフへ
ワイヤーフレームを「デザインラフ」として仕上げていきましょう。
たたき台のワイヤーフレームが決定したら、実際のサイトのイメージに近付けていく作業を行います。
実際のWebページの見た目を再現した「デザインラフ」をしっかりと作成していきましょう。
デザインラフとは？
コーディング（HTMLとCSS）を知らない人に見せるもの。
HTMLとCSSでコーディングした時と同じ見た目のモノを作成しましょう。
実際のWebサイトにするのには、HTMLとCSSでコーディングをする必要がありますが、クライアント（発注者）さまに、こんな感じのデザインにしましょうか？ こんな感じではいかがですか？ という感じで、完成のイメージを画像で作成するのが、「デザインラフ」の役割です。
逆に「コーディング（HTML・CSSにする）」については、デザインラフをクライアント（発注者）さまに見せて、OKを頂いたら行う作業になります。
要するに完成イメージをしっかりとクライアント（発注者）さまと共有して、 「コーディング（HTML・CSSにする）」 は、「デザインラフ」の見た目をそのまま形にする作業になります。
レイアウトの５つの基本原則
情報の構造を明確にするには、「余白をとる」「揃える」「グループ化する」「強弱をつける」「繰り返す」という法則を守る必要があります。
まず全体の圧迫感をなくすために、紙面に「余白」をとります。また従属関係・並列関係を明確化するために、各要素を「揃え、グループ化し、強弱をつけ」ます。強弱をつけることで、優先度も明示させます。
そして、一定のルールの下で、広告全体を通じて５つの法則を守り続け「繰り返す」ことで、従属関係・並列関係がより明確になります。一見手間のかかる作業に思えるかもしれませんが、ルールを一度覚えれば、時間の短縮につながります。
コーディングに向けての注意点
注意点①
- 画面サイズの基準
PCを基準に考えるなら、画面幅は1280px、コンテンツ幅は960～980pxが無難（楽天・Yahoo!などもこのサイズ） - 見出しタグ（h1～h6）の使い方
ページ最上部にはh1（基本1つ）を使用
h2 → h3と階層を意識して構成
見出しはHTML文法に沿って正しく使うことが重要 - 見出しの下には必ず内容を
hタグの次にはpタグ（段落）やリスト（ul・ol）などで内容を補足
構文に不安があればタグチェッカーを活用 - 装飾タグの使い方
img（画像）, a（リンク）, strong/em（強調）はpタグやリスト内に入れて使う
インライン要素として、文の中で自然に配置する
注意点②
- 画像 or テキストの判断
基本はテキスト優先（SEO・ユーザビリティ・表示速度に有利）。CSSで再現可能なデザインなら、極力テキスト＋CSSで表現する。 - 画像文字の使いどころ
ロゴなど、フォントの再現性が重要な部分は画像化してもOK。ただし必要最小限に。 - imgとbackgroundの使い分け
意味を持つ画像（写真・イラスト）→ HTMLのimgタグ
装飾目的の画像（背景柄など）→ CSSのbackground - 画像はページを重くする
画像が多いと表示速度が落ち、SEOにも悪影響。できるだけテキスト主体で軽量化を意識することが重要。
注意点③
- 配色はデザインラフ段階で確定する
コーディング時に色を決めるのはNG。ラフ段階で配色を完全に決定しておくこと。 - カラーコードは表記を統一し、正確に記録
16進数（例：#ff0000） または RGB（例：rgb(255,0,0)） のどちらかに統一
スポイトツールなどで正確なコードを取得して控える - 透過表現は事前に方式を決めておく
CSSのRGBA か、PNG画像かを用途に応じて使い分ける
事前にどちらを使うかイメージして設計しておく - デザインラフは必ず複数案を作る
クライアントとの認識ずれを防ぐため、最低2案以上用意するのが基本
レイアウト・文字・配色の組み合わせを変えて複数提案し、理想に近づけていくのがデザイナーの役割
注意点④
- 静止画像では伝わりにくい動きを補足する
スクロール固定・動きのある要素などは画像だけでは伝わらないため、言葉や別資料で補足説明を。Adobe XDなどのツール活用も有効。 - セクショニング（構造タグ）は後回しでもOK
デザインラフでは、header・nav・sectionなどのタグ設計は厳密でなくてOK。構造を「箱」として意識しておけば、マークアップ時に対応可能。 - リテイクに強いデータを作る
修正は避けられないため、スマートオブジェクト・非破壊編集・アウトライン前保存など、柔軟に修正できる作り方が重要。
ただし、地味なだけのデザインにならないよう注意。目的に応じてお洒落な画像・イラスト・写真を効果的に使う。
※ECサイトなど媒体によっては、画像中心の構成が必要なケースもあるので、目的に応じて判断すること。
