木村天美/情報デザイン研究II のバックアップの現在との差分(No.20)

追加された行はこの色です。
削除された行はこの色です。
#author("2022-11-21T21:43:13+09:00;2022-11-10T17:26:25+09:00","default:member","member")
#author("2023-10-13T02:18:00+09:00;2022-12-14T14:04:32+09:00","default:member","member")
*I's 髪工房
美容院のWebデザイン制作・提案



#image(mainvisual.jpeg)
#image(mainvisual4.jpeg)



-''Ami Kimura''
-'''Keywords：Web design, Beauty salon'''
-準備中・・・
-https://ami-kimura.github.io/iskamikoubou/

~


**Overview
***What is this?
//&color(red){これは何か・・を簡潔に};
北九州市にある美容院のWebデザイン制作・提案
~

***Background and Purpose
//&color(red){プロジェクトの背景と目的};
'''__Background__'''
-ホットペッパービューティーやミニモなどのサロン検索予約サイトには掲載していないため美容院についての詳細を知る手段が少ない。
-SNSだけでは顧客にとって必要な情報が固定できないため、Webサイトで情報の固定化を図っている。
-現サイトのデザインでは知りたい情報が見つけにくいと感じた。

'''__Purpose__'''
-現サイトよりもさらに情報を見つけやすいようなWebデザインを制作し、提案する。
-現サイトよりも情報を見つけやすいようにWebデザインを制作する。
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
//従来の音楽ストリーミングサービスとは違う角度から音楽を探す機会を作り出す
-ファーストビューで店内の雰囲気がダイレクトに伝わるもの
&scale(90){例：トップページで複数画像の切り替え};
-情報を見つけやすいサイトデザイン
&scale(90){例：文字情報だけでなく各ポイントで写真やイラストを入れて視覚的に分かりやすくする};
~

***Outputs
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Webサイト
URL：https://ami-kimura.github.io/iskamikoubou/
#iframe(https://ami-kimura.github.io/iskamikoubou/,75%,100%)
~

//***Member
//&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記};
//~

***Tools
//&color(red){使用するツール｜ハードウエア・ソフトウエア};
''__Hardware__''
:|MacBook Pro
:|Canon EOS Kiss X7
~

''__Software__''
:|Safari
:|Chrome
:|Firefox
:|Illustrator
:|Photoshop
:|Adobe X D
:|GitHub
:|Visual Studio Code

~
~

***Term
//&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX };
2022.09.21 - 2022.12.21
~

***Conclusion
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};

今回制作したサイトは美容院の最初の窓口になることを意識して制作した。サイトに統一感が出るようにメインで使う色を2色に絞った。また、載せる情報が少ないため、シングルページにし、ページをまたがずに情報を見れるように制作した。

~
~


**Research

