日経のサウナイベントのLPサイトをトレースしました。
カラフルな色使いとペイントやオフィスソフトなどでつくったかのような図形を使ったシュールなイラストが目を引くサイトです。日経xサウナxビジネスというともっとかっちりした堅いデザインを考えそうですが、かなりポップでシュールな印象のデザインだと思います。
思っていたより多くのイラスト(画像)からなっていて結構時間がかかってしまいました。
■構成
ヘッダー
↓
トップ（キービジュアル）
↓
ステートメント
↓
動画
↓
EVENT
↓
GUEST
↓
SPONSER
↓
ENTRY
↓
フッター
フォントは、日本語が游ゴシック、英字がRoboto。
また、見出しのテキストは画像を使用していました。見出し部分を画像にしているサイトは多い印象です。
→見出しということもあり装飾的なフォントを使用していたり調整された文字間にしたいため？
カラーはカラフルな色使いの中でも原色に近い彩度で、普段使いするのは難しいかもしれません。イラストを使った、アート、ゲーム、レトロなど世界観を持たせるデザインに合うようなカラーだと思います。また、カラフルで言えば子供向けのデザインにも使われる配色にも近いかと思います。
全体的にカラフルですが、基本的には白地に紺(#204981)の文字、アクセントカラーはピンク(#FD10A7)で統一されています。ベースの色があることで全体をカラフルにしてもまとまりがあるのがわかります。
画像がレイヤーでわかれていてアニメーションさせることで奥行きや動きが生まれて面白いです。サウナの画像がないながらイラストとカラーで世界観をつくっていて、サウナに興味がなかった人にも興味を持ってもらえるきっかけになりそうだと思いました。
GUESTの人物の写真はピンクと黄色のデュオトーンでデザインに合った写真に加工しています。イラストの印象の強いデザインやカラフルなサイトでは写真を合わせるのが難しそうなので、こういった加工をして合わせるのは真似したいと思いました。
イベント自体、ゲストがタレントや、UUUUMのCEOの方など、世の中のトレンドや流行に敏感な人に刺さるよう考えられている印象があります。"INNOVATIVE SAUNA"ということで今までの温泉施設にあるようなサウナのイメージを変えて、新たな習慣やビジネスにも取り入れられるものというところを狙っているデザインなのかなと思います。
今回は少しコーディングにも注目してみました。
まず、上でも記載した構成の部分を見てもわかるのですが、動画を別のセクションで分けていました。sectionは自分の中でもう少し大きいくくりで考えていたのですが、意味合いが変わればセクションを区切って良いのかもと思いました。また、動画はモーダルウインドウで開くようになっています。WEBサイトと同じ雰囲気で凝った動画が作られていて、大画面で観せるためにモーダルで大きく表示しているようです。
余白については、20px、40pxなどが多く、自分の設定する感覚に近い値の余白をとっていました。にぎやかなように見えてレイアウトが綺麗な印象があります。
また、自分が作る時にいつも気になるSPの時のサイズ感ですが、フォントは1.4rem(14px)程度、詳細な説明部分などは(1.1rem)ほどでした。ステートメントなどの大きく打ち出すテキストは行間を大きめに空けています。
自分はサイズ感や行間、マージン、レイアウトといった点がわかっていないなと感じているので、綺麗に整えられる知識と感覚を身に付けたいです。。
アニメーションはスクロールで左右、下からフェードして現れます。サイト全体で動きは多いですが、複雑な動きが多いわけではないのでまとまって感じます。
最後になりますが、このサイトで一番良いなと思ったのが背景に敷いているグリッドです。
図形っぽいモチーフのイラストに合っていて引き目でみてもアイキャッチにもなりますし、全体に敷かず適所に敷いているのでグルーピングの効果もあり、さらに白地の背景でも間延びして見えません。また、グリッドに合わせて整ったレイアウトをすることでより整列された印象があり綺麗に見えると思いました。
ぜひ実際のサイトもご覧ください。
カラフルな色使いとペイントやオフィスソフトなどでつくったかのような図形を使ったシュールなイラストが目を引くサイトです。日経xサウナxビジネスというともっとかっちりした堅いデザインを考えそうですが、かなりポップでシュールな印象のデザインだと思います。
思っていたより多くのイラスト(画像)からなっていて結構時間がかかってしまいました。
■構成
ヘッダー
↓
トップ（キービジュアル）
↓
ステートメント
↓
動画
↓
EVENT
↓
GUEST
↓
SPONSER
↓
ENTRY
↓
フッター
フォントは、日本語が游ゴシック、英字がRoboto。
また、見出しのテキストは画像を使用していました。見出し部分を画像にしているサイトは多い印象です。
→見出しということもあり装飾的なフォントを使用していたり調整された文字間にしたいため？
カラーはカラフルな色使いの中でも原色に近い彩度で、普段使いするのは難しいかもしれません。イラストを使った、アート、ゲーム、レトロなど世界観を持たせるデザインに合うようなカラーだと思います。また、カラフルで言えば子供向けのデザインにも使われる配色にも近いかと思います。
全体的にカラフルですが、基本的には白地に紺(#204981)の文字、アクセントカラーはピンク(#FD10A7)で統一されています。ベースの色があることで全体をカラフルにしてもまとまりがあるのがわかります。
画像がレイヤーでわかれていてアニメーションさせることで奥行きや動きが生まれて面白いです。サウナの画像がないながらイラストとカラーで世界観をつくっていて、サウナに興味がなかった人にも興味を持ってもらえるきっかけになりそうだと思いました。
GUESTの人物の写真はピンクと黄色のデュオトーンでデザインに合った写真に加工しています。イラストの印象の強いデザインやカラフルなサイトでは写真を合わせるのが難しそうなので、こういった加工をして合わせるのは真似したいと思いました。
イベント自体、ゲストがタレントや、UUUUMのCEOの方など、世の中のトレンドや流行に敏感な人に刺さるよう考えられている印象があります。"INNOVATIVE SAUNA"ということで今までの温泉施設にあるようなサウナのイメージを変えて、新たな習慣やビジネスにも取り入れられるものというところを狙っているデザインなのかなと思います。
今回は少しコーディングにも注目してみました。
まず、上でも記載した構成の部分を見てもわかるのですが、動画を別のセクションで分けていました。sectionは自分の中でもう少し大きいくくりで考えていたのですが、意味合いが変わればセクションを区切って良いのかもと思いました。また、動画はモーダルウインドウで開くようになっています。WEBサイトと同じ雰囲気で凝った動画が作られていて、大画面で観せるためにモーダルで大きく表示しているようです。
余白については、20px、40pxなどが多く、自分の設定する感覚に近い値の余白をとっていました。にぎやかなように見えてレイアウトが綺麗な印象があります。
また、自分が作る時にいつも気になるSPの時のサイズ感ですが、フォントは1.4rem(14px)程度、詳細な説明部分などは(1.1rem)ほどでした。ステートメントなどの大きく打ち出すテキストは行間を大きめに空けています。
自分はサイズ感や行間、マージン、レイアウトといった点がわかっていないなと感じているので、綺麗に整えられる知識と感覚を身に付けたいです。。
アニメーションはスクロールで左右、下からフェードして現れます。サイト全体で動きは多いですが、複雑な動きが多いわけではないのでまとまって感じます。
最後になりますが、このサイトで一番良いなと思ったのが背景に敷いているグリッドです。
図形っぽいモチーフのイラストに合っていて引き目でみてもアイキャッチにもなりますし、全体に敷かず適所に敷いているのでグルーピングの効果もあり、さらに白地の背景でも間延びして見えません。また、グリッドに合わせて整ったレイアウトをすることでより整列された印象があり綺麗に見えると思いました。
ぜひ実際のサイトもご覧ください。
