見出し画像

出会えて良かったWebサイト2023

佐々木よ

こんにちは佐々木（@sasakiyo_da_yo）です。今年も「これスゲー！出会えて良かった！！」と思うサイトをまとめてみました。2023年にこちらのnoteにて掲載させていただいたサイトは現状204サイト。あと2023年分の投稿が1回あるのでその分を含めると208サイトの予定になります。その中でも特にグッときたサイトを改めて掲載させていただきます。


ENDLESS DAWN そしてまた、朝が来る。
圧巻の景色というか見応え。これだけの世界をスキャニングしてしまう技術が素晴らしすぎる。ライチョウが手前から奥にとんでいくシーンとか思わず声が出てしまった。すべてが映像的なリアルな表現ではなくデジタル的なエフェクトや場面の切り替えがあるところとかすごく好き。パソコンのスクリーンセーバーこれにしたいな。ずっと観ていられる。


mofu
もう何をどうしたらこういうものがつくれるのかが全くわからないというか、ただただ驚く以外のなにものでもない凄すぎるサイト。これスクロールするたびに背景の液体的な要素が別の動きしていない？何度も上から下にスクロールしまくってしまった。見出しがカーソルに反応するところも含めてたくさん触りたくなる。


HERZOG.law
スクロールしたら出てくるhdrのメニューのみせかたが面白い。「Menu」とかかれた左にあるテキストが現在いるエリアになっている仕様とかはじめてみたかも。たまにTopページのhdrにアンカーリンクと下層ページへ遷移するリンクを並べなきゃいけないことがあって、どう並べようかな？とか迷うことがあるんだけど、ひとつのヒントになりそうな気がした。…いやなるのか？


yansuKIM
Webのお仕事をしている人からすると「あーこれ観たことある！」と思わず言ってしまう写真の数々で別の意味でもテンションが上がるサイト。サムネイルの段階で1カトゴリーに作品が複数点ある場合は重なった表現になっているところとか面白い。おそらく載せている画像の一部の撮影を担当されていたものに関しては画像をOVすると右下にメッセージが出てくる仕様になっていてそこも素敵。


yado
読み物コンテンツが多いわりにテキストのサイズが攻めているなって思った。個人的にこのサイトの文章の部分に使用されているフォントサイズの12PXって個人的にはキャプションに使用するサイズで文章とかに使用する場合は16PXにすることが多く、ミニマルな印象にはなるけど視認性がさがる気がする。ただMacとかのモニターで見ると小さいは小さいけどまあチャント読めるは読めるんだよね。外部ディスプレイで見ると若干ボソボソとした印象にもなる。ちなみにモバイル（iPhone）で見てもキレイ。うーん…これは単純に僕の家のモニターの問題だけなのかな？文字が小さめなぶん余白の美しさが際立っている部分はとても好き。


おぶつだんの佐倉
この会社が何を大切にしているかがコピーを読む前につたわってくる親しみがあるやさしいトンマナ。KVしたのニュースの部分に「+」ボタンがあるのめちゃくちゃ好き。この量のメッセージのために別ページにとばす必要ないしこの仕様が最適だなって思った。もちろん内容にもよると思うけど。あと「おぶつだん佐倉の3つのこだわり」の左の罫線ウィンドウの端まで伸ばすかは毎回、個人的に迷うポイント。こういう会社のお問い合わせってやっぱり電話も多いんだなって思って電話番号をクリックしたら今ってFaceTimeに連携できたりするんだね。驚いちゃった。


くまweb
「くまWEBは、クリエイティブを支える30人のコーダー集団です」というコピーに対して集団のほとんどがマネキンじゃないかと思ったら、KV下部のお知らせ欄に「今回、ウェブサイトへの顔出しOKなコーダーは3人だけでしたm(_ _)m」って書いてあってめちゃくちゃ笑った。KV下のAboutの部分のビジュアルに3人のうちの1人をまったく使わずにマネキン1体で対処しているところとかとっても好き。撮影楽しかっただろうな。


Sketch
このアプリ感あふれるレイアウトが見るからにツール系のアプリのサイトだなってわかって好き。アプリ感溢れすぎてUIの一部がアプリの説明用の画像なのかサイトとしてのUIなのか分からなくなっちゃうところもあるけどそこも含めて好き。しかもTopの画像うごかせちゃうんだ…世界観がつたわる仕様でとても良いな。Sketchのアプリ自体のアイコンはオレンジのダイヤだったと思うけど、hdrのアイコンとファビコンが黒になっているのは何故だろう？個人的にはこの平面的なアイコンも好きかな。


TRICLE
色の使いかたとかとても素敵。こういう柔らかい配色がすごく好み。それぞれ見出しに絵文字が出てくるところとかテキストベースなシンプルな感じもあいまってちょっとNotionっぽいトンマナだなって思った。ヘッダのナビゲーションをクリックすると下層ではなくポップアップで表示される仕様も面白い。Memberの写真もこれように服とかもふくめてディレクションしているのかな？写真も素敵。


Kurppa Hosk Type
このもうパッと見のレイアウトの段階でめちゃくちゃ好き。こういったフォントのサイトで使用例がこんなにフィーチャーされるものってみたことがないかもしれない。OVで切り替えられてフォントのレイヤーもサッと出せる感じとかすごくスマートだなって思う。


ZOOM
なんていうかもう…なにがなんだか理解できない異次元の空間ができあがっているのでただひたすら凄い以外の感想がまったく思いつかない。マジで異次元だ…。ちなみにTopページのインパクトが凄すぎるんだけどAboutページのスクロールで背景がパーっと変わる感じもめちゃくちゃカッコよくて好き。


