徒然畑

徒然なるままに。

【Webデザイン】今週の「良きウェブ」(6月2日〜6月8日)

どうもです。雨が降ると引きこもりたくなります。

今週も良きウェブまとめです。 先週に引き続き数が少なめですが、系統的には見た目がスタイリッシュなサイトが見たいなーと思っていたのでそんな感じのテイスト多めです。 それでは以下からどうぞ。

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

B6OCK Inc. ブロック株式会社|WEBデザイン・グラフィックデザイン 大阪・兵庫

http://b6ock.jp/ f:id:mio_U_M:20180617103724j:plain

グリッド調のレイアウトに幕があがるアニメーションの相性が抜群に良いサイト。

#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #テキストアニメーション

Caava Design - Strategic Thinking. Compelling Design.

https://caavadesign.com/ f:id:mio_U_M:20180617104029p:plain

アニメーションはないけれどもレトロでグラフィカルなデザインなサイト。特にメニューのデザインが可愛らしい。

#グリッドレイアウト #グラフィカル #カラフル #レトロ

Laboratorio Lanzani

http://laboratoriolanzani.it/ f:id:mio_U_M:20180617103811j:plain

トップページの画像はアクセスするたびにランダムに変わります。

#テキストアニメーション #TweenMax #スタイリッシュ #モノトーン #固定背景スクロール #スクロールアニメーション #シングルページ

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

ウルトラワイド超短焦点プロジェクタ「ワイード

http://wi-de.jp/ f:id:mio_U_M:20180617104039j:plain

純粋に見ていて楽しいユーモア溢れるサイト。のびーる感じが良い。

#CSS Animation #ポップ #インライン再生動画 #音声あり #シングルページ

Philip Popoff Selected Artworks

https://philip-popoff.net/ f:id:mio_U_M:20180617104103j:plain

ファーストビューのモーションと作品ページのスクロールのモーションがかっこいい。

#puchState #WebGL #スタイリッシュ #スクロールアニメーション

Nike React

https://www.nike-react.com/ f:id:mio_U_M:20180617104126j:plain

斜め文字がかっこいい。好みのスニーカーを選んで走らせることのできるコンテンツサイト

#TweenMax #React #カラフル #スタイリッシュ #ホバーアニメーション #WebGL #3D #音声あり #シングルページ

Mathis Biabiany - Creative Technologist & Artist

http://www.mathis-biabiany.fr/ f:id:mio_U_M:20180617104141j:plain

縦や横にスクロールするのではなく、Z軸方向にスクロールするという体験の心地よさ。

#TweenMax #Three.js #スタイリッシュ #パーティクル #奥行き #3D #水面表現 #pushState

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

MTN DEW x NBA

http://www.mountaindew.com/nba/russell/ f:id:mio_U_M:20180617104155j:plain

モノクロにグリーンが鮮やかに映えるサイト。個人的に構成主義的なデザインがめちゃくちゃ好きなので見ていてテンション上がります。

#TweenMax #Hammer.js #スタイリッシュ #モノトーン #緑 #シームレス遷移 #ホバーアニメーション

The Greatest Showman (2017) - Movie Website

http://www.thegreatestshowmanmovie.com/ f:id:mio_U_M:20180617104229j:plain

サイトの演出が素晴らしいですね。映画もサイトも魅せる力が強い。PC閲覧推奨。

#TweenMax #インライン再生動画 #テキストアニメーション #ホバーアニメーション #マウスモーション #スクロールアニメーション

Sara Marandi

http://www.saramarandi.com/ f:id:mio_U_M:20180617104240j:plain

ホバーした時のグニョンな動きが美しいポートフォリオサイト。

#シームレス遷移 #キレイめ #ホバーアニメーション #水面表現 #ボックススライドイン

【Webデザイン】今週の「良きウェブ」(5月26日〜6月1日)

どうもです。なんとなく梅雨っぽい感じがしてきてしまいましたね。

今週も良きWebまとめです。 申し訳ないことにこの週は確か引越しやらでドタバタしていた週でしたのでサイト少なめです。。。 その代わりこの週はスクロールアニメーションが特徴的なサイトが多かったです。

それでは今週もどうぞ。

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

Studio Björk - A digital production studio in Stockholm

http://www.studiobjork.com/ f:id:mio_U_M:20180610144608j:plain モノクロベースの横向き展開スクロールデザイン。めちゃくちゃかっこいいです。

