UNITZ design share archive

http://www.town.shimane-misato.lg.jp/misatoto/

地域の魅力再発見のためのコンテンツサイトです。

町の文化やお店の魅力を地域の人々からフォーカスし、一つ一つのエピソードを物語として紹介しているサイトです。

TWO ROBBERS

https://tworobbers.com/

米・フィラデルフィアのハード・セルツァー（アルコール入り炭酸飲料）のブランドサイトです。

白地に黒線というシンプルな構造に、イメージがハマってるだけなのですが、余白感のバランスが良いと思い、postしました。

遊びごころたっぷりで、ところどころに仕掛けがみられます。カーソルが昔ながら風で大きめだったり、プロダクトイメージにマウスオンすると缶が飲み終わった状態になったり。最初の年齢確認画面では、未成年を選ぶとninjaさんというユーチューバーのゲーム実況動画に飛ばされます笑

すっごい技術がたくさんとかではない（と思うの）ですが、みていて楽しいサイトです。

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のアジア初イベント用の特設サイトです。

イラストとその動きがすごく凝っています。

ゲームセンターや深夜のコンビニなど、「東京」ぽさをあらわしつつ、エモーショナルな感じがにじみ出ているあたりがグッときます。

扱いにくそうなカタカナもうまく取り入れられてるなと。

「BE THE FIRST WOMAN ON THE MIUN」 https://stinkstudios.github.io/miumiu-twist/en/

Miu Miuの新しい香水「TWIST」のスペシャルゲームサイトです。

操作はとても簡単で、クリックするだけで遊ぶことができます。

全体的なデザインはいわゆる「ファミコン風」のドット絵が採用されていますが、レトロさを保ちつつも最新のWebデザインも取り入れられている点に工夫を感じられます。

「レトロ＆最新のWebサイト」になっている点としましては、 ・全体的にドット絵を取り入れるのではなく、メニュー部分などはフラットなトーンを取り入れているところ ・軽やかかつ緩急がつけられたマイクロインタラクション、ぬるぬると動くキャラクターアニメーション ・ノリノリのBGM ・謎の宇宙人キャラが登場するユニークネス

などの点が挙げられるのではないかと思います。

https://kubrick.life/

映画監督キューブリックの90年の生涯をまとめた特設サイトです。非常に長い縦スクロールタイプ のページ。

■ 内容について ・キューブリックの生涯、功績、代表映画の制作秘話などを中心に読み応えたっぷりの内容

■ インタラクションについて ・映画監督の功績をまとめたページらしく「映像のような」表現が多いです。（このページの一番の魅力は、各代表作毎のインタラクション。） ・代表作毎にセクションを分けていますが、その切り替わりが「色」や「演出」でとてもわかりやすいです。

■ レイアウトやフォントについて ・タイトルなどはセンター、読み物は左右に振るなど、全体的にリズムよくテキストが配置されています。 （内容も多いですが、余白もたっぷりとっているので読みやすいです。） ・写真の入れ方も規則にとらわれず、様々な入れ方をしています ・とても力強いフォントが使われています。特にサイトのタイトルや、作品タイトル部分は太めです。

■ カラーについて ・代表作品毎に作品を象徴する色を使っていますが、セクションをはっきりとわけているため、うるさい印象にはなっていません。

http://ux.perfectial.com/

「UXって何？」についてわかりやすく説明しているサイト。

絵や図、アニメーションを使ってインタラクティブにページが進んでいき、ユーザーを飽きさせずに最後まで誘導する工夫が凝らされている。

https://jurajmolnar.com/

黒と白のタイポグラフィがカッコいい。マイクロインタラクションも凝っており、バランスも程よい。

メニューまわりがオーバーレイ効果をかけてあるのも、色が重なったときの視認性が落ちない。シンプルなデザインだからこそ、取り入れられる効果に思う。

My BOTANIST | オーダーメイド発想のパーソナライズシャンプー

https://order.botanistofficial.com/

いくつかの質問に答えると、自分にあうシャンプーを選んでくれる〜というサイトです。

映像をうまく融合したサイトだなと感じました。途中、topの映像を画像のように配置しているのがおもしろい（PCだけ）。

下にスクロールすると横に動いていくのが、スマホではどう表現されるんだろう？と思って見てみたら...（なんという技術なのかわからないのでどなたか教えてください）

ローディングには①（最初）文字を見せる②（診断後）動画を再生するという２パターンあって、飽きさせない工夫を感じました。

Peter Oravec - Front-end Developer | Javascript | Angular

https://peteroravec.com/

スロバキアのWeb開発者Peter Oravecさんのポートフォリオサイト。

ゲーミフィケーションの最たる例（というかほぼゲーム）ですね。

このサイトについて言及している箇所があるのですが、そもそもブラウザゲーム用のフレームワークを使っているようです。そしてすごく軽い。スマホで見てもサクサク。すごい（こっちは操作ボタン？がある）。

ユーザーに←↑↓→で操作させて没入感を強めるあたりや、作り込みがすごくて見れば見るほどワクワクする、全部見てみたい！という気にさせるあたり、うまくできていているなぁと思いました。UX〜を考えると、ポートフォリオサイト見に来ている＝ほぼ同業者という前提だから成功しているんだろうなぁ。

https://marmont.gucci.com/

GUCCIというロイヤルブランドならではの風格を、油画のコンセプトを使うことで巧妙に表現している。

現実の美術館で絵画をみている時に光のアングルを変えてその絵の表情の変化を楽しんでいる人も多いのではないでしょうか？

このサイトでは光のアングルを自分での好みで変えられ、まるで本当に絵画展にいるかのような感覚にしてくれる。

Webサイトではその特性上、通常情報をサラッと見流しがちだが、絵画展で一枚の絵画をじっくり楽しむという体験を巧みに再現することで、自然と訪問者にコレクションをじっくり見させることができている。

https://www.patchplants.com/plant-hotel/

くまWEB https://kumaweb-coding.jp/

ピザ屋…ではなくコーティングの会社。こういう、パロディ？系の類はたまにやり過ぎて失敗している例もよくみるのですが、憎めないバランスがなんとも良い感じのサイトです。

https://useless.london/

飲食店で出る廃棄物を0にする呼びかけを行うサイト

http://thibaudallie.com/

スマホの画角で閲覧すると、縦長を活かしたほぼ雑誌表紙のデザイン。