CSSで作る｜ハンバーガーメニューの制作事例｜jQuery、JavaScript

T4 BUILDING OSAKA （CSS＋JavaScript）

（画像引用：T4 BUILDING OSAKAホームページより）
https://t-4.jp/t4-bldg/

動的な要素が溢れるページです。ラインを上手に使ったレイアウトや画像の展開と縦横のフォントの混在など、とにかくユニークであり芸術性を感じます。左上に配置された小さめのハンバーガーメニューは、タップすると独自性のある動きをして、シンプルなメニューを右サイドに表示します。トップページの凝り方と反して、メニューはとてもシンプルというギャップは、ユーザーのこころをくすぐる要素にもなりそうです。

ロンドマーク（CSS＋jQuery）

（画像引用：ロンドマークホームページより）
https://www.rondomark.jp/

ロンドマークのホームページはダークな印象の中、動きのあるトップページがつくる雰囲気が独特な世界観を生んでいます。右上にある小さなハンバーガーメニューをタップすると、ページの上部に2行のメニューを表示します。ページ一面や左右から出現するメニューが多い中、上部にメニューが表示される仕様はめずらしいでしょう。メニュー項目が少ないこともあり、可読性もよいと言えます。

まとめ

今回ご紹介したハンバーガーメニューは、どれもユーザーのことをよく考えて作っている様子を伺えるものばかりです。ハンバーガーメニューは利便性かつデザイン性の高さが求められるため、CSSの技術はもちろん、マーケティング力など多くのスキルが求められます。様々なホームページの制作事例を積極的にチェックして、エッセンスの吸収を繰り返してみることをオススメします。ユーザビリティの高いホームページは日頃からの継続的な努力によって、出来上がるのだと思います。

企業事例を見てみる

CSS｜アニメーション制作の有名企業事例

CSSを使って実現できることの中でもアニメーションは、特に制作者のセンスが光るものと一つでしょう。動的な表現は、ユーザーにボタンがあることを認識させたり、クリックの動機をつくるなど、ホームページの閲覧をスムーズにする助けにもなるものです。マウスカーソルをメニューに重ねた際の色の変化など小さなものから、もっと目立った動きが印象的なものまで、CSSで作れるアニメーションはたくさんあります。今回は、CSSで作れるアニメーションの事例として、様々な業界のホームページをピックアップしました。定番とも言えるアニメーションを搭載したものもあれば、ちょっとめずらしいものもあります。ぜひ、チェックしてみてくださ

先進的なBtoB企業が採用する！Instagram（インスタグラム）運用事例20選

最近人気のSNSであるInstagram（インスタグラム）ですが、動画活用が注目を集めているのを背景にビジネス利用が増えつつあります。 今回は、Instagramを運用しているBtoB企業の事例をまとめてご紹介します。