2026年4月7日　学科 ECサイトデザイン基礎⑤

2026年7月
月	火	水	木	金	土	日
	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

-本日のアジェンダ-

1限目
学科 ECサイトデザイン基礎⑤
Webサイト・LPについて

2限目
学科 ECサイトデザイン基礎⑤
ワイヤーフレームとは

3限目
学科 ECサイトデザイン基礎⑤
デザインラフとは

4限目
学科 ECサイトデザイン基礎⑤
コーディングに向けての注意点

5限目
学科 ECサイトデザイン基礎⑤
XDの活用について

５W１H
When（いつ）
Where（どこで）
Who（だれが）
What（何を）
Why（なぜ）
How（どのように）

売り込み＝キャンペーン・フェア　お得情報　PR

確実な有力顧客を絞ってアピールしていく。

ワイヤーフレームとは？

■参考サイト
https://www.plan-b.co.jp/blog/creative/53214/?_ga=2.184060261.270517005.1775526767-1894434315.1775526767

モノクロでクライアントのヒアリングしたものを第一段階で形にする→ワイヤーフレーム

色を付けたり、デザイン要素が加わったもの→モックアップ

ボタンや動きが加わったもの→プロトタイプ

■掴み
構成と売り込み方法を分析する。
店舗＝入口のマネキン＝掴み

■説明
説明は長くならずうまく要約する。
要点を絞って、重要なことはしっかり伝え、売り込みもしっかり。

■魅せる
売り込む商品をしっかり勉強して魅せ方を考える。

・目的を明確に。目的に合ったアピール方法を。
・見てもらうのか、来てもらうのか？実績紹介なのか？
・説明不足にならないようにクレームを事前に防ぐ魅せ方を考える。

掴み→説明→魅せる→目的まで作成したら
今度は逆に考えて確認する。
目的→魅せる→説明→掴み
矛盾がないか確認。

■知ってもらう
→掴み→説明→魅せる→目的

絞り込むことによって、コアな購買意欲のある顧客へ満足してもらうように集める。
確実な顧客へ絞り込む。へもっていき

第一印象から知ってもらう（情報）へ持っていく。

①掴み

■未来を明確に魅せる
「現在」今どんな事を行っているのか？
「過去」今まではどうだったのか？
「未来」これからどうなるのか？

■キラースペース
そのページの象徴となる文言・写真

■感情が動くような、わぁ～、いいなぁ！など、心が動くようなページ作りを目指す。目的への良い印象を伝える。

②説明

■自己満足にならないために
５W１Hを明確に伝える。

説明をしっかりしなければクレームにつながる。
事前の報告をしっかり明確に。

③魅せる

アピールポイント
顧客に刺さるポイント

④目的

1アクションで1割の顧客が離れるといわれている。
外部リンクの多用は避ける。

見込み客に対してどういうアクションをして欲しいのか？
いかにスムーズに流入してもらうかが大切。
ストレスなくお客様を丁寧に誘導する。

→後から変更・追加とならないように事前にしっかり最終出来上がりまで詰めて作成することを心掛ける。

クレームは起こりえることだけど、クレームにならない事前の先回り・準備が大切。徹底して製作すること。

◇コピーライトは抑止力。

デザイナーの力量・基本はレイアウトにあり！

面積が重要！大きければそれだけ目に入りやすい。
面積を意識して、一番最初に目に入るものは何か？を一番に考える。

① 画面サイズはどうする？

②見出し（ｈ１～ｈ６）をどうするのかを意識する

③ 見出し（h1～ｈ６）があったら次は段落（ｐ）やリスト（ul li ol li）などの構成

④ 画像（img）リンク（a）や強調（strong,em）などの構成

Googleから認識されるような客観性を。

■フォント

★一般的な大きさについて
・Webサイトでは16px　（goole 推奨）
・印刷物では12pt

16px=12pt

※おさらい

