【Webデザイン】今週の「良きウェブ」(4月21日〜4月27日)

どうもです。自分の誕生日がすぎるとだいたいあったかくなります。

今週も良きウェブまとめです。
今週はやたらと自分好みのデザインを見かけまくった記憶があります。
割と面白いレイアウトやアニメーションの動きをしているものが好きなんですよね。
それでは今週も見ていきましょう。

デザインが「良きウェブ」

meme mag ミームマグ

https://www.mememag.me/
可愛くてスタイリッシュなウェブマガジンサイトです。
様々な形をした記事コマでポップな印象に。

FINLAYSON | フェリシモ

https://info.felissimo.co.jp/finlayson/
北欧テキスタイルをモチーフにした商品シリーズとあってテキスタイルがデザインのポイントとなっています。
固定位置背景やマウスオーバーするとふるふる震えるテキスタイルの画像も可愛い。

Defining the future of web design | Webflow

https://webflow.com/web-design
各テーマに合わせてセクションのデザインを変えているのがとてもおしゃれ。
スクロール次第で動きが変わるのも観察しがいがあります。

Razzle Dazzle

http://www.razzledazzletorino.com/
白黒ボーダーにビビッドな青や黄色がいい味を出している、なかなかにせめている地図です。
むしろ、地図はサブ的な役割でイベントにフォーカスしてもらうためにあえてこういうデザインにしているのかも。

The Outline

https://theoutline.com/
こちらも色合いのインパクトが印象的なウェブサイト。
後半部あたりにあるホバーによって並び方が変化するエリアの動きが個人的に好き。

ふじきみつ彦 - mitsuhiko fujiki

http://fujikimitsuhiko.com/
PCとSPでサイトのレイアウトがだいぶん違うので、是非とも２つ見比べて見て欲しいサイト。
フィルタリングすると色がブワッと変わるのも楽しい。

クロニクル、クロニクル! — もしかしたら一度起こったことでそれで完結するものなんて何もないんだ。

http://www.chronicle-chronicle.jp/
このサイトを初めて見たのは一年くらい前の話なのですが、最初はなぜレイアウトを繰り返して流のかがわからなかったです。
単純にこの展覧会のテーマである「繰り返し」を、サイトで持ってして表現していただけの話でした。納得。

NORTH FLAGGERS | 利尻島PR漁師団体 公式サイト

https://northflaggers.com/#/
ファーストビューに動画を使い、シンプルでスタイリッシュなレイアウトをしたこのサイト、なんと漁業のサイト。
写真をメインに据えたレイアウト構成にしているおかげで、漁の雰囲気や今のデザインらしさも醸し出せています。

Maison Riviera - Yogurts, Cheese, Butter and Sour Cream

https://riviera1920.com/en/
華やかさを具現化したかのようなサイト。
固定背景で所々花が置かれてるのもとても可愛らしい。

ギミックや発想が「良きウェブ」

Célia LOPEZ - Interactive & 3D designer

http://celialopez.fr/
3Dデザイナーさんの作品ということもあって独特の空間にいるようなサイト。
Three.jsで作られた球体をクリックすると詳細が展開される様子は優雅です。

GEO @ H. Lorenzo

https://s3.amazonaws.com/geohlorenzo/index.html
固定メニューなんて最初からなかったんや！と思わせる浮遊しまくってるサイトです。
こういうせめているデザインはコンテンツを選びますがファッションなどの目新しさ重視なものとはとても相性が良い。

cytus2

https://www.rayark.com/g/cytus2/
音ゲーらしいサイバー感と異空間が良い。
こちらは是非ともPCで見るのをお勧めします。
奥に進んでいくように展開していくページ、キャラごとのディティールのあしらいも素敵。

INRA | Faits marquants

https://faits-marquants.inra.fr/
まるで異次元の世界みたいな眩い輝きに包まれた３D空間。
こういったものを見るとWebGLは職人芸だなと感じてしまいます。

Niika

https://www.niika.com.au/
様々なオブジェクトがびゅんびゅん飛び交うサイト。
スクロールすると連番で動かしている模様です。WebGLは特に使ってなさそう。

アニメーションが「良きウェブ」

Millennials Are Screwed - The Huffington Post

https://highline.huffingtonpost.com/articles/en/poor-millennials/
ネオンのきらめきが映える黒字ベースのページ。
PCで閲覧するのが個人的にお勧め。

Shop - Simply Chocolate : Simply Chocolate

https://simplychocolate.dk/
pixi.jsを使って表現されたチョコのシズル感が良い。
最近下層ページ同士間でページ遷移がしやすいサイトをよく見かけます。

Toggl - Free Time Tracking Software

https://toggl.com/
3Dなイラストがこしらえられたポップなサイト。
ブランドの名前の通り、トグルするとページの表現の表情が変わるのがあって楽しい。

Geex Arts – Creating the Most Impressive Websites

https://geex-arts.com/
細切れになって現れるオブジェクトの動きが滑らかですてき。
個人的には縦書きベースで構成されたメニューの見せ方が一番好きです。

「ぶんぐまる」上尾・飯能・坂戸・東大和の格安オフィス用品・文房具店

http://bungumaru.com/
ずらずらと文具が流れてくる姿がインパクト大。しかしどこか可愛らしい。
文字が起き上がりながら現れる動きが個人的に好き。

Mathery

http://mathery.it/
CSSアニメーションで作られたタイトル部分のぴょこぴょこしたアニメーションが可愛い。
PCで見た場合のホバーアクションもインパクトあります。

Digital design & art direction — Barcelona | Xavier Cussó

https://xaviercusso.com/#/
パキッとした色合いと長方形のモーションが絶妙にいい味を出しているサイト。
ローディングの見せ方からページ遷移の瞬間まで隙のないかっこよさに憧れます。

真似したくなるようなテクニックがある「良きウェブ」

P５ - ペルソナ５ - 公式サイト

http://persona5.jp/
ゲームでもアニメでもおなじみのペルソナ５。
刺激的な勢いのデザインを助長するようなアニメーションの動きは見ていてワクワクしてきます。

いかがでしたでしょうか。
ウェブサイト収集を始めて個人的に感じていることとしては、ヨーロッパのウェブサイトほど熟練されたWebGL表現をしているサイトが多いなということです。
あと、だいぶん自分でも「このサイト見たことあるような。。。？」というのがだいぶ多くなってきたので、
そろそろギャラリーサイト作ろうかなと思ってます。

ではでは。