#TweenMax #Three.js #キレイめ #花柄 #紺色 #奥行き #3D #音声あり

http://glimmerings.gallery/ f:id:mio_U_M:20180610144629j:plain 個性的なフォントが存在感放つサイト。ページ下部にあるフォントアニメーションも良き。

#シングルページ #ホバーアニメーション #黒色 #フォントアニメーション

World Champion Amsterdam

http://www.worldchampionamsterdam.nl/ f:id:mio_U_M:20180610144705j:plain

数字のインパクトに注目。雑誌のレイアウトのようなオブジェクトの組み方が良き。

#TweenMax #Hammer.js #スタイリッシュ系 #全ページスクロール #ホバーアニメーション #ボックススライドイン #ローディングアニメーション

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

The Five Seasons

https://www.alessi.com/thefiveseasons f:id:mio_U_M:20180610144725j:plain

圧倒的世界観。奥行き豊かなおかげでVRっぽい。

#TweenMax #Three.js #スタイリッシュ系 #モノクロ #シームレス遷移 #パララックス

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

株式会社ハッシャダイ | HASSYADAI Inc.

https://hassyadai.com/ f:id:mio_U_M:20180610144742j:plain

ちょっとユニークな制度がありますがサイトのかっこよさはピカイチ。

#Three.js #pjax #スタイリッシュ系 #クール系 #紺色#シームレス遷移 #scroll manager #パララックス

FontFace Dojo

https://fontfacedojo.com/ f:id:mio_U_M:20180610144755j:plain

スクロールアニメーションに目が惹かれる。スライダーの移動演出が実は面白い。

#Three.js #スタイリッシュ系 #かわいい系 #ミントグリーン #シングルページ #パララックス

Phive — Health & Fitness Centers

https://phive.pt/ f:id:mio_U_M:20180610144817j:plain

スクロールアニメーションでよく見られる演出をうまく色々盛り込んでいるサイト。ページ間遷移のローディングアニメーションが可愛らしいです。

#Three.js #スタイリッシュ系 #黄色 #スクロールアニメーション #フォントアニメーション #ローディングアニメーション #シームレス遷移 #インライン再生動画 #SVGアニメーション #ホバーアニメーション

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

In August Company

https://inaugust.co/ f:id:mio_U_M:20180610144948j:plain

水彩風テクスチャがいい感じにゆらゆらと揺れてるのが良い。

#シングルページ #水彩風 #マウスムーブイベント #パステルカラー

Tío Luchín - Cocina en vivo

http://www.tioluchin.com/ f:id:mio_U_M:20180610144845j:plain

美味しそうなパララックススクロール。スクロールがどれくらい進んでるのがわかるようになってる。

#シングルページ #黒 #パララックス #SVGアニメーション #スクロール再生動画

【日々学ぶVue】クラスの切り替えをcopmutedで監視する

f:id:mio_U_M:20180603142226j:plain

※2018.6.5 内容更新しました

どうもです。新居が引きこもりやすくて最高です。

久しぶりにVueについてのメモです。 今回はVueでよくお世話になってるクラスバインディングについてのメモです。

Vueではクラスの切り替えが簡単に行えます

jp.vuejs.org

この公式ドキュメントにもあるように、v-bind:classを要素にくっつければ、dataの値次第でクラスを付け替えたりすることもできます。 また、dataのみならずcomputedを使用してクラス切り替えを管理することも可能です。 どうやってやるねん?という方はこの記事を一緒に見るとわかりやすいかもです。

phiary.me

※察しの言い方は公式ドキュメントだけで十分かもしれませんが、個人的には公式ドキュメントだけじゃわからないことがあるので。。。一応あげさせてもらいました。

クラスの切り替えを値に応じて変更させたい?それもできます。

で、今回はcomputedを用いてクラスを付け替える場合の具体例。

開発の中で、要素に割り振ったidだったりカスタムデータ属性だったりをみて そこに記載されてる値に応じてクラス切り替える、的なことをやりたい!と思って公式リファレンスを眺めていたらそれっぽい記述があったので 一回書いてみないと理解できないな。。。と感じてサンプル作りました。

codepen.io

フォーム要素の中に0や-を入れるとスタイルが変化します(複数値入力も可能になってます)。 jsとタグの中身をみて見るとこんな感じ

HTML側

JS側

