【Webデザイン】今週の「良きウェブ」(4月1日〜4月6日)
どうもです。いつの間にか4月になってました。
今週も良きウェブまとめです。
今週は、おしゃれでスタイリッシュなウェブサイトを探している！という方でこのブログに行き着いた方にとってはご期待に添えない内容となっています。
今回は「もっと遊びのあるものを見てみようー」をテーマにお送りします。
というのもこの週はエイプリルなフールがあったのと
私自身が結構codepenを漁っていたということもあり
割と面白表現やクリエイションにフォーカスしたものが多めになっているからです。
まあたまにはこういうのもいいかなということで。
- Webサイト編
- Webクリエイション編
Webサイト編
デザインが「良きウェブ」
居酒屋 源
http://izakaya-moto.jp/
スマホやタブレットなどのモバイルデバイス向きなのがドラッグタイプのデザイン。
下手したらどこに行けば目的の情報があるのかわからない！となりやすいのですが、このサイトは最初のナビがあるおかげでまだわかりやすい印象です。
あったかみのある手書きイラストとアクセントのアニメーションが良き。
ギミックや発想が「良きウェブ」
A When to Travel Guide for Japan Burma Vietnam Cambodia Laos
https://www.insideasiatours.com/when-to-travel
この国にはいつのタイミングで行けばいいの？を教えてくれるサイト。
この切り口で旅行を紹介してるのは珍しいかもーと思いました。
Crypton
https://crypton.trading/
スクロールで説明文がキーボード打ちで浮かび上がってきたり、図がするするーと展開されているサイト。
よく見ると左上のアイコンがスクロールに合わせて喋ってるようになってます！
ロボットが説明してくれているみたいな気分になるサイトです。
Playground
https://playground.labs.caffeina.com/#
Three.js製のバスケし放題なサイトです。
趣の異なる３ステージが選べますがそれぞれリアリティがすごいので思わずボール投げまくってました。
アニメーションが「良きウェブ」
三井住友銀行 Recruiting 2019
http://www.smbc-freshers.com/#top
手書き文字がサラサラ〜と現れるのが素敵。
メッセージを訴える表現としては、例えばフォントを強いものにするとかが考えられますが
じわっと訴えかける表現をしたい時にはこうやってアニメーションが助力するケースもあるという学びが得られました。
Zoomanity
http://zoomanity.land/en/
PCでみてね！と言われるのですがみた方がいいです。
イラスト×パララックスの好例です。
エイプリルフールで見かけたもの編
【楽天】公式キャラクター変更のお知らせ
[
https://event.rakuten.co.jp/okaimonopanda/point-goods/april2018/
正直楽天のECサイトは見にくいなと感じているんですけど、パンダのサイトは基本ほんわか可愛い感じです。
4月1日に仕掛けてきたサイトもやっぱり可愛い。
星のワドルディ25周年
http://www.kirby.jp/25th/waddledee/
カービィの名ザコキャラ？と呼ばれるワルドディメインサイトが4月１日爆誕。
もともとのカービィのサイトを踏襲して作られています。
個人的にトップに戻るスクロールとキャラ紹介のページは見ものです。
番外編：ポケモン関連のサイトを他にも見てみた
ヤドン県のサイトをみていてリンク踏んだり色々したら
ポケモン関連のサイトはとりあえず愛に溢れているということと
演出やデザイン的観点から見ても参考になりそうな要素があったので
おまけでちょと載せてみます。
ヤドンパラダイス
http://www.pokemon.jp/special/yadon_paradise/
正直ヤドンにそこまで思い入れはなかったんですけど、
このサイトみてヤドンの愛らしさに少し共感をもてたような気がするようなそうでもないような。
それはさておき、このサイトの動きの付け方は細かいこだわりが感じられますので触って見るのはありです。
プロジェクトイーブイ | ポケモン
http://www.pokemon.jp/special/project_eevee/
正直イーブイにそこまで思い入れはなかったんですけど、
このサイト見てこの世にイーブイガチ勢という派閥が存在するんだということはよく伝わってきました。
それもさておき、こちらもイーブイの可愛らしさを助長するような動きの付け方をしているので見ものです。
うどん県×ヤドン「ヤドンパラダイス in 香川」- うどん県
https://www.my-kagawa.jp/yadon-ken/
４月１日から１日経って公開された、香川県とヤドンのコラボサイトがこちら。
エイプリルフールの時に比べるとこっちが本丸だよ感がひしひし伝わってくるので、
これを見るとなぜ4月1日のサイトがシンプルだったかの理由が見える気がします。
ところどころに固定位置背景をかませているのが可愛い。
Webクリエイション編
a flurry of cherry blossoms
codepen.io
お花見チャンスを逃してしまった方へ送る作品がこちら。
水面上に浮かぶ桜の花びらってとてもロマンチックですよね。
Cherry Fizz
codepen.io
こちらはどちらかというと「毒かわいい」というワードが合いそうな印象。
動きとしてはシンプルですが、彩りやスピード感のおかげで印象的です。
Moving Oriental Flower Pattern
codepen.io
これCSSだけで動いています。
hoge-gradientはなかなかに色々な表現ができるので楽しいですね。
CSS Atomic Logo
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のローディングの動きに近しいものを感じます。
いかがでしたでしょうか。
今日はいつもと違う感じで色々見ていましたが、
とりあえずわかったこととしては、ポケモン関連のサイトは愛を表現するのがうまいサイトが多いなと感じた次第です。
（サイトデザイン、動きの付け方とかも）
キャラクターコンテンツメインのサイトはいかにそのキャラの雰囲気らしさ、またはその雰囲気を助長する見せ方ができるかが勝負所のようです。
ではまた来週。
