【初心者向け】WEBデザインで使う「アコーディオンメニュー」って何?

あなたは「アコーディオンメニュー」をご存知ですか?

アコーディオンメニューは長い文章でもコンパクトにまとめることができ、多くのWEBサイトで使われています。

しかし、もしかしたらWEBデザイン初心者にとっては聞き慣れない言葉かもしれません。

そんなあなたのために、この記事では初心者向けにアコーディオンメニューの基本について解説していきます。

・アコーディオンメニューを作るときのデザインのポイント
・CSSを使ったアコーディオンメニューの作り方

といった実践的な内容もあるので、今までアコーディオンメニューを知らなかったあなたも簡単に作れるようになりますよ!

それでは、さっそく見ていきましょう。

アコーディオンメニューとは?

アコーディオンメニューとは、ナビゲーションメニューの一種です。
クリックすることで隠れていた内容を表示したり、隠したりできます。

以下のようなものがアコーディオンメニューです。
https://codepen.io/sekki-/pen/GRrpYaj

いかがですか?
あなたもきっと見たことがあるのではないでしょうか。

アコーディオンメニューがあることで、WEBサイトの使いやすさがグッと増します。
コンテンツをコンパクトに収納できるので、文字数の多いWEBサイトやスマートフォンサイトに最適です。

アコーディオンメニューのメリットって何?

アコーディオンメニューが何なのかわかったところで、次はアコーディオンメニューのメリットを確認していきましょう。

アコーディオンメニューの魅力を知ることによって、あなたもきっとWEBサイトに取り入れたくなりますよ!

①詳細情報を見る前に全体像が掴める

文章量が多いWEBサイトでも、アコーディオンメニューを使えば見出しを一目で確認できます。

そのため、ユーザーがWEBサイトを訪れた時にどんな内容が書いてあるのかを把握しやすくなります。

サイドメニューにアコーディオンメニューを用いれば、スッキリとしたナビゲーションを作れますよ。

②ユーザーが欲しい情報を探しやすくなる

アコーディオンメニューを使えばコンテンツが整理されるので、ユーザーが欲しい情報を探しやすくなります。

見たい内容を自由に開いたり閉じたりできるので、ユーザーが気になった部分だけを確認しやすく、とても便利です。

コンパクトにまとまるのでスクロールする手間も省くことができ、使い勝手がよくなります。

③スマートフォンなどのモバイル画面に適している

アコーディオンメニューは、スマートフォンサイトによく使われています。

画面が小さいスマートフォンは、パソコンと比べると同じ文章量でもかなり縦長の表示になります。

そんな時にアコーディオンメニューがあれば、コンテンツをコンパクトにできるため、スクロールする負担を減らすことができます。

アコーディオンメニューのデメリットは?

便利なアコーディオンメニューですが、残念ながらデメリットもあります。
メリットだけでなくデメリットも理解し、アコーディオンメニューをより効果的に利用しましょう。

①ユーザーがクリックするのに煩わしさを感じる

折りたたまれたコンテンツを全て見たい場合は、一つ一つクリックしなければ内容を確認できません。

そのため、アコーディオンメニューが多いとユーザーがクリックするのに煩わしさを感じてしまいます。

何でもかんでもアコーディオンメニューにするのではなく、必要な箇所に効果的に使うようにしましょう。

②クリックする場所だと認識されづらい

せっかくアコーディオンメニューを作っても、ユーザーが展開できることに気づかない場合もあります。

クリックできる場所だということを、ユーザーにしっかり伝えられるデザインにしましょう。

後ほどアコーディオンメニューのデザインのポイントを解説するので、チェックしてみてください。

③印刷をする場合に表示されない

アコーディオンメニューはドキュメントの印刷には不向きです。

印刷する時にアコーディオンメニューが折りたたまれた状態では、閉じられたコンテンツの詳細はコピーできません。

そのため、全てのコンテンツを印刷したくても一部しか印刷されず、ユーザーが煩わしさを感じる場合があります。

CSSアコーディオンメニュー実装サンプルを見てみよう!

アコーディオンメニューにも、さまざまな種類があります。
ここでは、3種類のアコーディオンメニューの実装サンプルをご紹介していきます。

シンプルで定番のアコーディオメニュー

左サイドにアイコン、右サイドに矢印がある定番のアコーディオンです。
クリックすると矢印の向きや色が変化します。

一目でアコーディオンメニューであることが伝わりやすい、ユーザーに優しいデザインですね。

Menú despegable estilo acordeón | Accordion Menu (codepen.io)

独立して動くアコーディオンメニュー

アコーディオンメニューは1つ開くと他が閉じるタイプと、独立して動くタイプがあります。

こちらのアコーディオンメニューは独立して動くタイプです。

先ほどご紹介したアコーディオンメニューとタイプが違うので、ぜひ比較してみてください。

Simple acordion (codepen.io)

ハンバーガーメニュー+アコーディオンメニュー

ハンバーガーメニューとは、3本線「≡」のアイコンを使ったナビゲーションメニューで、クリックすると隠れた情報が表示されます。

省スペースでナビゲーションを設置できるので、特にスマートフォンサイトにぴったりな実装サンプルです。

hamburger slide accordion menu (codepen.io)

アコーディオンメニューをデザインするときの3つのポイント

さて、ここからは実践編です!
まずはアコーディオンメニューのデザインのポイントを確認していきましょう。

