徒然畑

徒然なるままに。

【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 #連番アニメーション #かわいい系 #ロゴ


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

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

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

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

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

meme mag ミームマグ

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

FINLAYSON | フェリシモ

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

Defining the future of web design | Webflow

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

Razzle Dazzle

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

The Outline

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

ふじきみつ彦 - mitsuhiko fujiki

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

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

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

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

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

Maison Riviera - Yogurts, Cheese, Butter and Sour Cream

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


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

lia LOPEZ - Interactive & 3D designer

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

GEO @ H. Lorenzo

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

cytus2

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

INRA | Faits marquants

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

Niika

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

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

Millennials Are Screwed - The Huffington Post

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

Shop - Simply Chocolate : Simply Chocolate

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

Toggl - Free Time Tracking Software

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

Geex Arts – Creating the Most Impressive Websites

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

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

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

Mathery

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

Digital design & art direction — Barcelona | Xavier Cussó

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

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

P5 - ペルソナ5 - 公式サイト

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


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

ではでは。

Gulpと仲良くなるためにまとめたメモ

ついに弊社フロントチームにもwebpack化の波がきました。
それまではgulpをベースとして開発環境を構築しておりましたが、
いろいろとwebpackの方が利便性が高いということで、だそうです。

というわけで。
案件で初めてgulpファイルを書くことになってその時に色々まとめたメモを
弊社gulp追悼の意を込めて公開しておこうと思います。

Gulpとは

・ビルドシステムヘルパー、またはタスクランナーと呼ばれるnode.jsツール
・タスク=ビルドと考え、登録されたタスクを実行していくもの
・複数のビルド処理(コンパイル処理)が必要なものをそれぞれ依存関係を極力減らして動かせるやーつ
・node.jsの強みを生かしたストリーム処理で動くのが特徴、とのこと。以下参考
qiita.com

gulpfileを書く

・基本的には「task()でタスク登録してseries()かparallel()かを指定して動かす、とまずは覚えておく
・どんなことできるか全部知りたい人はここ見てね(英語)
github.com
・ES6でgulpfile書こうとする時はBabel噛ませる必要がある。以下参考。
tacamy.hatenablog.com

拡張機能について

・まず、gulpで使える拡張機能
1. 「gulpの拡張機能で提供しているもの」
2. 「node.jsの機能として提供しているもの(npmパッケージ)」
の2つがある。
・gulpの拡張機能でもやばいやつに関してはBlaklistとしてまとめられているので、gulpの拡張機能として存在したとしても使わない方がいいやつに関してはチェックすること
plugins/blackList.json at master · gulpjs/plugins · GitHub

弊社の開発環境で使っていた拡張機能

sassGlob

Scssのimportをすっきりまとめてくれる。以下参考
qiita.com

readConfig

Configfile(設定ファイル)を読み込んできてくれる。jsonとかymlとかどっちの形式でも大丈夫
qiita.com

pleeease

CSSコンパイルや管理にまつわることならこいつ一個で全部やれる。autoplefixはもちろんminifyとかもしっかりやってくれるよ。
phiary.me

参考になる入門記事

入門記事などとしてはここら辺読むと良い(きがする)
app.codegrid.net
ics.media
blog.anatoo.jp


qiitaに載せようか否か迷ったんですけど
基本的に自分のメモがリンクばっかなので
サイトのリンクとかいい感じの見た目で貼れるはてブの方で書くことにしたのでした。

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

どうもです。今は春なのか冬なのかわかりません。

今週も懲りずに良きウェブまとめです。
この時期は新卒採用シーズンということで何個かそれ系のサイトも含んでますが
まあいつも通り個人的に気になってものを中心にまとめています。

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

132 5. STANDARD | ISSEY MIYAKE INC.

f:id:mio_U_M:20180414111150j:plain
https://www.isseymiyake.com/1325/standard/
三宅一生の新しいブランドのサイト。
服のコンセプトが平面から立体へ、立体からその先へ、という思いを込めていることもあってか
ロゴやメニューのデザインがフラットだったり、実際に服のコンセプトを伝えるための見せ方の工夫がこしらえられています。

J Dilla Changed My Life

f:id:mio_U_M:20180414111156j:plain
http://jdillachangedmylife.com/
このインパクトで一枚ページはなかなか存在感あります。
ファーストビューのvideoで興味を引きつけて、全体スクロールする視聴エリアで音楽に集中させる構成になっています。
メリハリがはっきりしているサイトです。

Max Kaplun

