PAGES

GUIDE

DATA

Charm Star

コンバースの経年変化とコーディネートを楽しめるビデオログサイト制作
Keywords:Converse , Used , University Student , Web , Vlog , Coordinate , SNS

prezen_top.jpg

研究の背景・目的


背景

  • コンバースが大好き
  • 新品のコンバースより経年変化が魅力的だと感じている
  • ファッションアイテムやコーディネートをZOZOTOWNやWEARなどで気軽にチェックできる
  • ZOZOTOWNやWEARに掲載されているアイテムは新品のものが多く、経年変化による魅力が伝わりにくいと感じた

目的

  • TikTokやYouTubeなどの普及で動画が生活の身近なものになっている
  • ファッションアイテムやコーディネートを動画で楽しめるサービスは少ない
  • 経年変化によるコンバースの魅力を楽しんでもらいたいと思い、動画を活用したコンバース主体のWebサイトを制作したい



制作・制作物


コンセプト

  • コンバースの経年変化とコーディネートを楽しむ
  • 既存のサービスでは伝わりにくい、経年変化によるコンバースの魅力やコーディネートを、簡易的な動画をブログ形式で公開するビデオログ手法を活用したWebサイトによって表現
  • アナログ的な擦れの表現や型にはまらない自由曲線を使用
  • ネーミングは経年変化によるコンバースの魅力を楽しんでほしいという意味でCharm Star

シンボルとロゴ

  • シンボルはコンバースを連想させる星のビジュアル
  • オブジェクトを重ね、様々なコンバースの魅力を表現
  • ロゴのフォントは、適度な柔らかさと抑揚があるミリアドを使用

    pre_logo.jpg

Web

  • 動画や写真を使い、経年変化によるコンバースの魅力と楽しさを感じるものに
  • 動画、写真、コメントなどの情報を記載
  • シンボルとロゴの表現を活かし、擦れの表現、自由曲線を使用
  • 写真の配置や切り抜きを工夫し、リズムをつけることで楽しい雰囲気を作り出した
  • レスポンシブデザイン
    (全20ページ)

    pre_web.jpg

動画

  • サイト同様、擦れの表現やフィルムバーンの効果を使い、経年変化したコンバースの魅力を引き立てる
  • コーディネートと単体のカットを組み込み、リズムのある動画に
  • コンバースの種類や、カラーなどの情報を組み込み、動きを作る
  • 撮影や編集は時間短縮の工夫
    (全20種類)




SNS

  • コーディネートの投稿を載せている人も多いInstagramを使用
  • サイトの知名度、閲覧数の向上を狙って、写真や動画の情報を投稿

    pre_sns.jpg



まとめ

  • 動画の撮影や編集は膨大な制作がかかったが、様々な工夫(撮影者に完成イメージを見せる・テンプレートを制作)をすることで効率化を図った
  • 10代20代を中心にWebアンケートを行ったが、約90%が経年変化によるコンバースの魅力が伝わったと答え、高い効果が得られた




































top01.jpg




研究の概要


概要


目的・主旨

私はコンバースが大好きだ。コンバースはカラーや種類などバリエーションが豊富であり、比較的安価な製品で、どのようなコーディネートにも合わせやすいオーソドックスなスニーカーとして大学生を始めとする若い層に人気である(コンバースの歴史)。特に私は、新品のコンバースより履き込んだコンバース(経年変化)が魅力的だと感じている。新品のコンバースを履くことは、恥ずかしささえある。また、コンバースは履く人の性格や特徴まで現れるものだと考えており、経年変化によって、風合い、パッチの擦れ、クタッと感などの味が出てくる。そこに魅力があるのではないか?と考える。自分と同じように感じている人は少なくないだろう。






進捗・記録2019.11.30

  • メモ
    きのこ探偵
    季節感を感じる、コーデュロイ素材のワーク感強めなつなぎは、メンズアイテムとのこと。カジュアルなアイテムだからこそ、細部にちりばめた小物で女性らしさをプラスするのがポイントだそう。首元から覗かせたフリルシャツとヘアバンドがなんとも可愛い。
    靴はあえてワーク感強めのハイカットをチョイス。メンズアイテムを女性らしく着こなすスタイルは彼女ならでは。

ベーシックカラーを主体としたシンプルなコーディネートには、シルエットバランスが大事。ゆるっとしたスウェットは
インスタイルでメリハリを、パンツは短めを合わせポイントのオレンジのスニーカーが映える素敵なスタイリングだ。
白いバッグのサイズ感がまたなんとも絶妙!





進捗・記録2019.11.24

