ブックマーク（Web）
【Web】
■明朝体を使ったサイト
清水寺
Q by Livesense
養老ミート
hyogen
カルーセルが天才すぎ。最高。
■LP
ノレル
ファーストビューのイラストがかわいいし、マーカーで引いたようなよくあるテイストと思わせて実はちょっと違ったりするのがいい。
映像研には手を出すな
中国風LP。まず枠が目を引くが、出現アニメーションがめちゃめちゃ凝ってる。
いきなり404 not foundでビビる。最高。
桑名眼科脳神経クリニック
ミニマルだが細かいインタラクションにもこだわりを感じるいいサイト。
MIT
統一感がすごい。別ページに行っても持続してるのでブランディングが相当ちゃんとしてる。かっちりなレイアウトとフレキシブルな色が最高。
恵比寿映像祭
Be.at Tokyo
ローディングモーション良い。エレメントごとで分割してアニメーション。
JR Hibiya Okuroji
ローディングのロゴアニメーション、こんなに長くてもかっこよければ許されるんだな
Snaq
かわいい、変な形を使うのがうまい。アニメーションもよき
Tabletrip
mount.incの作品。ローディングアニメーション、明朝体の使い方、左右のにぎやかしエレメントと、mount節全開。
3&bC
シンプルでかっこいい。ファーストビューが鮮烈。
ブルーピリオド展
「横スクロールの納得度が高い」by まるそうさん
下部のスクロールインジケータが物理空間の距離を模している。
https://gyazo.com/a65b6fd32358d7ae3db0e46321ec5e49
スプラトゥーン3
イカのモチーフの使い方が上手だし、情報の整理の仕方、ほどよい遊び加減のバランス感覚がいい。
■モーション
非常に小気味いいイージングと嘘みたいに速いローディング。絶妙な尖り具合は少し前のMaterial Designに通じる。モノトーン、ワイヤーフレーム、楕円がキー。
アニメーションがかわいい&超なめらかで、こういうサイトにありがちなスクロールが乗っ取られてる感が全然ない
あと2回目以降アクセスしたときには最初の動画が流れないのがよく考えられてる
スクロールアニメーションエグすぎる、どうやって作るんだろうね。
じんわりアニメーションへの気配りが素晴らしい。
フォントのアピールLP。ただループするだけ+GitHubへのリンクだけ。諦めではある。
テキストアニメーションがかわいい。約物をたくさん使ったミニマルな構成。FVがProjectsと同じレイアウトなのも面白い。
https://gyazo.com/9f3e6286347e5662e755945617052fdd
会社カタログのポップアップアイコン、エグ
スクロールエフェクトのグローがかわいすぎ
最初のアニメーションすごい
ジオメトリックなモーション。スクロールで拡縮するアニメーションが気持ちいい。
seeeという名前に合わせた瞬きするアニメーションがイケてる。
スライダーのスクロールが本当になめらか。Google Photosとかからの引用が効いている。堂々としている。
■3D
車が走るやつ。衝撃を受けた。すごい。が見にくい。タイトルも変わってかわいい。
斜めからドット絵ゲームをスクロールするやつ。本当にすごい。上のにインスピレーションは受けてるだろうけど、ユーザビリティの面でもビジュアルの面でも大きく進歩している。このドット絵のモデリングのために専用のモデリングツールとレイアウトツールを開発したらしい。
3Dと2Dの見事なクロスオーバー。Isometricをこう使うとは……
トランジションでもある。ホバーエフェクトも滑らかで素晴らしい。
■歴史
Windows 98の見た目のやつ。
FigmaにMac OS 9のコンポーネントを作り、新しいアプリをそれでプロトタイピングする。
映画に出てくるパソコン集。
■インタラクション
押した部分だけが見えるようになる。シンプルなのに効果的で押したくなる。どうやって企画してるのかマジで謎。
↑より先にできたのか後にできたのかわからないが同じギミックを使っている。さらに、非アクティブなときにブラウザタイトルが変わる。
https://gyazo.com/64c1caacf137a3232d14b074c8b235c5
https://gyazo.com/1134901ef1a77f74b8a5219c7578b446
フォーカスが面白い。今ホバーしているものは詳細が、そうでないものは単色で見える。
スクロール位置に応じて右側コンテンツの写真が変わっていく。UIがエレガント。
■タイポグラフィ
カーソルの動きに合わせて文字の光の当たり方が変わるという演出
ハンバーガーメニューは回転するカルーセルのようになっていて，macOSのDockのホバー時のように，見かけのタッチターゲットを大きくする演出がある タイポグラフィが非常に固い。良い。
バリアブルフォントをCSSアニメーションのように使った例。小気味よいトランジションとかわいい絵文字がかなりいい。
テキストだけのヘッダーが秀逸。
文字だけで動画作ってるやつ。最高すぎて何も言えない。
モリサワフォントを大量に使ったサイト。軽すぎてすごい。
グリッドデザインが硬い。中間にあるスクロールエフェクトのタイポグラフィも最高。
FV面白い。
Ryo Nakae作。タイポグラフィもだけどパターン、テクスチャ、細部のアニメーションも素晴らしい。
長いテキストを途中で折り返す、エディトリアル風タイポグラフィ。
■ギミック
全部が傾いている。
暗闇で食べるレストランのサイト。面白い。
サイト全体がライブコーディングでできていくサイト。
穴を通して見るサイト。スクロールに端がないのもよく考えられていてさすが。
みすず書房
背表紙一覧が上にある。本屋感。
■縦のグローバルナビゲーション
これかなりいい。パンくずが一番上に固定されるのもかっこいい。
https://gyazo.com/5e6b569daf5ef7b0aa6aa8fb3b652f7e
なめらかサンショウウオ製。フレームを揺るがす
漫画によるミクストメディア性。
■Useless webで出てくるやつ
カーソルでやる意味わからないインタラクション。大好き。 絵文字+カーソルアニメーション。
ウィンドウのイデア。
2進数
■ポートフォリオ
トランジションかっこいい。HTML標準部品で上下両方無限スクロールしている。どうなってるんだ……
これもトランジションが最高。
王道気持ちいいサイト。
これ相当すごい。滑らかなアニメーションとパララックスが美しい。何にも派手なことしてないのに……
■アクセシビリティ
とてもなく丁寧でアダプティブなアクセシビリティメニューが実装されている。
■ディテール
グリッド見せちゃう系。
■硬いレイアウト
■企業サイト
プレーンだけど硬くていい。