スタイルバインディングという形でdata属性に持たせてやる、という方法もあり得ますが 例えばクラスを当てる対象の要素の中身がユーザーの入力によって動的に切り替わるとかであれば 上のサンプルのようにcomputedで判定を持たせてくるくる切り替える方法もありです。

【Webデザイン】今週の「良きウェブ」(5月19日〜5月25日)

どうもです。最近引越ししました。

今週も良きウェブまとめです。 今週は不思議なデザインだったりアニメーションが特徴的だったり、何かしら真新しい感じが得られるサイトをよく見かけた気がします。 一日2、1個ベースでサイト収集するようにしているので数は少なめですが、どのサイトもインパクト大きめです。

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

プロフィールムービー制作|絵本仕立てのEHONICA

f:id:mio_U_M:20180602182513p:plain http://ehonica.jp/

イラストの優しい雰囲気が生えるサイト。

#イラスト #フェードイン #縦書き #かわいい系 #白

f:id:mio_U_M:20180602182533p:plain https://www.node-link.com/

コンソールを開いてみると思わずクスリとします。

#縦書き #CSSアニメーション #レトロ #茶色 #白 #マウス稼働背景

Loop Berlin — A Summit for Music Makers

f:id:mio_U_M:20180602183004p:plain https://loop.ableton.com/2016/

Futuraのタイポが魅力的なグリッドベースレイアウトなサイト。

#グラデーション #スライドイン #キレイめ #白

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

Chunk - Creative Agency

f:id:mio_U_M:20180602182625p:plain http://chunkagency.com/#!intro

グラデーションが鮮やかなサイト。3D回転しながら遷移する様は圧巻。

#グラデーション #3D回転 #スタイリッシュ系 #全画面スクロール

Aristide Benoist — Freelance Developer

f:id:mio_U_M:20180602182634p:plain https://www.aristidebenoist.com/

奇抜なデザインとグニョグニョとうねる感じが特徴的。

#ホバーアニメーション #赤 #シングルページ

Aalto Festival 2018 - 17.-31.05.2018

f:id:mio_U_M:20180602182648p:plain https://aaltofestival.fi/2018/en/

宇宙的雰囲気漂うサイト。

#Pixi.js #フェードイン #3D #キレイめ

GDPR — The Grandmaster Challenge by Ogury

f:id:mio_U_M:20180602182707p:plain https://www.ogury-gdpr.com/

クイズコンテンツ。正解と不正解のアニメーションが思わず見入ってしまう。

#赤 #スタイリッシュ系 #Pixi.js #白

Cuchillo, independent & creative studio

f:id:mio_U_M:20180602182726p:plain http://www.somoscuchillo.com/es

不思議な作りのページ。真ん中の四角形の中がメインコンテンツのようです。

#テキストアニメーション #スライドイン #TweenMax #白 #パララックス

Orenda Security

f:id:mio_U_M:20180602182816p:plain https://orendasecurity.com/

セキュリティ関連の会社のサイトのようです。頑丈なシャッターのように降りて来る無数の四角形が雰囲気に合ってる。

#テキストアニメーション #ボックススライドイン #TweenMax #シームレス遷移 #白

スタジオスプーン株式会社

f:id:mio_U_M:20180602182831p:plain https://studio-spoon.co.jp/

弾みのアニメーションがとってもキュート!

#ホバーアニメーション #3D表示レイアウト #バウンスアニメーション #かわいい系 #Slick #白

ORIENS -オーリエンス- こころに満ちる香り、自分だけの時間。

f:id:mio_U_M:20180602182856p:plain http://www.oriens-tea.jp/

写真の見せ方がありそうでなかったアニメーション。

#かわいい系 #キレイめ #スライドダウン #シングルページ #斜めレイアウト #白

DREAM PLUS 2018 - ドリームプラス 2018

f:id:mio_U_M:20180602182904p:plain https://www.napla.co.jp/dream_plus_2018/

ボックススライドインはスタイリッシュなサイトによく映える。

#ボックススライドイン #グラデーション #キレイめ #ズームイン #Vue #シングルページ

Hublot - Return to Antikythera

f:id:mio_U_M:20180602182923p:plain https://www.hublot.com/antikythera/

ブルーが鮮やか。スクロールしていくとどんどん展開されるストーリーに引き込まれる。

#フレームレイアウト #ホバーアニメーション #全画面スクロール #青 #ボックススライドイン #背景固定スクロール #インライン再生動画 #Hammer.js #TweenMax #キレイめ #シングルページ

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

Make it rain

