【実践】HTML CSS ハンバーガーメニューの作り方！ + jQuery

このサムネのデザイン解説

最初に目に飛び込んでくるのは、画面中央に大きく配置された太いゴシック体の文字です。ハンバーガーのイラストと人物写真が左右の端に配置されており、中央のテキストエリアをしっかりと挟み込むことで視線の誘導がスムーズになっています。文字色は黒と白を使い分け、背景のマスタードカラーとのコントラストを高めて視認性を上げています。余白を贅沢に使い情報を詰め込みすぎないことで、シンプルで洗練された印象を与えるデザインに仕上がっています。

サムネ内の文字

はじめての / ハンバーガー / メニューの / 作り方

レイアウト

人物＋大きな文字

配色

#d89d4a#ffffff#222222#e65c2b#3db85c

特徴タグ

顔写真ありイラスト付き太字フォントシンプル視線誘導ツートンカラー余白活かし

再生数

40,642 回（取得時点）