#author("2025-07-29T02:36:18+09:00;2025-07-29T02:28:53+09:00","default:member","member") #author("2025-09-18T22:39:06+09:00;2025-07-29T02:28:53+09:00","default:member","member") *全てがステキなものに 包装と便箋のブランディングソーシャルメディア制作 ~ #image(main1.jpg) ~ -''Takematsu Riu'' -Keywords：サイト, 包装便箋, 通販について, ~ **概要 ***これは何？ 包装と便箋のブランディングソーシャルメディア制作 //&color(red){これは何か・・を簡潔に}; ~ ***背景と目的 現状としてオリジナルの物足りなさが背景にある 包装と便箋をセットでデザインすることで他とは違う統一感溢れた贈り物に 包装・ラッピング好きが求める"カタチ"を生み出す 既製品では満たせないオリジナリティへの想いを背景として包装と便箋に特化したブランディングとソーシャルメディアを制作していく //&color(red){プロジェクトの背景と目的}; ~ ***コンセプト 包むこと。書くこと。贈ること。 そのすべてを、もっと素敵なものに。 #image(message.png) 包装の"ワクワク感"と便箋の"温かみある伝言力"を掛け合わせることで贈り物に深みや個性・統一感が生まれる 分別しやすくリサイクルしやすいように包装全体を同じ素材で作成 異素材を組み合わせないことで廃棄時の混乱を減らす プレゼントの贈り主も受け取り主も"開けたくなるパッケージ"や"撮りたくなるデザイン"として、ブランドと顧客のつながりを深める //&color(red){基本的な考え方、枠組み、視点など}; ~ ***成果物の仕様 -Webサイト ~ -サイトマップ ~ #image(site.png) 包装・便箋ページについては 事例提案・ブランディング方法なので実際に販売はしない ~ -ワイヤーフレーム ~ |49|2|49|c |#image(wireframe.png)||#image(wireframe1.png)| #settableborder(none パソコンの場合 Home・Shop・Aboutを左側に表示 ~ ~ |49|2|49|c |#image(wireframe2.png)||#image(wireframe3.png)| #settableborder(none) スマートフォンの場合 Home・Shop・Aboutをハンバーガー形式で表示 ~ ~ Aboutの例（ パソコン ） |49|2|49|c |#image(a.image.png)||#image(a.image1.png)| #settableborder(none) Aboutのイメージ インスタは仮 実際に販売はしないので非公開で作成してスクショを添付する ~ -[[Pinterest>https://pin.it/3fiANuaJO]] 参考：包装デザインについて //&color(red){&small(成果物の形式・サイズ・時間尺等);}; ~ ***制作ツール Visual Studio Cord：HTML + CSSのコーディング Adobe Illustrator：ビジュアルデザイン ~ ***プロジェクトの期間 プロジェクトの期間｜2025.04.08 - 後期終了まで ~ ***まとめ 包装と便箋のブランディングソーシャルメディア制作 ~ TsuTsu | Make everything lovely 包む・書く・贈る。 日々を素敵にする包装と便箋のブランド 実際には販売しない形式でブランディングソーシャルメディアの制作方法について学習していく ~ 包装と便箋のセットで販売（ 単品で買うことも可能 ） ひとつひとつのアイテムに物語エピソードを綴る どんな贈り物にしようか想像してもらう時間を楽しんでもらうため ~ 季節によって贈り物が変化することを想定してデザインも変えていく 新作を出すタイミングとしてはシーズンまたはスポットで追加していく ~ **調査 ***現状調査 環境負荷の低減やリサイクル、省資源化といった社会的な要請に対応する動きが強まっている プラスチックの代替として、紙や植物由来の素材を使った包装への移行が進んでいる //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ~ ***先行事例 -[[ラッピングペーパー・薄葉紙>https://haguruma.co.jp/wrapping-paper?gad_source=1&gad_campaignid=20748953669&gclid=Cj0KCQjw0LDBBhCnARIsAMpYlAq4Ihf2B2bEwLglhXnoMWOJfQ-5tx_xZy-8riVbN7T9zZfHACLaKW0aAlM6EALw_wcB]] -[[プリントパック>https://www.printpac.co.jp/contents/lineup/wrapping_paper/?gad_source=1&gad_campaignid=21205860433&gclid=Cj0KCQjw0LDBBhCnARIsAMpYlAqQjNjWFl3vK9kp6vNoFMCkbOew2tX1TrbT4l8w_lblNTaGBS6GTYYaAvoxEALw_wcB]] -[[包装について>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.mitsui-soko.com/column/2022/02&ved=2ahUKEwjotL2puteMAxURklYBHaqNHK4QFnoECFAQAQ&usg=AOvVaw0ZeXPaXM1n87XvL3TSX3mw]] -[[包む>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://tsutsumu-shop.com/%3Fmode%3Dcate%26cbid%3D2851963%26csid%3D3%26srsltid%3DAfmBOorZLl47UxcHuIVYRx0t9fqAvHdvpghsye7gjmnY9FRxhw9YWukJ&ved=2ahUKEwi2trWgudeMAxXKqVYBHYO6M9wQFnoECFkQAQ&usg=AOvVaw3dq3QzSjug7pip8hPpBBrU]] -[[ヘッズ>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.e-heads.co.jp/shop/r/rf01/&ved=2ahUKEwi2trWgudeMAxXKqVYBHYO6M9wQFnoECDkQAQ&usg=AOvVaw1d1tKQ_2HcDfXGTgsLtHSk]] -[[便箋の書き方の基本>https://letter.midori-japan.co.jp/letter-manners/binsen/]] -[[手紙舎>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://tegamisha.com/c/items/letter_paper&ved=2ahUKEwjvmeq3p-aNAxXvgq8BHYSQHh4QFnoECGcQAQ&usg=AOvVaw1ZnDy8sUoLj5864hoLbZit]] //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; ~ ***技法・技術情報 [[1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］>https://www.sbcr.jp/product/4815618469/]] Visual Studio Cord：HTML + CSSのコーディング Adobe Illustrator：ビジュアルデザイン ~ ~ **プロジェクト管理 ***スケジュール -[[工程表・ガントチャート>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as018_st_kyusan-u_ac_jp/EY-zXIYpZctMjoD6uH9sAfwBZ-61qjRSTTr6kT4TWCGxZQ?e=DbUPh5]] ~ ***ToDo web関連の写真作成 包装のデザイン案・Adobe Illustrator ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2025.07.15 ***報告と提案・振り返り 7月1日の引き続き制作 **2025.07.08 ***発表報告 何を売り出したいか理解されてない Shopでは包装用紙と便箋の２つ 包装用紙の使い道として、ただ商品を包装することにだけ使うのではなく ポチ袋・ブックカバー・封筒をその用紙で作ることもできるよってことをサイトに記載する 使う用途の種類を分かりやすく紹介する 包みたい商品が小さめでも敢えて大きめのサイズを選択して、いろんな活用をしてみることも可能 ~ ***報告と提案・振り返り webで使用する素材集め・制作 ~ **2025.07.01 ***報告と提案・振り返り -ビジュアル 紙で印象付けたいので サイトに使用するイラストみたいなビジュアルを折り紙で作った物にする -折り紙購入 サイトに使用するマークを折り紙にする -便箋購入 #image(t1.jpg) 解体して、型取りして、A4用紙で便箋を作成 ~ **2025.06.24 ***報告と提案・振り返り -サイズについて 課題： 包む物の意味・手触り・形・用途によっては幅広い種類の包装を制作・大変 解決： 包装紙を"折る・切る・巻く"で自由度をあげて楽しんでもらう ３種類のみにする Sサイズ（ A4 アクセサリー・文具・お菓子 ） Mサイズ（ A3 書籍・ハンカチ2-3枚・マグカップ ） Lサイズ（ B2 厚手のマフラー・大きめのぬいぐるみ20-30cm・小型バック ） リサイクル点 折り紙感覚・折り紙レシピ・ポチ袋・ブックカバー・封筒に展開可能 ~ ***参考サイト -[[ブックカバーの作り方>https://craftie.jp/style/article/32678]] -[[折り紙>https://www.origami-club.com/index.html]] -[[ポチ袋の作り方>https://craftie.jp/style/article/22219]] -[[封筒の作り方>https://www.teinei.co.jp/teinei-tsushin/detail/207]] ~ **2025.06.17 ***報告と提案・振り返り -Home 作品・商品のビジュアル・写真の表示 クリック出来るようにする 所々に魅力を伝えるための短い文を入れる -Shop 包装・便箋ページ 一つ一つに物語・エピソードを綴る 事例提案・ブランディング方法なので実際に販売はしない -About About（コンセプト） Contact（名前・メール・コメント・インスタ） ~ パソコン |49|2|49|c |#image(a.image.png)||#image(a.image1.png)| #settableborder(none) Aboutのイメージ インスタは仮 実際に販売はしないので非公開で作成してスクショを添付する ~ **2025.06.10 ***報告と提案・振り返り -包装＋便箋のセット 包装と便箋が同じデザインだと統一感を出せる 包装だけだと物足りなさがある セットにするかは購入する際に選べるようにする -シーズン・季節・イベント絡み シーズンごとに使う品が変わる EX ） 夏：ガラスのコップ・Tシャツ 冬：マフラー・手袋・マグカップ 新作を出すタイミングとしてはシーズンまたはスポットで追加していく 一度に９〜１２パターンの更新で全２７パターン程度 -包装のサイズについて 包装の寸法：◯cm表記 大きさ比較：物との比較写真の表示 季節によって比べる物を変更 ~ ***便箋についての調査 便箋は、手紙を書くための用紙 内容を伝えるための主役 通常は縦書き・横書き 便箋の一般的なサイズ：B5 (182mm × 257mm) -[[便箋の書き方の基本>https://letter.midori-japan.co.jp/letter-manners/binsen/]] -[[手紙舎>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://tegamisha.com/c/items/letter_paper&ved=2ahUKEwjvmeq3p-aNAxXvgq8BHYSQHh4QFnoECGcQAQ&usg=AOvVaw1ZnDy8sUoLj5864hoLbZit]] ~ ***サイトのAboutページに使用する説明書き #image(message.png) ~ ***サイト関連 タイトル |49|2|49|c |#image(1t.png)||#image(2t.png)| #settableborder(none) ~ サブタイトル |49|2|49|c |#image(3t.png)||#image(4t.png)| #settableborder(none) ~ **2025.06.03 ***報告と提案・振り返り -包装のデザインについて考える 質・色味・透け感・サイズ ~ ***参考サイト -[[ラッピングペーパー・薄葉紙>https://haguruma.co.jp/wrapping-paper?gad_source=1&gad_campaignid=20748953669&gclid=Cj0KCQjw0LDBBhCnARIsAMpYlAq4Ihf2B2bEwLglhXnoMWOJfQ-5tx_xZy-8riVbN7T9zZfHACLaKW0aAlM6EALw_wcB]] -[[プリントパック>https://www.printpac.co.jp/contents/lineup/wrapping_paper/?gad_source=1&gad_campaignid=21205860433&gclid=Cj0KCQjw0LDBBhCnARIsAMpYlAqQjNjWFl3vK9kp6vNoFMCkbOew2tX1TrbT4l8w_lblNTaGBS6GTYYaAvoxEALw_wcB]] ~ ***メインビジュアルの変更・完成 #image(main1.jpg) ~ **2025.05.27 ***報告と提案・振り返り -受注の数を初めから決めておく 商品によって数量を変える EX ）50 〜 100枚 デザインによって作成方法が変わるため なくなり次第終了 ~ ***ワイヤーフレーム ~ パソコン |49|2|49|c |#image(wireframe.png)||#image(wireframe1.png)| #settableborder(none) ~ スマートフォン |49|2|49|c |#image(wireframe2.png)||#image(wireframe3.png)| #settableborder(none) ~ ~ **2025.05.20 ***報告と提案・振り返り -受注生産式にするのか、解像度を高めておくこと ~ ***サイトマップ #image(site.png) ~ **2025.05.13 ***調査の報告・参考サイト -[[無印良品ギフト・ラッピング>https://www.muji.com/jp/shop/service/gift/]] -[[MARC JACOBS>https://www.marcjacobs.com/default/the-marc-jacobs/heaven/view-all/]] -[[uou cute>https://www.uou-cute.com/]] ~ ***進捗状況 -背景と目的の変更 -コンセプトの内容変更 ~ **2025.04.29 ***調査の報告と提案・振り返り -何セットか種類を作る ９パターン今後作っていく -自己紹介含めたサイトにする ~ ***進捗状況 -概要作成 ~ **2025.04.22 ***調査の報告と提案・振り返り -販売仕様にはするが実際には販売しない方向 -どんなサイトであるか、紹介だけでもいいのではないか -STORYを綴ったり、事例提案をしたりブランディング方法の紹介 ~ ***進捗状況 -HTMLの作成 -サイトマップの構成を考え直す【清書する】 ~ **2025.04.15 ***調査の報告と提案・振り返り -包装サイトについて 販売タイプかダウンロードタイプ【現時点の方向性は販売】 -包装の種類について リサイクル・廃棄を増やさないためにできる工夫 購入してもらうための工夫点 -HTMLでいちから作成してみたい ~ ***Pinterest -[[包装デザイン>https://pin.it/cPQsLGTke]] -[[取り入れたいデザイン>https://pin.it/2rteLBtoy]] ~ ***工程表・ガントチャート -[[工程表・ガントチャート>https://ksumail-my.sharepoint.com/:x:/g/personal/k23as018_st_kyusan-u_ac_jp/EY-zXIYpZctMjoD6uH9sAfwBZ-61qjRSTTr6kT4TWCGxZQ?e=m4pGdQ]] ~ **2025.04.08 ***気になるテーマ -包装の種類、デザイン -Webサイトの作成、通販の仕組み、課題と解決策 ~ ***関連したサイト -[[包装について>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.mitsui-soko.com/column/2022/02&ved=2ahUKEwjotL2puteMAxURklYBHaqNHK4QFnoECFAQAQ&usg=AOvVaw0ZeXPaXM1n87XvL3TSX3mw]] -[[包む>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://tsutsumu-shop.com/%3Fmode%3Dcate%26cbid%3D2851963%26csid%3D3%26srsltid%3DAfmBOorZLl47UxcHuIVYRx0t9fqAvHdvpghsye7gjmnY9FRxhw9YWukJ&ved=2ahUKEwi2trWgudeMAxXKqVYBHYO6M9wQFnoECFkQAQ&usg=AOvVaw3dq3QzSjug7pip8hPpBBrU]] -[[ヘッズ>https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.e-heads.co.jp/shop/r/rf01/&ved=2ahUKEwi2trWgudeMAxXKqVYBHYO6M9wQFnoECDkQAQ&usg=AOvVaw1d1tKQ_2HcDfXGTgsLtHSk]] ~ ~ ~