http://www.town.shimane-misato.lg.jp/misatoto/
地域の魅力再発見のためのコンテンツサイトです。
町の文化やお店の魅力を地域の人々からフォーカスし、一つ一つのエピソードを物語として紹介しているサイトです。
TOPページは平面のイラストがスクルロールによってダイナミックにアニメーションします。まるで絵本をめくっているような感覚は上記のエピソードを物語として紹介するコンセプトサイト上の体験がうまく合致しています。
Peter Solarz
tumblr dot com
🪼

祝日 / Permanent Vacation
noise dept.

#extradirty
NASA
KIROKAZE
TVSTRANGERTHINGS
let's talk about Bridgerton tea, my ask is open

Product Placement
Not today Justin
Stranger Things

❣ Chile in a Photography ❣
One Nice Bug Per Day
i don't do bad sauce passes

titsay
d e v o n
trying on a metaphor

JVL

seen from Australia

seen from United States
seen from United States

seen from Canada
seen from United States

seen from China

seen from United States

seen from Australia

seen from Singapore

seen from Indonesia
seen from Malaysia

seen from United States
seen from Malaysia

seen from Argentina
seen from United States

seen from United States
seen from United States

seen from United States
seen from Morocco

seen from Australia
@unitz-designshare
http://www.town.shimane-misato.lg.jp/misatoto/
地域の魅力再発見のためのコンテンツサイトです。
町の文化やお店の魅力を地域の人々からフォーカスし、一つ一つのエピソードを物語として紹介しているサイトです。
TOPページは平面のイラストがスクルロールによってダイナミックにアニメーションします。まるで絵本をめくっているような感覚は上記のエピソードを物語として紹介するコンセプトサイト上の体験がうまく合致しています。

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
TWO ROBBERS
https://tworobbers.com/
米・フィラデルフィアのハード・セルツァー(アルコール入り炭酸飲料)のブランドサイトです。
白地に黒線というシンプルな構造に、イメージがハマってるだけなのですが、余白感のバランスが良いと思い、postしました。
遊びごころたっぷりで、ところどころに仕掛けがみられます。カーソルが昔ながら風で大きめだったり、プロダクトイメージにマウスオンすると缶が飲み終わった状態になったり。最初の年齢確認画面では、未成年を選ぶとninjaさんというユーチューバーのゲーム実況動画に飛ばされます笑
すっごい技術がたくさんとかではない(と思うの)ですが、みていて楽しいサイトです。
あとGoogleMapって白黒表示とかアイコンカスタマイズとか、指定した場所しか触れないようにできるんだ...という地味に大きな発見がありました。。他にどんなことできるか調べてみようと思います。
AKUFEN studio in Montreal - Strategy, branding, web & interactive
https://www.akufen.ca/en カナダのWeb・アプリ開発会社のサイト。
サイト内容としては過去の事例紹介+1ページの簡単な会社紹介となっており、シンプルな構造で分かりやすい。
また事例紹介ページのクオリティが高い。一覧表示の時に映画のフィルムが流れるようなアニメーションだったり、各事例のページでは動画やパララックス、それぞれに合わせたトーンの色使いを駆使し、多少長めながらも飽きさせない作りになっていて、次に何が出てくるのかわくわくしながらつい最後までスクロールしてしまう。そして、スクロールした最後に求人募集の導線があり、見る側の心理をよく分かっているなと感じた。
Pioneer – Corn. Revolutionized.
https://go.pioneer.com/cornrevolution
農業の研究開発、イノベーション推進事業などをメインに行なっている会社のようです。
「魅せるサイト」としてのできが非常にいいなと感じたのでpost。
webGLでグリグリ動くサイトです(ソースざっとしか見てないですがthree.js利用っぽい?)
スクロールに合わせて、トウモロコシの遺伝子が種になり、芽を出し、育っていく過程が見れます。特に育ったトウモロコシはspで見るとまるでカメラを起動したかのような綺麗さ。。。
触っていない間も風がそよいでいるような演出があり、リアリティを感じますし、とにかく下層のこだわりがすごい!ファンがめっちゃ回りますが、ぜひ見てみてください。フロントさんが実装したくなさそうな動きがたくさんあります。
Web Design Conference Tokyo - Digital Thinkers - UX / UI Event - Awwwards
Awwwardsのアジア初イベント用の特設サイトです。
イラストとその動きがすごく凝っています。
ゲームセンターや深夜のコンビニなど、「東京」ぽさをあらわしつつ、エモーショナルな感じがにじみ出ているあたりがグッときます。
扱いにくそうなカタカナもうまく取り入れられてるなと。
マウスの動きに合わせて人が動いたり、雲みたいなのがふよふよ動いていたりも面白いです。

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
「BE THE FIRST WOMAN ON THE MIUN」 https://stinkstudios.github.io/miumiu-twist/en/
Miu Miuの新しい香水「TWIST」のスペシャルゲームサイトです。
操作はとても簡単で、クリックするだけで遊ぶことができます。
全体的なデザインはいわゆる「ファミコン風」のドット絵が採用されていますが、レトロさを保ちつつも最新のWebデザインも取り入れられている点に工夫を感じられます。
「レトロ&最新のWebサイト」になっている点としましては、 ・全体的にドット絵を取り入れるのではなく、メニュー部分などはフラットなトーンを取り入れているところ ・軽やかかつ緩急がつけられたマイクロインタラクション、ぬるぬると動くキャラクターアニメーション ・ノリノリのBGM ・謎の宇宙人キャラが登場するユニークネス
などの点が挙げられるのではないかと思います。
ファッションブランドらしく、全体的にかわいらしいWebサイトです。
https://kubrick.life/
映画監督キューブリックの90年の生涯をまとめた特設サイトです。非常に長い縦スクロールタイプ のページ。
■ 内容について ・キューブリックの生涯、功績、代表映画の制作秘話などを中心に読み応えたっぷりの内容
■ インタラクションについて ・映画監督の功績をまとめたページらしく「映像のような」表現が多いです。(このページの一番の魅力は、各代表作毎のインタラクション。) ・代表作毎にセクションを分けていますが、その切り替わりが「色」や「演出」でとてもわかりやすいです。
■ レイアウトやフォントについて ・タイトルなどはセンター、読み物は左右に振るなど、全体的にリズムよくテキストが配置されています。 (内容も多いですが、余白もたっぷりとっているので読みやすいです。) ・写真の入れ方も規則にとらわれず、様々な入れ方をしています ・とても力強いフォントが使われています。特にサイトのタイトルや、作品タイトル部分は太めです。
■ カラーについて ・代表作品毎に作品を象徴する色を使っていますが、セクションをはっきりとわけているため、うるさい印象にはなっていません。
内容は日本語で見たほうがわかりやすいですが、フォントが崩れてしまうので演出を見る際はそのまま原文でご確認くださいませ。
http://ux.perfectial.com/
「UXって何?」についてわかりやすく説明しているサイト。
絵や図、アニメーションを使ってインタラクティブにページが進んでいき、ユーザーを飽きさせずに最後まで誘導する工夫が凝らされている。
このサイト自体がまさにユーザーを巧みに誘導し、ユーザーに体験を提供しているので説得力がある。
https://jurajmolnar.com/
黒と白のタイポグラフィがカッコいい。マイクロインタラクションも凝っており、バランスも程よい。
メニューまわりがオーバーレイ効果をかけてあるのも、色が重なったときの視認性が落ちない。シンプルなデザインだからこそ、取り入れられる効果に思う。
スマホ版は珍しく、縦にスクロール位置のバーが出る。動かす方向に合っているので、操作していると視覚的にも気持ちが良い。
My BOTANIST | オーダーメイド発想のパーソナライズシャンプー
https://order.botanistofficial.com/
いくつかの質問に答えると、自分にあうシャンプーを選んでくれる〜というサイトです。
映像をうまく融合したサイトだなと感じました。途中、topの映像を画像のように配置しているのがおもしろい(PCだけ)。
下にスクロールすると横に動いていくのが、スマホではどう表現されるんだろう?と思って見てみたら...(なんという技術なのかわからないのでどなたか教えてください)
ローディングには①(最初)文字を見せる②(診断後)動画を再生するという2パターンあって、飽きさせない工夫を感じました。
診断後の「カウンセリングシート」はグラフなどから「分析された感」がしっかり出ていて、きちんと自分にカスタマイズされているような気持ちになります。

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
Peter Oravec - Front-end Developer | Javascript | Angular
https://peteroravec.com/
スロバキアのWeb開発者Peter Oravecさんのポートフォリオサイト。
ゲーミフィケーションの最たる例(というかほぼゲーム)ですね。
このサイトについて言及している箇所があるのですが、そもそもブラウザゲーム用のフレームワークを使っているようです。そしてすごく軽い。スマホで見てもサクサク。すごい(こっちは操作ボタン?がある)。
ユーザーに←↑↓→で操作させて没入感を強めるあたりや、作り込みがすごくて見れば見るほどワクワクする、全部見てみたい!という気にさせるあたり、うまくできていているなぁと思いました。UX〜を考えると、ポートフォリオサイト見に来ている=ほぼ同業者という前提だから成功しているんだろうなぁ。
サイト丸っとこれだと現実的でないですが、コンテンツの一つとして、こういうものがあっても面白いなと思いました。例えばコーポレートサイトの「オフィス見学」とか...?
https://marmont.gucci.com/
GUCCIというロイヤルブランドならではの風格を、油画のコンセプトを使うことで巧妙に表現している。
現実の美術館で絵画をみている時に光のアングルを変えてその絵の表情の変化を楽しんでいる人も多いのではないでしょうか?
このサイトでは光のアングルを自分での好みで変えられ、まるで本当に絵画展にいるかのような感覚にしてくれる。
Webサイトではその特性上、通常情報をサラッと見流しがちだが、絵画展で一枚の絵画をじっくり楽しむという体験を巧みに再現することで、自然と訪問者にコレクションをじっくり見させることができている。
私自身GUCCIマニアでもファンでもないが、こういった体験の積み重ねがブランドロイヤリティー増上に貢献しGUCCIが長年顧客を虜にし続けている理由の一つなのだと再確認した。
http://s.muz.li/NWNiMzhhNjUw 芸術性の高いワードプレステーマをピックアップしたギャラリーサイト。 横スクロール構成。縦に長い画像が多い中、横スクロールでも見やすい演出の工夫が良い。
https://www.patchplants.com/plant-hotel/
淡いサーモンピンクとビビッドな写真が不思議な雰囲気を出しているサイトですが、じつは観葉植物専用のホテル。そのサービス内容もユニークだったのでピックアップしてみました。
くまWEB https://kumaweb-coding.jp/
ピザ屋…ではなくコーティングの会社。こういう、パロディ?系の類はたまにやり過ぎて失敗している例もよくみるのですが、憎めないバランスがなんとも良い感じのサイトです。
ひとつ残念なのがOGP画像が設定されていないところ。やはりSNSに投稿すると差が出るので、せっかくこだわったアイデアなのに勿体ないなと思いました。

Anya is live and ready to show you everything. Watch her strip, dance, and perform exclusive shows just for you. Interact in real-time and make your fantasies come true.
Free to watch • No registration required • HD streaming
https://useless.london/
飲食店で出る廃棄物を0にする呼びかけを行うサイト
真面目な内容に対してサイト内でユーザーに最後まで内容を読んで貰えるように工夫したギミックが◎ インタラクティブでわかりやすい構成も◎
http://thibaudallie.com/
スマホの画角で閲覧すると、縦長を活かしたほぼ雑誌表紙のデザイン。
最初のローディングの、ポンッと置かれた写真が拡大して表紙におさまるアニメーションは、さりげない演出ですが同じ場所から表示されるよりも惹きつけられます。