;)
こんにちは。ヤマダです。
以前の記事で少しお話しましたが、デザインの勉強のためにアワードをよく見るようにしています。
今日はCSS Design AwardsでWOTD（Website of the Day）を受賞したサイトを見ていきたいと思います。
目次
サイトのご紹介
- 『Lab21』様
- https://www.lab21.gr/
ギリシャのアテネを拠点に活動しているWeb開発スタジオ。
先述のCSS Design Awards以外にも、数々の受賞歴があるそうです。
このサイトを見かけたとき真夜中だったんですけど、個人的にドストライクなデザインでして、思わずツイートしちゃいました。
いつもなら制作背景とか推察していきたいんですが、海外サイトってこともあるので、今回は表現方法のアイデアを（もちろんいい意味で！）盗んでいきたいと思います。
CSSによるエフェクト・効果
このサイトの特徴的な要素の1つは、「mix-blend-mode」の使い方です。
例えばトップページの実績一覧の数字なんかは、下記のCSSで実装されています。
.text-overlay {
-webkit-mix-blend-mode: overlay;
mix-blend-mode: overlay;
background-blend-mode: overlay;
}
IE切ったら実務でもいけるんだけどな～。でも、将来性を考えて覚えたいテクニックですよね。
ホバーエフェクトもかっこいいです
「05～」の実績はレイアウトを変えて、こちら。
テキスト部分のCSSは下記のように実装されています。ホバーで色が出現。
.outlined, .OUTLINED {
color: transparent;
-webkit-text-stroke: 1px #141414;
-ms-text-stroke: 1px #141414;
text-stroke: 1px #141414;
}この画像が切り替わるエフェクトもかっこいいですよね。テキストを囲うaタグのdata-img属性から引っ張ってきてんのかなと。。（よくわからなかった）
「text-stroke + transparent」の組み合わせは、ドロワーメニューなんかでも見かけることができます。
このサイト、一見ごちゃごちゃしてるように見えるんですけど、よくよく見てみるとめっちゃシンプルなんですよね。そこが一番、僕がこのサイトを好きになった理由かもしれません。
実績ページのアイデア
実績ページはこちら。
シンプルながらも、細かいところにこだわりを感じられて、美しいです。
あとはページネーションもかっこいいです。
この手法、海外サイトでめっちゃ見ますよね。
「NEXT PROJECT」のCSSはこんな感じ。
こちらはtext-strokeとbackground-clipを使っています。
.hover-img, .hover-gif {
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
-moz-background-clip: text;
-o-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
}
.hover-img:hover, .hover-gif:hover {
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.hover-img:hover {
-webkit-text-stroke: 1px #141414;
-ms-text-stroke: 1px #141414;
text-stroke: 1px #141414;
}ちょっとした遊び要素
サイトに訪れたユーザーを楽しませる、遊び要素もあります。
こういうの日本のサイトにはほとんど見られない気がするんですが、「もっと入れていいんじゃない…？」とか思ったりします。どーなんですかね。笑 国民性かな～。
サイトも印象に残るし、上手く使っていけば化けそう。
まとめ
高い技術力と美しいデザインがとても印象的なサイトでした。
海外のサイトは、日本とは違ったアイデアや発想が垣間見えて面白いですね。
特に受賞歴があるサイトは、クオリティも段違いです。。。
アワード掲載、WOTDなど受賞をしたサイトは今後もここでご紹介する予定です。
