見出し画像

20210428 デザイン日報

○今日の気になるWebサイト

本日はここ数日のアワードサイトでSite of the Dayを受賞したWebサイトで、私が感覚的に印象に残っているものをざっくりとご紹介いたします。


画像1

LENS by Science
https://lens.science.clinic/

最初、こんなおしゃれなメガネのレンズある?と思いましたが、恐らくメガネのレンズのWebサイトではなさそうです。
スクロールし続けていたら画面が右斜めに動いたのが印象的で、Webサイト内に空間を感じました。(社内では酔ってしまうという声も多数ありました!)


画像2

Awd Agency - Art Direction, Web & Digital, Design
https://www.awdagency.com/

制作会社のWebサイトのようなのですが、それぞれの実績に合わせてぽんぽんとカラーリングが変わっていく様子が、より各々の制作物を印象的に見せていてすてきです。


画像3

Martin Laxenaire _ Creative front-end developer
https://www.martin-laxenaire.fr/

フランス・リヨンのフロントエンドエンジニアの方のポートフォリオサイトのようです。
さすがフロントエンドの方が手掛けただけあって、もうアニメーションが鬼すごいですね。
カーソルに合わせて波紋が動いて、画像もスクロールするたびに水面のように揺れています。
このカラーリングもなんとなくデザイナーというよりエンジニア感があってすきです。
昨日のデザイン日報でアニメーションの話をしたので、こんなアニメーションもあるんだなあと思いましたが、果たして実装できる人がいるのかってところですね。


画像4

One up Studio - Works
https://www.oneupstudio.it/

最初のローディングが金庫の鍵を合わせるような表現ですてきだなと思いました。
なんの数字なんだろうとしばらく考えたのですが、ローディングなのであれですね、何%ローディングできたのか見せてるんでしょうね。こんな見せ方があるんですね。

画像5


ちなみにローディングってなんであるのかというと、ページ内の画像などの表示の遅延をなくすために、ローディングの画面を挟むことで先にすべて読み込んでいるのです。

また、読み込みがどのくらい進んでいるのかを表現する数字や、読み込んでいるように感じさせるアニメーションをローディングの画面で見せることによって、ユーザーのページの離脱を防ぐような効果もあります。(人は本当に1秒2秒の読み込みが遅いだけで諦めて離脱してしまいます)


○今日の気になるロゴ

画像6

シンプルだけどすごい!「僕だけがいない街」のロゴに隠された秘密とは - Togetter
https://togetter.com/li/954072

ちょっとネタが古いかもしれませんが、たまたま見つけて初めて知ったのでご紹介いたします。
漫画「僕だけがいない街」のロゴが、「僕だけ」が明朝体になっているのに対して「いない街」はゴシック体になっており、その間の「がい」は明朝体とゴシック体を両方織り交ぜることでシームレスに繋がっていて、ナチュラルだけどなんとなく違和感があるような仕上がりになっています。
アニメのサブタイトルもそれに倣った仕掛けが仕込んであるそうです。見ている当時は全然気づきませんでした!すごい!


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