こんにちは。chikaです。
サイト観察練習43回目です。
本日は全体を満遍なく見るというよりは、自分の好きなところをグリグリ見る方向で観察していきたいと思います。何がどう今までの観察の仕方と変わるのかは自分でもうまく説明できないのですが、なんとなく構成を見るのではなく、気になった部分をどうしてこうなったのか、どう好きなのかを整理していく…ような感じで進めていこうと考えております。
ということで本日も15分でできるところまで。
---------------------
＜観察目安＞
・観察時間は15分
・SANKOU！さんの一番新しいサイト
・トップページのみ
・リンク要素の共通ルールをつかむ
（模写する際に見るべきポイント8のうちの１つ）
※しばらくポイントは絞らず自由に観察してみます
---------------------
本日観察させていただいたサイト様
九州朝日放送さんの70周年記念のサイトだったのですね。
放送ということで動画や写真など色々な個所に動きを感じるギミックが詰められていてとてもらしいサイトだなと思いました。
個人的にはKモチーフのロゴがまばたきをしていてちょっとほっこりしました。
どうやってまばたきさせているのでしょう。
気になったのでちょっとだけ覗かせていただきました。
・divクラスの::beforeで赤いK部分を画像で配置
・目の部分はsvgで作成（htmlタグのellipseは楕円を生成するときに使われる）
・animatioで制御している
…なるほど。animationを使えば動かせるというのは分かるのですが、cubic-bezierがどういったときに使われるのかが現時点では知識不足でわかりませんでした。いろいろ動かすことができるようになれば楽しそうなのでいつかチャレンジしてみたいですが、順番で行くと同じ動かすならばスライダー部分を作れるようになる方を先にチャレンジしておいた方が頻度的にはよさそうかなと思いました。
でも、ワンポイントのロゴがまばたきしていたらやっぱりかわいいと思うのですよね。
「ロゴを動かす」という引き出しを増やせたのはよかったかなと思います。
そのほかに使われているギミックも気にはなりますが本日はこのあたりにしておきたいと思います。