カッコイイCoolなサイト5選!

こんにちは、あんころ餅です。
最近、どんどん朝晩が寒くなって来ましたね。コタツでみかんの季節が近づいてきて嬉しいです。

さて今回は、カッコイイCoolなサイトを5つ紹介します!

①エムトラスト株式会社 | 不動産売買

画像1

東京都23区を中心とした首都圏で戸建住宅の分譲事業を展開している会社のサイトです。

Coolポイント1 配色
背景色を黒にしているので、全体的に締まったイメージを感じます。
ほぼモノトーンで構成されているので、カッコよさの中にも高級感っぽさも感じます。
たまに出てくるお花のカラフルさが映えますね。

Coolポイント2 細い線
このサイトでは、線はほとんど細い線が使われています。
クリックできる箇所に矢印カーソルを置くと、一瞬細い線がシュッと動くので、スマートなカッコよさがあります。
よく、目立たせるために太くしたい!といった傾向がありますが
細くても、1工夫で目に止まりやすくなりますね。
あと、余談ですが
メインビジュアルもコンテンツも、とにかくめちゃくちゃ動く箇所が多いです。(そこまで動かすの!?ってところまで動きます)

②永久×バレット 公式サイト | TOKOSHIE×BULLET Official Site

画像2

ヤングマガジン、good!アフタヌーンにて同時連載されている、「永久×バレット」の公式サイトです。

Coolポイント1 イメージに合った細かな動き
1画面固定でスクロールでページが切り替わるパララックス的なサイトです。
背景にアニメーションずっと流れているのですが、背景切り替わる際もふわっとしたフェードアウト使うのではなく、漫画の雰囲気に合わせてか侵食した感じ?とか、コンピューターがビビビ!ってなった感じで切り替わるので芸が細かいです。

Coolポイント2 ページのカウント
右下にある「今、何ページ目」のカウント表記。
これ、単純に数字だけ表示ではなくて、外の円で進行具合がわかるのいいですね!
「あともう少しで次ページに切り替わるかなー」がとてもわかり易いです。

③CalorieMate to Programmer | 大塚製薬

画像3

カロリーメイトのサイトです。

Coolポイント1 文字で構成
ほぼ文字なのに、何故かカッコイイ。カッコイイと感じてしまうカロリーメイト。
サイトって写真をどんどん載せた方が、視覚的にカッコよさや可愛さが伝わりやすくていいと思ってたんですが、このサイトは文字構成でも文字の感じや配置でカッコよさが出ていると感じています。

Coolポイント2 文字を打っているような動き
矢印カーソルをクリックできそうな箇所に置くと、文字がずらずらっと書くような動きが見れます。
コードを書いていると~とサイトに書いてあるので、サイトイメージに合った動きを使っているなーといった感じです。
コードがガシガシ書かれたと思ったらカロリーメイト登場!となる箇所が個人的に好きポイントです!

④ゲーム事業部特設サイト | 株式会社アカツキ(Akatsuki Inc.)

画像4

ゲームを作っているアカツキという会社のサイトです。

Coolポイント1 音
最初のローディング画面で、「このサイトは音が出ます」と注意があったので、どこの事かと思っていたのですが
おそらくこのメインビジュアルの箇所だと思います。
メインビジュアルに何か仕掛けがあると何回も見てしまいますよね。
ここは、とにかく音がカッコイイです!背景に合った音を使っているなと思います。
ゲームとか楽器とか、音が出るだろうなと想像できるサイトではイメージに合わせた音選びも重要ですね。

Coolポイント2 かぶせ文字
円状に動く文字の箇所があるのですが、全てを表示させるのではなく
あえて一部分隠す形で表示させているのが、デザイン性があってとてもカッコイイです!

⑤SSS by applibot

画像5

キャラクターデザインやコンセプトアートなどのデザインを手がけるクリエイティブスタジオのサイトです。

Coolポイント1 斜め動きのスライダー
スライダーで画像表示させる時って、大抵横時々縦だと思うんですが
ここは縦でも横でもなく斜め!
角度変えるだけでカッコよさがかなり違いますね。

Coolポイント2 文字の表示
カロリーメイトは文字を打っている感じに文字が表示されていましたが、
こちらは赤いバーが出てきて、さり際に文字置いてくる感じに表示されます。
全ページの全ての文字表示部分がこの表示方法だと少しクドい感じしますが
一部分だけ使うと、目に止まりやすくて良さそうですね。

この記事が気に入ったらサポートをしてみませんか?