f:id:mio_U_M:20180414111210j:plain
https://maxkaplun.com/
私のブログでは結構この手のデザインのサイトはよく取り上げているので珍しみがないかもしれませんがw
こちらは文章の途中にリンクがところどころ入っているタイプです。
手書きっぽい文字がところどころサイトの説明で入ってるのも可愛い。

Millemann Consulting - Des solutions éthiques et responsables

f:id:mio_U_M:20180414111222j:plain
https://www.millemannconsulting.fr/fr/consulting/quintessence
日本語で縦書きはたまにみるので珍しいとは言えませんが、英文字で縦書きは逆に目を引きます。
下までいくと自動遷移しますが、その際の見せ方も艶があって良いです。

Will Mayer - Director (among other things)

f:id:mio_U_M:20180414112129j:plain
http://willmayer.com/
背景に邪魔にならない程度にスクラッチノイズが入っており、それが逆に心地いいサイトです。
作品事例のムービーのUIは個人的に珍しくて参考になります。

Film Truck

f:id:mio_U_M:20180414111251j:plain
https://www.filmtruck.co/
書体や配色の雰囲気がレトロですが、ムービーのおかげで今っぽく感じるネオレトロなサイト。
ホバーアクションな仕掛けもところどころあるのでPCでもみるとよいかも。

HEROs - Sportsmanship for the future -

f:id:mio_U_M:20180414111344j:plain
https://sportsmanship-heros.jp/
大胆なまでにデュオトーンの写真を使ったサイトです。
スポーツスピリッツに赤と青はよく映えることを痛感するデザインです。

Frans Hals Museum

f:id:mio_U_M:20180414112105j:plain
https://www.franshalsmuseum.nl/en/
PCでみる際はタイミングずらしたダブルパララックスイメージを、スマホで見るときはまるでアプリのようにわかりやすいUIに注目して欲しいです、
こんな楽しいミュージアムサイトあると、美術館行こうかなとか思っちゃいますね。

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

Ghost | Augmented Reality Headset | A New Digital Experience

f:id:mio_U_M:20180414111404j:plain
http://ibelieveinghost.com/
商品説明のお手本とも言えるサイト。
実際にこのサイトを見ていてこの商品すご!というのが伝わってきました。
モヤモヤ〜としているところにwebglを用いて表現しています。

HAJIME WATANABE / 渡邉肇

f:id:mio_U_M:20180414111424j:plain
https://hajimewatanabe.jp/
写真家さんのポートフォリオサイトです。
正直ページ導線が慣れていない人にとっては難しいかもしれませんが
世界観の表現としてこんなに水面、波紋の作り込んでいるサイトはなかなかないかも。

インターネットの歴史 History of The Internet - Yahoo! JAPAN

f:id:mio_U_M:20180414111127j:plain
https://internethistory.yahoo.co.jp/rich/index.html
インターネットの歴史を塔にしました!なサイトです。
塔のオブジェをクリックすると詳細が見れるのはもちろん
サイドに行きたい年代にジャンプできるサイドバーもちゃんと備えており、UIもしっかりとしたサイトです。

Howlt

f:id:mio_U_M:20180414111116j:plain
http://howlt.com/
ちゃんと閲覧している時間帯によって明るくなったり暗くなったりするサイト。
サイトの入り口が街の風景イラストなのもなんか可愛い。

ADK RECRUIT 2019

f:id:mio_U_M:20180414111007j:plain
http://www.adk-recruit.jp/index.html#
ダイナミック。その一言に尽きます。
赤ベースなので元が目立つんですが無限に広がるような社員たちのマップもなかなかに凄みがあります。

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

契約社員採用|リクルートライフスタイル RECRUIT LIFESTYLE

f:id:mio_U_M:20180414111105j:plain
https://www.recruit-lifestyle.co.jp/recruit/keiyaku/
まるで日本ドラマの番宣ポスターみたいなファーストビュー。ポップ&スムーズな雰囲気に仕上がってます。
個人的に下位ページの文字の現れ方がスムーズで好きです。

ヘアケアメーカー ナプラの リクルート(採用情報)サイト

f:id:mio_U_M:20180414111437j:plain
https://www.napla.co.jp/recruit/
新卒採用サイトらしくフレッシュで清潔感がある印象。
アニメーションでプラススタイリッシュな雰囲気を添えています。
個人的には枠を囲む動きが好きです。

ブラザーブランドコンテンツ|企業情報|ブラザー

f:id:mio_U_M:20180414111450j:plain
http://www.brother.co.jp/corporate/brand/
こちらはスマホでも見れますが、PCでみることをおすすめ。
スクロールした時のアニメーションの躍動感に驚かされます。
各ページの要素を見ていくのが楽しいです。

