参考作品:劇場版オリジナルアニメ『サイダーのように言葉が湧き上がる』公式サイト

こんにちは。ささめまです。

2021年当時見逃してずっと気になっているアニメ映画「サイダーのように言葉が湧き上がる」の公式サイトが可愛い！これパクりたい！の塊なのでご紹介します。

http://cider-kotoba.jp/

ぷかぷか浮かんでくる泡が映画のタイトルをよく表していてしかもかわいいです。

自分が管理するサイトに持ってこようと思って写経したら一番手前が泡のレイヤーになってリンクが押せなくなったりしたので困ったなぁと思っていたら

#particles-js {
    pointer-events: none;
}

という記述を見つけて、これで最前列にアニメーションやカンバスを置いても触れなくできるのか！と恥ずかしながら超今更の学びでした。

ゆらゆらとゆっくり動く波も素敵…！

フォントも私の好きな小説系明朝体！

ハイライトできたのでこんなWEBフォントあったんだ〜と思ったらHannariでした。存在を忘れていたけどとっても美しいフォントですよね。

YakuHanは初めて知りました。
、。！？〈〉《》「」『』【】〔〕・（）：；［］
のためのフォントのようです。こんなものもあったのかぁ。書体へのこだわりを感じてさらに好きになりました。誰がデザインしたんだろう。

.introText {
    font-family: YakuHanMPs, Hannari, "Noto Serif JP", "ヒラギノ明朝 ProN W3", "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMincho, serif;
}

https://yakuhanjp.qranoko.jp/

canvasモリモリ活用の素敵サイトで、WEBデザインって楽しい！を再認識させてもらいました。素敵なサイトに拍手！

ではでは。

参考作品:NOYES

こんにちは。ささめまです。

まこなり社長のYouTubeを見ていたらお気に入りの家具第一位としてごりっごりにごりにお薦めしているソファがありました。
サイトを見に行ってみたら素敵だったのでご紹介します。

https://www.ny-k.co.jp/

このサイト、とにかく写真が美しいです。メーカーならではの技ですね。家に置いた状態の写真もたくさんあって、「自分の家においたらどうなるだろう」と訪問者の想像を膨らませます。

物撮りも美しい…。このスライダーはswiper.jsを使っているようです。やはりおしゃれサイトはswiperかぁ。

要所は画像や動画のトーンを落とし、上に白文字を乗せています。イメージがパッと伝わるしおしゃれだし、思わずため息が漏れます。はぁ。

PC版では画面上部のメニューをマウスオーバーすると、メインコンテンツたちにガウスがかかります。えーー見やすい〜〜！

スマホ版ではハンバーガーメニューになっており、中のコンテンツはトグルでまとめられていて必要な情報が見えます。

必要な情報にフォーカスできてなんとなくミニマリストっぽさを感じます。シンプルだけど、細やかなUX設計で唸らせられたサイトでした。ううう〜〜〜〜〜〜！作りたい！

ではでは。

参考作品:映画『すずめの戸締り』公式サイト

こんにちは。ささめまです。

最近やっと友人宅で映画「すずめの戸締り」を観て、公式サイトに行ってみたらなかなか良かったのでご紹介します。

https://suzume-tojimari-movie.jp/

このサイトのタイトルh2の表現が好きだな、と思いました。
文字と下線とが密着していておしゃれな感じなのです。
スクロールすると線が伸びて文字がスッと上がってくるエフェクトもよき。

メインビジュアルも上手いことやったなー！と思いますよね。きっと横幅のない映画ポスター用の素材をもらったのでしょう。それがPCでウィンドウサイズを変えてもどのサイズでもいい感じのファーストビューになってすごい。計算された美を感じます。

イントロダクション部分が小説っぽいのもいい。小説の書体が好きなんだな、私。タイトルは画像、本文は[Noto Serif JP]でした。やっぱ好きだこのフォント。いっぱい使ってこ。

ではでは。