WEB制作のお仕事を始めてから
いろんなWEBページを見るたびに
「この表現ってどうやるのかな」
「このボタンの動きすごいな〜」
「え、これってCSSでやってるんだ〜」
などなど…以前とは違う視点でWEBページを見るようになりました。
通常、何気なく開くハンバーガーメニューも
気がついたら何回も押して開いて繰り返し見ていたりして
はっと我に返る瞬間があります。
…職業病ですね。?
そして素敵な表現を見つけると
ブラウザの検証機能をつかって実際にコードをみたり、
どんなJsライブラリを使ってるか覗きにいったりします。
ふらふらといろんなページを見て楽しんでるので
「WEB散歩」と名付けました。笑?♀️
この「WEB散歩」のメリットは
自分の知らない表現を知ることによって視野が広がるということです。
例えはこちらのページ！
cpw（シパウ） 沖縄シークヮーサーのCCクリーム
https://dododododo.jp/pow/cccream-okinawa-shikuwasa/
ファーストビューで印象的な水の波紋が広がる表現?
とっても素敵ですよね！
でも実装しようとしたら難しそう…
そこで、
どうなっているのか？を探るため検証モードを使ってみてみると…
jquery.ripplesというプラグイン を使用していることがわかります。
http://sirxemic.github.io/jquery.ripples/
▽Git hub
https://github.com/sirxemic/jquery.ripples/
「このプラグインを使用すれば、波紋が広がるような表現ができる!」
という事実を知ったことによって
今後、自分も取り入れてみようかな~と知識の引き出しを増やすことができます?
こんな感じで散歩中に見つけた引き出しを沢山ストックしておけば
デザイナーさん、もしくはWEBサイトを作りたい方に
「こんな表現もできます！」と提案することにも役立ちます！
自分にとっても、実装するための工数の見積もりやがしやすくなったり
心理的ハードルを低くすることでメンタル安定にもつながります。笑
（こうゆう動きできない～～？と相談された時に
「これはあのサイトで見た動きだ！！」→「できます！！」って答えられます、たぶん）
ソースを参考にしながら実際に手を動かして
自分で再現できた時も楽しいし、何より実装スキルがつくのでおすすめです！?
有名どころではありますが、私が散歩する際によく利用するギャラリーサイトを紹介します。
✏️ おすすめの参考サイト
SANKOU!
https://sankoudesign.com/
更新頻度が高く、優れたデザインのサイトを集めたギャラリーサイトです。
ブックマ！
https://bookma.torch.blue/
左側にPCサイト、右側にレスポンシブサイトが配置してあり
一目でどちらのデザインも見比べができるので見やすいです。
ぜひWEB散歩してみてください〜！
いろんな発見ができますよ?