KAWANO | セレクトショップ

f:id:mio_U_M:20180414111505j:plain
http://www.kawanoshinjuku.com/
めちゃくちゃ優雅です。サイトデザインと雰囲気にあった速度とフェードの仕方をしたアニメーションが心地よい。
ブランドの高級感をグッと助長しています。

Brontide

f:id:mio_U_M:20180414111514j:plain
https://www.brontidebg.com/home
横スクロールで展開していく絵巻物ムービー的なサイト。
このサイトの奥行きとゆったりとしたスクロールの動きのおかげでナチュラルな雰囲気がグッと引き立てられている印象。

The Shift

f:id:mio_U_M:20180414111526j:plain
https://theshift.tokyo/ja/
シフト、という名前だけあってか、オブジェクトの位置がジグザグだったり、文字の位置が不思議な感じだったり、デザインは名を表している状態です。
projectページの背景スクロールは面白いですよ。


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

Max Allouch - Creative Designer Portfolio

f:id:mio_U_M:20180414112248j:plain
http://maxallouch.fr/
PCで閲覧推奨なポートフォリオサイトです。
ムービーカルーセルから詳細ページへ飛ぶ時のアニメーションの見せ方が個人的に好き!

ELIN

f:id:mio_U_M:20180414112027j:plain
https://elinjp.com/
シンプルなファッションサイトですが、ふわふわとイメージが浮いているように見えるのが印象的です。
背景のテクスチャを固定背景にすることで府中間に説得力を持たせています。


いかがでしたでしょうか。
新卒サイトはやはりより印象的な会社に見えるように演出をしっかり凝っている印象でした。
デザインに説得力を持たせる実装ができるように参考にしようとおもいます。

ではまた来週。

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

どうもです。いつの間にか4月になってました。

今週も良きウェブまとめです。
今週は、おしゃれでスタイリッシュなウェブサイトを探している!という方でこのブログに行き着いた方にとってはご期待に添えない内容となっています。
今回は「もっと遊びのあるものを見てみようー」をテーマにお送りします。
というのもこの週はエイプリルなフールがあったのと
私自身が結構codepenを漁っていたということもあり
割と面白表現やクリエイションにフォーカスしたものが多めになっているからです。

まあたまにはこういうのもいいかなということで。

Webサイト編

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

居酒屋 源

f:id:mio_U_M:20180409000940j:plain
http://izakaya-moto.jp/
スマホタブレットなどのモバイルデバイス向きなのがドラッグタイプのデザイン。
下手したらどこに行けば目的の情報があるのかわからない!となりやすいのですが、このサイトは最初のナビがあるおかげでまだわかりやすい印象です。
あったかみのある手書きイラストとアクセントのアニメーションが良き。

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

A When to Travel Guide for Japan Burma Vietnam Cambodia Laos

f:id:mio_U_M:20180409000958j:plain
https://www.insideasiatours.com/when-to-travel
この国にはいつのタイミングで行けばいいの?を教えてくれるサイト。
この切り口で旅行を紹介してるのは珍しいかもーと思いました。

Crypton

f:id:mio_U_M:20180409001013j:plain
https://crypton.trading/
スクロールで説明文がキーボード打ちで浮かび上がってきたり、図がするするーと展開されているサイト。
よく見ると左上のアイコンがスクロールに合わせて喋ってるようになってます!
ロボットが説明してくれているみたいな気分になるサイトです。

Playground

f:id:mio_U_M:20180409001031j:plain
https://playground.labs.caffeina.com/#
Three.js製のバスケし放題なサイトです。
趣の異なる3ステージが選べますがそれぞれリアリティがすごいので思わずボール投げまくってました。

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

三井住友銀行 Recruiting 2019

f:id:mio_U_M:20180409001047j:plain
http://www.smbc-freshers.com/#top
手書き文字がサラサラ〜と現れるのが素敵。
メッセージを訴える表現としては、例えばフォントを強いものにするとかが考えられますが
じわっと訴えかける表現をしたい時にはこうやってアニメーションが助力するケースもあるという学びが得られました。

Zoomanity

f:id:mio_U_M:20180409001107j:plain
http://zoomanity.land/en/
PCでみてね!と言われるのですがみた方がいいです。
イラスト×パララックスの好例です。

エイプリルフールで見かけたもの編

楽天】公式キャラクター変更のお知らせ