f:id:mio_U_M:20180602183050p:plain https://www.justmakeitrain.com/en/

斜めを基調としたインパクト十分なサイト。

#黄色 #スライドイン #インライン再生動画 #ズームイン #スタイリッシュ系 #ホバーアニメーション #テキストアニメーション

TALK.GLOBAL

f:id:mio_U_M:20180602183015p:plain http://talk.global/

文字抜き背景とタイポ遣いがオシャレなサイト。

#文字下背景 #スライドイン #グリッドレイアウト #白 #スタイリッシュ系

いかがでしたでしょうか。 私自身も何かポートフォリオサイト作りたいなと思ってはいますが、どういうのがいいだろうなあという目線でここ最近サイト収集している感あります。 個人的に好みなのは色のインパクトどーん!なサイトですが、目的によってサイトの色合いは慎重に選んだ方が良さそうな気がしてます。

ではまた来週。

【Webデザイン】今週の「良きウェブ」(5月12日〜5月18日)

どうもです。引越し前日にブログ更新しています。

今週の良きウェブまとめです。 今週はなんだかSVGアニメーション多いなあな感想を抱く選出となりました。 うまく駆使していい感じにサイトをみせたいものです。

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

BOEL Inc. ボエル | ブランディングカンパニー

https://boel.jp/ f:id:mio_U_M:20180527013537p:plain サイトのデザインはシンプルなのでテキストアニメーションの存在感が光ります。

#テキストアニメーション #スライドイン #キレイめ #白

Finesse Design Atelier | Digital & Creative Studio

http://finesseatelier.com/ f:id:mio_U_M:20180527013550p:plain 思い切りよく赤と黒をつかったドラマティックなサイト。好みどストライクなサイトです!

#ドラマチック #スタイリッシュ系 #TweenMax #デュオトーン #赤 #パララックス

伊勢丹セレクション|JAPAN SENSES

http://www.miguide.jp/japansenses/shinjuku/ f:id:mio_U_M:20180527013602p:plain 写真の和な雰囲気を大人っぽくも可愛くもあるピンクで景気づけてるサイト。シンプルな作りながらも印象に残ります。

#スプレッドスクリーン #和 #ピンク #TweenMax

NPO法人HELLOlife | Create the NEW PUBLIC

https://co.hellolife.jp/ f:id:mio_U_M:20180527013620p:plain 動画のキラキラ幻想的な雰囲気を背景に用いたサイト。動画の文字すかしにはCanvasを使っているようです。

#パララックス #pixi.js #キレイめ #黄色 #可愛い系 #インライン再生動画 #Canvas

InSymbiosis

http://www.insymbiosis.com/ f:id:mio_U_M:20180527013635p:plain 医療系のサイトのようです。WebGLを用いてメディカルな雰囲気を現しています。

#TweenMax #グラデーション #Three.js #パララックス #シームレス遷移

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

MIAMI - 東京大学

http://www.sip-miami.iis.u-tokyo.ac.jp/ f:id:mio_U_M:20180527013654p:plain 縦横無尽に動き回る立方体、ちゃんとサイトの名前を形成したり崩れたりを繰り返しています。

#Three.js #シームレス遷移 #カラフル #白

MOUTAKUSANDA!!! magazine [モウタクサンダ!!! マガジン]

http://moutakusanda.com/ f:id:mio_U_M:20180527013709p:plain ぶっ飛んだサイトすぎて正直タグ付けに困りました。とにかく訪れて中身を見てみることをお勧めします。

#Hammer.js #ポップ #爆発エフェクト #白 #ホバーアニメーション #劇薬

PLASTICTOKYO

http://plastictokyo.jp/ f:id:mio_U_M:20180527013725p:plain トップのグリニッチな表現も素敵ですが、Conceptページのテキストアニメーションも見ものです。

#テキストアニメーション #グリニッチエフェクト #キレイめ #ボックススライド

株式会社ココノヱ - coconoe inc.

https://9ye.jp/ f:id:mio_U_M:20180527013758p:plain とにかく芸が細かいサイト。特にホバーアニメーションが楽しいです。(確か昔はコンソールでテトリスゲームができたはずなのですが、今は見れないみたい?)

#ピンク #ホバーアニメーション #可愛い系 #

DreamTeam Katarzyna Konkowska

http://dreamteam.pl/ f:id:mio_U_M:20180527013813p:plain ページの遷移の仕方が圧倒的にドラマチック。

