I's 髪工房
美容院のWebデザイン制作・提案
Overview
What is this?
北九州市にある美容院のWebデザイン制作・提案
Background and Purpose
Background
- ホットペッパービューティーやミニモなどのサロン検索予約サイトには掲載していないため美容院についての詳細を知る手段が少ない。
- SNSだけでは顧客にとって必要な情報が固定できないため、Webサイトで情報の固定化を図っている。
- 現サイトのデザインでは知りたい情報が見つけにくいと感じた。
Purpose
- 現サイトよりもさらに情報を見つけやすいようなWebデザインを制作し、提案する。
Concept
- ファーストビューで店内の雰囲気がダイレクトに伝わるもの
例：トップページで複数画像の切り替え
- 情報を見つけやすいサイトデザイン
例：文字情報だけでなく各ポイントで写真やイラストを入れて視覚的に分かりやすくする
Outputs
Webサイト
URL：https://ami-kimura.github.io/iskamikoubou/
Tools
Hardware
- MacBook Pro
- Canon EOS Kiss X7
Software
- Safari
- Chrome
- Firefox
- Photoshop
- Adobe X D
- GitHub
- Visual Studio Code
Term
2022.09.21 - 2022.12.21
Conclusion
今回制作したサイトは美容院の最初の窓口になることを意識して制作した。サイトに統一感が出るようにメインで使う色を2色に絞った。また、載せる情報が少ないため、シングルページにし、ページをまたがずに情報を見れるように制作した。
Research
Current Situation
- I's 髪工房 現サイト
→制作会社：株式会社 スリーアロウズシステムズ 様
Precedent
- SANKOU!
- 1:5/5:25の法則
周辺の美容院サイト
Technology
- VSCodeとGitHub連携
- favicon設定方法
- px,pt,%,em 文字の大きさ 数値一覧表
- Instagram埋め込み画像表示されない時の解決方法
- Instagram埋め込みコード解析
- スライダーswiper.jsの使い方
Project Management
Schedule
スケジュール表
ToDo
-制作環境の整理
-スケジュール表作成
-中間報告準備
-ヒアリング
-ワイヤーフレーム作成
-モックアップ作成
-プロトタイプ作成
-コーディング
-作品一次提出準備
-最終報告準備
WORK LOG
2022.12.07
作業メモ
2022.11.30
作業メモ
2022.11.23
作業メモ
2022.11.16
作業メモ
サイトに載せる情報
- 美容院について
- メニューリスト
- アクセス
- 予約について
- 営業日、定休日
- Instagram
- カレンダー
アイデア
- 載せる情報が少ないため、シングルページにする
- お店のロゴに使われているフォントDINを使う
- 美容院のゆったりとした空間を表現するため、できるだけ角をなくし、余白をつくる
- 使う主な色は #80645B と #F0ECE5
考え中
- ハンバーガーメニューを付けるか付けないか
- 営業日カレンダーのデザイン
- Instagramの表示のさせ方
2022.11.09
作業メモ
周辺の美容院サイト調査
2022.11.02
中間発表 コメント
- トップのURL記載欄を準備中に書き直しておく
- サイトメニューは現状のものが最適とは限らない
- 提案書より実際に作ったサイトを見せながらプレゼンしたほうが良い
- X Dで動きをつける時間があったらコーディングして実際に制作した方が早い
- 情報デザイン専攻且つ研究だからX Dより実際のサイトを作ったほうが良い
- 半年の成果を出す
作業メモ
- トップのURL記載欄を「準備中」に書き直し
- スケジュール表修正
- ツール項目編集
Software
- Safari
- Chrome
- Firefox
- Adobe X D
- PowerPoint
- GitHub
- Visual Studio Code
2022.10.26
作業メモ
2022.10.19
作業メモ
- Spotify API セットアップ
Node.js インストール
2022.10.12
作業メモ
- サイト編集
動作確認
小テーマ設定
Spotify埋め込み確認
ヘッダー&フッター編集
2022.10.05
作業メモ
Xfreeでサーバー取り直し
- http://findmusic.php.xdomain.jp/
ToDo項目記入
- 制作環境の整理
- スケジュール表作成
- ワイヤーフレーム 作成
- コーディング
- 作品一次提出準備
- 中間報告準備
- 最終報告準備
Hardware
- MacBook Pro
Software
- WordPress
- FileZilla
- Spotify
- Safari
- Chrome
- Firefox
- Adobe X D
2022.09.28
作業メモ
- 研究テーマ＞＞FiND MUSiC ジャケ写から出会う音楽サイト
- スケジュール表作成
- 先行事例調査
テーマ案
Web
- 色を選択するとその色のジャケ写が出てきて再生ボタンを押すと曲が聴けるような仕組みを作る
2022.09.21
作業メモ
テーマ案
Web
Graphic
参考