***Current Situation
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
:|[[I's 髪工房　現サイト>https://iskamikoubou.jimdofree.com]]
→[[制作会社：株式会社 スリーアロウズシステムズ 様>https://www.threearrowssys.co.jp]]
~

***Precedent
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
//:|[[Predominantly>https://predominant.ly]]
:|[[SANKOU!>https://sankoudesign.com/]]
:|[[1:5/5:25の法則>https://www.mitsue.co.jp/knowledge/marketing/principle/1_5_5_25.html]]
~

''__周辺の美容院サイト__''
-[[Janna>https://janna-salons.com/honten]]
-[[CIENTO>http://ciento-100.net]]
-[[Hale>https://www.hale-hair-relax.com]]
-[[EARTH>https://map.hairmake-earth.com/salon/290]]
-[[ヘアーサロンIWASAKI>https://www.hkbn.co.jp/iwasaki/]]
-[[Liberta Hair Design>https://liberta-hair.design]]
-[[ZAP>https://zap-aioi.com]]
-[[REGISTA>https://regista2013.com]]
-[[glycine>https://www.glycine0920.com]]
~

***Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
:|[[VSCodeとGitHub連携>https://miya-system-works.com/blog/detail/vscode-github/]]
:|[[favicon設定方法>https://shu-naka-blog.com/html/favicon/]]
:|[[px,pt,%,em 文字の大きさ 数値一覧表>https://www.nda.co.jp/memo/pxpt.html]]
:|[[Instagram埋め込み画像表示されない時の解決方法>https://note.com/a_rooms/n/na37dd0ecd43f]]
:|[[Instagram埋め込みコード解析>https://qiita.com/h5y1m141@github/items/403dee38e88570185949]]
:|[[スライダーswiper.jsの使い方>https://kiomiru.co.jp/blog/coding/swiper-js/]]
:|[[【JavaScript】Animate On Scroll Libraryの使い方>https://webabc.hatenablog.jp/entry/2020/11/05/222743]]
~

//&color(#FFFFFF,#1DB954){　Spotify　};
//:|[[Spotify 高度な検索の仕方>https://smatu.net/2017/06/25/spotify-advanced-search/]]
:|[[Googleカレンダー埋め込みデザインカスタマイズ>https://tokyo2ldk.com/2020/03/27/fullcal_for_gcal/]]
~

//&color(#FFFFFF,#21759B){　WordPress　};
//:|[[絞り込み機能 プラグイン>https://www.conoha.jp/lets-wp/wp-search/]]
//:|[[PHPとJavaScriptで複合検索>https://lindsay.chunk.jp/wordpress_customize/composite-search01/]]
//:|[[フィルタリング>https://www.webdesignleaves.com/pr/plugins/filtering-component-with-css.html]]
~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
[[スケジュール表>https://docs.google.com/spreadsheets/d/1DuZOAJgwMOBYngfUxDgBP8rT7qaLOjeZ1EfADWUr7FE/edit?usp=sharing]]
%%スケジュール表%%
~

***ToDo
//&color(red){やるべきこと（タスク）を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
%%-制作環境の整理%%
%%-スケジュール表作成%%
%%-中間報告準備%%
%%-ヒアリング%%
-ワイヤーフレーム作成
-モックアップ作成
-プロトタイプ作成
-コーディング
-作品一次提出準備
-最終報告準備
%%-ワイヤーフレーム作成%%
%%-モックアップ作成%%
%%-プロトタイプ作成%%
%%-コーディング%%
%%-作品一次提出準備%%
%%-最終報告準備%%


~
~
~

#hr
CENTER:''WORK LOG''
//&color(red){List the most recent information at the top.};
#hr
~
~


**2023.01.15
***作業メモ
-ブラッシュアップ
--写真の傾きを修正
--やわらかい文章に書き直し
--画像だったカレンダーをGoogle Calendarに変更
--スタッフの似顔絵を追加
--Aboutの後にSpace, Technic, Event, Reservationを追加
--Animate On Scroll Libraryを使って要素に動きを追加
--ヘッダーのホバー時にアンダーラインが現れるようにした
--Accessに関する情報が見やすいように情報を区切って表示
-[[リポジトリ>https://github.com/Ami-Kimura/iskamikoubou]]
~
~

**2022.12.21
***作業メモ
-コーディング
--[[リポジトリ>https://github.com/Ami-Kimura/iskamikoubou]]
~
~

**2022.12.14
***作業メモ
-最終報告 コメント
--文章が堅い
--スタッフの写真があるとよい
--カレンダーを画像ではなく、運用しやすい形に
--アクセスのところに営業日情報がほしい
--アバウトの2枚目の画像が少し斜めになっている
~
-コーディング
--[[リポジトリ>https://github.com/Ami-Kimura/iskamikoubou]]
~
~


**2022.12.07
***作業メモ
-コーディング
--[[リポジトリ>https://github.com/Ami-Kimura/iskamikoubou]]
~
~

**2022.11.30
***作業メモ
-最終報告準備
-コーディング
--[[リポジトリ>https://github.com/Ami-Kimura/iskamikoubou]]
~
~

**2022.11.23
***作業メモ
-URLを記載
-favicon設定
-コーディング
--[[リポジトリ>https://github.com/Ami-Kimura/iskamikoubou]]
~
~

**2022.11.16
***作業メモ
-
-スマホ版デザイン制作
-PC版デザイン制作途中経過
-Photoshopで写真加工
-MainVisual 変更
#image(mainvisual2.jpeg,30%)
~
***サイトに載せる情報
-美容院について
-メニューリスト
-アクセス
-予約について
-営業日、定休日
-Instagram
-カレンダー
~
***アイデア
-載せる情報が少ないため、シングルページにする
-お店のロゴに使われているフォントDINを使う
-美容院のゆったりとした空間を表現するため、できるだけ角をなくし、余白をつくる
-使う主な色は&color(#F0ECE5,#80645B){　#80645B　}; と&color(#80645B,#F0ECE5){　#F0ECE5　}; 
~
***考え中
-ハンバーガーメニューを付けるか付けないか
-営業日カレンダーのデザイン
-Instagramの表示のさせ方
~
~


**2022.11.09
***作業メモ
-MainVisual掲載
-[[写真取り込み>https://drive.google.com/drive/folders/17KDK-IDwJbHP1BC7tEP8NqX59788SN1H]]
-[[ヒアリング>https://docs.google.com/document/d/1PepH8PZfoLJeoqyo5wuDVC_afgbvntXoNUxl8kWBLlM/edit?usp=sharing]]
#image(mainvisual.jpeg,30%)
-写真取り込み
-ヒアリング
~

''__周辺の美容院サイト調査__''
-[[Janna>https://janna-salons.com/honten]]
-[[CIENTO>http://ciento-100.net]]
-[[Hale>https://www.hale-hair-relax.com]]
-[[EARTH>https://map.hairmake-earth.com/salon/290]]
-[[ヘアーサロンIWASAKI>https://www.hkbn.co.jp/iwasaki/]]
-[[Liberta Hair Design>https://liberta-hair.design]]
-[[ZAP>https://zap-aioi.com]]
-[[REGISTA>https://regista2013.com]]
-[[glycine>https://www.glycine0920.com]]
~
~

**2022.11.02
***中間発表 コメント
-トップのURL記載欄を準備中に書き直しておく
-サイトメニューは現状のものが最適とは限らない
-提案書より実際に作ったサイトを見せながらプレゼンしたほうが良い
-X Dで動きをつける時間があったらコーディングして実際に制作した方が早い
-情報デザイン専攻且つ研究だからX Dより実際のサイトを作ったほうが良い
-半年の成果を出す
~

***作業メモ
-トップのURL記載欄を「準備中」に書き直し
-[[スケジュール表修正>https://docs.google.com/spreadsheets/d/1DuZOAJgwMOBYngfUxDgBP8rT7qaLOjeZ1EfADWUr7FE/edit?usp=sharing]]
-スケジュール表修正
-ツール項目編集
''__Software__''
:|Safari
:|Chrome
:|Firefox
:|Illustrator
:|Adobe X D
:|PowerPoint
:|GitHub
:|Visual Studio Code

~
~

**2022.10.26
***作業メモ
-研究テーマ変更＞＞美容院のサイトデザイン提案書作成
-[[サイトマップ作成>https://drive.google.com/drive/folders/1tccwUNsx1iUecIADDwD4_Z0vpd2ARb_d?usp=sharing]]
-サイトマップ作成
-他美容院のサイト調査
-中間報告準備
-[[スケジュール表修正>https://docs.google.com/spreadsheets/d/1DuZOAJgwMOBYngfUxDgBP8rT7qaLOjeZ1EfADWUr7FE/edit?usp=sharing]]
-スケジュール表修正
~
~

**2022.10.19
***作業メモ
-Spotify API セットアップ
Node.js インストール
~
~

**2022.10.12
***作業メモ
-技術調査
[[SANKOU!>https://sankoudesign.com/]]
[[絞り込み機能>https://www.conoha.jp/lets-wp/wp-search/]]
[[PHPとJavaScriptで複合検索>https://lindsay.chunk.jp/wordpress_customize/composite-search01/]]
[[フィルタリング>https://www.webdesignleaves.com/pr/plugins/filtering-component-with-css.html]]
~

-サイト編集
動作確認
小テーマ設定
Spotify埋め込み確認
ヘッダー&フッター編集
~
~


**2022.10.05
***作業メモ
-[[ワイヤーフレーム 作成>https://drive.google.com/drive/folders/1afmFbGBkXWqM5tGqu8OZWM7tYcI6A75l?usp=sharing]]
-ワイヤーフレーム 作成
~

''__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 ジャケ写から出会う音楽サイト
-[[スケジュール表作成>https://docs.google.com/spreadsheets/d/1DuZOAJgwMOBYngfUxDgBP8rT7qaLOjeZ1EfADWUr7FE/edit?usp=sharing]]
-スケジュール表作成
-先行事例調査
--[[Predominantly>https://predominant.ly]]
~
~

***テーマ案
''__Web__''
-[[FiND MUSiC>木村天美/情報デザイン演習IIA]] リニューアル
:|色を選択するとその色のジャケ写が出てきて再生ボタンを押すと曲が聴けるような仕組みを作る
~
~


**2022.09.21
***作業メモ
-赤文字部分非表示
-テーマ設定のための調査
~
~

***テーマ案
''__Web__''
-[[FiND MUSiC>木村天美/情報デザイン演習IIA]] リニューアル
-美容院のサイト リニューアル
~

''__Graphic__''
-投票済証のデザイン
~
~

***参考
-[[Predominantly>https://predominant.ly]]
-[[好きな色を選ぶだけでその色のジャケット写真を探してくれるサイト | block.fm>https://block.fm/news/predominant]]
-[[兵庫県知事選挙の投票済証明書がポップでかわいいデザインになってた | さんだびより>https://www.sandabiyori.com/p32001/]]
~
~