#テキストアニメーション #ダイナミック #キレイめ #青緑 #TweenMax #Three.js #シームレス遷移

#Art4GlobalGoals – 17 Issues Interpreted by Leon Löwentraut in His Art

https://art4globalgoals.com/en f:id:mio_U_M:20180527013830p:plain 閲覧したいページを筆でなぞることで遷移できるという、絵描きごころをくすぐる作りになってます。

#TweenMax #ダイナミック #固定背景スクロール #スタイリッシュ系 #ドラッグ操作

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

Studio MOTIO ® – Design interactif et développement web à La Rochelle

https://www.studiomotio.com/ f:id:mio_U_M:20180527013844p:plain 円形状に広がる、描くモーションを基調としたスタイリッシュなサイト

#テキストアニメーション #スライドイン #スタイリッシュ系 #黒 #円形アニメーション #パララックス

wrk - French Creative Web Studio

https://waaark.com/ f:id:mio_U_M:20180527013856p:plain こちらは波打つモーションを基調としたスタイリッシュなサイト。SVGを用いて軽快にみせています。

#TweenMax #シームレス遷移 #SVGアニメーション #可愛い系

homunculus Inc. | 株式会社ホムンクルス

http://homunculus.jp/ f:id:mio_U_M:20180527013906p:plain 独特の演出が光るホムンクルスさんのサイト。気になってコンソールを開いてみると。。。な仕掛けもあります

#Three.js #シームレス遷移 #キレイめ #白 #ホバーアニメーション

Super Duper Studio

https://www.superduper.wtf/ f:id:mio_U_M:20180527013919p:plain 最初はシンプルですが、スクロールするとダイナミックに動き出します。

#SVGアニメーション #パララックス #キレイめ #グラデーション #シングルページ

株式会社コトノバ

http://www.kotonoba.co.jp/ f:id:mio_U_M:20180527014234j:plain 「コトノバ」の文字の中をうねうねと動くアニメーションが特徴的。最初と最後にヒーロービューを見せる、という構成はシングルページサイトでも珍しい印象。

#SVGアニメーション #シングルページ #キレイめ #白 #TweenMax #背景固定スクロール

POGG | スイートポテトパイ専門店

https://pogg-sweetpotatopie.com/ f:id:mio_U_M:20180527013949p:plain つかもとさんがツイートしていたサイトです。なだらかなテキストアニメーションやシームレス遷移、重くないインライン再生動画など、参考になる点が盛りだくさん。

#テキストアニメーション #スライドイン #キレイめ #紫 #TweenMax #SVGアニメーション #インライン再生動画 #シームレス遷移

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

Abschluss HSD Sommersemester 2017

http://abschluss-hsd.de/ f:id:mio_U_M:20180527014224j:plain フォントの存在感がある一枚ペラのサイト。

#ホバーアニメーション #スプレッドスクリーン #カラフル #シングルページ

Jacob Sutton

http://jacobsutton.com/ f:id:mio_U_M:20180527014022p:plain 作品が切り替わるごとにタイトルも切り替わる仕組みのサイト。カテゴリごとでフィルター的な役割も果たしている模様。

#Hammer.js #スケールイン #シームレス遷移 #グレー #インライン動画再生

Whitelist

http://whitelist.tv/ f:id:mio_U_M:20180527014316j:plain 虹色の背景が美しいサイト。ページトップのテキストアニメーションが個人的にきになる。

#Pixi.js #スライドイン #キレイめ #シームレス遷移 #虹色 #スライドイン #テキストアニメーション

いかがでしたでしょうか。 最近は意図的にwebサイト収集ペースを減らしています。 まあただいろんなサイトをみるのは嫌いじゃないのでつい色々見たときにガーッと呟きまくることもあるのですが。 その分よりいいインプットになるサイトかどうかアンテナ貼っていきたいと思います。

ではまた来週。

【Webデザイン】今週の「良きウェブ」(5月6日〜5月11日)

どうもです。なんとか生きてる今日この頃です。

今週もWebサイトまとめです。 今回は結構カテゴリーが似てるサイトが集まってるので、カテゴリーでサイト比較などができたりするかと思います。 それでは以下からどうぞ。

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

渋谷 シェアオフィス x コワーキング | Connecting The Dots

f:id:mio_U_M:20180508062018p:plain https://dots.bz/

シンプルですがキレイに整ったサイト。ところどころに赤色を忍ばせているのがアクセントになっています。

