【サイトレビュー】Qude : production de podcasts Toulouse
No.11
形容詞で表すなら
かっこいい・かわいい・スタイリッシュ・ポップ・シック・カラフル
いいなと思ったポイント
モノクロベースの中にカラフルな配色がアクセントになっていて、かっこよさと可愛らしさの塩梅が絶妙で、スクロールアニメーションとの組み合わせがクセになる。
フォント
Neue Montreal
配色
背景：#151212（限りなく黒に近いダークグレー）
メイン：#FFFFFF（白）
アクセントカラー：#FF764A（オレンジ）#FEB84E（イエロー）#76C6D8（ブルー）#47B171 ※全体的に柔らかいポップな配色
フォントカラー：#FFFFFF（メインカラーと同色）
モノクロに映えるカラフルな配色によってポップな印象を与え、さまざまの声色を表現しているように感じた。
ファーストビューのデザイン
ヘッダー
ロゴ、メニューボタン、お問い合わせボタン
白と角丸で統一されていて、カラフルな配色とゴシック体との対比により、ヘッダーの一体感を感じる。
ハンバーガーメニュー
グレーのグラデーションにぼかしフィルターが適用された背景。開いた状態でスクロールされると、重なるコンテンツの内容によって表情が違って見えるのが面白い。
メインビジュアル
playにホバーすると、オブジェクトそれぞれをタイプして遊べる仕掛け。スクロールすると散り落ちていく様子もユニークで楽しめる。
キャッチコピー
ホワイトとダークグレーで、立たせる文章とサブテキストの濃淡がはっきりしていて、メリハリの効いたシンプルでスッキリとした印象に。
パーツのデザイン
見出しのデザイン
白のゴシック体でシンプルなデザイン。アニメーションは統一されているが文字組みがセクションごとに違って、ワクワク感を感じる。
セクションごとのデザイン
ページ下部になるにつれて、配色が反転したりパープルが加わることで、最後までユーザーを飽きさせないよう工夫されている。
ボタンのデザイン
基本の形は角丸ベタ塗りのホバーで反転という定番のデザイン。それ以外のボタンに関しては、ホバーによってボタン自体が変化するのではなく、見出しや詳細テキストの背景色がボタンと同色に変わったり、新たな画像が表示されたりと、驚きとインパクトがあって目をひく。
全体のデザインポイント
黒背景のサイトというと、シックでかっこいいデザインをイメージするが、このサイトは配色とアニメーションの組み合わせによって、全体的にポップな印象になっている。黒く静かな空間に鳴り響くカラフルな声色を表現しているようで、スクロールして読み進めるのが楽しくなるサイトだと感じた。