【きまぐれ】Webサイトデザインを見て学ぼう 最高なサイト#1
女性限定ジムさんのwebサイトでごんす。アクセスすればわかるけど、しょっぱなから写真3枚ﾄﾞﾝ！ﾄﾞﾝ！ﾄﾞﾝ！ かましてきてるよ。イケてるねえ！
さあまずはPC版で見ていこう。
いきなり目に飛び込んでくるのは、
文字｜画像
スローガンとトレーニングの写真？かな？
写真が定期的にﾊﾟｵﾝと変わるのがスタイリッシュだね。
スクロールすると無音動画の埋め込み？みたいな感じ。なるほどね、こういう動画の使いかたもあるのか。
で下に行くと、出てきましたいろいろ。３×３でニュースのサムネイルを並べております。こういうのもシンプルにかっこよく並べるの意外とむずいんだよなー。
加えてカーソルを上に乗せたときのトランジションがモダンだねえ ちょっと画像が縮小して外枠がｼｭｲﾝと出てくる。ﾓﾀﾞｰﾝ。
でまあ一旦下まで到達。これ今気づいたけど、色使いもいいよね。白黒使いつつ、ピンクっぽいうっすい色が背景とかちょっとした文字とかに使われてて。これはやっぱ女性がターゲットだから優しい色づかいを意識してるんでしょうね。でもそれでいてピンクピンクしてなくて落ち着いてます。
他にも初心者なんで、細かいところが気になります。まずね、サイト右上の「入会ページ」「予約ページ」のところがhoverすると色が左から右にぎゅいんと入っていく変化する。これいいねー。かっけーわい。
その下もね、hoverすると、下線が中心から外にむかってスッとでてくるね。
いちいちスタイリッシュだね。
「利用方法・料金について」のところは、右から詳細なメニューが顔を出してきてる。こういうのもあるんだね。それで、この詳細メニューは逆にhoverすると下線が右に向かってしまわれていくんだ。逆にね。なるほ。
でね、他にも「THE QOLYについて」っていうボタンがhoverすると印を囲ってる円がグルッとなったりして面白いんだけど、個人的になにこれー！ってなったのは、実はサイトの一番左下。
SNSのリンクのhoverのトランジション、これは凝ってるよね。hoverするとSNSアイコンがグルッと囲まれるんだけど、なんと囲む線が単なる円じゃなくて、なんだか手書きみたいなオシャレ線なんだよね。こんなの気づくひとのほうが少ないと思うけど、細かいところまでこだわっている証拠だよね。
さ、終わろうか。
と思ったが、あぶね！重要なことを忘れていた。そう、スマホ版である。
結局のところ、webサイト制作者はPCでwebサイトを作るんだけど、サイトを訪れるのはスマホ勢のほうが多いと思う。（ほんまか？）
ほんまかは知らんが、実際、スマホユーザーを意識せずにwebサイトを作るのは、この時代ありえないことだよね。ユーザー目線でプロダクトを作りましょうってことだね。
さあ見ていこう。
サイト上で右クリック＞検証＞スマホマークﾎﾟﾁｰでスマホモードだ。と思ったけどやっぱり実際のスマホで見たほうがいいよな、と思い直しスマホで開きなおすことに。
うん、やっぱり違うね。あたりまえだけど。
まずは、PC版で見落としてたところ。最初の三枚バンバンバンのあとに、
文字｜写真 がでてくるけど、実は、写真のフレームがスーッと黒線で描かれた後に写真が出てきたんだね。細かいねー。
で、PC版ではサイト上部に配置されてたメニューが、スマホ版だと開くタイプのタブに変わっているね。やっぱりpcとスマホだとこういうところを変えたほうがいいんだね。
と、ここでワタクシ過ちに気づいてしまいました。さきほど、サイトの背景色に薄ピンクが使われていると申しましたが、実は薄ピンクではなく単なるうすグレーでした。というのもワタクシのPCディスプレイ、ブルーライトカット機能が100%になっていて全体が赤ばんで表示されているのをすっかり忘れていたのです。;_;
ｱﾎすぎる。。少なくともwebサイトの勉強とか制作をするときはブルーライトカットを切ろうと決心したてらでした。
ところで、pc版で見たときは気に留めなかったのですが、これサイトの上のほうで文字が右から左に流れてて、シャレオツでごわすね。ｼｬﾚｵｰﾂでﾄﾗﾎﾞｰﾙﾀもﾁｮｰﾋﾞｯｸﾘ！ﾌﾂｰじゃﾂﾏﾗﾅｲ！ﾌﾂｰじゃﾂﾏﾗﾅｲ！ハイ！
で、ちょっと思ったのが、スマホ版だとニュースのサムネひとつひとつがちょっとデカいかもっていうこと。サムネが画面の半分以上になっていてちょいと見にくいな、と個人的には思いました。別に批判じゃないんですけどネ。
これに関しては、PC版も横幅を変えるとニュースのサムネも3種類くらい変わって、一番広いと3×３、次に広いと横幅いっぱいの横に長いサムネ、一番狭いとデカサムネって感じ。個人的には、横に長いサムネがみやすくていいなーって感じました。
はい。以上です。疲れました。最後、個人的に感じた改善点を生意気にも述べておりますが、全体的にはスゲーサイトです。もう「スゲーサイト」という名前に変えてください。ありがとうございました。