#ジャーナル風 #フェードイン #キレイめ

クリエイティブメモメモ

f:id:mio_U_M:20180508062032p:plain http://creativememomemo.com/

要所にこだわりが詰まってます。フォントや色合い、アイコンの形まで統一感が気持ち良い。

#ジャーナル風 #フェードイン #キレイめ #かわいい系 #ブログ

株式会社エアー.プラス

f:id:mio_U_M:20180515014715j:plain http://air-plus.jp/

思わず「かわいい!」と悶えたサイト。ブログ楓なレイアウトですが、写真の配置や背景イラストなどをうまく用いてるおかげで可愛さに目がひく。

#ジャーナル風 #canvas #キレイめ #かわいい系 #背景固定 #イラスト

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

Serpentiform

f:id:mio_U_M:20180508062042p:plain https://www.serpentiform.bulgari.com/en/home

ご存知ブルガリのダイナミックなサイト。蛇の蛇行のような動きをするスクロールアニメーションが粋。

#ゴージャス #Three.js #キレイめ #Pixi.js #パララックス

LattexPlus Festival 2017

f:id:mio_U_M:20180515014733j:plain http://festival.lattexplus.com/

レイヤーがどんどん開かれていく様はなかなかユニーク。文字打ちアニメーションはちゃんと一個一個バラしてできてます。

#カラフル #Three.js #クール系 #フォントアニメーション #パララックス #シングルページ

BATON PASS | バトンタッチ | JAL企業サイト

f:id:mio_U_M:20180515014750j:plain http://www.jal.com/ja/outline/brand/baton/

スクロールを利用した行程の説明アニメーションがすごい!要所でSVGアニメーションを使っているのも相性が良いです。

#SVGアニメーション #TweenMax #キレイめ #パララックス #シングルページ

DELAUNAY(ドロネー) - Web construction unit based in Tokyo.

f:id:mio_U_M:20180515014800j:plain https://delaunay.jp/

マウスに合わせてウネウネ動く背景はスクロールすると弾け飛びます。優雅です。

#キレイめ #シンプル #ホバーアニメーション #Canvasアニメーション #シングルページ

ESPALMADOR MARISQUERIA|エスパルマドール マリスケリア|仙台

f:id:mio_U_M:20180515014811j:plain http://www.tf-corp.co.jp/espalmador

ファーストビューのインパクトがピカイチ。全体を通して伝わるバカンス感が心地よい。

#キレイめ #カラフル #かわいい系 #パララックス #Canvasアニメーション #ホバーアニメーション #シングルページ

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

201˚

f:id:mio_U_M:20180508062052p:plain https://201d.jp/

有機的に動く要素のアニメーションが特徴的。スクロールすると画像が完成するなど、工夫も色々。

#パララックス #キレイめ #シームレス遷移 #インライン再生動画 #円形アニメーション

Type Terms

f:id:mio_U_M:20180508062106p:plain https://www.supremo.co.uk/typeterms/

タイポグラフィの基礎的なことを解説しているサイト。フォントとSVGの相性が良い。

#シングルページ #青 #フェードイン

fillab - FILが運営するファブ・スタジオ

f:id:mio_U_M:20180515014820j:plain http://lab.fillinglife.co/

下から上へスライドカバーしていくサイト。下層ページに遷移すると次のページへ移動するようになっているのも特徴的

#パララックス #キレイめ #シームレス遷移 #インライン再生動画 #円形アニメーション

株式会社グッドライフ | 一歩先のオフィスをご提案します

f:id:mio_U_M:20180515014833j:plain http://goodlife-inc.co.jp/

コマ撮りアニメーションのような動きが随所に見られるおかげで企業サイトの堅苦しさが緩和されてる例

#パララックス #スタイリッシュ #ロゴアニメーション #TweenMax #インライン再生動画 #イラスト使用

Blocksphere

f:id:mio_U_M:20180515014933j:plain https://blocksphere.co/

デジタルっぽさを感じられるデザイン。ものすごくスムーズに動きます。

#パララックス #スタイリッシュ系 #シームレス遷移 #全画面スクロール #フォントアニメーション

Luc Dandrel

f:id:mio_U_M:20180515014900j:plain https://lucdandrel.com/

黒を基調としたスタイリッシュなポートフォリオサイト。

#TweenMax#Vue.js #シームレス遷移 #ボックススライドイン #スタイリッシュ系 #黒

札幌円山のコンディショニングジム&パーソナルトレーニング FORH

