豊田祥歩/卒業研究II

hanafuri

ハンドメイドブランドのプロデュース/Webサイト制作

• Toyota Akiho
• Keywords：handmade, web design
• http://normal.html.xdomain.jp/hanafuri
• Presentation

Overview

Introduction / What is This

自身のハンドメイドブランドのプロデュース及びWeb制作

Background

• 近年ハンドメイドアクセサリーが流行するなかで、リボンを使用したアクセサリーはレジンなど人気のものに比べて種類が少なく、似た商品が多い。
• Webサイトを販売に利用している人は少なくハンドメイドの販売アプリが主流である。しかし、販売アプリでは販売ページのテンプレートが存在するため情報量や見せ方が制限される。また、商品を販売することが目的であるため、見て楽しむ要素が少ない。

▶︎今までにない新たな形としてリボンフラワーを使用したアクセサリーの制作、またアクセサリーを購入することだけが目的ではない、見るだけでも楽しめるwebサイトを制作しようと考えた。

Purpose

• 新しい形のリボンアクセサリーを制作し、アクセサリーの種類や客層の幅を広げる。
• サイトを訪れた人にリボンフラワーの存在や魅力を知ってもらう。

Concept

ブランド名
「hanafuri」

• アクセサリーのモチーフを分かりやすくするため「花」という単語を使用。
• 花びらがふわりと舞う様子やリボンのフリフリとしたイメージを込めて「hanafuri」とした。
• 柔らかく軽やかな印象を与えるためローマ字表記を採用した。
  
  

コンセプト
「なんでもない日をちょっとイイ日に。」

• 身に着けるだけで少し気分が上がり、自然と笑顔になれるようなアイテムを目指す。
• リボンは安価でコストが低いため気軽に購入しやすい。また、レジンなどが流行する中でリボンフラワーのアクセサリーは数が少ない。そこで、上記の調査結果にある「かわいくて手頃、人とかぶらないアクセサリー」という部分にスポットを当てる。
• メインターゲットには10代から20代の若い女性を設定する。

Output

Webサイト(購入はminne)
ロゴ
アクセサリー

Tools

• HTML , CSS
• Adobe Illustrator , Photoshop
• Procreate
  
  

Term

4年前後期

Conclusion / Summary

Survey

Present Status

• ハンドメイド　販売チャンネル調査
• ハンドメイドアクセサリーに関する利用者の意識調査
• ハンドメイドマーケットアプリについての意識調査
  
  
• リボンフラワーのアイテムはラッピングや飾り物、ギフトアイテムや大ぶりの髪飾りなど普段使いには向かないアイテムが多い。

• ハンドメイドアイテムの販売はminneなどの販売サービスとSNSの併用が主流であり、個人サイトを持つ人は少ない。

Precedent

• 末崎日菜子先輩の卒業研究
  研究ページ
  うつろい 完成サイト
  自身のハンドメイドブランドのWebサイトやプロモーション映像などを制作されている。

• PEKONIKO'S GALLERY
  リボンフラワーのアイテムを販売している作家さん。

• リボンフラワー
  minne
  Google画像検索 (画像検索)

Technique / Technology

Project Management

Schedule

進行管理表🗓

ToDo

• 学科サイト更新(コンセプト、現状調査、先行事例)
• 写真の拡大/スライド
• メインビジュアルスライド用の写真
• minneでの販売、文章作成
• (minne用の写真)
• レイアウト調整
  
  
• ワイヤーフレーム (アナログでもいいから書き出す)
• 写真置き換え
• リンク貼り
• アクセサリー
• 台紙
• minneへのアップ
• シャンブレーオーガンジー購入
• minneヘッダー画像、アイコン画像
• minneプロフィール

2021.12.09

ハンドメイド

SNS

• Twitter・Instagramのアカウントを作成
• Twitterでタグなどを使い宣伝をした日はminneのアクセス数が増加。
• 新しい情報、更新頻度をあげるためにも新しいアイテムを作る必要がある。

minne

• ネーミング
  • 検索されやすいワードを使う。特徴が分かりやすい名前にする。
    
    
• 説明文
  • 梱包に関する情報がないと不安になる。梱包時の写真を追加する。
  • 詳しいサイズの記載(今は何号のリングかしか記載していない)
  • 全長？直径？や使用イメージなどを伝える
  • 検索されそうなワードを記載。(沢山)
    
    
• 写真
  • 説明文を読むのが億劫な人が唯一興味を持ってくれる要素
  • 文章を読み込まなくても大丈夫な工夫(とは)
  • 凝った写真にするより、商品がよく見えて明るく綺麗な写真にすること
    
    
• 他にも色々
  🔗

2021.12.04

合同審査

• 実際のブランド運用に関して改善の余地有り。
  • 現在Twitterのアカウントのみ作成済み。