Lenticular printing
※ぜひモバイルでスワイプしながら観てください。
めちゃくちゃ度肝を抜かれたサイトというか北千住デザインさんのスケッチ。レンチキュラーという昔ジュースの自動販売機にあったような右から見た時と左から見た時で絵が変わる広告のようなことをデジタル上で実装しているんだけどこれはヤバイ…。アイデアもテクニカルも全部が凄すぎる…。


Cuberto
とても良い意味でてんこ盛り感があって好き。大きいサイズの見出しで部分的にフォントを変えたり、カラフルなCGのビジュアルだったりすごくポップな感じでこういうテンションがすごく好き。


SHIFTBRAIN 20th
僕がデザイナーになった13年前からネットストーキングを続けている会社の最たる例ともいえる会社であるシフトブレインさんの20周年記念サイト。最初にYouTubeのほうで動画を観ちゃったのでサイトも同じ内容なのかな？って思っていたらスッと画面が引いてコンテンツが展開される仕様になっていてめちゃくちゃ素敵。スタッフの顔文字があるコーポレートフォントとか面白いな。スタッフが入るたびに増えていくのかな？あとサイトのトンマナにあったBGMも聴いてて気持ち良い。シフトブレインさん20周年おめでとうございます。これからもハードなストーカーでい続けさせていただきます。


株式会社キラメキ
ロゴをふんだんに活用したOVのアニメーションがとにかく素敵。OVだけではなくAboutページのグラフのアニメーションなどいたるところにサッと出てくる感じもとても好き。あとMenuを出した時にそのページが暗くなってその上に背景の白とテキストが出てくるというレイアウトになるものをよく見るけど、背景がピンクになるものは初めて見たかも。細かいところまで素敵。


隠れ節目祝いbyよなよなエール
なによりもまずこの取り組み自体が素敵。企画の説明にイラストや漫画を使用するのってとてもアリだなって思った。SNSの拡散とかにもサイトで使用されていた漫画を使ったりしたのかな？僕も卒酒を…いや普通に無理だな。


Alright Studio
画面左の余白の部分にWorksのサムネイルが出てくる仕様が面白い。モバイルでみると左のサムネイルがない状態になるっぽい。あとgnaviがないなと思ったら左上に小さくあったんだけど、正直このくらいのサイズ感でも良いかもしれないって思った。


2024年度定期採用｜フェリシモ
イラストと画像をふんだんに使ったスクラップブックのようなレイアウトがとても素敵。モバイルサイトを中心にレイアウトされているサイトって多くはメインのコンテンツをセンターにおいて両端に背景画像をおくものがほとんどかと思うけど、こちらは左にコンテンツを配置しているのと右側の画作りがすごく良いのもあってモバイルサイト中心のつくりだってことに気が付かなかった。ちなみにだけど最後のページにある採用コンセプトの文章がとても良かった。


Deviate Nitro 2
シンプルにこのカメラアングルというか映像から感じる躍動感がとてもカッコイイ。映像の繋ぎも考えてなのかカートのパートの前じゃなくてあとにギャラリーに移動する感じも良いなって思う。


Synflux
もう最初のローディングやコピーの登場の演出からフッタでのQRコードの登場の仕方まで全部がカッコイイ。デジタル的なインタラクティブな要素もあるなかでグラフィック的なレイアウトもバリバリあってすごく素敵。見た目の良さだけじゃなくてJournalページの本文の左のエリアにキャプションがはいっているレイアウトもすごく読みやすくて良い。これはシビれるな。


Studiogusto
何がどうなってそうなるのかわからないけど、マウスストーカーの円がウィンドウの四方に吸着するだけじゃなくてKVのロゴにも干渉するようになっている…すごいな。細かい演出がいちいち素敵でムービーのエリアにいくと円が再生ボタンに切り替わるんだけど三角と円のスピードが違うところや、ヘッダのロゴの位置に「hello!」ってはいっていてOVで社名に変わるところとか自分の案件に取り入れたいポイントが目白押し。とくにイチオシはStudioページのTeamの表現。バチクソにカッコイイ。あと別のサイトをみている最中はファビコンが寝ちゃうとことか超好き。こんなこと出来るんだ。


SoN
これは完全に好みの問題かもしれないけど、スクロールした瞬間に出てくる青っぽいグレー（#a2a9ac）の背景色と彩度低めなピンク（#dfc8bf）の2色をみただけで「ここ絶対に素敵。行きたい。」って思ってしまった。KV右上に縦にはいったgnaviをみて隣の日付や気温・天気との兼ね合いを考えたら縦が正解だよなってうんうんうなずいてしまった。そこからスクロールでgnaviが横になる感じもすごくわかるというか好き。そんなにグリット感も強くなくて広めのマージンでゆったりとレイアウトされた感じも魅力的。コーポレートサイトとかだとなかなか難しいと思うので、こういうサイトならではの良さだなって思う。


Curious & Company
このサイトが映画やテレビ番組のキャンペーンサイトではなくエージェンシーのサイトって段階でもう面白い。世界観のつくりかたはもちろん一つ一つのディティールの作りかたが感動的。モバイルでも同じような体験ができちゃうところも素晴らしすぎる。


Databest
やさしいカラースキームとシンプルなレイアウト。さらにほのかに入ったグラデーション。とても良いなって思ったんだけど、URLに「webflow.io」って入っているってことはこのサイトWebflowでつくっているのかな？僕もツールを覚える感覚でSTUDIOとかやってみようかな？


HOLON Inc.
グラデーションの表現がとにかく美しい。明度が高い中で寒色の中に少しだけ暖色がはいるグラデーションが個人的に好きなんだけど、このサイトの場合は赤いグラデーションが固定でついてくるようになっているのかな？途中で背景が暗くなるときも全体的にフェードインするのではなく左右からブワっと変わる感じがめちゃくちゃ好き。それにしても蛭田さんのいつまでも変わらない現役感あいかわらずカッコイイな。


