LogoMark.png

伊藤早紀/情報デザイン研究I の変更点


#author("2026-07-16T12:06:11+09:00;2026-07-16T11:04:19+09:00","default:member","member")
#author("2026-07-16T15:55:03+09:00","default:member","member")
*Felune🌙
架空のネイルブランド ・・・・・・・・・・・・・・・・ 

#image(rogo_pre2.jpg)


-''Ito Saki''
-'''Keywords:nail, web, brand promotion'''
-''[[完成品はこちら>https://sayk-27625.github.io/Felune/]] ← Click''
-[[作品概要>https://ksumail-my.sharepoint.com/:b:/g/personal/k24as004_st_kyusan-u_ac_jp/IQC697wPNmWOS64VxIFHiLazATqswlWhdkG55yUH0chBNIQ?e=qdHSVe]]
//-https://www.example.com
//-__[[相互評価シート>https://www.example.com]]__  ← ここからコメントをお願いします。
//-[[何か意見などあればこちらにもご回答よろしくお願いします!!←Click>https://docs.google.com/forms/d/e/1FAIpQLScVJzcBJ876q9MCuSc1g9vE4u9JWwJg3rkq93mGmPGD-kBVdg/viewform?usp=publish-editor]]
~

//***CONTENTS
//#contents2_1
//~


**概要
***これは何?
//&color(red){これは何か・・を簡潔に};
架空のネイルブランド「Felune」(フェルーン)を運用するwebサイト
~

***背景と目的
//&color(red){プロジェクトの背景と目的};
ネイルは女性のファッションであったが、近年では男性もネイルをする方が増え、ジェンダーレスに自由に楽しめるものになってきている。
そんなネイルの魅力をより多くの人に知って欲しいため
また、ネイルのブランドサイトは商品の羅列が多いため、Webサイトにおいて効果的に魅力を発信する可能性を見出す。
~

***コンセプト
//&color(red){基本的な考え方、枠組み、視点など};
「かざして見える、指先の煌めきと幸せ」をテーマに、誰でも手に取りやすいようなジェンダーレスを目指したブランド
~

***成果物の仕様
//&color(red){&small(成果物の形式・サイズ・時間尺等);};
Webサイト
[[完成品はこちら>https://sayk-27625.github.io/Felune/]] ← Click

~

***制作ツール
//&color(red){使用するツール|ハードウエア・ソフトウエア};
adobe stock
adobe firefly
adobe illustrator
adobe photoshop
visual studio code
~

***プロジェクトの期間
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
2026.04 ~ 2026.07
~

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

今回の制作では、ブランドコンセプトをもとに、ロゴやカラー展開だけでなく、Webサイト全体の構成やアニメーション、操作性まで一貫性を持たせることを意識した。フェードインやローディング画面、ネイルポリッシュの切り替え機能などを取り入れることで、ユーザーが自然とブランドの世界観に入り込み、楽しみながら閲覧できるサイトを目指した。また、ジェンダーレスなビジュアルやレスポンシブデザインを採用することで、多様な利用者に配慮した設計を行った。今回の制作を通して、Webサイトは単に情報を掲載する場ではなく、ブランドの魅力や価値観を体験として伝える媒体であることを学んだ。今後もコンセプトとユーザー体験を両立したデザインを目指し、より完成度の高い作品制作に取り組んでいきたい。
~


**調査

***現状調査
#YouTube(G2D-syOU7d8?si=cH8yJADLEgco_FON),50%
//&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し};
-[[ナチュラル系マニキュアブランドおすすめ18選|有害物質成分無添加ネイルで好きな色を楽しもう!>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://ethical-leaf.com/2176/&ved=2ahUKEwjZ98L786WUAxW_dPUHHb7oMWYQFnoECEcQAQ&usg=AOvVaw3uLJucONHTZsfZwVWHb2ew]]
-[[日本経済新聞 メンズネイル普及率>https://www.nikkei.com/article/DGXZQOUC094930Z00C22A9000000/]]
-[[ホットペッパー ネイルサロン使用率>https://hba.beauty.hotpepper.jp/wp/wp-content/uploads/2025/06/census_nail_data_20260626-2.pdf]]
~

***先行事例
//&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など};
-ネイルブランド先行事例
--[[Oui nails>https://ouinails.jp/#beautiful]]
--[[NAIL HOLIC(ネイルホリック)|KOSE>https://www.kose.co.jp/nailholic/]]
--[[ネイルエス>https://www.s-official.co.jp]]
--[[Freecus>https://www.freecus.com]]
~

***技法・技術情報
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
//サイトを埋め込む
-[[JavaScriptの書き方とは>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://school.dhw.co.jp/course/web/contents/r_JavaScript-howto.html&ved=2ahUKEwif4o_O86WUAxXOnq8BHecaAvQQFnoECCMQAQ&usg=AOvVaw2BTReRmatPf1aPqQ4xtxyi]]
~
~

**プロジェクト管理

***スケジュール
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
//一日単位のスケジュール、excelとかGoogleシート、ガントチャート
[[ガントチャート>https://ksumail-my.sharepoint.com/:x:/g/personal/k24as004_st_kyusan-u_ac_jp/IQB1KCEUKAcPQqZ4v7mS3wWQAfQMaEPCh1h0Z-RSzwnKG0g?e=NiWOnt]]
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
-%%ブランド名、ロゴ制作%%
-%%ワイヤーフレーム%%
-サイト調査
-(物撮り)
-%%カラー名考案%%

~
***NotToDo
//&color(red){やらないこと:何をするかではなく「何をしないか」を考える};
//&color(red){例:10人以上の会議には出ない。苦手なことは誰かに頼む・・};
-時間を浪費しない

~
~

#hr
CENTER:''進捗記録''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr
~
~

**2026.07.16
***まとめ、修正点
-pngをjpegへ変換
-AIが主流なゆえに、画像は仕方ない
→ブランドのコンセプトをどう固めるか、思考力の問題
-次へ発展させやすいカラー展開
-ロゴの統一感、させないといけない
-ハンバーガーメニュー
-背景の星
-画像の修正
//--男性の自爪
//--コンセプトのビジュアル
//--AIの種類の書き込み

~
~

**2026.07.09
***ブラッシュアップ
-java仕様の拡大


~
~

**2026.07.02
***サイトコードの制作
-

~
~


**2026.06.25
***サイトコードの制作

***作品概要の制作
-[[ホットペッパー ネイルサロン使用率 最新版2026>https://hba.beauty.hotpepper.jp/wp/wp-content/uploads/2026/06/census_nail.pdf]]

~
~

**2026.06.18
***サイトコードの制作

***作品概要の制作

~
~

**2026.06.11
***サイトコードの制作


-作品概要の制作

~
~

**2026.06.04
***サイトコードの制作

***TO DO
-作品概要の制作

~
~


**2026.05.21
***改善点
-ロゴの説明が足りていない(背景にあったような由来を)
-コレクションの説明が伝わりづらかった
→補足して修正
-ワイヤーフレーム・サイトマップの仕様について(シングルページの場合)
→樹形図というよりはワイヤーフレームのようなもの
~
~

**2026.05.14
***カラー決め
#image(colorcode.jpg,60%)
-''1st COLLECTIONに6色を起用''
-このカラーを元にデザインカンプの作成
-コレクションごとにサイトデザインも更新する
-''ピンクのカラー名Moist→Muse に変更''

~
~

**2026.05.07
***サイトマップの作成
#image(sitemap.png,60%)
-間をとって6色展開の予定
~
***ガントチャートの作成

~
~

**2026.04.30
***ワイヤーフレームの作成
#image(frame.jpg,30%)
~
~



**2026.04.23
***試作に向けてのTo do
-%%ブランド名、ロゴ制作%%
-ワイヤーフレーム
-サイト調査
-(物撮り)
-カラー名考案
~
~

***ブランド名、ロゴ試作

#image(rogo_pre.png)
~

-ブランド名→Felune
-月をモチーフとしたブランドコンセプト
--Felicity(幸福)+ Lune(月)
~
-課題点
--月をFと見立てているが、視認性が低い
--上の波線の角度や向き

~
~
**2026.04.16
***テーマ案の参考資料
-インタラクティブデザインについての研究
--[[インタラクティブアートとは?表現の特徴や歴史、有名な作家・作品を紹介>https://www.dhw.ac.jp/now/list/howtobe/interactive_art/]]
--[[開発元Derivativeに聞く、空間演出の必携ツール「TouchDesigner」とは?>https://cgworld.jp/article/202512-cgw327-td.html]]
--[[インタラクティブアートとは?定義・歴史・作り方【2026年版】>https://www.utsubo.com/ja/blog/interactive-art-guide]]
-架空のネイルブランドHP制作
--[[Oui nails>https://ouinails.jp/#beautiful]]
--[[NAIL HOLIC(ネイルホリック)|KOSE>https://www.kose.co.jp/nailholic/]]
--[[ネイルエス>https://www.s-official.co.jp]]
--[[Freecus>https://www.freecus.com]]
~
~

**2026.04.09
***制作テーマ案
-インタラクティブデザインについての研究(サイト運用)
-五感を使ったデザインアート
-空間を使ったエンターテインメント
-カップリング曲のジャケットデザイン
-''架空のネイルブランドHP制作''
~
~

***テーマキーワード
-没入感、非現実空間
-テーマパーク
-海、水
-五感(特に視覚、嗅覚、聴覚)
-反射、鏡
-redesign
-ジャケットデザイン
-映像表現
-インタラクティブアート
-ネイル
-水族館
-色と感情
-タイポグラフィ
-ドットアート
~

~