Work4
カフェサイト
サイトを見てみる！
- 課題内容
- ポイント
- 一覧
クライアントから制作依頼された「仕事」という前提でカフェ（喫茶店）のWebサイトを作る。 クライアントの要望を理解し、⽬的を達成するためにはどんなWebサイトにすればよいかを考える。 デザインとコーディングを⾏い、実際にネット上で閲覧できる作品を制作する。
≪カフェについて≫
店舗は、天⽩区植⽥に2022年12⽉1⽇にオープンする「ワズカフェ（Was Cafe）」 ※店名はひらがなや漢字でもOK、「カフェ」を「喫茶」にしてもOK 駅からも繁華街からも離れた住宅地 既存客のいない新規店 想定される競合店は、都⼼にも郊外にも展開するカフェチェーン、喫茶店、ファミレスなど
≪Webサイトを作る⽬的・クライアントの要望など≫
⼀番の⽬的は、店の知名度を上げて集客につなげること 地域の⼈たちが気軽に利⽤できるお店であることをアピールしたい 顧客を限定するような極端に個性的・先鋭的なものは望まない
企 画：
地域の子供から大人まで見ていて楽しさの伝わるデザイン
クライアントがお店に込める思いや、お店を通じてどう人とかかわっていきたいか、その思いを大切に、
デザインを考える細かいところまで装飾を施しました。情報を得るだけでないデザインにしました。
デザイン：
親しみやすさを重視し、メインカラーに茶色を使用しました。「茶色」は一般的に「落ち着き・成熟・温もり・安心感・安定感・充実感」を感じさせます。「くつろぎたい時」／「温もりを求めている時」地域に根差した心落ち着く優しい空間を連想させます。
コーディング：
ユーザビリティの基本を押さえ、授業ではやっていなかった動きを取り入れました。cssのみきる動きもあれば、jQueryやJavaScripを用いないと難しい動きにも挑戦しました。短い課題期間のなかで、独学で学ぶことは大変でしたがweb業界の深さと可能性を感じました。動きをつけすぎることなく、効果的に使っていくことを意識しました。
| ターゲット | 地域の子供から大人まで |
|---|---|
| 価値観 | 日常に溶け込む、ホッとできるような寄りやすい場所 |
| 訴求 | 「くつろぎたい時」「温もりを求めている時」地域に根差した心落ち着く優しい空間 |
| デザイン案 | クライアントの想いを大切にデザインの細部まで落とし込む |
|---|---|
| カラー | 茶色をメインに用いて、親しみやすさや安らぎをイメージ |
| キーワード | 「親しみやすさ」「popさ・楽しさ」「UI/UX」 |
制作過程
課題が出されてから完成するまでの流れです。
- 1日目
- 10日目
- 15日目
- 17日目
- 1ワイヤーフレーム
- WF（ワイヤーフレーム）という、Webサイトの設計図を提出します。全体のサイト構造から、ひとつのページの中にどんな要素を盛り込むのか・画像や文字量はどのくらいかといった1ページの構成まで大まかな構成を決めます。
- 2デザイン完成
- ワイヤーフレームから、実際にIllustrator・Photoshop等のツールを使いデザインカンプを作ります。色・形・配置・構成等まで詳しく決め、実際にコーディング出来る前段階のところまで作りました。
- 3コーディング完成
- デザインカンプから実際にコーディングをしていきます。私なりのポイント(現段階)としては、コーディング前にはデザインとHTML・CSSの構成を先に固めておいてから、コーディングに取り掛かった方が確実に早いです。これを読み直す私はどんなやり方をしているかなぁ。
- 4プレゼン
- クライアントに発表することを想定して発表をしました。様々な書籍やサイトを参考にして、「この企画に決めたい」と納得してもらえるような資料の見せ方や話し方を意識しました。