Blob Opera
ドラッグで4体のキャラクターが歌い出すというだけでもわりと驚くのに、もっと驚くのはこの体のブニョブニョさ。すんごいブニョブニョ動くしモバイルでも変わらないブニョブニョさ。むっちゃブニョブニョさせてしまった。ちゃんと目がカーソルを追いかけている感じとかいろいろ細かくて素敵。


コクヨのヨコク
CG自体の可愛さやコミカルな動きももちろん素敵だけど、個人的にはタイトルやUIの明るめなカラーに対してCGの彩度を抑えた配色がとてもバランスが良くて好き。それぞれの記事の詳細に入ったときにメインのビジュアルというかアイコンにはなりつつもそこまで主張していない感じが絶妙だなって思った。やっぱりこういうCG自分でもつくれるようになりたいな。


SILENCIO ® VISUAL LANGUAGES
スクロールをする度に会計が進んでいく感じが面白い。一回レジに通ったものはスクロールで上に戻ってももう出てこない仕様になっているみたいだけど、こういうのって会議とかで話し合って決めたのかな？「一度レジに通したものを返すのはどうなんでしょう？」とか。白ベースな世界だからこそピッとなる瞬間の赤が映えていて面白いな。


株式会社 裸
完全に日本の文化が好きな海外の会社だと思っていたら日本の会社だったんだ。うねった背景の世界を斜めにさがっていく感じが素敵。会社の説明が最後の最後に出てくるんだけど、きっと最後までスクロールしてくれるという想いからそうしているのかな？もちろん最後までスクロールしちゃったので、そうだとしたら大成功ですとお伝えしたい気持ちでいっぱい。


Henry Heffernan
昔のMacやPCの画面風なデザインのサイトはみたことがあるけど、ノイズはモニターの光もふくめてここまでモニター感が出ているサイトをみたのは初めてかもしれない。さらにモニターからカーソルを外したらカメラが引きになる感じとか直感的ですごく面白い。


株式会社ADKクリエイティブ・ワン
どういう基準というかコンセプトでこのTopの背景動画にしたのかわからないけど、個人的にこういう感じがめちゃくちゃ好き。今はもうリニューアルされちゃっているけど以前のADKホールディングスのサイトもロゴをうまく活用したサイトで、このサイトもロゴの使いかたが好き。あとgnaviにOVするとしないで、お問い合わせのボタンのサイズが変わるのとても良いなって思った。


CHOCOLATE Inc.
最初のMISSIONの部分の画像がランダムで表示されるところが好きで、そこからWORKSが全体に広がっていく感じが観ていてワクワクしてくる。ちなみに当たり前っちゃ当たり前かもしれないけどTopにあるREELが素敵すぎて3回連続で観てしまった。


Levora
縦・横・前後に動くのに加えてパララックスがはいることでサイトへの没入感がとにかく素晴らしい。こういう風に動くデジタルの絵本とかもうあったりするのかな？何度もスクロールしてしまった。


Nobell Foods
シンプルにこういう世界観というか画作りがすごく好き。観ていて楽しい。もう本当にそれにつきる。


moiq capital
テキストが斜め上からサッと入ってくる感じが好きで、マージンの取りかたとかテキストを選択した時の背景色のバランスとかいちいち素敵。「IDENTITY Inc.」のサイトを観たときにも思ったけど完全に動画だよねと思っていたらちゃんとマウスに反応するCGとか本当にすごいな…。あともう今ってテキストだけじゃなくてgnaviもウィンドウ幅でサイズが可変することを考えるべきなんだろうな。ぜひこの考えは次のお仕事で取り入れたい。


キャラパキ発掘恐竜チョコ5周年特設サイト
もうすっごいサイトのパッキパキな感じが好き。クリックしてるだけでどんどんパッキパキになるし。途中でチョコレートを割れるところとか何回もクリックしてしまった。こういう遊び心いっぱいな感じ素敵。


月の輪自動車教習所
SNSのようなタイムライン形式のみせかたでかつ、導線がハッキリとしているのでこれは凄い発想だな。更新もSNSの投稿みたいな感じでライトにできたりとかするのかな？Xとかで出てくる広告なようなものがこのサイトだと全部広告じゃなくてサイトのコンテンツなのが面白い。


QINO
Topで最初にスクロールをしたときに左下のテキストと罫線がフッと消える感じがすごく好き。これが消えることによって次のエリアに移動するときの見えかたが全然違う気がする。LATEST NEWSのエリアのテキストとサムネイルの配置の仕方もめちゃくちゃ素敵。Next/Prevのアイコンは木だからこういうデザインにしているのかな？とてもカワイイ。


60fps
全ページめちゃくちゃカッコイイんだけど、とくにpeopleページの表現に度肝を抜かれた。パーティクルでの立体的な表現もすごいけどこれがマウスの位置に反応して向きをかえるとか凄すぎる。どうやってやっているのかな？スクロールして他の人に変わる瞬間にちょっと色が入るのも素敵。


YUANN
ひとつの動画を何枚ものレイヤーに重ねて表現をしてさらにそれがマウスで動く…すごい発想。これはもともと平面のものに乗算とかそんな感じのもをかけて重ねた表現にしているのかな？面白い。ひとつひとつの動画作品もヤバイなというか観たことあるやつ多いなと思ったらこの人、kidzfrmnowhere.の人なんだ…そりゃイケてるよな。


