講師：夏目佳奈
1限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作の準備
2限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作のポイント
3限目
実技 ECサイトデザイン実習④
課題制作
4限目
実技 ECサイトデザイン実習④
課題制作
5限目
実技 ECサイトデザイン実習④
課題制作
早速作ってみましょう。
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。
講師：夏目佳奈
1限目
学科 ECサイトデザイン基礎④
Webサイト・LPについて
2限目
学科 ECサイトデザイン基礎④
ワイヤーフレームについて
3限目
学科 ECサイトデザイン基礎④
レイアウトのポイントについて
4限目
学科 ECサイトデザイン基礎④
制作に向けての準備
5限目
学科 ECサイトデザイン基礎④
制作に向けての準備
Webサイト制作にあたり、まずは
『ワイヤーフレーム』
の制作のコツを学びましょう。
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「デザインの考え方」の教科書⑥.pdf」
ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 ウィキペディア
未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。
◆ヒアリング、ワイヤーフレーム制作◆
↓↓↓
デザインラフ制作
↓↓↓
コーディング
単に「ワイヤー」と呼ぶこともあります。
Webサイトの目的に沿って、「どの情報を」「どこに」「どのように配置するか」をチーム内やクライアントと共有するための重要なものです。
デザインを決める前に作るもので、サイトの骨組みとなるものですのでしっかり設計しましょう。
まずは絵を描くときの下書きのように、手書きスケッチ(ラフ)してみましょう。
いきなりワイヤーフレームを作ったりというケースもありますが、事前にラフを描いておくことでより一層スムーズに制作が進められるようになります。
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。
逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。
お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。
・使用ソフトはPhotoshopです。
・まずは色を入れず、白黒で制作しましょう。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・メインイメージなどはブラウザの横幅いっぱいでも構いませんが、文章などのコンテンツ幅は960〜980px程度に収めると良いでしょう。
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる
②情報の順番づけ
③レイアウトを考える
手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。
講師：平井美江
1限目
実技 ECサイトデザイン実習③
クライアント確認について
2限目
実技 ECサイトデザイン実習③
バナー作成
3限目
実技 ECサイトデザイン実習③
バナー作成
4限目
実技 ECサイトデザイン実習③
バナー作成
5限目
実技 ECサイトデザイン実習③
バナー 講評
馴染んでください
デザインした制作物をクライアント（発注者）に確認を入れる場合は、そのまま見せる事が最も解りやすい方法です。バナーを作成したらページにそのまま当て込んで（テストアップ等）確認をとります。
バナーを作成したら、スクリーンショットしたページに当て込んでみましょう。違和感が無かったら成功です。ページに馴染むようにデザインの基本ルール「レイアウト」「文字」「配色」に気を付けて作成してみてください。
講師：湊 有加里
1限目
学科 ECサイトデザイン基礎③
バナーの作成について
2限目
学科 ECサイトデザイン基礎③
はじめての依頼について
3限目
学科 ECサイトデザイン基礎③
提案をすることについて
4限目
学科 ECサイトデザイン基礎③
再現力の重要性について
5限目
学科 ECサイトデザイン基礎③
制作過程について
バナーは作る過程も大事です！
ポートフォリオサイトに乗せるバナー等の作品は、ブラッシュアップも含めて掲載しましょう。最初に作成したバナーから、他のデザインを見たり聞いたりして、もっと良い作品にしていく過程も解り易く掲載して「制作過程」を明確にして成長力もアピールしちゃいましょう！！
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「バナーの作成について.pdf」
講師：平井美江
1限目
実技 ECサイトデザイン実習②
Photoshopの機能について
2限目
実技 ECサイトデザイン実習②
バナー模写練習
3限目
実技 ECサイトデザイン実習②
バナー模写練習
4限目
実技 ECサイトデザイン実習②
バナー模写練習
5限目
実技 ECサイトデザイン実習②
バナー模写練習
まずはバナー「模写」で表現の完全コピーを目指しましょう
講師：夏目佳奈
1限目
学科 デザイン概論③
コンサルティングとは？
2限目
学科 デザイン概論③
Webコンサルタントという仕事について
3限目
学科 デザイン概論③
コンサルティングに必要なスキル
4限目
学科 デザイン概論③
本日のまとめ
5限目
学科 デザイン概論③
本日のまとめ
Webコンサルタントというお仕事を知りましょう
一般的に「企業経営などについて相談を受け、診断・助言・指導をおこなう」ことをいいます。
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
コンサルティングというお仕事について.pdf
Webコンサルタントを目指す方は常にアンテナを張り巡らせ、
あらゆる情報を入手するよう意識してください。
また、デザイナーとして活躍していきたい方も同様に
コンサルティングの考えと意識を高く持ってみてください。
講師：夏目佳奈
1限目
学科 ECサイトデザイン基礎②
バナーとは？
2限目
学科 ECサイトデザイン基礎②
レイアウトデザインのポイント
3限目
学科 ECサイトデザイン基礎②
バナー制作に向けて
4限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集
5限目
学科 ECサイトデザイン基礎②
バナー制作に向けての情報収集
今後のバナー制作に向けて情報収集をしましょう。
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「デザインの考え方」の教科書④.pdf
バナー はウェブページ上で他のウェブサイトを紹介する役割をもつ画像のこと。本来、旗印を意味し、ウェブページ上で広告が目立つように使われたことから、この通名で呼ばれ定着した。 主に広告・宣伝用に作られ、ウェブサイトへのハイパーリンク用にも利用される。 ウィキペディア
まずは模写をして徹底的に真似をしましょう。
そのバナーの制作者が意図していていた技術・技能・表現などを真似することによって自分のものにしましょう。またPhotoshopのソフトでどのようにすれば再現できる考えながら作成してみましょう。これまでの「文字の見やすさ」と「レイアウト」「文字」「配色」をしっかりと意識して真似をしてみましょう。
