美容室のWebデザイン提案
inc.という大名にある美容室のInstagram運営(他美容室との差別化)、webサイト制作・提案
⭐️背景
現状
一般的な美容室と対象とする美容室(inc. hair design)の違い
⭐️目的
Instagram、webサイト
楠田佑月
Photoshop, Visual Studio Code, Github,
プロジェクトの期間|2024.09.16 - 2024.12.24
元々Instagramアカウントも作成するつもりだったが、新規顧客だけでなく既存のお客様にも見てもらえるためオーナーである阿部さんの現在のアカウントで投稿してもらうことにした。投稿文に加えて、ヘアスタイルのギャラリーサイトのURLを掲載してもらった。コーディングについて→カテゴリに分けることを頑張っていたが、ページ別にコーディングをしてしまったため、いちいちページごとに写真を公開しなくてはいけないようになってしまったり、クリックしたときに動画を再生できるようにしたかったがうまくコーディングできなかったり、知識不足により追加したい項目が疎かになってしまった。また、安部さんの紹介ページを追加したかったが、実際にコーディングができていない。今回の反省点は、知識不足であることと、スケジュール管理がうまくできていなかったため、やるべきことを優先的にできなかったことだ。
⭐️いいところ
⭐️ベンチマーク
⭐️無料サーバー
学科サイトの更新
概要集
投稿文フォーマットを3案作成
クリックしたら動画再生されるようにした時のイメージ
阿部さんのお誕生日!麻辣担を食べに行きました🍜
インスタグラム→今あるアカウントを阿部さんが更新
更新しやすいように投稿テンプレートを準備
(載せたい写真を選んでテンプレートをコピペするだけでSNS更新完了!)
ヘアスタイルのギャラリーサイトを私が作成
阿部さんの投稿にURLを載せてもらうことにした。
(新規顧客だけでなく既存のお客様にも見てもらえるため)
参考本どおりに作成したら余計なコードがあったため1つ1つ理解をして作成することが大切だと教えて頂いた!
下記の参考本を用いてコーディング作業を行なった!
1冊ですべて身につくHTML & CSSとWebデザイン入門講座を購入した!
写真を送ってもらった!
⭐️中間報告
前回の試作では他美容室との差別化ができないため、撮り方を何パターンか試してみた。
リンクはこちら
写真→色味が分かりやすいように撮ってもらった。顔の掲載許可が出た方のみ掲載する予定。顔があった方が雰囲気が伝わって施術のイメージがつきやすいため。
動画→1周してみるより、髪の毛に動きがあった方が阿部さん(オーナー)の施術の特徴であるサラツヤ髪が引き立つ✨
サイトはこちら
⭐️サイトマップ
⭐️ワイヤーフレーム(モバイル版とweb版)
⭐️投稿写真の試作
⭐️投稿文
投稿原稿
⭐️Instagramのアカウント作成
⭐️Instagramとフォトギャラリーの違い