Aquall
画像の切り替わる演出、コンセプトエリアのムービーのみせかた、KV下のほのかなグラデーション…もう素敵な表現ばかり。フッタの背景画像が微妙に動いて見えるけど…気のせいかな？単にゲームのし過ぎかな？KVやPRODUCTエリアの上の画像をみて、画像が何枚かあって切り替わる時って右下とかにサムネイルなりを入れて画像が何枚あるかを表示したりとかすることがあるけど、イメージの画像の場合って入れなくて良いなって思った。キャンペーンの告知とかが切り替わる場合はいると必要だけど。


NiEW
なんとなくカルチャーメディア系のサイトってカラフルな感じのトンマナが多い気がする。色がたくさんあると視認が難しくなるなとは思う中でこういうときに罫線の黒が活きてくるんだなとサイトをみながら思った。TopのKVとNEWSの間のテキストのエリアとか正直にぎやかしだよなと思っていたけどOVで画像が出てくる仕様になっていて驚いた。サイズ感もめちゃくちゃ良い。こういう発想ステキだな。


Bonu
Topのマニフェストのレイアウトをみてこういう組み方は画像ならではの魅力で、最近テキストで全部組んでしまっているけどメッセージの力強さや伝わりかたとかを考えるとチャント選択して表現を使いわけるべきだなとあらためて感じた。あと商品画像のパッケージと中身のレイアウトの仕方が個人的にめちゃくちゃ好き。


2219
ゲームのような世界観がサイトで出来ちゃうとか…凄いな。ど頭の2人のキャラクターが登場する時のノイズの入りかたとか所々に出てくる数字や記号の羅列とか細かい演出がいちいちカッコイイ。カーソル長押しでの操作ってテキストを長めに読む場合は辛いかもしれないけど、こういう風に画像をみるだけみたいな時は効果的だなって思った。


クラスカハウス
やわらかなグラデーションとZEN角ゴシックが相まってやさしい印象が素敵。グラデーションを部分的に使うときって白背景のほうがグラデーション自体の色が鮮やかにでると思うけど、グレー背景にすることでよりやわらかい印象に近づいていて観ててめちゃくちゃ良いなって思った。黄色味もあるとはいえ寒色メインなグラデーションでこんなにやわらかい印象が出せるの本当に素晴らしいなって思うけど、個人的にはTop左上のグラデーションに少しだけ赤味がはいっているのがすごく絶妙でとても深みを感じる。


aguije
デザインから演出の細かい部分までいちいちカッコイイ。特にWorksの詳細ページのデカいタイトルが追随する仕様とかすごく好き。あんまりテキストの上にテキストリンクを置かない派ではあるんだけど、Next / Prevボタンがこんなに早々に堂々と鎮座している感じとかとても良いなって思った。あとフッタに「V1・V2」ってリンクがあっておそらく過去のサイトを残しているんだと思うけどそういう風に過去のサイトが観れるのは個人的には嬉しい。ちなみに一番アガったのはPageTop（マタミル）ボタン。Aboutページにちゃんと説明があって笑った。


DJ HI-C / Discovery
そもそもサイトに流れている音が気持ち良すぎてその段階でもう素晴らしいだけど、RECO / UNDOのボタンを押したときのターンテーブルの演出がとにかく気持ちよくて何度も触りたくなる。背景のグラデーションがレコードの動きと合わせて動いてまた背景におさまる感じがめちゃくちゃ良い。


星野源
リニューアル前のサイトを拝見していないのでどう変わったのかはわからないけど、アウトラインを上手く活用したシンプルな仕上がりが素敵。アーティストのサイトでバイオグラフィがないの珍しい気がする。アーティストの写真もそんなに多く使われていない感じも新しい。オンラインショップの最初にTopと同じ画像が使われているんだけど、オフィシャルサイトのほうが赤味を減らしているのはサイトのトンマナに合わせてなのかな？このアー写めちゃくちゃ好きだわ。


うおみこども園
心から素敵と思えるというか観ていて楽しい気持ちにさせてくれる。最初のマニフェストの「九州は鹿児島の南はじ。」の横にブリッジしている子供の写真があって、「僕も絶対にここに使いたくなるこの写真！！」ってなった。この子TopのKVでもブリッジしているけど。他の下層ページと違って園の変ページだけヘッダの演出が変わる感じもとても良い。こういうレイアウトやこういう写真を撮れる人って本当に素敵だなって思う。


Watches and Wonders Genève 2023 | Cartier®
この世界観のディレクションも美しいなって思うけど、これを一枚画や動画でなくWebで表現していることに驚く。最初から商品がメインでバーンと出ているのではなくそこの世界に入り込むような形で詳細を観る体験もすごく素敵だなって思う。


ZIZO
観ているだけで「この会社楽しそう」感がバンバンにつたわってくるデザイン。写真のイラストの組み合わさった画像やちょっとしたアニメーションがとにかく魅力的。あと個人的にはTopの画像がすごく好き。メガネの人のネイルと時計のバンドと服の色の合わせかたとかめちゃくちゃ考えられているし後ろにいる人のシャツとモニターに映ったお寿司の赤も意図的にそろえたのかな？画面全体の色合いが素晴らしい。というか何でこんなにマジメな顔してお寿司をみているんだろうって思っていたら、CULTUREページでお寿司が急に飛んできて笑っちゃった。どういう伏線回収なんだよ。


SAUVENIR（サウベニア）
画面が曇る仕様ってどちらかというと雪とか結露でつかわれることが多いけど、湯気っていうのは初めてみたかもしれない。カーソルを動かして曇りをとったところで時間が経つとまた戻ってくる感じとか面白いなって思う。画面右下の絵文字を完全にScroll / Pagetopだと思っていたら購入者のコメントが流れる仕様（現状は仮）になっているのもとても好き。


