見出し画像

【かっこいいは作れるらしい】最高にクールでかっこいいwebサイト5選!


数ある記事の中から目を止めて頂き、ありがとうございます。
Liall.のshibutyaです。

少しずつ自粛ムードも緩和され、街に活気が戻り始めてきましたね。
新しいライフスタイルが確率されて行くのか、それともまた以前のように戻っていくのか。
今後の動向が楽しみです。

さて今回はデザイナーの私が独断と偏見で選ぶ「最高にクールでかっこいいwebサイト」をご紹介したいと思います。どういう所に魅力を感じたのかの(私ながらの)コメントをつけております。

今回の記事はサクッと3分ほどで読めますのでぜひ!

1.【ペルソナ5 スクランブル ザ ファントム ストライカーズ】

どうやったらこんなUI作れるの?(錯乱)
同じ人間が作ったとは到底思えません。

キャラクターデザインが既に神ということはさておき、カラーは「赤・黒・白」で構成される「厨二病」全開の配色です。おそらくメインカラーが赤のため(黒を除く)、サブカラーどこいったんだよという感じですが、それでも全く違和感を感じさせないところがデザイナーの力量の凄さです。
おおよそオブジェクトが「右→左→右→(ループ)」のように交互に出ることで、視線誘導をしつつ、飽きさせないですね。動画が沢山組み込まれていますが、その上から細かな網目のテクスチャを被せることで世界観を残しつつ、目立ちすぎることを防いでいるように感じます。

文字や動画の角度やフォントの大きさなどの工夫も必見です。
立体感があるけど、平面的、そんな不思議な感覚になりますね。

「ペルソナ5」のUIになりますが、コチラの制作過程記事も必見です…!

ちなみにゲームの内容は全く知りません。
友人曰く「絶対ハマるからやめとけ」と言われ、その教えをずっと守ってきましたが、そろそろ約束を破ろうかなと思っています。

余談にはなりますが、この構図を見て、昔流行った「デュラララ!!!」のEDを思い出しました。

一時期ニコニコ動画で本作だけでなく、EDパロディが大流行しましたね。
この斬新な縦長構図はサイト設計にも役立つかもしれません。

2.【YUTO TAKAHASHIさんのポートフォリオサイト】

どうやったらこんなサイト作れるの?(二度見)
技術力の高さが伺えると共に、シンプルかつアニメーションがするする動く感じがたまりません。扇の形をした水面を覗くような、不思議な感覚に襲われます。カクツキを一切感じさせず、スクロールしたり、色々な箇所をクリックすることが楽しくなる。そんなサイトです。全体的にモノクロのトーンで抑えられており、他に類を見ない、静かなインパクトを感じさせてくれます。

【CSSDesignAwards】【CSSWinner】など様々な分野で数度に渡り受賞されています。

ひたすら下に下にスクロールすると、隠しイベントが発生するのでぜひ…!


3.【pollykoleさんのポートフォリオサイト】(音量注意)

あれ、いつの間に私、ゲームをしていたんだろう…3D酔いする方は要注意。
思わず、「ゲームの世界観」に入り込んでしまった気持ちになるポートフォリオサイトです。効果音や画面遷移の瞬間の気持ちよさがすごいです。
ここまでできるの?!というありとあらゆる事が詰め込まれています。
海外のアーティストだからこそできる配色や見せ方は必見です。


4.【焼きたてチョコレートチーズタルト】

背景にビビッドカラーテーマの動画が埋め込まれており、チョコレートが「見ている側から降ってきているように見せている」視覚的にとても面白いサイトです。
サイトの天井部分から下に落ちるという動きではないため、3D的な空間の広がりを感じさせてくれています。

また写真のティテールがよく見える上、とにかく美味しそう!
トップ画面の背景色と喧嘩することなく、共存しているところも素敵です。
シンプルな構成ですが思わずずっと見たくなる…そんな魅力溢れる1ページです。

5.【トゥモローゲート新卒採用サイト】

モノクロis最強。
キャッチコピーがインパクトがすごく、思わずサイトをそっ閉じしてしまいそうになりますが、どうしても気になってしまって最後までスクロールしてしまう…そんなサイトです。
アクセントカラーの黄色がモノクロ背景に映えており、よりミステリアスな雰囲気を作り出しています。「また写真を見切る」表現もまたエモいです。

「今後展開したい計画たち」の内容もかなり突っ込んだものが多く、(本当に計画されているかどうかは別として)純粋に気になります。キャッチコピーと言葉の使い方が抜群にうまいと感じたサイトです。

結論:かっこいいは作れるらしい

いかがでしたでしょうか?

配色やアニメーション、画面遷移など、魅力溢れるシーンがたくさんありました。
「良いものを見て、良いものを作れるようになる」これが一番デザイナーにとって最短ルートだと思います。

ぜひ皆さんも面白い記事を見つけた際はコメント欄にて教えて下さいね!

記/shibutya


今後Liall.では「今日のあなたのお役に立つ」情報をnoteを始めSNSやYouTubeを中心に発信して参ります。ぜひご覧下さいませ。
Liall.へのお問い合わせはこちらから承っております。
TwitterInstagramも更新中!


この記事が参加している募集

最後までお読み頂きありがとうございました!みなさまのサポートがメンバーそれぞれの励みになります!