f:id:mio_U_M:20180515014947j:plain http://forh.jp/

ボックススライドインアニメーションの好例。

#パララックス #グラデーション #SVGアニメーション #ボックススライドイン #インライン再生動画

Top Paddock

f:id:mio_U_M:20180515015009j:plain https://toppaddockcafe.com/

文字が浮遊するのが楽しいサイト。スクロールで画像がもにょんと動くのは珍しいです。

#パララックス #TweenMax #smooth.js #フェードイン #シングルページ #ボックススライドイン  

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

FLOWER AQUARIUM BY NAKED Secret sea

f:id:mio_U_M:20180508062121p:plain http://www.aqua-park.jp/special/floweraquariumsecretsea2018/

幻想的な森の中を歩いているような気分になる、雰囲気を上手く見せたサイト。

#パララックス #奥行き #3D展開アニメーション #フェードイン #シングルページ #ボックススライドイン

POINT EDGE ShibuyaBASE

f:id:mio_U_M:20180508062134p:plain http://www.pointedge.work/shibuya/

時折出てくるくるくると回る四角形がポイント。

#パララックス #フェードイン #シングルページ #CSSアニメーション #シンプル

株式会社CRAZY(株式会社クレイジー) | CRAZY,Inc.

f:id:mio_U_M:20180515015022j:plain https://www.crazy.co.jp/

ファーストビューにインパクトのあるサイト。ボックススライドするアニメーションを基調として展開して行きます。

#パララックス #フェードイン #キレイめ #全ページスクロール #CSSアニメーション #ボックススライドイン

いかがでしたでしょうか。 早いもので5月になってしまいましたが、1月末から収集し始めてきた良きWebサイト、おそらく300超えたかなと感じている今日この頃です。 (一日3個ずつ見つけているので、毎回の記事で21個ずつと換算して単純計算したらそれくらいあるかと) ちりつもとはよく言ったものです。 6月以降は少し方向を変えたいと考えています。

ではまた来週。

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

5どうもです。今年のGWは半分ほど寝込んでしまいました。

今週も良きウェブまとめです。今週はちょと量少なめで申し訳ないです。
いつも通りまとめるのはまとめるのですが、今週からちょっとずつこちらの文章ボリュームを落とそうと思います。
というのも、前回のブログ記事で書いていたようにウェブサイトギャラリーを自分の情報整理のためにも立ち上げようと考えていて
その下準備的な意味で、説明文を端的にし、その代わりタグ的なものを付加して行こうという試みです。
惰性的に文章を書くよりも明確なタグづけした方が伝わりやすいかもしれませんし。

というような感じでお届けします。

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

TORACO|阪神タイガース公式サイト

f:id:mio_U_M:20180507232423j:plain
http://hanshintigers.jp/toraco/
阪神タイガースファンの女子をメインに据えたかわいい系サイト。アニメーションはないがデザインで勝負してる。
#かわいい系 #Slick #パステルカラー #アイドル #手書き文字 #柄

燕アンテナ by Graphika inc.

f:id:mio_U_M:20180507232449j:plain
http://graphika-inc.com/tsubame_antenna/
web製作会社の情報発信ブログ。パステルカラーと柄の相性がとても良い。
#かわいい系 #パステルカラー #手書き文字 #柄 #ロゴ

世界最大級の水族館 海遊館

f:id:mio_U_M:20180508054054j:plain
http://www.kaiyukan.com/
魚の写真がとてもキレイに見えるように工夫されている。トップはあまりごちゃごちゃしないようにスッキリレイアウト。
#パララックス #キレイめ #スクールエフェクト #CSSアニメーション #イラスト

2018 Brand New Conference

f:id:mio_U_M:20180508054133j:plain
https://www.underconsideration.com/brandnewconference/
敷き詰められた石板の中にリンクが紛れ込んでいたりするレイアウト。グリッドデザインでも珍しいタイプ。
#グリッドレイアウト #クール #シンプル #モノトーン

Maison de FLEUR(メゾンドフルール) | ストライプインターナショナル

f:id:mio_U_M:20180508054411j:plain
https://www.maisondefleur.jp/
かわいいテクスチャ背景やフレームに埋め込まれた写真のあしらいがポイント。花びらが散るアニメーションが可憐、
#CSSアニメーション #Canvas #連番アニメーション #かわいい系 #ロゴ #写真レイアウトが特殊