plantica
白背景と黒いテキストの明度差、白黒なエリアとカラフルな画像のエリア。スッキリとした世界だからこそ画像の華やかさが際立って素敵。見出しの黒が真っ黒（#000000）のようなそうでもないようなという不思議な印象がしたので調べてみたらほとんど黒に近い緑（#000300）だった。個人的に白黒はHSBのHとSは絶対に0 にしてBはよほどのことがない限り5きざみにしたいって思っちゃうタイプなのでこういう繊細な考え方を持ちたいなと思った。Menuボタンのグラデーションが変化する感じもとても好き。


株式会社出前館
とにかくKVが素敵。めちゃくちゃわかりやすいし「テクノロジーで時間価値を高める」というコピーがなくてもなんとなく意味が伝わってくる。あと個人的に驚いたのは欧文に「LINE Seed」が使われていたこと。フォント自体は凄く好きで社内の資料をつくるときにバンバン使用しているのだけど「LINE」と書かれたフォントを他のクライアントワークに使用して良いのか？みたいなことを考えて使うことを躊躇していた。でもこのサイトをみるとやっぱり良い。出前館のロゴとの親和性もあるし素晴らしいチョイスだと思う。良いものは良いで使うべきだなやはり。なんならNotoSansもGoogleとAdobeがつくったフォントだしね。


Fluffy HUGS NFT
もうKVの段階からスースーしたい気持ちでいっぱいになる。これだけビジュアルメインの展開がつづくとスクロールしている感がないというかアニメーションをみているのかな？という感覚になった。平面的な動物が奥行きのある空間で動くところがすごく可愛くて好き。


Little Red Riding Hood
これは度肝を抜かれた。彩度が低い世界にカーソルで水彩絵の具のように描いていくんだけど、色の広がりかたがすごく気持ち良い。絶対にこういうコンテンツってカーソルをくるくる回したくなると思うので同じ場所でカーソルを動かしていても波紋のように色が広がってく体験がさわっていてとにかく気持ちよかった。カーソルのエリアが水面のような表現になっている感じもすごく好き。


Distil
OVの表現がスタイリッシュで好き。こういうスピード感のある表現てとも良い。カーソルをボタンからはずしたときにチョット余韻がある感じもカッコイイな。Top一番上にある惑星？のところにカーソルをのせると部分的に光って位置によって回転が変わるみたい。細かいところまでカッコイイな。


Dior Le Baume
プロダクトの世界観を全面にいかしたトンマナが素敵。途中でウィンドウ幅いっぱいにムービーが出てモバイルのサイズにトリミングされる演出があるけど、こういう演出って撮影段階でモバイルの縦長サイズにトリミングされることを念頭において撮影しなきゃいけなくて、そういうことを考えずに出来上がったムービーを渡されて「これを全画面で。」とか言われると内容によっては凄く困る。例えばタレントが出ている場合は顔が切れないようにしなきゃいけないので。最初だけDiorの背景を出してスクロールでサッと消える演出や本当にほんのりとだけ青がはいった白（#f5f6f8）い背景とか細かいチョイスがいちいち好き。


GOALS
背景色（#ede8e2）だったり差し色の赤っぽいオレンジ（#ff3c00）だったり色の使いかたがとにかく好み。所々に16ビットなフォントが使用されているけど、いつの時代も16ビットフォントにはゲームのメタファーがあるんだなと思った。いや単純にフォントとしてもカッコイイんだけどね。Peopleページの集合写真のテーブルにKAWSの作品集とゲームボーイが並んでいる感じがめちゃくちゃ好き。あとなぜか着ている服にラーメンの文字が多いのもとても良い。


CURIO
動画の世界観にあわせたカラースキームがとても魅力的。商品のIndexの部分のサムネイルが画像と動画が混在している感じがとても良いなと思った。あとは個人的にサムネイルの下に商品名と価格を僕はおそらく載せてしまいそうだけど、このサイトみたいにOVではじめて出てくるっていう表現もめちゃくちゃ良いなと思う。こっちのほうがパーっとみる分にはスッキリと見えるし、気になるものはOVすればサッと見れるし。とてもスマート。


くりもと眼科
レイアウト・文字の選定・写真のディレクション…数えきれない素敵な要素で構成されているサイトなんだけど、このページを遷移するときの目をひらくようなアニメーションがめちゃくちゃ好き。すっごい自然なまばたきに見えちゃう。これ目が閉じる少し手前に画面にブラーっぽい効果がはいっているのかな？素晴らしい。


inter office ltd.
パズルが組み上がるような背景や画像がでてくる演出がとても素敵。個人的に、黄色と白とグレー（このサイトの場合はベージュっぽいグレー）の組み合わせが凄くすきで、健康的というか健全かつやわらかい印象を感じることが多い。うん…これタマゴの影響かな？


イラストレーター 野崎ひろこ
シンプルなイラストの世界観にとても合う文字組がすてき。アイコンでNext/Prevとかにするのではなく丸括弧で（次へ/前へ）って表現している感じも好き。上下に固定でレイアウトされたプロフィールの上の位置が下よりも右に配置されていて、サイト左上の縦書きの作者の名前にしっかりと余白を生んでいるバランス感覚が本当にすばらしい。


BOWTE
Journalページのレイアウトがすごく好き。個人的にシンプルにみせたい記事ページって左右いっぱいはまあ使わないよなって毎回思って、このnoteのようにセンターに横幅を決めてテキストをレイアウトして画像はまあ内容によって調整かな…みたいな感じにしがちなんだけど、サムネイルが左固定ってすごく素敵。大きく2カラムで考えて左に固定でなんか置くって発想今までぜんぜんなかった。是非とも取り入れたい素晴らしい発想。


