【Webデザイン】今週の「良きウェブ」(2月24日〜3月2日)
どうもです。いちご大福が恋しい季節です。
今週も良きウェブまとめです。
「ウェブサイトばっか見るのもいいけどちょっとマンネリ化しそうだし自分のインプット的にもコード直で見れるやつを探そう」と思い立ち
今回から「Webサイト編」と「Webクリエイション編」と分けています。
（エンジニアなのでコードが無性に見たくなるときがあるのです）
- 良きウェブ：Webサイト編
- 良きウェブ：Webクリエイション編
良きウェブ：Webサイト編
デザインが「良きウェブ」
Workmode
http://workmode.show/
シンプルですがレイアウトがどことなくリズミカルに感じられるのが良いです。
ふわふわ動くオブジェクトも可愛い。
スピネル
http://comip.jp/spinel/top.html
私がよく読んでる漫画サイトの一つです。
最近リーダーが刷新されて読みやすくなりました。
ダイヤモンドの形をベースにデザインされてるのが可愛らしいポイント。
株式会社チップマン
http://www.tipman.jp/
全体的にスムーズな動きが良いサイト。
どちらかと言えば海外向けにアピールしたい気概が感じられるデザインです。
（英語版で見ると商品の数が違うあたりとか特に）
よなよなエール
http://yonayonaale.com/
レトロかわいいアニメーション豊かなサイト。
ギミックや発想が「良きウェブ」
Broken Back | Be the stylist of the music video
http://www.youarethestylist.com/
インタラクティブなミュージックビデオです。
こっちの操作で展開が異なってくるストーリー構成はまるでシュミレーションゲームのようです。
ウェブコンテンツとしての面白さが際立っている作品です。
p5aholic's portfolio
http://p5aholic.me/
ウェブクリエイションをまとめたポートフォリオサイト。
個人的にグラフィックがとてもカッコ良いです。
OMIKUJI MACHINE
https://2018.monopo.co.jp/
ワンページで動いてる横尾忠則調イラストなおみくじマシーン。
カメラアクセスして自分の顔をその場で撮って遊ぶのがおすすめ。
アニメーションが「良きウェブ」
一緒に寝正月！おそ松さん年賀状！
http://nenga.aisatsujo.jp/lp/osomatsusan/
こういうのほんとにほんとにほんとにほんとに実装したい。
（大事なことなので４回言いました）
おそ松さんのイメージにあった賑やかで楽しいサイトです。
Kelvin Hung (kelvinh111)'s Portfolio
http://kelvinh.studio/
１ページのみの構成でこの存在感は圧巻です。
タイピングしている人影にそっとホバーすると・・・
PCでの閲覧推奨です。
Fergie
http://www.fergie.com/
色々エフェクトを盛り込んでいるクールなサイトです。
PCで見たほうが迫力があるかも。
Neematic
https://neematic.com/
ギャラリーの見せ方が斬新でした。難しいことはしてないですけど見やすいです。
解説のアニメーションも見やすくわかりやすい。
Uber | Unlocking Cities
https://www.unlockingcities.com/en-sg/#0
読ませる系なWebサイトです。
ページが進むたびに降ってくる車が見ていて楽しい。
Coulee Creative
https://www.couleecreative.com/
PC版のメニューが円形タイプで操作が気持ちいいです。
ホバーした時のエフェクトが色々楽しいサイトです。
真似したくなるようなテクニックがある「良きウェブ」
株式会社キャドセンター
https://www.cadcenter.co.jp/
トップのビジュアルエフェクトがかっこいいです。
ページ上部から表示されるギャラリーのデザインも参考になります。
CRACK THE DAY, Inc.
https://www.cracktheday.jp/
スクロールすることでページは動かず画像がパパパっと変化するギャラリーです。
シンプルですがなかなかおしゃれ。
良きウェブ：Webクリエイション編
CODEPEN
CSS3 Text Animation Effect
codepen.io
まずはシンプルなCSSテキストアニメーション。
テキストアニメーション系はWeb上の表現では結構重要な時があるんじゃないかなと思います。
Shapes in a Quadtree, K-I-S-S-I-N-G
codepen.io
グラフィックデザイン的なWebクリエイション。
ボタンをクリックするたびに新しいグリッドデザインが出来上がります。
Pure CSS Isometric Towers (Rainbow Road Edition™)
codepen.io
CSSだけでビルを描画しています。
ChromeかSafariでの閲覧推奨。
jsdoit
Colorful Spring Particle JS version
jsdo.it
ふわふわカラフルの円形が飛びまくります。
そのままプロジェクションマッピングで映し出したくなる可憐さ。
kaleidoscope
jsdo.it
Web上で見れる万華鏡です。
設計の解説も丁寧にかかれてあるのも見所。
いかがでしたでしょうか。
codepenとjsdoitやっぱり見てて楽しいな！！！！という気持ちと
今週はわりかしギミック的に面白いやつを見つけたのでホクホクしています。
業務レベルの演出はなるべくユーザの違和感がなくパフォーマンスが良いものを選ぶのが基本ですが
いざとなった時に目を引く演出もできるように、また面白い体験ができるものを提供できるように
Webクリエイション周りもチェックしていこうと思う次第です。
ではまた来週。
