アコーディオンの基本的な使い方とデザイン

アコーディオンのイラスト

アコーディオンは、見出しを重直方向に並べたリストで、クリックすることで下方向に展開し、もう一度クリックすることで閉じるUIです。

コンテンツを折りたたむことで大量のコンテンツを一度に表示することなく、全体像を確認した上で段階的にコンテンツを表示することができます。

今回は、アコーディオンの基本的な使い方とデザインについてご紹介します。

アコーディオンのメリット

アコーディオンは、情報量をユーザーが表示・非表示のコントロールができることで、欲しい情報を過度にスクロールすることなく効率的に辿り着くことができます。

その為、スマートフォンサイトのようにある程度の情報量にしなければいけない時などで、アコーディオンを用いれば、ユーザーが欲しい情報だけさらに詳しく見せることができます。

アコーディオンをデザインする時の3つのポイント

省スペースで多くのコンテンツを配置するアコーディオンをデザインするときの3つのポイントについてご紹介します。

挙動をイメージさせる

アコーディオンはユーザーが欲しい情報の表示・非表示を切り替えることができる便利なUIですが、あえて言ってしまえば、クリックしないと気づかないUIです。

展開できることを想像させるアコーディオンのUIは、各タイトルの左右どちらかに下矢印や+を置いて、展開できることを明示することが必要で、展開後は上矢印を表示し、ユーザーがその挙動をイメージできるようにします。

また、展開する時に選択したコンテンツが格納しているコンテンツ量を考えながら適切な速さで展開するアニメーションをつけることで、より分かりやすい印象をユーザーに与えることができます。

伝わりやすいタイトル

ユーザーはアコーディオンに並んだタイトルで、欲しい情報かどうかを判断します。

このタイトルが暖味な表現になってしまうと、ユーザーはコンテンツを展開しながら情報を探さなければならず、ユーザーに伝わらない時点でアコーディオンのメリットが活かせません。

ユーザーに伝わる具体的言葉で、アコーディオンのタイトルを設定しましょう。

スマホには効果的

画面の表示領域が広いPCに比べ、縦長になってしまいがちなスマホとアコーディオンは相性が良く、情報を折りたたむことができるため、多く用いられています。

ですが、コンテンツ全体を表示するためには、全ての項目をクリックする必要があり、煩わしく感じることがあり、ユーザーに全てのコンテンツを見て欲しい場合はアコーディオンではなく、全てのコンテンツを整理して表示した方が良く、FAQのページのよう場合はアコーディオンが有効です。

注意も必要

クリックやタップでコンテンツを展開するUIの為、万能なUIではなく、折りたたまれた複数のコンテンツを全て表示したい場合は一つ一つクリックまたはタップをして展開する必要があります。

その手間を一方与えてしまうリスクもあるので、十分に勘案して使用するようにしましょう

HTMLとCSSのコピペでできるアコーディオンのUI

アコーディオンはページを短くし、スクロールの回数を減らしますが、ユーザーにアクションが発生することで中身が見れるようになるUIです。

以下はjsを使わないHTMLとCSSのコピペでできるアコーディオンです。

ここに中身

コードを表示する

HTML

<center>
<input id="acd-check1" class="acd-check" type="checkbox">
<label class="acd-label" for="acd-check1">
コードを表示 
</label>
<div class="acd-content">
<p>
<!--▼ここから中身▼-->
ここに中身
<!--▲ここまで中身▲-->
</p>
</div>
 </center>

CSS

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    text-align: center;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 13px 12px;
    color: #FFFFFF;
    font-weight: bold;
    background: #4f96f6;
    cursor :pointer;
    transition: all 0.5s;
  text-decoration: none;
  border-bottom: solid 4px #627295;
  border-radius: 4px;
}

.accbox label:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/*アイコンを表示*/
.accbox label:before {
font-family: "Font Awesome 5 Free";
  content: "\f105";
    padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#6bb6ff;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    margin-top:20px;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
    text-align:left;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 0;
    background: #FFFFFF;
    opacity: 1;
}

.accbox .accshow p {
    margin: 15px 10px
    
}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
    content: '\f107';
}