東東京京
サイトをみるというよりもワークスのひとつひとつをみてどれもくそカッコイイな…って思っていたら、急に「オレの“領域（テリトリー）”へようこそ」っていうメッセージが画面いっぱいに出てきて一気に引き込まれた。しばらく操作停止しているとランダムでメッセージが出る仕様になっているみたいだけど、これが全部言葉もタイポグラフィもいちいちカッコイイ。ちなみに一番グッときたのは「さあ行こう。邪魔するものは、全部どかして」。


PARTY
TOPにおける情報量が多めだなと思いつつも、順序立てた構成と文字量のバランスが素晴らしいなと思う。最後までだれることなく読めてしまうの本当に素敵。こういう流れだからこそ同じフォーマットで展開される感じが良いのかも。下層ページにはいったときにフッタ部分のレイアウトがメニューと同じにしてある感じとても好き。


tote inc.
あれ？ここたしかサイのサイトの会社じゃなかったっけ？って思ったらサイのサイトだった。もうこの画力の凄さよ…ハイテンションすぎて本当に好き。サイト内を自動ですすんでいく感じがすごく良い。メニューあるから行きたい場所にもすぐアクセスできるし。これメインのビジュアルどうやって決めてんだろう…CDかADの人が「前回はサイだったし…今回はロバかな？」とか会議でいうのかな？サイト内に流れるBGMもサイトのテンションに合っててすごく好き。


VICIO™
画像と文字の組みかたがとにかく素敵。テキストの部分をOVするとイラストが乗っかったりする仕様なんだけどとても可愛くて好き。個人的にメニュー（サイトのじゃなくて商品のほう）は一覧性が大事なのでIndexの画像は小さめにしたほうが良いのかなと考えているけど、実際そういうのはお店やモバイルオーダーのページでやれば良くてこういうサイトでは大きく魅力的にみせるほうが役割的にはあっているのかもとこのサイトを見て思った。


SBIラップ 匠の運用コース｜SBI証券
こういったテキストベースの堅めな情報をあつかうサイトって、可読性と同じくらいテキストのエリアの取りかたがすごく大事だと思っていて、このサイトはそこのエリアの取りかたがすごく上手だなと思う。コンテンツの横幅いっぱいまでテキストのエリアをとっちゃうと「うわっ！文字多い！！」みたいな印象を与えちゃう気がするので、タイトルを縦にいれたり背景のエリアを敷いてセンターに寄せるみたいな調整が素晴らしい。罫線を多用している中でグラフは波線をつかうとかそういう調整もすごく素敵。


SHUTL
このCONTACTやVIEW MOREのボタンの見せかたがとにかく好き。ボタンとしての高さはテキストリンクぐらいなのに圧倒的に目立つしなによりも可愛いしカッコイイ。超好き。案件にもよると思うけど、KVの下にある記事のIndexって僕がやっているお仕事の場合は更新が多いのもあって詰め詰めにしちゃうことがほとんどなので、このくらいゆとりのある見せかたに憧れたりもする。インスタの導線での写真のみせかたも素敵。


Thibaut Foussard
こういうマウスストーカーのエフェクト本当に好き。Worksのエリアのサムネイルが壁にもたれたデカい紙のようにぐにょっと曲がっているんだけど、マスストーカーのエフェククトまでこの曲がった状況に合わせて曲がるのはどうやってやっているんだろう…すごい。あとConnectエリアの光の滝みたいなやつが気持ちよくて何度も触っちゃった。


「人間に栄養を」カロリーメイト リキッド
コピーからくるアイデアとして面白いなと思いつつも、下層まで全部、CAPTCHA（キャプチャ）認証をしなきゃいけないのはすごくダルい。でもそこのダルさもふくめて面白いのかもとさえ思う。ちなみにプレステのゲームを買うときに毎回クイズに答えた後で二段階認証するんだけど、それはどっちかにしてくれないかと毎回思っている。


THE BUTTER CAKE
全体的なレイアウトの美しさが素晴らしいとこもありつつ、画像と動画のバランスがとても良いなと思った。動画ってあんまり画面いっぱいに置くよりもこのくらいのサイズ感でいれるほうが良いのかも？もちろん用途によるけど。あとはバターケーキの断面の部分の説明のキャプションがちょっと縮小するような動きではいるところがあるんだけど、そこが個人的にとても好き。


My Nostalgia | OPERA
KVの世界観に対して、画像が出てくるときの演出がすごく合っていて素敵。二段階くらいの動きでフワっと出てくる動きなのかな？動き自体もまったく長くなくなんとなく動きがあることを感じれるくらいのスピード感でめちゃくちゃちょうど良いなと思う。ちなみにSummer Sunset Dazzleとか以前のシリーズのサイトも残っているのかな？と思って飛んでみたらこのページにリダイレクトされると思いきや、OPERAのサイトに飛ばされるんだ。確かに別商品なのでそっちのほうが良い気がする。


STYLE PORT Inc.
KVのこの3Dのロゴのディティールが素晴らしいのはもちろんなんけど、このTopのロゴの間を文字が貫通しているんだけどこれってどうやってどうやっているんだろう？文字も3D表現なのか、それともロゴが文字の前にある場所でマスクをきっているのか？でもそうなるとロゴの凹んだ部分はどう処理しているのか？…まったくもって謎。最後のフッタに納まってまわってる感じもすごく気持ちよくて好き。


T-KO DESIGN
もうただただ好きな世界観。こういうテイストが大好き。


Seungmee Lee
すごくシンプルな中に、OVでの見せかたやWorksとLabの切り替えが上手く入っていてポートフォリオサイトとしてはとても好みなデザイン。左下のShareボタンのとなりにあるGuestboardの機能がすごく素敵。ユーザーがどこから閲覧しているかが可視化できるのとても面白い。


