スマホ専用メニューを簡単に作る方法（初心者向け）

スマホでホームページを見ると、

こんな悩みを感じたことはありませんか？

スマホでは、パソコン用メニューをそのまま使うより、
スマホ専用にシンプルなメニューを用意した方がとても使いやすくなります。

そこで、この記事では、
初心者の方でもコピペで作れる、簡単なスマホ専用メニューの作り方を紹介します。

スマホ専用メニューを作りたい方は、ぜひ最後まで読んでみてくださいね！

なぜスマホ専用メニューが必要なのか

パソコン用の横並びメニューは、
スマホ画面では文字が小さくなり、押し間違いが起こりやすくなります。

その結果、ユーザーは目的のページにたどり着けず、
途中で離れてしまうこともあります。

スマホでは、縦並びで大きく表示するメニューが一番使いやすいです。

スマホ専用メニューの基本パターン

それでは、「スマホ専用メニューの基本パターン」をご紹介します。

縦並びメニュー（一番簡単）

リンクを縦に並べるだけのシンプルな形です。
初心者の方はまずこれで十分です。

ボタン型メニュー

背景色を付けてボタンのようにすると、さらに押しやすくなります。

ハンバーガーメニュー（簡単版）

画面の端にメニューをまとめる方法ですが、
少し仕組みが増えるので、まずはシンプルな縦並びがおすすめです。

まずは一番簡単な方法で作ってみよう！

簡単な方法で、スマホ専用メニューの作り方をご紹介します。

HTMLの基本構造

<div class="sp-menu">
  <a href="#">ホーム</a>
  <a href="#">サービス</a>
  <a href="#">お問い合わせ</a>
</div>

CSSでスマホ用に整える

.sp-menu a {
  display: block;
  padding: 12px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}

これだけで縦並びメニューが完成します。

スマホだけ表示させる設定方法

次に、スマホだけ表示させる設定方法をご紹介します。

.sp-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .sp-menu {
    display: block;
  }
}

これでスマホ画面のときだけ表示されます。

使いやすくするためのポイント

スマホ専用メニューを使いやすくするためのポイントをお伝えします。

文字は少し大きめにする

16px以上がおすすめです。

余白をしっかり入れる

指で押しやすくなり、操作ミスが減ります。

よくある失敗例

• 文字が小さすぎて押しづらい
• メニュー項目が多すぎる
• スマホ表示を確認していない

やはり、シンプルが一番使いやすいですよ。

まとめ｜まずはシンプルなスマホ専用メニューでOK

スマホ専用メニューを簡単に作る方法の内容はいかがでしたでしょうか？

スマホ専用メニューは、

• 縦並び
• 大きな文字
• 余白たっぷり

これだけで十分使いやすくなります。

なお、本格的な「ハンバーガーメニュー」を作りたい場合は、下記の記事を見てみてください。

コピペのみで完成！簡単ハンバーガーメニューの作り方

このようなハンバーガーメニューも作ることができるので、良かったら参考にしてくださいね！