オールドタイプに
インターネットが開発される前からの印刷業界で使われてきたフォント

バンドルフォント
PCに初期搭載されているフォント
適宜進化している。

プロポーショナルフォント
表現手法の幅が広い。太字・装飾などの変更が可能。

Webフォント
あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォント

Adobe Fonts・WEBフォント使用時の注意

WEBフォントでの使用は再販不可
・自社サイトでWEBフォントを使う分には問題ありませんが、その企業が受託して制作したウェブサイトでWEBフォントを利用するのはライセンス違反となります。

受託制作したサイトでWEBフォントを使う場合サイト所有者用に別途 Adobe Creative Cloud のサブスクリプションライセンスが必要となります。

※
①自社が契約→自分の会社制作物ならOK
②a社から依頼このフォントを使って！→アドビフォントだった場合、a社が契約していたらOK

※画像左側が有料フォント

・Noto フォント「Noto Sans」「Noto Serif」→おすすめ
・小塚明朝・小塚ゴシック→年代によりそれぞれ違うため見え方に注意
・メイリオ・MS フォント→ちょっとダサい。。。（？）

可視性を最重要に加工する。

配色イメージ
青→リンク　進め
黄→注意　金額など
赤→止まれ　強い引付

制作物の作る順番で一番最初に来るのはロゴ
そのロゴの配色は最も大切。意味を持たせる。

■黒という色
グラフィックデザインの世界で使ってはいけない色の常識
「真っ黒#000(Black)」
→純黒は目にキツイ、目が疲れるから
現在では目に優しくなっているので状況に合わせて使う。

※④一般的に、基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされている。
↓

リテイクに強い作業をする！
いつでも制作過程の途中に戻れる作業手順を残しておく。

②グローバルナビゲーションとは↓

②売り上げに直結する大切な部分。スムーズに情報に飛べる事。
③日々動いていることを示す。

LP（ランディングページ）とは

LP（ランディングページ）とは、一言で言うと
「特定のアクション（注文や問い合わせなど）をしてもらうための、1枚のWebページ」のことです。

通常のWebサイトが「案内所」のように色々なページへ誘導するのに対し、LPは「ひとりの営業マン」のような役割を持ちます。

LPの3つの特徴
1ページ完結: 他のページへのリンクを極力減らし、最後まで読ませる工夫がされています。

ストーリー構成: 悩みの共感から解決策の提示まで、注文したくなる流れで作られています。
目立つボタン: 「今すぐ購入」などのボタン（CTAボタン：Call To Action Button）が強調されています。

参考サイト

ワイヤーフレームとは

ページを構成する画像やテキストなどの要素を、「どこに」「どのように」配置するか表した設計図です。単に「ワイヤー」と呼ぶこともあります。
色を使わず、白黒（グレースケール）で作成します。

Webサイトの目的に沿って、「どの情報を」「どこに」「どのように配置するか」をチーム内やクライアントと共有するための重要なものです。
デザインを決める前の検討のために作るもので、サイトの設計図となります。

参考サイト

制作の流れで、ワイヤーフレームの次はデザインラフを提出する事があります。サイトの完成イメージを画像でお客様に見せるためです。
ここでOKが出たらコーディングに進みます。

デザインラフ(デザインカンプ)とは

実際の配色やフォント、画像を入れて、完成時のLPの見た目を再現したデザインのことです。

一言で言うと「デザインの完成予想図（下書き）」のです。要素の配置や色の雰囲気をクライアントに伝わるように見せるものを指します。

ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。

ワイヤーフレーム製作前の手書きスケッチ（ラフ）とは別のもので、デザインカンプと呼ばれることもあります。

イメージの共有： 制作途中で「思っていたのと違う！」というズレを防ぐための確認作業として使います。

コーディングでは「デザインラフ通りに再現する事」が求められます。
なので、デザインラフはしっかりと完成形をイメージして制作する必要があります。