Lusion
初見で1stビューをみたときにはシンプルな感じで素敵だな…とか思っていたのだけどスクロールしちゃったら最後、もうどういうことかわからない展開にただただ感動してしまった。Aboutページにいたってはこれ下層ページなの？という感じだし…もうなんか…いろいろと凄すぎる。


Kokopako
OVの演出がとにかく素晴らしい。あまり仕組みをよくわかっていないんだけど、Topからスクロールをした瞬間にWorksのページに切り替わる仕様になっているのかな？不思議。Worksの詳細ページにはいったときのReelの再生ボタンの位置とかすんごい斬新。


YUKI OKADA
まずこのデザインのトンマナ自体がとにかく好き。テキストの選択が波下線なところとか素敵。モバイルでみたら僕の端末（iPhone X）だとプロフィールがしっかりと隠れちゃっていてわざわざWorksをどかさないと見れないんだけど、そういう感じも面白いなって思った。


Vucko
とてもシンプルだけど、細かい部分までいろいろと素敵。サムネイルがアニメーションやカラースキームなど華やかなものが多いのもあって、それ以外の要素がクライアントのロゴもふくめて黒ベースで統一されている感じや、Approachページのサービスの流れのエリアの白背景の中で重なりを出すために微妙に下側のレイヤーのほうが暗くなる感じがすごく好き。というかサムネイルのひとつひとつのクオリティがヤバいな…。


Discover the Polaroid I-2 Instant Camera
この背景のポラロイド感あふれる光の質感と、途中でカメラが横になってレンズから光がパーッと出るときの光のグラデーションがたまらなく好き。掲載されている写真もひとつひとつ素敵だなって思いながら観ていたら、掲載されたポラロイドの下にカメラマンのクレジットがはいっていて川島小鳥さんの名前が…すごい豪華。


Analogue Foundation
なによりもまずこのコピーをみてビビったんだけど、これこういうSVGの画像とかじゃなくてテキストなの…？こんなに美しく組めるものなの？縦のグリッドが見えてきてしまうほどキレイな余白。これくらい余白があるというか情報が詰め込まれていないからこそこのくらいのテキストサイズでもしっかりと入ってくるのかな？背景色がすんごい若干クリーム色っぽい感じ（#fffcf9）なのも好き。


OFF+BRAND
センターのプルプルな球体が背景色とマッチしてとにかく美しい。全体的な粗密のバランスがとても素晴らしくてテキストやボタンの罫線のおさえた感じもすごく素敵。よく考えられたバランス感覚だ。


代官山青果店
いやもうファーストビューでとにかくカワイイ。この並んでいる感じがとても好き。パッ見で一瞬、ボタンとかテキストの背景色を黒にしているのかな？と思ったら紺だった。Eventエリアの背景と同じ色だと思うけど面積によってやっぱり見えかたって変わってくるものだなってあらためて思った。モバイルになったときにRecommendからBest Sellerまでの見えかたはなんとなく想像できたけど、About usのエリアは背景の画像が固定なのかな？と思っていたらデスクトップと同じく横にスクロールされていてなるほどとなった。


中華そば 七八
赤いパーカーで麺をすするKVがとにかく素敵。「麺・汁・肉」のパートの画像の上のマージンがない感じあまり見たことがないので新鮮。ヘッダのナビゲーションでメニューと店舗案内をわけている感じすごく良いなと思ったけど、飲食店のサイトにおけるメニューって料理のメニューを想起させちゃうから言葉で載せるのってムズいんだなって思った。


大月真珠
真珠というかジュエリーのサイトってどちらかというと高級な世界観でいくものがほとんどの中で、こういったアプローチをするサイトって珍しい気もするしとても良いなって思う。こういった世界観を伝えるのにはビジュアルメインでパララックスを使うのが合っているんだろうな。画像のひとつひとつが魅力的で素敵。


SHINYA OKANO
文字の組みかたとか動きも含めてすごく好みというかカッコイイなと思ったらRYDENのサイトを手掛けてらっしゃるかただったんだ。Contact下のクレジットを見てコーディング以外のパート全部手がけてらっしゃるんだ…と思い自分とのスキル差にゲッソリとしてしまった。…もっと頑張らなきゃ。


TT Global
全体的な美しさもさることながら、UIの細かい挙動がすごく素敵。下層のフッタのサービスと会社概要のボタンのどちらかをOVするとエリアの面積が変わるみたいな仕様とか、ContactのメールアイコンをOVすると紙飛行機のアニメーションになってまたメールに戻るみたいな発想、僕ではまったく思いつかない。こういう風に細かく丁寧に考えられる人になりたいな。


HAIR ICI
なんというかまずこのサイトがヘアサロンのサイトであることに驚く。TOPで読み物コンテンツような展開をするヘアサロンのサイトを見たことがない気がするのですごく新鮮。写真もひとつひとつ美しくて最後まで引き込まれて読んでしまった。


Barber Hauler Capital Advisers
このサイト、ビジュアルがサイト全体を通してほぼ同じものなのにしっかりと画がもっている感じがとにかく凄い。文字サイズ、余白の取りかた、背景色…いろんなバランスが合致してこうなっているんだと思うけどバランス感覚がとにかく素晴らしいなって思う。


なはれ
50Wの太陽光パネル2枚から供給された電力源で稼働しているWebサイト。なので曇天が続くと電池が切れてオフラインになるらしい。なんて面白い発想！電池消費を抑えるためにディザリング画像を使用していたり細かい簡略化がされている感じが素敵。個人的にディザリング画像の質感が好きなのもあるけど、背景色ともマッチして独特のあたたかみを感じる。フッタのX（Twitter）のアイコンの上に「ウェブサイトがオフラインになるかもしれません。」って書いてあったの笑った。このサイトの制作についてはロフトワークさんのサイトに載っています。