• 試みること・効果がありそうなこと
  • インスタグラムも併用した宣伝
  • 検索ワードにひっかりやすい商品詳細の文章とタグ付け
  • SNSを利用した効果的な宣伝方法や投稿時間の模索、人脈作り等
  • 絞り込み検索の新着順で商品が出てくるように新商品を随時製作販売
  • 友人などに実際に使ってもらい口コミを得る
  • 適切な価格設定(原価や得られる利益、実際に売れやすい値段、手頃な価格に収めるなどの要素の擦り合わせ)
  • 他作家の方のショップを観察する
  • 梱包発送情報を詳しく記載する

2021.11.30

web

• メインビジュアルのスライド化
  • CSSアニメーションで時間経過のスライドを作成。
  • 写真は差し替えるかも。

🔗CSSだけでスライドショー

2021.11.25

web

• サイトマップ修正
  

ハンドメイド

• minne更新。販売文章のテンプレ(一応)は作った。
• 写真参考

2021.11.12

プレゼン

発表に関すること

• 5分オーバー。長い。
• 目的とまとめにズレがないようにする。辻褄を合わせる。
• 概要集とのズレにも気をつける。(順番とか)
• まとめは客観的に。

研究に関すること

• サイトマップが少し間違っている。(作り直し)→修正済
• そもそもminneとは何なのか。知らない人に向けた説明。
  • minneのサービス内容、ページに飛んだ後の閲覧・購入の流れ
    
    
• htmlにエラーがある。(minneリンクのアイコンのところ)→修正済
• メインイラストからアクセサリーまでが長い。
  • メインビジュに写真を追加してスライドなどにする。ブランドの雰囲気がわかるもの。→修正済(仮)
• id="container"のところをclassに変更。(idは1つ1回までの使用)→修正済
• メニューはセクションで分ける。→修正済

2021.11.05

ハンドメイド

2021.10.2

web

• 写真の差し替えとリンク貼り→済

ハンドメイド

minne

• マイページに作品アップしました。
  • 販売は行っておらず閲覧のみの設定。
  • webサイトと商品名をできるだけ合わせる。
  • 商品の説明の文章をしっかり作る。まだ仮置き状態。
  • 写真綺麗に撮りたい。

2021.10.22

ハンドメイド

アクセサリー

• 制作物の一部。指輪とフラワーボックス。

2021.10.20

ハンドメイド

アクセサリー

• 制作進捗
  • 指輪6種(サテン/サテンパール/シャンブレー/柄/チャーム付き/花びら5枚)
  • イヤリング6種(サテン/シャンブレー/柄/パーツ付き3種)
  • その他6種(マスククリップ/ピンバッジ/ヘアピン/キーホルダー/フレームアレンジ/フラワーボックス)
    必要最低限は制作できた。

minne

• プロフィール更新。
• アイコン、ヘッダー追加。

2021.10.08

ハンドメイド

台紙

• アクセサリーの種類や色に合わせられるように4種類を3色ずつ作成。
• 色はベビーピンク、白、グレーを用意。

→3色用意したものの、白1色のみにする。

2021.10.05

web

修正箇所

• safariのみmenuが画面いっぱいに広がるようにした。
  ↑safariから見たときにmenuがガビガビになるけど修正できなかった。

2021.10.05

web

修正箇所

• menuが右から出てくるようにした。
• 画像の角丸化。
• 写真マウスオーバーで少し拡大。
• 字間を広げた。

🔗http://normal.html.xdomain.jp/hanafuri

修正する(したい)箇所

• 写真差し替え。
• 写真クリックでポップアップ。できればスライド。
• 全体の幅を揃える。
• メインビジュアルの画像を変更。
  • サイトを開いたときにメインビジュアルまでしか見えない状態にしたい。
  • もう少し縦幅のあるものにする。(？)

2021.10.01

制作相談

web

• 見出しのフォントをロゴと揃える。もしくは行間/字間を広くするか字を小さくする。
• menuの字間を空ける。
• 画像の角を取る。

2021.09.17〜2021.09.30

ハンドメイド

• 指輪のみ→指輪、イヤリング、その他で分類。
• イヤリングのイメージ
  
  
  

写真撮影

• Pinterest
• アクセサリー 写真の撮り方
• 【徹底解説】オシャレに見える『#置き画』18のコツ
• みんなに見せたくなる「ハンドメイド作品」の写真を撮る方法！
• 作品の魅力が伝わる写真の撮り方（#minne学習帖）
  
  

台紙

• どうやって作る？ハンドメイドアクセサリー用台紙の作り方まとめ
• 販売用にも使えるピアス台紙やイヤリング台紙の簡単な作り方や穴あけ方法！
  
  

リボン

• Trim-park SHIMADA
  (店頭に並んでいないものの通販)
  
  
  
  

スケジュール

• 進行管理表🗓

夏季休暇中

web

• サイト制作
• 写真のタイルレイアウト
  
  

memo

• 写真や画像の差し替え
• メニューを右から出したい
• 写真の拡大とスライド
• リンク
  
  
  
  

ロゴ

変更後

• 使用フォント：WindSong

変更前