進捗・記録2019.11.22

  • Webを展示するときの参考DEMO
    AutoDemo

  • ToDo
    Charm StarのサイトのSnapページが少し寂しい。背景をもう少し楽しく改善する
    Vimeoに登録を行い、youtubeえお差し替える

  • 発表のポイント
    概要の上に新しく発表ページを作成する。
    A4、2枚の概要とサイトの発表を合わせる。
    わかりやすく、簡潔に行う。
    前期指摘されたところを改善し、発表する。

  • 映像のイメージの改善
    image1122.png
    サイトの文字情報はフルスクリーンで見たとき、長すぎて読みにくい?2ブロックにするのはありなのでは?

  • 映像のイメージの改善
    サイトのイメージと合わせ、掠れと文字を組み合わせた映像にしたほうがいい?





進捗・記録2019.11.15

  • ToDo
    TOPの映像を作る
    雰囲気をより楽しくさせ、コンバースの経年変化の魅力を想像させるビジュアルを目指す。掠れの表現や実際のコンバースの撮影素材を用い表現する。また、トップビューのみでこのサイトが何のサイトなのか、どのようなサイトなのかが理解できるように改良する。





進捗・記録2019.11.12

  • メモ

合わせるのはベロア素材のボトムス。三本ラインのボトムスに合わせたストライプのカーディガンが上級コーディネートであり、彼ならではの個性を感じられる。個性のあるアイテムをスッキリとまとめ上げたコーディネートは是非参考にしたい。

女の人ダンスサークル『バランスの取れた配色センスが光る カジュアルスタイル』
◯◯のコンバースは「ブラックのALLSTAR」のハイカット。
長年履きこまれ、ダンスを踊る際に着用してきたコンバースはいい味が出ている。パーカーにデニムパンツを
合わせたカジュアルなスタイルが、
靴に良く馴染む。レイヤードしたTシャツと靴下の挿し色が小粋でお洒落だ。
目元に引かれたホワイトのアイラインも
センスを感じさせる。

男の人ダンスサークル
■■のコンバースは「ブラックのALLSTAR」のハイカット。
シンプルなコーディネートでありながら
も、こだわりのあるアイテムたちと
オーバーサイズなシルエットが印象的で
ある。履きこまれたコンバースが抜け感を演出している。サイジングなど細やかな気配りが◯





進捗・記録2019.11.12

進捗・記録2019.11.11

進捗・記録2019.11.08

  • ToDo
    ロゴを変更する
    コンバースのカット(モデル カラー サイズ)の後にオーガのカット(ニックネーム 年齢 性別 身長)を置く
    サイトのビジュアルを動画と合わせる
    映像を増やす
    どんな感じで発表するかを考える

  • 参考映像
    映像に文字情報を組み込むイメージ。ファッション雑誌をイメージした文字と写真の組み合わせが映像で表現できるかも?





進捗・記録 2019.11.06

進捗・記録 2019.11.05

  • 映像イメージ
    テキスト情報とコンバースを組み合わせた映像(カット)を組み込む。そうすることで映像にメリハリが付き、映像に動きと変化をつけることで、楽しさやリズム感を出すことができる?また、コンバースの情報を同時に掲載でき、動画のクオリティーの向上を目指す。





進捗・記録 2019.10.23

進捗・記録 2019.10.17

進捗・記録 2019.10.16

進捗・記録 2019.10.11

  • ToDo
    動画に掠れを入れて試作してみる
    YouTubeのタイトルバーを消す方法を試す
    Webサイトのメニューの相談
    Webサイトをスマホで見た時のビジュアルの修正(背景の装飾)
    「chrome overflow hidden 効かない」を検索
    Webサイトのビジュアルチェック





進捗・記録 2019.10.09

  • 考えたこと
    映像はYouTubeがいいの?Vimeoは?Vimeoならカラーのカスタムができるかも。
    映像の音は何種類?→はじめは5種類程度?(徐々に増やす)





進捗・記録 2019.10.08

  • やったこと
    Webに埋め込んでいる動画のカラーとWebの背景色の表示の違いについて修正する。→解決した。動画をMediaEncoderでH.264に書き出していたが、AfterEffecs内のレンダーキューでアニメーションで書き出すことにより解決。アニメーションで書き出した動画は容量が大きいが、動画の容量を小さくするWeb上のサービスで解決した。
    動画のmovデータはvideoタグが使えない?→変換サービスを使用した。movからmp4へ!

進捗・記録 2019.09.30

進捗・記録 2019.09.19

  • メモ
    動画を沢山書き出したとして、全て同じ色になるの?





添付ファイル: fileprezen_top.jpg 1件 [詳細] fileprezen_top.png 2件 [詳細] filepre_logo.jpg 5件 [詳細] filepre_sns.jpg 1件 [詳細] filepre_web.jpg 4件 [詳細] filepre_logo.png 7件 [詳細] fileimage1122.png 12件 [詳細] filetop01.jpg 17件 [詳細] fileスケジュール02.png 16件 [詳細] fileスケジュール01.png 16件 [詳細]
Last-modified: 2019-12-06 (金) 06:50:00