#author("2024-12-09T09:34:37+09:00;2024-12-08T23:31:37+09:00","default:member","member") #author("2024-12-09T11:31:10+09:00;2024-12-08T23:31:37+09:00","default:member","member") *Inc.hair design 美容室のWebカタログサイトのデザイン提案 #image(inc.png) -''楠田佑月'' -'''Keywords：美容室, ヘアサロン, webデザイン,Instagram''' -[[WEBカタログサイト>https://gyutaaan.github.io/inc.hairdesign/index.html]] -[[Instagram>https://www.instagram.com/inc.hd?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==]] -[[概要集>https://drive.google.com/drive/folders/1bBSQJeVfBP2NHwAkHnYQXFG8nBGTEyK6?usp=share_link]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ [[inc.>https://beauty.hotpepper.jp/slnH000432811/]]という大名にある美容室のWebカタログサイト制作・提案 ~ ***背景と目的 ⭐️背景 現状 -Instagramでの更新があまりないため、自分好みのイメージにしてもらえるのか？という不安がある。 ~一般的な美容室と対象とする美容室(inc. hair design)の違い~ -一般的な美容室 --instagramを利用して情報発信をしている →ヘアスタイルのイメージが湧きやすい -対象とする美容室(inc. hair design) --instagramをあまり使用していない デメリット→ヘアスタイルのイメージが湧きづらい、やってほしい髪形にしてもらえるのか不安がある --現在[[inc.>https://beauty.hotpepper.jp/slnH000432811/]]ホットペッパーのみ ターゲット→学生、20前半 ⭐️目的 -Instagramでは情報が溢れかえっている→検索しにくい問題を解決(投稿文フォーマットの制作) -SNSが苦手な人でも写真を差し替えるだけで簡単に利用できるようなフォーマットの制作 →お客さんの好みのヘアスタイルが実現できるかを見てもらえるように ~ ***コンセプト -Instagramだけでは得れない情報を掲載する (フォトギャラリーのような形式でスタイルごとにカテゴリ分ける) ⭐️Instagramとの違い --Instagramでもヘアスタイルは見ることができるが、ヘアスタイルごとに分けることができない。（分類検索） --絞り込めば見たいものだけを見ることができる。 -お客さんの好みのスタイルにマッチするようにする ~ ***成果物の仕様 webカタログサイト ~ ***メンバー 楠田佑月 ~ ***制作ツール Photoshop, Visual Studio Code, Github, ~ ***プロジェクトの期間 プロジェクトの期間｜2024.09.16 - 2024.12.24 ~ ***まとめ 元々Instagramアカウントも作成するつもりだったが、新規顧客だけでなく既存のお客様にも見てもらえるためオーナーである安倍さんの現在のアカウントで投稿してもらうことにした。投稿文に加えて、ヘアスタイルのギャラリーサイトのURLを掲載してもらった。コーディングについて→カテゴリに分けることを頑張っていたが、ページ別にコーディングをしてしまったため、いちいちページごとに写真を公開しなくてはいけないようになってしまったり、クリックしたときに動画を再生できるようにしたかったがうまくコーディングできなかったり、知識不足により追加したい項目が疎かになってしまった。また、安部さんの紹介ページを追加したかったが、実際にコーディングができていない。今回の反省点は、知識不足であることと、スケジュール管理がうまくできていなかったため、やるべきことを優先的にできなかったことだ。 ~ ~ **調査 ***現状調査 ⭐️いいところ -価格帯が安い -マンツーマンで施術してもらえる！→他のお客様がいないためくつろげる - ~ ***先行事例 ⭐️ベンチマーク -[[TAYA公式サイト ヘアスタイル>https://tayanet.jp/hairstyle/]] 💡カテゴリーに分けられている。 -[[mod's hair公式サイト ヘアカタログ一覧>https://modshair.co.jp/haircatalog/]] 💡タグ検索ができる！ ~ ***技法・技術情報 ⭐️HTML/CSS -[[フォトギャラリーの作り方>https://fukuokamiyako.com/html20/]] -[[HTML無料テンプレートダウンロード>https://popo-design.net/template/#google_vignette]] -[[htmlタグ>https://www.tagindex.com/html_tag/]] ~ ~ **プロジェクト管理 ***スケジュール [[リンクはこちら>https://docs.google.com/spreadsheets/d/1EssLZ-2UlJfy3zcp5T_Vv-hfennXfXuq8lyGZ1jMxV8/edit?usp=sharing]] ~ ***ToDo -投稿事例の調査 -画像をもらう -投稿テンプレを作る（画像、テキスト） //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2024.11.25 学科サイトの更新 [[概要集>https://drive.google.com/drive/folders/1bBSQJeVfBP2NHwAkHnYQXFG8nBGTEyK6?usp=share_link]] 投稿文フォーマットを３案作成 |#image(11.jpg)|#image(12.jpg)|#image(13.jpg)| クリックしたら動画再生されるようにした時のイメージ #image(24.png) **2024.11.18 安倍さんのお誕生日！麻辣担を食べに行きました🍜 |#image(mar.png)|#image(mar2.png)| インスタグラム→今あるアカウントを安倍さんが更新 更新しやすいように投稿テンプレートを準備 (載せたい写真を選んでテンプレートをコピペするだけでSNS更新完了！) ヘアスタイルのギャラリーサイトを私が作成 安倍さんの投稿にURLを載せてもらうことにした。 （新規顧客だけでなく既存のお客様にも見てもらえるため） 参考本どおりに作成したら余計なコードがあったため１つ１つ理解をして作成することが大切だと教えて頂いた！ **2024.11.11 下記の参考本を用いてコーディング作業を行なった！ **2024.11.04 [[1冊ですべて身につくHTML & CSSとWebデザイン入門講座>https://www.amazon.co.jp/1冊ですべて身につくHTML-CSSとWebデザイン入門講座-Mana/dp/4797398892]]を購入した！ 写真を送ってもらった！ **2024.10.28 ⭐️中間報告 -instagramにはこれからも変わらない情報を載せる。 （電話番号、インスタアドレス、住所など）値段はNG -投稿の仕方を提案する。（引き継ぎしやすいように） **2024.10.20 前回の試作では他美容室との差別化ができないため、撮り方を何パターンか試してみた。 [[リンクはこちら>https://drive.google.com/drive/folders/1FN2jdpHZOpzQoicAgEPWNqWp5VGBD3Qw?usp=share_link]] 写真→色味が分かりやすいように撮ってもらった。顔の掲載許可が出た方のみ掲載する予定。顔があった方が雰囲気が伝わって施術のイメージがつきやすいため。 動画→１周してみるより、髪の毛に動きがあった方が阿部さん（オーナー）の施術の特徴であるサラツヤ髪が引き立つ✨ **2024.10.14 ⭐️サイトマップ #image(map.png) ⭐️ワイヤーフレーム(モバイル版とweb版) |#image(mo.png)|#image(web.png)| ⭐️投稿文 [[投稿原稿>https://drive.google.com/file/d/10_BxbqJNvyMfs64-FFiDSmR3euI4d4yk/view?usp=share_link]] ⭐️Instagramのアカウント作成 #image(IMG_4561.PNG) [[リンクはこちら>https://www.instagram.com/inc.hairdesign/?next=%2F]] ***経過報告 -仕上がりが連想しやすいようなサムネにする -フォトギャラリーに一周する動画を掲載する -よくある投稿ではなくお店にきて施術してもらいたいと思わせるような写真 -他の投稿との差別化 **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デザイン ~ ~ ~