;)
こんにちは。Webデザイナーのヤマダです。
久しぶりにやります、キョウノデザイン。
以前、Twitterでちょこちょこ投稿していたのですが、最近はサボって忙しくて手が付けられず、今回のメディア立ち上げを機に復活させました。
頑張るぞ～。。。よろしくお願いします。
今回はこちらのサイト。
『Tadaima! Design Scramble 2019 – 渋谷デザインフェスティバル -』
https://designscramble.jp/
昨今のコロナウイルスの影響でイベントは中止になってしまいましたが…涙
とても良いサイトだったので、「しっかり見て」研究したいと思います。
目次
奇抜ながらバランスの取れた配色
ページを開くとまず目につくのは、鮮やかな配色でした。
まさに「クリエイティブ」「デザイン」「アート」といった言葉がぴったりですね。
せっかくなので、自分なりに配色の分析をしてみました。
※「これが正しい」ってわけではないので、あくまで参考にしてもらえると嬉しいです。むしろ誰かツッコんでください。
主観的な観測に依る配色分析
このサイトには、テーマとなる色が2つあるように思えます。
（恐らくですが）今回のイベントにおける、コンセプトカラーです。
この2色を軸に、バランスよく多色に展開していくには、どうすればいいか。
結論から。このサイトでは、2つの派生を作り、使い分けをしているのではないかと推測しました。
明度による派生
正確にいうと、明度だけをいじってる訳ではなさそうですが、ニュアンス的には伝わるかと思います。
これらの色は、基本的に各セクションの背景色で使われており、視覚的な区切りの役割をしているパターンが多かったです。
またキービジュアル等では、メインカラー背景上のテキストカラーに用いることで、奥行きを感じさせています。
赤・青系統色で、賑やかな印象に
何度見ても、とてもアーティスティックですよね。オシャレ。
ただ、「カラフル」ってムズイです。
その点、このサイトってとても調和できてて凄いなって感じてます。
このサイトで使われていた「カラフル」な要素をまとめてみました。
こうやってまとめてみると、「赤・青」系統の色でまとめられていることに気づきます。
これが「黄・緑」だったり、はたまた系統バラバラであったりしたら、また違った印象になるでしょう。
また、「グラデーション」「惑星のような縞模様」もいいですよね。「宇宙」もコンセプトの1つにあるんでしょうね。ほんと、世界観作るのがうまいなぁ～。
色使いひとつ見ても、これだけ勉強になることがありました。
マウスストーカーとホバーアクション
このサイトではマウスストーカーが実装されています。最近だと当たり前みたいに実装されていますね。
このマウスストーカー、「手が込んでるな～」って思わせる点がいくつかあります。 分かりやすいところでいうと、上のような追従要素。
また、背景色に応じて円の色を変えてます。mix-blend-modeプロパティですかね。推測ですが。
あとは、マウスオーバーの際にアクションを施しています。
単なるおしゃれギミックとしてでなく、ユーザーにリンクがあることを視覚的に伝える効果がありますね。
コンテンツの種別によって「崩す・崩さない」、そしてもう1つ
最近、個人的に意識している部分です。
コンテンツの種類・役割によって「崩すか、崩さないか」考える癖をつけています。グリッドか、ブロークングリッドか、みたいな話です。
プログラムの一覧・チケットについてなど、情報を開示するシーン（グリッド）
イベントの想いや特徴など、魅せる・伝えるシーン（ブロークングリッド）
ただ、このサイトで「いいな」と感じたのは、その中間体みたいなやつがいることです。
テイストに溶け込ませながら、必要な情報を分かりやすく表示しています。これが上手いな～！と。
シンプルな情報の配置が連続してしまうと、どうしても単調になりがちです。
こういった手法は普遍的に使えるテクニックだと思うので、身につけていきたいです。
やっぱデザインの言語化っていい
久しぶりに「#キョウノデザイン」できました。。。
久しぶりにちゃんとデザインレビューして思ったのですが、やっぱデザインの言語化っていいですね。
「なんとなくこうする、、」ではなく、より意味・価値のあるデザインを作るセンスが磨かれていくのを実感します。
ぜひみなさんも色んなサイトを見て研究してみてください。^_^
