マイルストーン

カフェサイト2

カフェサイト2はこちら

画像の代替テキストを入力

ここに課題の感想(一言コメント)を入力

課題名 カフェサイト2
課題内容
  • 架空で新規オープンするカフェのWebサイトのデザインとコーディングを行い、実際にネット上で閲覧できる作品を制作する。
  • クライアント(=カフェのオーナー)から制作依頼された「仕事」という想定。
  • クライアントの要望を理解し、目的を達成するためにはどんなWebサイトにすればよいかをよく考えること。
  • 2021年4月24日発表すること。
コンセプト
  1. カフェオーナーのプロフィールから、コーヒー豆のこだわりを色で表現する。
  2. Webサイトを訪問したユーザーが必要な情報に迷わずアクセスできるようなサイトとする。
制作意図

1.下記のクライアントの要求を解釈しサイト制作する。
①一番の目的は、店の知名度を上げて集客につなげること
②地域の人たちが気軽に利用できるお店であることをアピールしたい
③顧客を限定するような極端に個性的・先鋭的なものは望まない

2.サイト制作上のクライアント要求の制作者の解釈
①知名度を上げて集客→idexページに画像を用いてスライド画面3枚を用いてオープンの告知、カフェのコンセプトを明記、オーナーの豆へのこだわりを画面で表現
②気軽に利用→コーヒー以外にもパン、スイーツ、総菜パンなど豊富なメニューを写真、イラストで表現することで来店時の選択肢があることで気軽に来店を促す。
③個性的・先鋭的なものは望まない→世界共通の空をイメージできるサイトの配色をブルー、白系とした。

3.制作者の都合 先に製作したカフェサイト1のサイドコンテンツをなくすレイアウトと配色変更することでサイト制作の理解を深め、更に デザインを構成するレイアウト、カラー、フォントを使い、わかりやすく、みやすく、伝えることがどの程度できるか?を把握する。
できること、できないことを把握することで次につなげる。
学んだphotoshop、HTML/CSSの知識の理解の定着を図る。
photoshopはペンツールを使用してのイラスト制作、画像の切り取りして合成 HTML/CSSは、既にあるサイトのコードを理解し、写真の追加、レイアウト変更を行う。

制作時間 合計:32時間(内訳①~④参照)
①ページ構成,配色検討、簡単なデザインカンプ製作、:4時間
②photoshop:画像トリミング、合成などの製作11点、シェイプ、ブラシ、テキスト使用してのイラスト、バナー制作など7点(合計18点 →10時間
③HTML/CSS:授業で学んだブライダルサイトをベースに変更、htmlファイル数10→16時間
④全体見直し調整(ドリンクメニューの画像の入れ替え、レイアウト変更など→2時間)
制作環境 Adobe Photoshop/Adobe Brackets
© 2021 Webデザイナー科 第24期生 生徒作品