bookmarks 2021.07.08
まえがき
今回も前回に引き続きDeveloper目線の分析を多めに。今回はあとがきもあるよ。
BAKE INC.
フォントとサイト全体で採用している三角形のモチーフから、全体的にジオメトリックな雰囲気 (大好物)。
各所に散りばめられている三角形はSVGで実現されていて、マスクやアニメーションなどに効果的に使用されています。ページ遷移は三角形の角度に合わせた(?) 斜め方向という斬新さ。
全体的なアニメーションの速度感が絶妙で、大胆な演出なのにやりすぎておらず上質な印象を受けます。バランスが素晴らしい。
homunculus Inc.
ホムンクルスさんのサイトがリニューアル。以前のもの尖っててかっこよかったけど、今回はいろいろ削ぎ落とした感じで洗練されています、、WebGLのライブラリはthree.jsを使用しているようです。
まずキービジュアルからWorks一覧へシームレスなアニメーションの演出がCool。そのうえ波紋のようなポストエフェクトもかかっているのに、動作が軽快。
一覧のサムネをクリックしたときの詳細へのトランジションは、メインビジュアルが短冊状に分割されていて、他にはあまりないユニークさがあってよい。
showdot Group
コピーを全面に押し出し、派手なテキストアニメーションがインパクト大のサイト。背景のWebGLはthree.js。
スクロールしていくと背景色が変わるギミックはよく見ますが、このサイトは単純にフェードで色が変わるのではなく、円形のオブジェクトが広がってサイト全体のカラーがガラッと変わる演出 (しかもモーションブラーエフェクトも入っている？？)。かつ、CSSのmix-blend-modeを使用して独特な色合いになるようになっています。一度見たら忘れないサイトです。
Architecte d'intérieur à Lyon • CraieCraie
フランスのインテリアデザイナーのサイト。エレガントなフォントを使用した上質なビジュアルデザインを損なわないような丁寧で芸が細かい実装です。
WebGL (three.js)によって文字をゆらゆらさせたり、どの画像にもスクロールによる視差効果が入っていたり、ボタンのマウスオーバー演出やスムーススクロール全てがサイトのイメージを作り出しています。
スマホで見た場合は閲覧性重視でWebGLの演出はないですが、素晴らしい完成度。
Wisr Personal Loans: A Smarter Way to Borrow | Wisr
これはアイディアが面白いのでピックアップ。
背景がひとつづきの動画に見えるんですが、セクションごとに区切ってスクロール位置によって再生させる動画を切り替えているようです。全体でヒトツナギのように見えるけど、一部分をだけ再生させても破綻しないような作りになっており、どういうディレクションのもとこういうサイトが生まれるのだろう、、と不思議に思いました。
Accueil — Agence K72
このデザインは真似できない。
アニメーションの速度感が軽快で派手な見た目に反してさくさく回遊できる。イージングの選択、アニメーションの継続時間など、アニメーションの付け方にめちゃくちゃセンスを感じるサイトです。
このサイトもスマホで見た場合はかなりシンプルな演出になっています。
Aristide Benoist — Freelance developer
マウスホイールでの操作がとにかく気持ちいい！というだけでピックアップ。
一度一覧のサムネをクリックすると選択状態になるんですが、そこでマウスホイールを操作するとスムーズに一覧に戻ります。画面の表示要素などをうまくフェードアウトさせたりマスクではけさせて、違和感なく遷移していますが、こういう演出の整合性を担保しつつ気持ちいい操作感を実現するには、かなり気を使って実装しなきゃいけないんじゃないかなと思います。
スマホで見ると、「Visit on a desktop for a full portfolio」と出て一覧の閲覧が不可能です。この割り切りは今どきちょっとめずらしい。
Mama Joyce Peppa Sauce - Fiery Blasian Hot Sauce
とにかくこの商品を買え(BUY NOW)！というだけの最高のサイト。
ソースコードを見ると「Webflow: Front-end site library」とあるので、ノーコードツールのWebflowで構築しているようです。こんなことまでできるのか。
こういう振り切ったものも作ってみたいです。
Vita Architecture
これも作り込みの細かさが異常。
AwwwradsのSOTDなどは
・マイクロインタラクションが随所に散りばめられて、ユーザーの操作のフェードバックが明確
・操作感を損なわないが効果的なアニメーションがある
・パフォーマンスチューニングが適切にされている (軽快に操作できる)
・モバイル閲覧時はそれ用に処理が最適化されている
こういった項目が高レベルで満たしているものが獲るんだろうなぁ。
あとがき
AwwwradsやCSSDAを獲るようなサイトは派手な演出に目が行きがちだったりするんですが、それだけではなくしっかり操作性だったりパフォーマンスだったりを担保してるんですよね。
それはどんなWebサイト制作 (サイトだけでなくアプリなども)にも言えることなので、そういうところに注目して日々いろんなサイトを見るようにしています。
サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。