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

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

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

かかかず

特に通販サイトの「よくある質問」ページで見るUIです。

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

アコーディオンのメリット
アコーディオンをデザインする時の3つのポイント
コピペでできるアコーディオン
- HTMLとCSSのコピペでできるアコーディオンのUI
- jQueryのアコーディオン
ネイティブなJavaScriptのアコーディオン
さいごに

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

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

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

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

ここでは、アコーディオンをデザインするときの3つのポイントについてご紹介します。

挙動をイメージさせる

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

展開できることを想像させるアコーディオンのUIは、各タイトルの左右どちらかに下矢印や＋を置いて、展開できることを明示することが必要です。

そして、展開後は上矢印を表示し、ユーザーがその挙動をイメージできるようにします。

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

伝わりやすいタイトル

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

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

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

スマホには効果的

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

ですが、コンテンツ全体を表示するためには、全ての項目をクリックする必要があり、煩わしく感じることがあります。

ユーザーに全てのコンテンツを見て欲しい場合は、アコーディオンではなく全てのコンテンツを整理して表示した方が良く有効です。

特に、FAQのページのよう場合はアコーディオンが最適とも言えます。

注意も必要

アコーディオンは、クリックやタップでコンテンツを展開するUIの為、万能な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

/*ボックス全体*/
.acd-label {
    color: #FFFFFF;
    font-weight: bold;
    background: #4f96f6;
    cursor: pointer;
    transition: all 0.3s;
    display: block;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 12px 10px;
    max-width: 400px;
    text-decoration: none;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));
    border-radius: 6px;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
.acd-content {
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s;
    visibility: hidden;
    text-align: left;
}
.acd-check {
    display: none;
}
.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';
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 0;
    visibility: visible;
}

.acd-check:checked + .acd-label:before {
    content: '\f107';
}