#author("2019-12-06T20:39:10+09:00","default:member","member")
*Charm Star
コンバースの経年変化とコーディネートを楽しめるビデオログサイト制作
'''Keywords：Converse , Used , University Student , Web , Vlog , Coordinate , SNS'''
CENTER:
&image(prezen_top.jpg,,100%);
~
~
**研究の背景・目的
~
***背景
-コンバースが大好き
-新品のコンバースより経年変化が魅力的だと感じている
-ファッションアイテムやコーディネートをZOZOTOWNやWEARなどで気軽にチェックできる
-ZOZOTOWNやWEARに掲載されているアイテムは新品のものが多く、経年変化による魅力が伝わりにくいと感じた
~
***目的
-TikTokやYouTubeなどの普及で動画が生活の身近なものになっている
-ファッションアイテムやコーディネートを動画で楽しめるサービスは少ない
-経年変化によるコンバースの魅力を楽しんでもらいたいと思い、動画を活用したコンバース主体のWebサイトを制作したい
~
~
**制作・制作物
~
***コンセプト
-コンバースの経年変化とコーディネートを楽しむ
-既存のサービスでは伝わりにくい、経年変化によるコンバースの魅力やコーディネートを、簡易的な動画をブログ形式で公開するビデオログ手法を活用したWebサイトによって表現
-アナログ的な擦れの表現や型にはまらない自由曲線を使用
-ネーミングは経年変化によるコンバースの魅力を楽しんでほしいという意味でCharm Star
~
***シンボルとロゴ
-シンボルはコンバースを連想させる星のビジュアル
-オブジェクトを重ね、様々なコンバースの魅力を表現
-ロゴのフォントは、適度な柔らかさと抑揚があるミリアドを使用
~
CENTER:
&image(pre_logo.jpg,,40%);
~
***Web
-動画や写真を使い、経年変化によるコンバースの魅力と楽しさを感じるものに
-動画、写真、コメントなどの情報を記載
-シンボルとロゴの表現を活かし、擦れの表現、自由曲線を使用
-動画や写真の配置や切り抜きを工夫し、リズムをつけることで楽しい雰囲気を作り出した
-レスポンシブデザイン
（全20ページ）
~
CENTER:
[[&image(pre_web.jpg,,50%);>http://mori.starfree.jp/charmstar/index.html]]
~
***動画
-[[サイト>http://mori.starfree.jp/charmstar/snap001.html]]同様、擦れの表現やフィルムバーンの効果を使い、経年変化したコンバースの魅力を引き立てる
-コーディネートと単体のカットを組み込み、リズムのある動画に
-コンバースの種類や、カラーなどの情報を組み込み、動きを作る
-撮影や編集は時間短縮の工夫
（全20種類）
~
#vimeo(375630210)
~
|48|4|48|c
|#vimeo(375987551)||#vimeo(377505710)|
~
|48|4|48|c
|#vimeo(376115150)||#vimeo(377380619)|
~
***SNS
-コーディネートの投稿を載せている人も多いInstagramを使用
-サイトの知名度、閲覧数の向上を狙って、写真や動画の情報を投稿
~
CENTER:
[[&image(pre_sns.jpg,,50%);>https://www.instagram.com/charm_star__/?hl=ja]]
~
~
**まとめ
-動画の撮影や編集は膨大な時間がかかるが、工夫（撮影者に完成イメージを見せる・テンプレートを制作）をすることで効率化を図った
-10代20代を中心にWebアンケートを行ったが、約90％が経年変化によるコンバースの魅力が伝わったと答え、高い効果が得られた
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
//■■■■■■■■■■■■■■■■■■■■■■■ここから概要■■■■■■■■■■■■■■■■■■■■■■■■■
//*Charm Star -We love converse-
//*charm star
//***-毎日履きたいコンバースの魅力-
//*エイジング コンバース ビデオログサイト
//*コンバース100
//コンバースの魅力を動画と写真で掲載したスナップサイト制作
//経年変化によるコンバースの魅力を楽しめるビデオログサイト制作
//コンバースの経年変化とコーディネートを楽しめるビデオログサイト制作
//'''Keywords：Converse , Used , University Student , SNS , Web Design , Video , Vlog , Coordinate'''
//Converse , Fashion , used , Simple , Youth , University Student , SNS , Web Design , Movie
~
#image(top01.jpg,,100%);
~
~
**研究の概要
//&color(red){以下、プロジェクト管理のための記載例です。};
//プロジェクトごとに作業の進め方は異なるので、見出しの構成もそれに応じて変わるものと考えて下さい。要は、メンバー間で「情報共有」すべき内容を、整理して書く・・ということです。};
~
***概要
//（プロジェクトの説明を簡潔に）
//コンバースの魅力を動画と写真で伝えるスナップサイト制作
//コンバースの魅力を動画と写真で詰め込んだスナップサイト制作
//経年変化（エイジング）によるコンバースの魅力を楽しめるビデオログサイト制作
//コンバースの経年変化とコーディネートを楽しめるビデオログサイト制作
~
***目的・主旨
//（何のために、誰のために・・など）
私は[[コンバース>https://converse.co.jp]]が大好きだ。コンバースはカラーや種類などバリエーションが豊富であり、比較的安価な製品で、どのようなコーディネートにも合わせやすいオーソドックスなスニーカーとして大学生を始めとする若い層に人気である（[[コンバースの歴史>https://converse.co.jp/brand-history/]]）。特に私は、新品のコンバースより履き込んだコンバース（経年変化）が魅力的だと感じている。新品のコンバースを履くことは、恥ずかしささえある。また、コンバースは履く人の性格や特徴まで現れるものだと考えており、経年変化によって、風合い、パッチの擦れ、クタッと感などの味が出てくる。そこに魅力があるのではないか？と考える。自分と同じように感じている人は少なくないだろう。
//現代では、ファッションアイテムやコーディネートを[[ZOZOTOWN>https://zozo.jp/]]や[[WEAR>https://wear.jp/]]などで気軽にチェックすることができ、同時に服や靴などのファッションアイテムを手軽にサイトで購入できるのが一般的である。ZOZOTOWNやWEARには様々なアイテムが掲載されているが、掲載されているアイテムは新品のものが多いと感じた。そのため、コンバースのように、使っているうちに良さが出てくるアイテムの魅力が伝わりにくいのではないかと感じた。
//また、現代では、[[Instagram>https://www.instagram.com/explore/tags/%E6%99%AF%E8%89%B2/?hl=ja]]や[[YouTube>https://www.youtube.com/]]などの普及もあり、写真や動画が私たちの生活の身近なものになっている。そこで今回私は、経年変化（エイジング）によるコンバースの本来の魅力を楽しんでもらいたいと思い、動画を活用したコンバース主体のWebサイト制作をしたいと考えた。また、スマートフォンの利用が当たり前になった今、多くの方に情報をみて頂けるため、そして、多くの情報を掲載することに向いているWebというツールを採用したいと考えている。
//私は[[コンバース>https://converse.co.jp]]が大好きだ。コンバースはバリエーションが豊富であり、比較的安価であり、合わせやすいオーソドックスなスニーカーである。その結果、多くの人に愛される名作となっている（[[コンバースの歴史>https://converse.co.jp/brand-history/]]）。特に私は、新品のコンバースより、履き込んだコンバース（経年変化）が魅力的だと感じている。新品のコンバースを履くことは、恥ずかしささえある。また、コンバースは履く人の性格や特徴まで現れるものだと考えており、経年変化によって、色合い、パッチの擦れ、クタッと感などの味が出てくる。そこに魅力があるのではないか？と考える。自分と同じように感じている人は少なくないだろう。
//コンバースのレトロ感、ハイカットのパッチ、形状、合わせやすさ、など、見ているだけで幸せである。
//また、私は[[Right-on>https://right-on.co.jp]]でアルバイトをしており、大学生から「大学生の服装ってどんな感じですか？」と、よく聞かれ、大学生は服装に困っている人が多いと感じる。だが、
//現代では、ファッションアイテムやコーディネートを[[ZOZOTOWN>https://zozo.jp/]]や[[WEAR>https://wear.jp/]]などで気軽にチェックすることができ、同時に服や靴などのファッションアイテムを手軽にサイトで購入できるのが一般的である。ZOZOTOWNやWEARには様々なアイテムが掲載されているが、掲載されているアイテムは新品のものが多いと感じた。そこで、コンバースのように、使っているうちに、経年変化によって良さが出てくるアイテムの魅力が伝わりにくいと感じた。
//今回私は、コンバースに着目し、履き込んで、経年変化によるコンバースの魅力をさらに伝えたいと思い、コンバース主体のビデオログサイト制作をしたいと考えた。現代では、[[Instagram>https://www.instagram.com/explore/tags/%E6%99%AF%E8%89%B2/?hl=ja]]や[[YouTube>https://www.youtube.com/]]などの普及もあり、写真や映像が私たちの生活の身近なものになっている。Webサイトの良さは、無限に情報を掲載することができることである。また、スマートフォンの利用が当たり前になった今、多くの方に情報をみて頂けるため、Webというツールは適しているため、今回、ビデオログサイトを制作していきたい。
//コンバースは比較的安価で学生の味方でもあることから、ターゲットを大学生に絞ったサイトを制作していきたい。コンバース好きの人は勿論、大学生のためになるようなWebサイトになると考えている。
//具体的には、動画や写真で味のあるコンバースの魅力を掲載するとともに、コーディネートも掲載した大学生向けのスナップサイトの制作である。
//そのような、味のあるコンバースを履いている人の[[スナップショット>https://kotobank.jp/word/%E3%82%B9%E3%83%8A%E3%83%83%E3%83%97%E5%86%99%E7%9C%9F-188153]]をまとめたスナップサイト制作することで、コンバース好きの人は勿論、大学生に必要なサイトになると考えている。
~
//***制作方法
//① 企画を行う
//② Webサイトのサイトマップを制作する
//③ ワイヤーフレームと同時にビジュアルを制作する
//④ 撮影を行う。
//⑤ 撮影素材を編集し、YouTubeに動画を投稿する
//⑥ Webサイトのコーディングを行う
//⑦ Webサイトを公開
//⑧ SNSを活用し、告知を行う
~
//***制作物
//① コンセプト
//既存のサービスでは伝わりにくい、経年変化によるコンバースの魅力やコーディネートを、簡易的な動画をブログ形式で公開するビデオログ手法を活用したWebサイトによって表現する。
//② シンボルとロゴ
//コンバースを連想させる星などのシンプルなビジュアルなどを使用する。また、経年変化を表現するためにレトロ感のあるアナログ的な擦れの表現などを使用したシンボルとロゴとする。
//③ Web
//動画を効果的に使用し、履き込んだコンバースの魅力と楽しさを感じるWebサイトを制作する。シンプルなビジュアルを意識しつつ、レトロな印象を与えるものを目指す。動画、写真、コンバースの使用期間や身長、コメントなどの情報を記載する。写真の配置や切り抜きを工夫し、Webサイト全体にリズムをつけ、楽しい雰囲気と世界観を作る。
//④ 動画
//履き込んだコンバースの魅力と楽しさを感じる映像にする。レトロで楽しいイメージを表現する。写真の切り込みを映像に組み込んだり、フィルムバーンなどの効果を使い、経年変化したコンバースの魅力を引き立てる工夫を施す。コンバースを使ったコーディネートと単体のカットを組み込むことでリズムのある動画を制作する。また、動画内にWebサイト同様、コンバースの使用期間や身長、コンバースの種類や、カラー、コメントなどの情報も組み込み、撮影素材と文字情報で動きを作る。
//（最終的に何ができるか、期待される効果・・など）
//制作物として、経年変化によるコンバースの魅力を楽しめる動画や写真、それを掲載するビデオログサイト制作
//制作物として、コンバースの魅力を伝える動画、写真、それを掲載するウェブサイトが考えられる（目標100人）。
//また、告知動画（サイネージ）や広告（ポスター）なども考えている。
//~
//***使用するツール
//Web、動画
//'''Keywords：Converse , Fashion , used , Simple , Youth , University Student , SNS , Web Design , Movie'''
//Converse , Fashion , used , Simple , Youth , University Student , SNS , Web Design , Movie
~
//***スケジュール
//[[スケジュール>https://docs.google.com/spreadsheets/d/1fXzkXS6714sEXzI8828STrwxdWYxaYbd1k9Zox4OQ7s/edit?usp=sharing]]
//#image(スケジュール01.png);
//#image(スケジュール02.png);
//~
//**ToDo
//-%%アイデア探し%%
//-%%ある程度のテーマ決め%%
//-%%コンセプト決め（イメージを固める）%%
//-%%テーマ決め%%
//-%%Webのビジュアルを完成させる%%
//-%%Webイメージが、HTML CSSで実現可能かを試作する%%
//-映像の撮影
//-映像の編集
//-%%試制作%%
//-本制作
//-完成
//~
//~
//--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
**進捗・記録2019.11.30
-メモ
きのこ探偵
季節感を感じる、コーデュロイ素材のワーク感強めなつなぎは、メンズアイテムとのこと。カジュアルなアイテムだからこそ、細部にちりばめた小物で女性らしさをプラスするのがポイントだそう。首元から覗かせたフリルシャツとヘアバンドがなんとも可愛い。
靴はあえてワーク感強めのハイカットをチョイス。メンズアイテムを女性らしく着こなすスタイルは彼女ならでは。
ベーシックカラーを主体としたシンプルなコーディネートには、シルエットバランスが大事。ゆるっとしたスウェットは
インスタイルでメリハリを、パンツは短めを合わせポイントのオレンジのスニーカーが映える素敵なスタイリングだ。
白いバッグのサイズ感がまたなんとも絶妙！
~
~
~
**進捗・記録2019.11.24
-参考
[[カラムを使って2段組みレイアウト>https://lopan.jp/columns-layout2/]]
~
~
~
**進捗・記録2019.11.22
-Webを展示するときの参考DEMO
[[AutoDemo>http://design.kyusan-u.ac.jp/OpenSquareJP/?AutoDemo]]
~
-ToDo
Charm StarのサイトのSnapページが少し寂しい。背景をもう少し楽しく改善する
Vimeoに登録を行い、youtubeえお差し替える
~
-発表のポイント
概要の上に新しく発表ページを作成する。
A4、2枚の概要とサイトの発表を合わせる。
わかりやすく、簡潔に行う。
前期指摘されたところを改善し、発表する。
~
-映像のイメージの改善
#image(image1122.png,,100%);
サイトの文字情報はフルスクリーンで見たとき、長すぎて読みにくい？２ブロックにするのはありなのでは？
~
-映像のイメージの改善
#youtube(FYsLlK7AkbM)
サイトのイメージと合わせ、掠れと文字を組み合わせた映像にしたほうがいい？
~
~
~
**進捗・記録2019.11.15
-ToDo
%%TOPの映像を作る%%
雰囲気をより楽しくさせ、コンバースの経年変化の魅力を想像させるビジュアルを目指す。掠れの表現や実際のコンバースの撮影素材を用い表現する。また、トップビューのみでこのサイトが何のサイトなのか、どのようなサイトなのかが理解できるように改良する。
~
~
~
**進捗・記録2019.11.12
-メモ
//カナのコンバースは「CT70 OXのフレイムファイヤー」のローカット。現代的なビジュアルとレトロな雰囲気が融合した個性派な一足。オーバーサイズのコーデュロイシャツ×カラフルボーダーTで、ストリートなコーディネートに仕上がっている。スポーティーな靴下も相性抜群だ。靴に負けない主張のあるコーディネートでありながら、靴の個性を損なわせないアイテム使いは彼ならでは!!!
//コージのコンバースは「バーガンディーのCT70 OX」のローカット。主張の強すぎないカラーはどんなスタイルにも馴染む。そんなCONVERSEに
合わせるのはベロア素材のボトムス。三本ラインのボトムスに合わせたストライプのカーディガンが上級コーディネートであり、彼ならではの個性を感じられる。個性のあるアイテムをスッキリとまとめ上げたコーディネートは是非参考にしたい。
女の人ダンスサークル『バランスの取れた配色センスが光る カジュアルスタイル』
◯◯のコンバースは「ブラックのALLSTAR」のハイカット。
長年履きこまれ、ダンスを踊る際に着用してきたコンバースはいい味が出ている。パーカーにデニムパンツを
合わせたカジュアルなスタイルが、
靴に良く馴染む。レイヤードしたTシャツと靴下の挿し色が小粋でお洒落だ。
目元に引かれたホワイトのアイラインも
センスを感じさせる。
男の人ダンスサークル
■■のコンバースは「ブラックのALLSTAR」のハイカット。
シンプルなコーディネートでありながら
も、こだわりのあるアイテムたちと
オーバーサイズなシルエットが印象的で
ある。履きこまれたコンバースが抜け感を演出している。サイジングなど細やかな気配りが◯
~
~
~
**進捗・記録2019.11.12
-映像に使用する音楽イメージ
https://artlist.io/song/9878/make-you-mine
https://artlist.io/song/9874/in-a-dream
~
~
~
**進捗・記録2019.11.11
-映像に使用する音楽イメージ
https://artlist.io/song/6740/sugar
https://artlist.io/song/6737/little-white-house
~
~
~
**進捗・記録2019.11.08
-ToDo
%%ロゴを変更する%%
%%コンバースのカット（モデル カラー サイズ）の後にオーガのカット（ニックネーム 年齢 性別 身長）を置く%%
%%サイトのビジュアルを動画と合わせる%%
映像を増やす
どんな感じで発表するかを考える
~
-参考映像
#youtube(AZepe8-X2c0)
映像に文字情報を組み込むイメージ。ファッション雑誌をイメージした文字と写真の組み合わせが映像で表現できるかも？
~
~
~
**進捗・記録 2019.11.06
-参考サイト
[[おしゃれな手書き風英語フリーフォント50選！>https://www.canva.com/ja_jp/learn/stylish-fonts/]]
~
~
~
**進捗・記録 2019.11.05
-映像イメージ
#youtube(1UCgg2Otiyo)
テキスト情報とコンバースを組み合わせた映像（カット）を組み込む。そうすることで映像にメリハリが付き、映像に動きと変化をつけることで、楽しさやリズム感を出すことができる？また、コンバースの情報を同時に掲載でき、動画のクオリティーの向上を目指す。
~
~
~
**進捗・記録 2019.10.23
-参考Webサイト
[[ふふふ-ふ>https://media.bridal-day.jp/daily/]]
~
-便利なサービス（サルワカ）
[[font-familyメーカー>https://saruwakakun.com/font-family]]
~
~
~
**進捗・記録 2019.10.17
-参考サイト
[[Youtube埋め込みプレーヤーでできるカスタマイズまとめ>https://blog.8bit.co.jp/?p=17160]]
https://webllica.com/humberger-menu-by-html-css/
~
~
~
**進捗・記録 2019.10.16
-映像に使用する音楽イメージ
https://artlist.io/song/5733/cheesecake
https://artlist.io/song/6748/never-wanna-grow-up
https://artlist.io/song/10751/weekend
https://artlist.io/song/14963/gotta-love
https://artlist.io/song/11181/brown-skin
https://artlist.io/song/14334/hold-onto-your-butts
https://artlist.io/song/11171/all-eyes-on-us
https://artlist.io/song/12648/jell-o
https://artlist.io/song/12815/your-captain
https://artlist.io/song/9877/make-you-mine
~
~
~
**進捗・記録 2019.10.11
-参考
[[掠れ参考>https://www.qam-web.com/?p=13620]]
~
-ToDo
動画に掠れを入れて試作してみる
YouTubeのタイトルバーを消す方法を試す
Webサイトのメニューの相談
%%Webサイトをスマホで見た時のビジュアルの修正（背景の装飾）%%
%%「chrome overflow hidden 効かない」を検索%%
%%Webサイトのビジュアルチェック%%
~
~
~
**進捗・記録 2019.10.09
-考えたこと
映像はYouTubeがいいの？Vimeoは？Vimeoならカラーのカスタムができるかも。
映像の音は何種類？→はじめは５種類程度？（徐々に増やす）
~
~
~
**進捗・記録 2019.10.08
-やったこと
Webに埋め込んでいる動画のカラーとWebの背景色の表示の違いについて修正する。→解決した。動画をMediaEncoderでH.264に書き出していたが、AfterEffecs内のレンダーキューでアニメーションで書き出すことにより解決。アニメーションで書き出した動画は容量が大きいが、[[動画の容量を小さくするWeb上のサービス>http://www.videosmaller.com/jp/]]で解決した。
動画のmovデータはvideoタグが使えない？→[[変換サービス>https://convertio.co/ja/]]を使用した。movからmp4へ！
~
-映像に使用する音楽イメージ
https://artlist.io/album/1579/see-me-fly
https://artlist.io/album/1601/tropical-house-vol-2
https://artlist.io/album/1514/born-again
https://artlist.io/album/1232/far
https://artlist.io/album/1578/lose-myself
https://artlist.io/album/783/never-wanna-grow-up
https://artlist.io/album/1539/gumpop
https://artlist.io/album/1068/all-of-the-miles
https://artlist.io/album/1475/good-news-one
~
~
~
**進捗・記録 2019.09.30
-参考
[[自由に使える、無料デザインテクスチャとパターン素材まとめ>http://photoshopvip.net/79633]]
[[無料で高品質！デザインがグッと良くなる厳選テクスチャ素材58個まとめ>http://photoshopvip.net/107299]]
~
~
~
**進捗・記録 2019.09.19
-メモ
動画を沢山書き出したとして、全て同じ色になるの？
~
~
~
//Vimeo---アカウント:Charm Star アドレス:k.m01design2702@gmail.com pw:moridesign0127