NEWFOLK
色数を抑えた中で綺麗に映えるネオンカラーがすごく素敵。円や四角のようなシンプルな形で構成されている中で、形が変化したり奥行きが出るような動きをしたり、その変幻自在さに会社としての強さが表されているような気がしてシンプルに観ていてカッコイイなと感じた。あとTopのStudioの下に四角の上の部分がスーっとはいってそこに「Scroll down」がはいる感じめちゃくちゃオシャレで好き。


中途採用 | 採用情報 | Sansan株式会社
こういうのって絵コンテ描いてつくっているのかな？動画をつくるようにしてサイトをつくっている気がした…カッコイイ。下層にページ遷移するときのダイナミックな感じが気持ちよくて何度もクリックしてしまった。あとすんごい地味に好きなポイントだけど、こういうサイトってヘッダのロゴをクリックするとこのサイトのTOPに行くのではなくコーポレートサイトのTOPにいっちゃう場合がよくあるのでそれがないのとても助かる。


社会福祉法人 明照園
イラストやカラースキームでの世界観の作り込みもモチロン素敵なんだけど、個人的には写真がとにかく素敵だなと思って引き込まれた。被写体になる人がモデルであったり写ることに慣れている人でないと笑顔ってなかなか難しかったりもするけど、もともと笑顔の多い仕事環境なのか写真家・ADの方々のお力なのかその両方なのか…兎にも角にも出てくる写真がどれも素敵。ちなみに撮っているのは山口亜希子さんらしい。


双葉金属
右側に出てくるアンカーリンクがセグメントごとに内容が変わっていく仕様がすごく好き。ヘッダと右側でアンカーの役割を変えている感じが実用的だし面白い。ABOUTの空抜けの画像背景に白でテキストが入る感じって、自身の担当している仕事で考えるとアクセシビリティ観点で修正が出ちゃいそうだけど、僕もここは白を入れたいって思う気がする。ちなみにこのサイトの写真も山口さんらしい。ポーターズ株式会社の採用サイトのときも写真が素敵って思ったんだけど、モンブランさんって写真のディレクションめちゃくちゃ上手いんだろうな。時間ある時に写真メインでWorks全部ガン見しよ。


GO株式会社の脱炭素サービスGX
KVをスクロールしてABOUT部分に出てくるビジュアルがKVの動画をマスクしたものという発想めちゃくちゃ頭いい！ボタンに使用されるグラデーションに給電されるようなアニメーションがはいっている感じが好き。Serviceエリアのサムネイルがちっちゃい3Dみたいになってるのすごいカワイイ。僕もこういうCGつくれるようになりたいな。


PERFECT DAYS
テキストの演出にこんなに驚いたのはNURO DEVILMAN以来かもしれない…。こんなにエゲつない演出がはいっているにも関わらず、文字組がキレイで読みやすい。そういう調整がされているのかな？文中の上下にテキストの演出がはいってセンターの辺りしか読めないので、文章としては読みづらのかな？と思ったけど、流れる音ともに読んでいると音と文章がリンクして自分の中にゆっくりとした時間ができあがってくる。テキストも頭の中にしっかりと流れ込んでくる。これは凄い体験をWebでやっているのかと思うと恐ろしい。


GOジョブ
求人情報を見せるというだけでなく、「アプリドライバー」の説明を通してGOのサービス自体の魅力や未経験者に対する敷居の低さがしっかりと伝わる構成が素晴らしい。サイトってユーザーが初見でサイトを閲覧するときと2回目以降で繰り返し閲覧するときで、行動や見たいと思う内容が違っていてそこの整理もしっかりとされているところがまた素敵。Topのコピーのひとつに「安心して稼ぐ」ってワードがあって、その言葉だけだと逆に不安になりそうな気もするけどこれだけ丁寧にサイトで語られているとスッと入ってくるなと思った。


THE ONE.
全部がそうなっている訳ではないけど、テキストの「サイズ=ラインハイト」で改行しているのって初めてみたかも。個人的にサイズとラインハイトを揃えるときって、「ここは絶対に改行しません」ってところだけだったので。個人的に文章よりも見出しの行間を割合的に詰めることがほとんどなんだけど、それは見出しとしての固まった感じを強めるという意識があって、そういう意味でいうとこのサイトのテキストは固まった感じがさらに強くて余白とのメリハリが凄く感じられる。あとTopの「THE ONE.」のタイトルとかWorksのサムネイルをカーソルで横に動かしたときに出てくるブレたような演出がめちゃくちゃ好き。


今年もたくさん勉強させていただきました。僕自身の今年のお仕事を振り返ると、年始から夏過ぎまではIot領域とアプリ開発のお仕事がほとんどで夏ぐらいから少しずつWebサイトのお仕事に携わらせていただきました。あとは今まで撮影はデザイナーという立場で関わっていましたが、はじめてADとして関わらせていただいたことが個人的に大きなチャレンジでした。　40歳を超えてこんなこと言うのもなんですが、今年もはじめてな体験がいっぱいで凄く大変で超楽しかったなと思います。いやこういうのって年齢とか関係ないのかな？来年も果敢にいろいろなことができたらなと思っています。今年もありがとうございました。

去年のまとめはこちら

こちらのnoteは、佐々木個人が勉強のために日々ブックマークサイトやSNSを閲覧している中でグッときたサイトを掲載させていただいております。感想は完全に佐々木主観の個人的なものになります。もし掲載の取り下げを希望されるかたがいらっしゃいましたら、お手数おかけしますがXのDM宛にご連絡いただけると幸いです。よろしくお願いいたします。


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