実技 ECサイトデザイン実習⑤　2025年12月2日

2025年12月12日 2025年12月12日

arisa

講師：夏目　先生

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
デザインラフ制作に向けて

2限目
実技 ECサイトデザイン実習⑤
XD実践

3限目
実技 ECサイトデザイン実習⑤
XD実践

4限目
実技 ECサイトデザイン実習⑤
課題制作

5限目
実技 ECサイトデザイン実習⑤
課題制作

コーディングの準備をしましょう。

実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案（最低2パターン）をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

コーディングに向けて画像を保存(=準備と整理)しておきましょう。

「jpg」「gif」「png」「svg」について
まず悩んだら「jpg」、透過表現を必要とするなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」＝複雑な画像は重たくなるので条件次第で使う。
と良いでしょう。

デザインラフを製作しましょう。
できたところまでのデザインラフをポートフォリオサイトに投稿しましょう。

LPタイトル「 GENTLE NIGHT-Hand Lotion 」

「GENTLE NIGHT – Hand Lotion LP Design」
静けさと夜の深呼吸をテーマにした、ハンドローションの LP デザイン

「やさしい夜の静けさを、手元に宿す」というテーマで、
“余白 × 柔らかな光 × ほのかな世界観” を中心に構成した LP です。
ブランドの落ち着いたトーンに合わせ、見た瞬間に呼吸がゆるむような静けさを届けることを狙っています。

・商品棚の静かな写真を大きく配置し、夜の気配を感じる世界観を作った。
・英語キャッチ「Let the quiet night wrap your senses.」で、なめらかな夜に包まれるイメージを視覚化。
・白文字 × やわらかい影で、写真に自然となじむ印象に。

・中央カラムは写真のみにし、言葉を最小限に。
　→ 優しい夜を視覚的に表現し、静けさを壊さないため。
・両端は商品の特徴をシンプルにまとめ、上下左右の余白を大きく取って“呼吸できるデザイン”に。

・商品写真を２点使い、使用イメージと箱の雰囲気を伝える構成に。
・英語タイトル「Description」でブランドのムードを統一しつつ、本体の説明文は日本語で読みやすさを優先。
・背景の柔らかいシャドウと角丸BOXで、清潔感と立体感を演出。

・長文になるため余白を広く確保し、読み疲れないレイアウトに。
・テキストの左揃えは統一しつつ、行間をゆったり取って“やわらかな呼吸感”が出るように調整。

・余白はかなり広めに設定し、静けさと高級感を表現。
・色は白〜淡いグレーを基調に統一。
・フォントは Optima を中心に使用し、英語タイトル・日本語テキストのトーンを揃えた。

職業訓練課題としての LP デザインカンプ
後日、HTML/CSS を用いてコーディング予定。

・優しい世界観（夜の静けさ）を UI に落とし込む練習
・余白設計、シャドウ設計、写真の使い方の実践
・ブランド寄せのトーン＆マナーを学ぶ
・情報量を整理する「引き算のデザイン」の習得

＼最新情報をチェック／