No.016 GREENBATON GREENBATON GREENBATON ゴミとして廃棄される服を削減し、そこに新たな価値を付加して販売することを目的とする、ゴールドウインのサスティナブルブランド、「Greenbaton」のWebサイト 選んだポイント 面白い動きのサイトを探していてたどり着いた。 ファーストビューの印象 オフホワイトのバックグラウンドカラーにライトグリーンのアクセント。 四角形や円などの図形で構成されたイモムシがスクロールとともに可愛らしく動く。 レイアウト フルスクリーン レスポンシブ対応 あり/スマホはなし ブレイクポイント：750px,767px フォント 見出し：zen-kaku-gothic 本文：futura-pt-bold メニュー PC：ハンバーガーメニュー SP：ハンバーガーメニュー カラー ベースカラー：#F8F8F8 オフホワイト アクセントカラー：#79D64B ライトグリーン サブカラー：#000000 ブラック サブカラー：#FFFFFF ホワイト 感想、参考になった部分 可愛らしく、余計なオブジェクトの配置がない。多くの情報を与える、というよりは、プロジェクトの概要を楽しく伝える、というところに主眼をおいたサイトになっている。 ページ内の要素をクリックして情報を取りに行く、という従来のwebサイトの使い方というよりは、動画を自分で動かしている、という方が感覚的には近い。 SVGアニメーションを使用し、イモムシの動きとともに背景を流れるように変えていくことで、移動しているように見せている。「動く」「止まる」「動く」の間隔を調整することで、イモムシらしい動きが表現できている。 下部にもイモムシが配置されており、スクロールバーに対応して左から右へ進んでいく。下にスクロールすると右向きに、上にスクロールすると左向きに変わり、芸が細かい。 下まで読み進めるとページトップへループする仕組みになっている。 投稿ナビゲーション No.015 東京都No.017 資生堂 コメントを残す コメントをキャンセルメールアドレスが公開されることはありません。 ※ が付いている欄は必須項目ですコメント ※ 名前 ※ メール ※ サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。