• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 楠田佑月/情報デザイン研究II へ行く。
  • 1 (2024-10-28 (月) 10:30:10)
  • 2 (2024-10-28 (月) 10:30:10)
  • 3 (2024-12-02 (月) 10:45:55)
  • 4 (2024-12-08 (日) 23:31:37)
  • 5 (2024-12-08 (日) 23:31:37)

---

Inc.hair design

美容室のWebデザイン提案

• 楠田佑月
• Keywords：美容室, ヘアサロン, webデザイン,Instagram
• https://gyutaaan.github.io/inc.hairdesign/index.html

概要

これは何？

inc.という大名にある美容室のInstagram運営(他美容室との差別化)、webサイト制作・提案

背景と目的

⭐️背景
現状

一般的な美容室と対象とする美容室(inc. hair design)の違い

• 一般的な美容室
  • instagramを利用して情報発信をしている
    →ヘアスタイルのイメージが湧きやすい
• 対象とする美容室(inc. hair design)
  • instagramをあまり使用していない
    デメリット→ヘアスタイルのイメージが湧きづらい、やってほしい髪形にしてもらえるのか不安がある
  • 現在inc.ホットペッパーのみ
    ターゲット→学生、20前半

⭐️目的

• Instagramでは情報が溢れかえっている→検索しにくい問題を解決
• SNSが苦手な人でも写真を差し替えるだけで簡単に利用できるようなフォーマットの制作
  →お客さんの好みのヘアスタイルが実現できるかを見てもらえるように
  
  

コンセプト

• Instagramだけでは得れない情報を掲載する
  (フォトギャラリーのような形式でスタイルごとにカテゴリ分ける)
  ⭐️Instagramとの違い
  • Instagramでもヘアスタイルは見ることができるが、ヘアスタイルごとに分けることができない。（分類検索）
  • 絞り込めば見たいものだけを見ることができる。
• お客さんの好みのスタイルにマッチするようにする

成果物の仕様

Instagram、webサイト

メンバー

楠田佑月

制作ツール

Photoshop, Visual Studio Code, Github,

プロジェクトの期間

プロジェクトの期間｜2024.09.16 - 20XX.XX.XX

まとめ

元々Instagramアカウントも作成するつもりだったが、新規顧客だけでなく既存のお客様にも見てもらえるためオーナーである阿部さんの現在のアカウントで投稿してもらうことにした。投稿文に加えて、ヘアスタイルのギャラリーサイトのURLを掲載してもらう。また、参考本のおかげで実用的なコーディングができた。

調査

現状調査

⭐️いいところ

• 価格帯が安い
• マンツーマンで施術してもらえる！→他のお客様がいないためくつろげる
  

先行事例

⭐️ベンチマーク

• TAYA公式サイト ヘアスタイル
  💡カテゴリーに分けられている。
• mod's hair公式サイト ヘアカタログ一覧
  💡タグ検索ができる！
  
  

技法・技術情報

⭐️無料サーバー

• スターサーバーフリー
• XREA
  ⭐️HTML/CSS
• フォトギャラリーの作り方
• HTML無料テンプレートダウンロード
• htmlタグ
  
  
  
  

プロジェクト管理

スケジュール

リンクはこちら

ToDo

• 投稿事例の調査
• 画像をもらう
• 投稿テンプレを作る（画像、テキスト）

---

---

2024.11.25

学科サイトの更新

2024.11.18

阿部さんのお誕生日！麻辣担を食べに行きました🍜

インスタグラム→今あるアカウントを阿部さんが更新
更新しやすいように投稿テンプレートを準備
(載せたい写真を選んでテンプレートをコピペするだけでSNS更新完了！)
ヘアスタイルのギャラリーサイトを私が作成
阿部さんの投稿にURLを載せてもらうことにした。
（新規顧客だけでなく既存のお客様にも見てもらえるため）
参考本どおりに作成したら余計なコードがあったため１つ１つ理解をして作成することが大切だと教えて頂いた！

2024.11.11

下記の参考本を用いてコーディング作業を行なった！

2024.11.04

1冊ですべて身につくHTML & CSSとWebデザイン入門講座を購入した！
写真を送ってもらった！

2024.10.28

⭐️中間報告

• instagramにはこれからも変わらない情報を載せる。
  （電話番号、インスタアドレス、住所など）値段はNG
• 投稿の仕方を提案する。（引き継ぎしやすいように）

2024.10.20

前回の試作では他美容室との差別化ができないため、撮り方を何パターンか試してみた。
リンクはこちら
写真→色味が分かりやすいように撮ってもらった。顔の掲載許可が出た方のみ掲載する予定。顔があった方が雰囲気が伝わって施術のイメージがつきやすいため。
動画→１周してみるより、髪の毛に動きがあった方が阿部さん（オーナー）の施術の特徴であるサラツヤ髪が引き立つ✨
サイトはこちら

2024.10.14

⭐️サイトマップ

⭐️ワイヤーフレーム(モバイル版とweb版)

⭐️投稿写真の試作

⭐️投稿文
投稿原稿
⭐️Instagramのアカウント作成

リンクはこちら

経過報告

• 仕上がりが連想しやすいようなサムネにする
• フォトギャラリーに一周する動画を掲載する
• よくある投稿ではなくお店にきて施術してもらいたいと思わせるような写真
• 他の投稿との差別化

2024.10.07

経過報告

⭐️Instagramとフォトギャラリーの違い

• Instagram
  • 見つけてもらいやすい
• フォトギャラリー
  • カテゴリごとの検索ができる
  • どんな雰囲気に似合うスタイルなのか詳しく表記ができる。
• Instagram→8投稿
• フォトギャラリー→24スタイル

2024.09.30

経過報告

• 来週お店に行った時に撮影方法を決める！
• 普通に載せるのではなく工夫をする

決めたこと！

• Instagramの運営(今あるアカウントとは別に作る)
• webカタログのサイトを作ってURLを添付する(もっと見たい方はこちら的なやつ)

2024.09.23

経過報告

• 美容室のwebサイトというよりインスタ運営？
• 写真はどうするかを考える！
• コーディングに興味あるならweb制作してみるべき！と言われた。
  →webカタログみたいな感じにする。。？

2024.09.16

調査

• 通っている美容室のwebデザインの提案、(いずれはInstagramも)
• ヘアスタイル雑誌を制作する
  
  

キーワード

• 撮影、動画編集、Webデザイン