[f:id:mio_U_M:20180409001430j:plain
https://event.rakuten.co.jp/okaimonopanda/point-goods/april2018/
正直楽天ECサイトは見にくいなと感じているんですけど、パンダのサイトは基本ほんわか可愛い感じです。
4月1日に仕掛けてきたサイトもやっぱり可愛い。

星のワドルディ25周年

f:id:mio_U_M:20180409001303j:plain
http://www.kirby.jp/25th/waddledee/
カービィの名ザコキャラ?と呼ばれるワルドディメインサイトが4月1日爆誕。
もともとのカービィのサイトを踏襲して作られています。
個人的にトップに戻るスクロールとキャラ紹介のページは見ものです。

ヤドン県にようこそ - ヤドン

f:id:mio_U_M:20180409001124j:plain
https://www.my-kagawa.jp/yadon-ken/0401/
うどん県と自称する香川県、今度はヤドンの村になった模様です。
ヤドンのボケーとした素朴な顔とページの素朴さが妙にマッチしてたのでつい見てました。

番外編:ポケモン関連のサイトを他にも見てみた

ヤドン県のサイトをみていてリンク踏んだり色々したら
ポケモン関連のサイトはとりあえず愛に溢れているということと
演出やデザイン的観点から見ても参考になりそうな要素があったので
おまけでちょと載せてみます。

ヤドンパラダイス

f:id:mio_U_M:20180409001151j:plain
http://www.pokemon.jp/special/yadon_paradise/
正直ヤドンにそこまで思い入れはなかったんですけど、
このサイトみてヤドンの愛らしさに少し共感をもてたような気がするようなそうでもないような。
それはさておき、このサイトの動きの付け方は細かいこだわりが感じられますので触って見るのはありです。

プロジェクトイーブイ | ポケモン

f:id:mio_U_M:20180409001208j:plain
http://www.pokemon.jp/special/project_eevee/
正直イーブイにそこまで思い入れはなかったんですけど、
このサイト見てこの世にイーブイガチ勢という派閥が存在するんだということはよく伝わってきました。
それもさておき、こちらもイーブイの可愛らしさを助長するような動きの付け方をしているので見ものです。

うどん県×ヤドンヤドンパラダイス in 香川」- うどん県

f:id:mio_U_M:20180407162216p:plain
https://www.my-kagawa.jp/yadon-ken/
4月1日から1日経って公開された、香川県ヤドンのコラボサイトがこちら。
エイプリルフールの時に比べるとこっちが本丸だよ感がひしひし伝わってくるので、
これを見るとなぜ4月1日のサイトがシンプルだったかの理由が見える気がします。
ところどころに固定位置背景をかませているのが可愛い。


Webクリエイション編

a flurry of cherry blossoms

codepen.io
お花見チャンスを逃してしまった方へ送る作品がこちら。
水面上に浮かぶ桜の花びらってとてもロマンチックですよね。

Cherry Fizz

codepen.io
こちらはどちらかというと「毒かわいい」というワードが合いそうな印象。
動きとしてはシンプルですが、彩りやスピード感のおかげで印象的です。

Moving Oriental Flower Pattern

codepen.io
これCSSだけで動いています。
hoge-gradientはなかなかに色々な表現ができるので楽しいですね。

codepen.io
こちらもCSSだけで動いているロゴです。
このロゴ一応リンクになっているのですが、飛び先もなかなかかっこいいサイトなのでぜひ。

Weather Icons

codepen.io
SVGかと思ったらどうもCSSで書いている模様。
やろうと思えばCSSでも表現は可能みたいです。

Pac-Man Loader

codepen.io
なぜか一時期やたらパックマン作品が紹介されていました。
これもその中の一つです。

Canvas Fireworks

codepen.io
canvas製の夏っぽい花火打ち上げ作品。
パラメータ調節で速さや大きさも変えられます。

Interactive Canvas Text

codepen.io
急にざーと球が動き出したかと思いきや。。。
ちなみにテキスト形成後はぼかぼか壊せます。

Animated canvas backround

codepen.io
サイト背景とかに使えそうなcanvasの動く背景。
オブジェクトを変えるだけで雰囲気を色々変化させられそうです。

morphing shape with spinning color stroke (svg + canvas)

codepen.io
ローディングアニメーションとかにも向いてそうなサンプルです。
個人的にSlackのローディングの動きに近しいものを感じます。


いかがでしたでしょうか。
今日はいつもと違う感じで色々見ていましたが、
とりあえずわかったこととしては、ポケモン関連のサイトは愛を表現するのがうまいサイトが多いなと感じた次第です。
(サイトデザイン、動きの付け方とかも)
キャラクターコンテンツメインのサイトはいかにそのキャラの雰囲気らしさ、またはその雰囲気を助長する見せ方ができるかが勝負所のようです。

ではまた来週。