せっかくアコーディオンメニューになっていても、ユーザーが気づかなければ意味がありません。
ユーザーがコンテンツ展開できることを一目で理解しやすいデザインを心がけましょう。

①アイコンの形は矢印や+ボタンでわかりやすくしよう

アコーディオンメニューになっていることをユーザーに理解してもらうために、矢印や+ボタンのアイコンをつけ、展開できることをアピールしましょう。

展開の目印になるアイコンは左右どちらかの、わかりやすい位置につけるといいですよ。
複数の見出しが並ぶ時は、直線上に並ぶようにアイコンを配置すると見やすいです。

②矢印の向きを効果的に使い分けよう

矢印は「▼」や「∨」など下向きのアイコンを使えば、コンテンツが下方向に展開されることを直感的にユーザーに伝えられます。

また、展開後は「▲」や「∧」など上向きのアイコンや「ー」マークなどの表示に切り替えれば、コンテンツを閉じられることをユーザーに効果的に伝えることができます。

③ユーザーに伝わりやすい見出しをつけよう

アコーディオンメニューの見出しをわかりやすくすることも大切です。

曖昧な表現だと何が書かれているのかわかりにくく、ユーザーはクリックしていちいち確認しなければなりません。

ユーザーに手間をかけさせないためにも、見出しは伝わりやすい文言にしましょう。

アコーディオンメニューはCSSだけで作れる!

アコーディオンメニューはCSSとjQueryを組み合わせて作る方法もありますが、実はCSSだけでもアコーディオンメニューが作れちゃうんです!

そのため、初心者でも簡単にアコーディオンメニューをWEBサイトに取り入れることができます。

今回は以下のサンプルの作り方を解説します。
https://codepen.io/sekki-/pen/GRrpYaj

HTMLの基本的な作り方

まずは、HTMLの基本的な作り方の流れを説明します。

ざっくりとポイントを解説するので、詳しくは後述するHTMLソースを参照してください。

①divで親要素を用意しよう
<div class=”menu”></div>

②ボタンの設置→<label>タグを使おう
<label for=”type01″>▼  アコーディオンメニュー ①</label>

③ボタンの動作→<checkbox>タグを使おう
<input type=”checkbox” id=”type01″ class=”accordion”>

③表示させる内容→ <ul><li>タグを使おう
<ul id=”links01″>
<li>・ここに内容が入ります。</li>
</ul>

※見出しの数に合わせて複製してください。

CSSの基本的な作り方

次に、CSSの基本的な作り方の流れを説明します。

HTMLの作り方と同様にざっくりとポイントを解説するので、詳しくは後述するCSSソースを参照してください。

①ボタンの幅や色を調整する→「display」でブロックを指定しよう
label {
display: block;
 margin: 0 0 5px 0;
padding : 20px;
line-height: 1;
color :#fff;
background : blue;
cursor :pointer;
}

②チェックボックスを非表示にする→「display:none;」を使おう
input {
display: none;
}

③隠しておきたい内容を非表示にする→「height: 0;」「Overflow: hidden;」を使おう
.menu li {
height: 0;
overflow: hidden;
}

※この設定がないと常に内容が表示され、アコーディオンメニューの意味がなくなってしまいます。

ーーーーーーーー

基本的な流れは以上です。

詳細は、後述するHTMLソースとCSSソースを確認してください。
ぜひ書き換えて、オリジナルのアコーディオンメニューを作ってみてくださいね!

HTMLソース

<div class=”menu”>
<label for=”type01″>▼  アコーディオンメニュー ①</label>
<input type=”checkbox” id=”type01″ class=”accordion”>
<ul id=”links01″>
<li>・ここに内容が入ります。</li>
</ul>
<label for=”type02″>▼  アコーディオンメニュー ②</label>
<input type=”checkbox” id=”type02″ class=”accordion”>
<ul id=”links02″>
<li>・ここに内容が入ります。</li>
</ul>
<label for=”type03″>▼  アコーディオンメニュー ③</label>
<input type=”checkbox” id=”type03″ class=”accordion”>
<ul id=”links03″>
<li>・ここに内容が入ります。</li>
</ul>
</div>

CSSソース

label {
display: block;
margin: 0 0 5px 0;
padding : 20px;
line-height: 1;
color :#fff;
background : blue;
cursor :pointer;
font-family: sans-serif;
font-weight: bold;
}
input {
display: none;
}

.menu {
max-width: 400px;
}

.menu ul {
margin: 0;
padding: 0;
background :#f4f4f4;
list-style: none;
}

.menu li {
height: 0;
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
font-family: sans-serif;
}

#type01:checked ~ #links01 li,
#type02:checked ~ #links02 li,
#type03:checked ~ #links03 li{
height: 100px;
opacity: 1;
}

まとめ

いかがでしたか?

アコーディオンメニューは、コンテンツの詳細をコンパクトにまとめたり、Q&Aやサイドメニューのナビゲーションに使われたりと、色々な場面で役に立ちます。

今までアコーディオンメニューを知らなかったあなたも、WEBサイトに取り入れたくなったのではないでしょうか。

この記事では、WEBデザイン初心者向けに

■アコーディオンメニューとは?
■アコーディオンメニューのメリット・デメリット
■CSSアコーディオンメニューの実装サンプル
■アコーディオンメニューのデザインのポイント3つ
■CSSだけでアコーディオンメニューを作る方法

をご紹介してきました。

ぜひアコーディオンメニューを取り入れて、ユーザーに優しいWEBサイトを作ってくださいね!

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。