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

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



#image(mainvisual.jpeg)



-''Ami Kimura''
-'''Keywords：Web design, Beauty salon'''
-準備中・・・

~


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

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

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

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

***Outputs
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Webサイト
~

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

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

''__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){プロジェクトが完結したら「まとめ」を記載して下さい。};

~
~


**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){プロジェクトの遂行に必要な技法・技術に関する調査};
//&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
~
~


**2022.11.16
***作業メモ
-
~
~


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

''__周辺の美容院サイト調査__''
-[[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/]]
~
~