一、二限目まで、息子の入学式のため欠席をして、三時限目より参加した。
途中参加でしたので、復習予習をしっかりして、明日の実技に備えていきたい。
学科 ECサイトデザイン基礎⑤【オンライン】
-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎⑤
Webサイト・LPについて
2限目
学科 ECサイトデザイン基礎⑤
ワイヤーフレームとは
3限目
学科 ECサイトデザイン基礎⑤
デザインラフとは
4限目
学科 ECサイトデザイン基礎⑤
コーディングに向けての注意点
5限目
学科 ECサイトデザイン基礎⑤
XDの活用について
本日のテーマ
LP(ランディングページ)制作にあたり、
『ワイヤーフレーム』の制作と『デザインラフ』を学びましょう。
WEBサイト制作の流れ
ヒアリング
↓↓↓
◆ワイヤーフレーム制作◆
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング
最初に取り組むWebページとして、LP(ランディングページ)のような1ページ完結のサイトがおすすめです。Webページはヘッダー・メインビジュアル・コンテンツ・フッターといったパーツで構成されており、大きなサイトも基本的にはこの組み合わせでできています。
また、どんなサイトも、いきなりコードを書き始めることはありません、まずどんなパーツをどう並べるかを設計図として整理してクライアントに見せる作業があります。それがワイヤーフレームです。
LP(ランディングページ)とは
LP(ランディングページ)とは、一言で言うと
「特定のアクション(注文や問い合わせなど)をしてもらうための、1枚のWebページ」のことです。
通常のWebサイトが「案内所」のように色々なページへ誘導するのに対し、LPは「ひとりの営業マン」のような役割を持ちます。
LPの3つの特徴
1ページ完結: 他のページへのリンクを極力減らし、最後まで読ませる工夫がされています。
ストーリー構成: 悩みの共感から解決策の提示まで、注文したくなる流れで作られています。
目立つボタン: 「今すぐ購入」などのボタン(CTAボタン:Call To Action Button)が強調されています。
ワイヤーフレームとは
ページを構成する画像やテキストなどの要素を、「どこに」「どのように」配置するか表した設計図です。単に「ワイヤー」と呼ぶこともあります。
色を使わず、白黒(グレースケール)で作成します。
Webサイトの目的に沿って、「どの情報を」「どこに」「どのように配置するか」をチーム内やクライアントと共有するための重要なものです。
デザインを決める前の検討のために作るもので、サイトの設計図となります。

