【Webデザイン】今週の「良きウェブ」(6月23日〜6月29日)
どうもです。梅雨が明けたのはいいんですが夏の暑さが好きじゃないので引きこもりたいです。
今週も良きウェブまとめです。 今週の一押しはFFのサイトなんですけど、改めてFFってゲームというよりもう一つの人間せ世界をガチで作ってるのでは。。。と感じました。 そんな感じで今週も以下からどうぞ。
デザインが「良きウェブ」
GYRE
実際にここに行ったことがありますが、その場の雰囲気や空気感を崩さずサイトに表現している感じです。
#シームレス遷移 #pushstate #スタイリッシュ #ホバーアニメーション #斜めスライドイン
comocomo.cafe 〜架空のカフェでごゆっくり〜
前から知っていたこのサイト。細やかにコピーライターさんの世界観をぎっしり詰め込んでるのが素敵。
#可愛い系 #手作り感 #スクロールアニメーション
ギミックや発想が「良きウェブ」
CRAFTSMANSHIP｜IS JAPAN COOL?｜Culture Guide
https://www.ana-cooljapan.com/contents/craftsmanship/
日本の職人にフォーカスを当てたサイト。侍アバターも作れます。
#TweenMax #音声あり #スタイリッシュ #グリッドレイアウト #Vue #ホバーアニメーション #Three.js #フェードイン
MusicalZOO
ページをドラッグすると画面遷移できます。全体的にユニークな動きをしているサイト。
#TweenMax #テキストアニメーション #緑 #スタイリッシュ #CSSGrid #スクロールアニメーション #pixi.js #シームレス遷移 #ドラッグ操作 #ズームイン
Going Home
http://goinghome.302chanwoo.com/
ウェブ上の絵本のような作品。とりあえずのぞいてみてください。
#TweenMax #Three.js #ドラッグ操作
スタイルポート | STYLE PORT
トップのモーショングラフィックがめちゃくちゃかっこいい。随所にグラデーションカラーをあしらってるのもよき。
#TweenMax #Three.js #カラフル #スタイリッシュ #ブロークングリッドレイアウト #スクロールアニメーション #ホバーアニメーション #シームレス遷移 #インライン再生動画 #ドラッグ操作
RONIN Amsterdam
https://www.roninamsterdam.com/
文字でマスクした画像のレイアウトがかっこいい。スクロールすると少し読み込みが走るのでそこだけ注意。
#TweenMax #Hammer.js #canvas #スタイリッシュ #パララックス #ホバーアニメーション #横スクロール #シングルページ
アニメーションが「良きウェブ」
ファイナルファンタジーXV ロイヤルギャラリー | SQUARE ENIX
http://www.jp.square-enix.com/ff15/royal/gallery2018/
ゲームの世界観を具現化したデザインとモーション。ファンならきっとグッとくる場面やクスッとくる場面を集めてます。
#TweenMax #Three.js #ドラマチック #音声あり #スクロールアニメーション #シングルページ #マウスムーブスクロール
14islands
ヒーロービューのロゴのモーションが心地よき。
#TweenMax #カラフル #スタイリッシュ #シームレス遷移
KIRIN naturals（キリン ナチュラルズ）｜オフィスで味わう自然体験
ついつい背景に目がいってしまう。細かな野菜の動きやスクロールでの変化が楽しい。
#Velocity.js #カラフル #スクロールアニメーション #ホバーアニメーション
