;)
こんにちは。ヤマダです。
突然ですが皆さん、ライブ配信って普段見たりしますか？
最近の僕は、「NOT4H」さんの動画をよく見ています。
「NOT4H」は関西のクリエイターユニットで、クリエイティブの現場の第一線で活躍されているメンバーで構成されています。控えめに言って超かっこいいです。
主にクリエイティブ・Webデザイン・転職のアドバイス・仕事術などをテーマに、毎週動画配信をされています。
ペーペーデザイナーの僕にとっては、沢山の学びや発見があるコンテンツでして、いつも楽しく拝見させていただいています。ありがとうございます。気になる方はぜひ。
さて今日は、NOT4Hのメンバーの平尾さんが以前動画内でご紹介されていたサイトのデザインを研究したいと思います。
目次
サイトのご紹介
- 『カルチュア・コンビニエンス・クラブ株式会社』様
- https://www.ccc.co.jp/
「TSUTAYA」や「蔦屋書店」の親会社さんです。書店事業だけでなく、図書館などの公共サービスやエンターテイメント事業も手掛けているとのこと。
個人的に「ツタロック」は青春です。
制作コンセプト・目的を推考
いつもの流れですが、デザインコンセプトを探るため予想してみます。
企業の特徴
- 「TSUTAYA」の親会社。 -> ネームバリューの強さ
- 他事業展開。書店事業から派生した印象。
サイトの目的
- 「TSUTAYAの～」「蔦屋書店の～」ではなく、CCCとしての特徴や企業文化を発信する。
- 上に付随して、「TSUTAYAだけじゃない」ってところも見せる・伝える必要がある（これは僕の主観強い）。
- CCCの世界観。ワクワクさせるような。
インパクトのあるメインビジュアルとスクロールアニメーション
このサイトでまず印象的なのは、この2つだと思います。
メインビジュアルに「人」を用いたのは凄く上手いなと感じました。
9つ並んだ「C」のローディング画面と合わさって、この企業が持つ「多様性」を表現できていると思ったからです。
スクロールで出現する要素の見せ方もかっこいいですよね。
見ててワクワクするし、インパクトがある。企業のカルチャーや色も伝わってきます。
写真なんかは、格子状（？）で出現させてるんですけど、これは「本棚」かもしれないですね。。完全に僕個人の感性なのでズレまくってるかもしれませんが…。焦
ただ、色んな意味合いが込められているような、素敵なデザインであることは間違いないです。
個人的には「Tポイント」の部分が好きでした。
説明文を固定追従ラベルで。
また、とても特徴的なのが画面下のラベルエリア。
表示しているセクションに応じて内容が書き換わり、説明の役割を果たしています。
なんとなくですが、これ流行る？というか、他サイトでも取り入れられると思います。（既にあるのかもしれません。）
説明をラベル内に表示できるので、画像を大きく配置できたり、思い切ったレイアウト・エフェクトが付けられるなど、メリットもありそうです。
プレゼンのようなセクションデザイン
上記のラベルと併せて、セクションの1つ1つがプレゼンテーションの1画面のような印象を受けます。
実際、画面右上の「再生」アイコンを押すと、全画面表示に切り替わります。まんまプレゼンです。
こういった見せ方もありなんですね。引き出しが増えました。
細部へのこだわり・ギミック
「おおっ！」となったのはフッターのナビゲーションでした。
レイヤー下に隠れて格納されていて、単純に「こんなやり方ありなんか！」ってなりました。オシャレです。
ドロワーメニューとデザイン統一されているのもいいですよね。
あと細かいところですが、画面左端に見出しが表示されるのも最近よく見かけます。
斬新だったのは「アクセス」でした。航空写真で表示させてるのってあんま見かけなかったので。
また、下層ページ見るとより顕著に分かりますが、基本的にあしらいはなく「フォントで見せる」デザインです。本っぽいですね。
こういった部分含めて、全体的に書店らしさが感じられます。フッターのギミックとかスクロールのエフェクトも本棚っぽいし。勝手に感じてるかもですが。焦
どちらにせよ、世界観が表現されていて素敵だと思います。
まとめ
相変わらず拙い文章ですが、デザイン分析は以上です。
最後に、素敵なサイトをご紹介いただいたNOT4Hの皆様ありがとうございました。
これまでの動画アーカイブはYouTubeチャンネルにあるみたいなので、ぜひ一度視聴してみてください。