宮田智佳 OFFICIAL-WEB

f:id:mio_U_M:20180508055508j:plain
http://tomkomiyata7240.jellybean.jp/
台形カットした写真や斜めに切り込むレイアウトが良き。
#CSSアニメーション #幾何学模様 #シンプル #かわいい系 #写真レイアウトが特殊

UENO PLANET

f:id:mio_U_M:20180508055806j:plain
http://www.tokyo-zoo.net/zoo/ueno/planet/pc/
日本の動物園サイトのごちゃごちゃしたイメージを覆すサイト。スマホがメイン。
#CSSアニメーション #音楽あり #イラスト #かわいい系 #TweenMax #パララックス #背景固定

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

【S5-Style】Hello world.

f:id:mio_U_M:20180508055820j:plain
http://www.s5-style.com/
ザ・スタイリッシュ。画面の遷移はもちろん、特にフォントアニメーションのスムーズさが光るサイト。
#TweenMax #スタイリッシュ系 #シームレスページ遷移 #複数アニメーション #3D # フェードイン #黒 #フォントアニメーション

KAZ ARAHAMA :: PHOTOGRAPHER

f:id:mio_U_M:20180508055831j:plain
http://www.kazarahama.jp/
光の表現はもちろん、スクロールで展開していくギャラリーの優雅さに目を奪われる
#TweenMax #パララックス #キレイめ #スタイリッシュ系 #シームレスページ遷移 #複数アニメーション #コラージュ #背景固定 #黒

Campus Camp | 名古屋造形大学卒展 | 大学院修了展

f:id:mio_U_M:20180508055843j:plain
http://www.nzu.ac.jp/gex/2018/
スクロールしていくとだんだん背景の日がくれて行きます。フォントアニメーションも滑らかでよき。
#TweenMax #フォントアニメーション #CSSアニメーション #かわいい系 #シングルページ #CSSアニメーション #背景固定 #緑

FAZETA

f:id:mio_U_M:20180508055854j:plain
https://fazetaproducciones.com/en
メニューとトップページが一体化しているサイト。下層ページのギャラリーのデザインも良い。
#Three.js #TweenMax #CSSアニメーション #シームレスページ遷移 #スタイリッシュ系 #横スクロール #縦書き英文字 #立体的

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

カワイイが止まらない!「Vino BOY」と「Vino GIRL」で行こう! | ヤマハ発動機株式会社

f:id:mio_U_M:20180508055913j:plain
https://www.yamaha-motor.co.jp/mc/life/cc/2016/
ヤマハバイク女子!をコンセプトなサイト。コラージュ風に配置されたオブジェクトが互い違いに現れる様がかわいい
#CSS Animation #パララックス #かわいい系 #スタイリッシュ系 #フォントアニメーション #複数アニメーション #コラージュ #シングルページ

Soft Landings

f:id:mio_U_M:20180508060303p:plain
https://thesoftlandings.com/
シンプルだがちょこちょこ目を惹く表現あり。文字の流れと3Dアタッシュケースインパクトをもたらしてる。
#3D #スタイリッシュ系 #フォントアニメーション #ロゴ #Three.js #シングルページ #ドラッグ

株式会社QTnet コーポレートサイト

f:id:mio_U_M:20180508060317p:plain
http://www.qtnet.co.jp/
アニメーションが結構面白いことやってる。赤と青のツートーンをベースに構成されているサイト。
#CSS Animation #パララックス #スタイリッシュ系 #フォントアニメーション #ランダム表示 #写真レイアウトが特殊

Squarespace Timeline — Squarespace

f:id:mio_U_M:20180508060034j:plain
https://www.squarespace.com/about/timeline/
時系列の出来事を自動再生してくれるサイト。初期ロード時のフォントアニメーションが良い。
#CSS Animation #複数アニメーション #スタイリッシュ系 #フォントアニメーション #全画面表示 #Hammer.js #黒

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

浜名湖体験学習施設ウォット

f:id:mio_U_M:20180508060023j:plain
https://ulotto.entetsuassist-dms.com/
情報をうまくごちゃごちゃにならないようにうまくまとめられたサイト。様々なアニメーションが散りばめられているのも見どころ。
#CSSアニメーション #Canvas #連番アニメーション #かわいい系 #ロゴ


いかがでしたでしょうか。
タグ付けすることでそのサイトの表現に向きあう時間が増えるのでしばらくこんな感じでまとめていきたいと思います。
ではまた来週。