【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 #カラフル #スクロールアニメーション #ホバーアニメーション
【Webデザイン】今週の「良きウェブ」(6月16日〜6月22日)
どうもです。梅雨が終わって嬉しいですが夏があまり好きじゃないので困ってます。
今週も良きウェブまとめです。 今週も色々良いサイトを見かけましたが、個人的には一番最初に取り上げている美容院のサイトが素敵なのでおすすめです。 それでは今週も以下からどうぞ
デザインが「良きウェブ」
美容室MILLOR(ミラー) | 神奈川県武蔵小杉駅のヘアサロン・美容院
普通の美容院のサイトとはちょっと違って、ファーストビューが人物ではないのが新鮮です。ローディングからのファーストビューの展開の仕方がとても調和が取れていて美しい
#TweenMax #Three.js #白 #スタイリッシュ #フリーグリッドレイアウト #パララックス #ホバーアニメーション #斜めスライドイン #縦書き #イラスト
東京のフリーモデル 山内もえ
ファーストビューの動画がいい感じのナチュラル感を出しています。
#TweenMax #白 #スタイリッシュ #スライドオープン #全画面スクロール #ホバーアニメーション #ボックススライドイン #インライン再生動画 #スライドアップ
Ogilvy
ホバーするとスライドの流れが止まります。ギャラリーの見え方を変えることもできます。
#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト
Skylab Architecture
http://www.skylabarchitecture.com/
最初からハンバーガーメニューが開いている状態という斬新なデザイン。
#黒 #スタイリッシュ #フリーグリッドレイアウト #パララックス #Hammer.js
ギミックや発想が「良きウェブ」
The History of Connection
http://archiviostoricoexperience.gruppotim.it/en/the-beginnings/
ネットワークの歴史をリッチな世界観で表現しているサイト。圧巻です。。。
#WebGL #青 #パララックス #音声あり
アニメーションが「良きウェブ」
Eason Design ltd.
ホバーするとグリニッチエフェクトが走る感じがかっこいい。
#黒 #スタイリッシュ #フリーグリッドレイアウト #グリニッチエフェクト #ホバーアニメーション #ジャイロセンサ #シームレス遷移
デザインあ展
http://www.design-ah-exhibition.jp/
「あ」の動きが可愛い。モバイルからもみた方が楽しいですよ。
#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト #SVGアニメーション #スプレッドスクリーンレイアウト #ホバーアニメーション
Stake your claim - TruStory
スクロールアニメーションが心地よいシングルページ。
#TweenMax #カラフル #スタイリッシュ #スクロールアニメーション #シングルページ
【公式サイト】ファイトリーグ
キャラクターがわきゃわきゃ動くのが楽しい。
#カラフル #スタイリッシ #スクロールアニメーション #フェードイン
【Webデザイン】今週の「良きウェブ」(6月9日〜6月15日)
どうもです。本当に早く梅雨が終わって欲しいです。
今週も良きWebまとめです。 今週はデザインやら演出やら凝ってるーかわいいーかっこいいーと思うものが多かったような感じです。 では今週も以下からどうぞ。
デザインが「良きウェブ」
THE PARFAIT STAND | ザ・パフェスタンド
ポップで可愛らしさが炸裂しているサイト。写真のビジュアルもデザインも素敵。
#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #インライン再生動画 #斜めスライドイン
JEANASIS MEDIA
http://www.dot-st.com/cp/jeanasis/jeanasis_media
ブランドの世界観や雰囲気をうまくWebサイトに落とし込んだ例。スタイリッシュな動きのアニメーションもよい。
#TweenMax #モノトーン #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #パララックスアニメーション #斜めスライドアニメーション #縦書き横文字
雨のパレード オフィシャルサイト
http://amenoparade.com/index.html
余分な装飾はない代わりに、トップの動画の再生の仕方がエモい。演出の仕方が印象的なサイトです。
#インライン再生動画 #スタイリッシュ #グリッドレイアウト
ギミックや発想が「良きウェブ」
株式会社KSKアナリティクス
スクロールすると奥行きを感じさせるデザイン。まるで宇宙にいるような体験と、それを邪魔させないような演出が良い。
#TweenMax #青 #スタイリッシュ #奥行き感 #スクロールアニメーション #ホバーアニメーション #テキストアニメーション #シームレス遷移#パーティクル
REVELÉ | Trends for brands and people
あえて円がコンテンツを邪魔するように配置されてるかと思いきやポコポコ動かせるのが楽しい。
#TweenMax #CSSアニメーション #スタイリッシュ #グリッドレイアウト #ドラッグインタラクション
amana recruit 2019
最初のアニメーション演出がストーリー感があって良い。
#カラフル #スタイリッシュ #グリッドレイアウト #ブラー効果 #ローディングアニメーション
アニメーションが「良きウェブ」
イベントスタジオ
画像はgif動画で楽しく動いてるサイト。ホバーすると図柄が飛び足したりと、デザインも素敵だけど惚れぼれする動きをしています。
#TweenMax #カラフル #CSSアニメーション #かわいい系 #シームレス遷移 #スクロールアニメーション #ホバーアニメーション #テキストアニメーション
ジャパンインベスターパートナーズ
https://www.ji-partners.co.jp/
トランプのカードをめくる動きで統一感出してるサイト。
#斜めスライドイン #スタイリッシュ #インライン再生動画 #ボックススライドイン #シームレス遷移 #ホバーアニメーション #イラスト #CSSアニメーション
Cesetti Designer | Shoes
固定位置のメガネの背景スクロールやメニューのタイリングが素敵なサイト。
#全画面背景スクロール #黒 #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション ##CSSアニメーション
VN Star || Development Group
スクロールして図が展開していく様子がロジカルでわかりやすい。
#TweenMax #パララックス #スタイリッシュ #スクロールアニメーション #ボーダーアニメーション #ホバーアニメーション #ボックススライドイン
The Spice Hunter | Your Spice Journey Begins Here
SVGの動きをうまくサイトの世界観に生かしたサイト。伸びていく矢印が旅らしさを助長させている。
#SVGアニメーション #スタイリッシュ #スクロールアニメーション
Concrete LCDA
http://www.concrete-beton.com/
正方形の枠が囲んでいく動きがとても存在感がある構成です。メニューのアニメーションが何よりも印象的。
#TweenMax #スタイリッシュ #グリッドレイアウト #シームレス遷移 #ホバーアニメーション #ボーダーアニメーション
CRISP SALAD WORKS│クリスプ・サラダワークス
スクロールするごとに今現在のセクションを表示させたりホバーアニメーションさせたりスタイリッシュなデザインと動きのサイト。
#インライン再生動画 #スタイリッシュ #黄色 #シームレス遷移 #ホバーアニメーション #スクロールアニメーション #テキストアニメーション #ボックススライドイン #イラスト
真似したくなるようなテクニックがある「良きウェブ」
LDKWARE
スクロールでの背景画像の見せ方に一工夫があるサイト。
#インライン再生動画 #スタイリッシュ #固定背景スクロール
Andrea Brugi
余白を贅沢に使ったショッピングサイト。画像や文字が互い違いに動くだけでも印象的になりますね。
#シームレス遷移 #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #CSSアニメーション #テキストアニメーション
【Webデザイン】今週の「良きウェブ」(6月2日〜6月8日)
どうもです。雨が降ると引きこもりたくなります。
今週も良きウェブまとめです。 先週に引き続き数が少なめですが、系統的には見た目がスタイリッシュなサイトが見たいなーと思っていたのでそんな感じのテイスト多めです。 それでは以下からどうぞ。
デザインが「良きウェブ」
B6OCK Inc. ブロック株式会社|WEBデザイン・グラフィックデザイン 大阪・兵庫
グリッド調のレイアウトに幕があがるアニメーションの相性が抜群に良いサイト。
#TweenMax #カラフル #スタイリッシュ #グリッドレイアウト #スクロールアニメーション #ホバーアニメーション #テキストアニメーション
Caava Design - Strategic Thinking. Compelling Design.
アニメーションはないけれどもレトロでグラフィカルなデザインなサイト。特にメニューのデザインが可愛らしい。
#グリッドレイアウト #グラフィカル #カラフル #レトロ
Laboratorio Lanzani
トップページの画像はアクセスするたびにランダムに変わります。
#テキストアニメーション #TweenMax #スタイリッシュ #モノトーン #固定背景スクロール #スクロールアニメーション #シングルページ
ギミックや発想が「良きウェブ」
ウルトラワイド超短焦点プロジェクタ「ワイード」
純粋に見ていて楽しいユーモア溢れるサイト。のびーる感じが良い。
#CSS Animation #ポップ #インライン再生動画 #音声あり #シングルページ
Philip Popoff Selected Artworks
ファーストビューのモーションと作品ページのスクロールのモーションがかっこいい。
#puchState #WebGL #スタイリッシュ #スクロールアニメーション
Nike React
斜め文字がかっこいい。好みのスニーカーを選んで走らせることのできるコンテンツサイト
#TweenMax #React #カラフル #スタイリッシュ #ホバーアニメーション #WebGL #3D #音声あり #シングルページ
Mathis Biabiany - Creative Technologist & Artist
http://www.mathis-biabiany.fr/
縦や横にスクロールするのではなく、Z軸方向にスクロールするという体験の心地よさ。
#TweenMax #Three.js #スタイリッシュ #パーティクル #奥行き #3D #水面表現 #pushState
アニメーションが「良きウェブ」
MTN DEW x NBA
http://www.mountaindew.com/nba/russell/
モノクロにグリーンが鮮やかに映えるサイト。個人的に構成主義的なデザインがめちゃくちゃ好きなので見ていてテンション上がります。
#TweenMax #Hammer.js #スタイリッシュ #モノトーン #緑 #シームレス遷移 #ホバーアニメーション
The Greatest Showman (2017) - Movie Website
http://www.thegreatestshowmanmovie.com/
サイトの演出が素晴らしいですね。映画もサイトも魅せる力が強い。PC閲覧推奨。
#TweenMax #インライン再生動画 #テキストアニメーション #ホバーアニメーション #マウスモーション #スクロールアニメーション
Sara Marandi
ホバーした時のグニョンな動きが美しいポートフォリオサイト。
#シームレス遷移 #キレイめ #ホバーアニメーション #水面表現 #ボックススライドイン
【Webデザイン】今週の「良きウェブ」(5月26日〜6月1日)
どうもです。なんとなく梅雨っぽい感じがしてきてしまいましたね。
今週も良きWebまとめです。 申し訳ないことにこの週は確か引越しやらでドタバタしていた週でしたのでサイト少なめです。。。 その代わりこの週はスクロールアニメーションが特徴的なサイトが多かったです。
それでは今週もどうぞ。
デザインが「良きウェブ」
Studio Björk - A digital production studio in Stockholm
http://www.studiobjork.com/ モノクロベースの横向き展開スクロールデザイン。めちゃくちゃかっこいいです。
#TweenMax #Three.js #キレイめ #花柄 #紺色 #奥行き #3D #音声あり
Glimmerings Gallery presented by Ari Weinkle & Semplice
http://glimmerings.gallery/ 個性的なフォントが存在感放つサイト。ページ下部にあるフォントアニメーションも良き。
#シングルページ #ホバーアニメーション #黒色 #フォントアニメーション
World Champion Amsterdam
http://www.worldchampionamsterdam.nl/
数字のインパクトに注目。雑誌のレイアウトのようなオブジェクトの組み方が良き。
#TweenMax #Hammer.js #スタイリッシュ系 #全ページスクロール #ホバーアニメーション #ボックススライドイン #ローディングアニメーション
ギミックや発想が「良きウェブ」
The Five Seasons
https://www.alessi.com/thefiveseasons
圧倒的世界観。奥行き豊かなおかげでVRっぽい。
#TweenMax #Three.js #スタイリッシュ系 #モノクロ #シームレス遷移 #パララックス
アニメーションが「良きウェブ」
株式会社ハッシャダイ | HASSYADAI Inc.
ちょっとユニークな制度がありますがサイトのかっこよさはピカイチ。
#Three.js #pjax #スタイリッシュ系 #クール系 #紺色#シームレス遷移 #scroll manager #パララックス
FontFace Dojo
スクロールアニメーションに目が惹かれる。スライダーの移動演出が実は面白い。
#Three.js #スタイリッシュ系 #かわいい系 #ミントグリーン #シングルページ #パララックス
Phive — Health & Fitness Centers
スクロールアニメーションでよく見られる演出をうまく色々盛り込んでいるサイト。ページ間遷移のローディングアニメーションが可愛らしいです。
#Three.js #スタイリッシュ系 #黄色 #スクロールアニメーション #フォントアニメーション #ローディングアニメーション #シームレス遷移 #インライン再生動画 #SVGアニメーション #ホバーアニメーション
真似したくなるようなテクニックがある「良きウェブ」
In August Company
水彩風テクスチャがいい感じにゆらゆらと揺れてるのが良い。
#シングルページ #水彩風 #マウスムーブイベント #パステルカラー
Tío Luchín - Cocina en vivo
美味しそうなパララックススクロール。スクロールがどれくらい進んでるのがわかるようになってる。
#シングルページ #黒 #パララックス #SVGアニメーション #スクロール再生動画
【日々学ぶVue】クラスの切り替えをcopmutedで監視する
※2018.6.5 内容更新しました
どうもです。新居が引きこもりやすくて最高です。
久しぶりにVueについてのメモです。 今回はVueでよくお世話になってるクラスバインディングについてのメモです。
Vueではクラスの切り替えが簡単に行えます
この公式ドキュメントにもあるように、v-bind:class
を要素にくっつければ、dataの値次第でクラスを付け替えたりすることもできます。
また、dataのみならずcomputedを使用してクラス切り替えを管理することも可能です。
どうやってやるねん?という方はこの記事を一緒に見るとわかりやすいかもです。
※察しの言い方は公式ドキュメントだけで十分かもしれませんが、個人的には公式ドキュメントだけじゃわからないことがあるので。。。一応あげさせてもらいました。
クラスの切り替えを値に応じて変更させたい?それもできます。
で、今回はcomputedを用いてクラスを付け替える場合の具体例。
開発の中で、要素に割り振ったidだったりカスタムデータ属性だったりをみて そこに記載されてる値に応じてクラス切り替える、的なことをやりたい!と思って公式リファレンスを眺めていたらそれっぽい記述があったので 一回書いてみないと理解できないな。。。と感じてサンプル作りました。
フォーム要素の中に0や-を入れるとスタイルが変化します(複数値入力も可能になってます)。 jsとタグの中身をみて見るとこんな感じ
HTML側
JS側
スタイルバインディングという形でdata属性に持たせてやる、という方法もあり得ますが 例えばクラスを当てる対象の要素の中身がユーザーの入力によって動的に切り替わるとかであれば 上のサンプルのようにcomputedで判定を持たせてくるくる切り替える方法もありです。
【Webデザイン】今週の「良きウェブ」(5月19日〜5月25日)
どうもです。最近引越ししました。
今週も良きウェブまとめです。 今週は不思議なデザインだったりアニメーションが特徴的だったり、何かしら真新しい感じが得られるサイトをよく見かけた気がします。 一日2、1個ベースでサイト収集するようにしているので数は少なめですが、どのサイトもインパクト大きめです。
- デザインが「良きウェブ」
- アニメーションが「良きウェブ」
- Chunk - Creative Agency
- Aristide Benoist — Freelance Developer
- Aalto Festival 2018 - 17.-31.05.2018
- GDPR — The Grandmaster Challenge by Ogury
- Cuchillo, independent & creative studio
- Orenda Security
- スタジオスプーン株式会社
- ORIENS -オーリエンス- こころに満ちる香り、自分だけの時間。
- DREAM PLUS 2018 - ドリームプラス 2018
- Hublot - Return to Antikythera
- 真似したくなるようなテクニックがある「良きウェブ」
デザインが「良きウェブ」
プロフィールムービー制作|絵本仕立てのEHONICA
イラストの優しい雰囲気が生えるサイト。
#イラスト #フェードイン #縦書き #かわいい系 #白
Node-Link • Freelance engineer specialized in web
コンソールを開いてみると思わずクスリとします。
#縦書き #CSSアニメーション #レトロ #茶色 #白 #マウス稼働背景
Loop Berlin — A Summit for Music Makers
https://loop.ableton.com/2016/
Futuraのタイポが魅力的なグリッドベースレイアウトなサイト。
#グラデーション #スライドイン #キレイめ #白
アニメーションが「良きウェブ」
Chunk - Creative Agency
http://chunkagency.com/#!intro
グラデーションが鮮やかなサイト。3D回転しながら遷移する様は圧巻。
#グラデーション #3D回転 #スタイリッシュ系 #全画面スクロール
Aristide Benoist — Freelance Developer
https://www.aristidebenoist.com/
奇抜なデザインとグニョグニョとうねる感じが特徴的。
#ホバーアニメーション #赤 #シングルページ
Aalto Festival 2018 - 17.-31.05.2018
https://aaltofestival.fi/2018/en/
宇宙的雰囲気漂うサイト。
#Pixi.js #フェードイン #3D #キレイめ
GDPR — The Grandmaster Challenge by Ogury
クイズコンテンツ。正解と不正解のアニメーションが思わず見入ってしまう。
#赤 #スタイリッシュ系 #Pixi.js #白
Cuchillo, independent & creative studio
http://www.somoscuchillo.com/es
不思議な作りのページ。真ん中の四角形の中がメインコンテンツのようです。
#テキストアニメーション #スライドイン #TweenMax #白 #パララックス
Orenda Security
セキュリティ関連の会社のサイトのようです。頑丈なシャッターのように降りて来る無数の四角形が雰囲気に合ってる。
#テキストアニメーション #ボックススライドイン #TweenMax #シームレス遷移 #白
スタジオスプーン株式会社
弾みのアニメーションがとってもキュート!
#ホバーアニメーション #3D表示レイアウト #バウンスアニメーション #かわいい系 #Slick #白
ORIENS -オーリエンス- こころに満ちる香り、自分だけの時間。
写真の見せ方がありそうでなかったアニメーション。
#かわいい系 #キレイめ #スライドダウン #シングルページ #斜めレイアウト #白
DREAM PLUS 2018 - ドリームプラス 2018
https://www.napla.co.jp/dream_plus_2018/
ボックススライドインはスタイリッシュなサイトによく映える。
#ボックススライドイン #グラデーション #キレイめ #ズームイン #Vue #シングルページ
Hublot - Return to Antikythera
https://www.hublot.com/antikythera/
ブルーが鮮やか。スクロールしていくとどんどん展開されるストーリーに引き込まれる。
#フレームレイアウト #ホバーアニメーション #全画面スクロール #青 #ボックススライドイン #背景固定スクロール #インライン再生動画 #Hammer.js #TweenMax #キレイめ #シングルページ
真似したくなるようなテクニックがある「良きウェブ」
Make it rain
https://www.justmakeitrain.com/en/
斜めを基調としたインパクト十分なサイト。
#黄色 #スライドイン #インライン再生動画 #ズームイン #スタイリッシュ系 #ホバーアニメーション #テキストアニメーション
TALK.GLOBAL
文字抜き背景とタイポ遣いがオシャレなサイト。
#文字下背景 #スライドイン #グリッドレイアウト #白 #スタイリッシュ系
いかがでしたでしょうか。 私自身も何かポートフォリオサイト作りたいなと思ってはいますが、どういうのがいいだろうなあという目線でここ最近サイト収集している感あります。 個人的に好みなのは色のインパクトどーん!なサイトですが、目的によってサイトの色合いは慎重に選んだ方が良さそうな気がしてます。
ではまた来週。