目的

採用担当者の方、現場責任者の方にポートフォリオを見ていただいて、私について知ってもらい採用してもらう為。

企画・情報設計

最も見てほしい制作物をTOPページのMVに配置しました。1ページずつじっくり目を通していただきたいので、ページやフッターは固定配置し、中身のページだけがスライドやスクロールをする構成にしました。WORKSページでは、段階ごとの思考プロセスが分かるようにマインドマップやデザインカンプを閲覧できるようにしました。

マインドマップを開く

デザイン

ページごとのデザイン、ボタンデザインなどを統一することでまとまりのあるサイトにしました。背景にノイズテクスチャーを使用することで、自然で柔らかい印象になるように工夫しました。また、スクロールバーはサイトイメージに合わないため非表示にして、代わりにスクロールアニメーションを表示しています。

デザインカンプを開く

制作期間

企画・情報設計・ワイヤーフレーム 15日
デザインカンプ 8日
コーディング 17日
合計 40日

使用ツール・言語

HTML / CSS / JavaScript / Figma / VScode

目的

今まで口コミとリピート客のみで成り立っていたが、新規顧客を開拓するためにWebサイトを立ち上げ、インターネットを使った集客に力を入れたい。また、Webサイト開設に伴い、珈琲豆をネット販売出来るようにしたい。

企画・情報設計

TOPページのMVにお店の内観や珈琲などの写真を多く使って、利用したことがない方でもお店のイメージが伝わるように工夫しました。また、お店の特徴はとにかくこだわりぬいた上質な珈琲。こだわりを五感で感じていただける雰囲気を文字や写真で表現しました。ヘッダーを固定し、販売ページやカートにアクセスしやすくしています。

デザイン

とにかく写真を多く使ってお店の雰囲気を感じてもらうことを意識しました。落ち着いた雰囲気を出すために背景色はほんのり淡いピンク色にしました。

制作期間

企画・情報設計・ワイヤーフレーム 3日
デザインカンプ 2日
コーディング 2日
合計 7日

使用ツール・言語

HTML / CSS / JavaScript / Figma / VScode