then

昨日に引き続きメニューの開閉アニメーションです。

左からスッと出てきます。メニュー内の見出しは結構大きいです。白と黒で洗練されたデザインです。

意外と珍しい、下にメニューがあるパターンです。スマートフォンだと特にそうなんですが、画面の下部の方が手が届きやすいので、個人的にはアリだと思っています。

メニュー内が表示後に滑らかに表示されていきます（すいません日本語の表現が難しいです）

音のしない、静かな感じがします。

かっこいいです。単純にかっこいいなと思いました。

こういう直感的なかっこよさも大事なのかなと思います。ハンバーガーメニューもメニューの開閉によってアニメーションがつけられています。

上からシャッターのように降りてきます。
色合いなど、サイトの雰囲気に非常にマッチしています。デザイン的にはシャッターってより障子などそういう表現の方が合っているかもしれませんが….

ハンバーガーメニューなどを作る際にCSSの数値の制御をしますよね。

opacity:0などを基本的に用いると思いますが、場合によって

display:none;やvisibility: hidden;を使うことがあると思います。

実はこれ、スクリーンリーダーがアクセスできない表示方法となってしまうので、SEOでペナルティを受ける可能性があるようです。知りませんでした。

このブログも一部display:none;で制御しているところがあるので修正します…

大卒でWebデザインの専門学校に通っている男のブログ