前回「読みやすくページ滞在時間が長くなるWEBサイトの作り方とは」という記事を書きました。
読みやすいWEBサイトをつくるための工夫について、いくつかの方法を記事にまとめました。
その中で”動きを利用する”表現方法のメリットについて書きました。
写真が何枚か入れ替わるスライダー（スライドショー）や、画面を切り替えられるタブメニュー、文章量が多いページで使うアコーディオンメニューなどのことです。
近年、WEBサイトに動きを出すことで表現の幅を広げたり、よりわかりやすく見せたりする工夫を凝らすことが多くなりました。
○動きをたくさん取り入れているWEBサイト事例
多くの種類の動きを取り入れていると感じるWEBサイトを2つピックアップしてみます。
ナイル株式会社
株式会社トヨタシステムズ
この2つのWEBサイトを見ていると、WEBサイトの表現方法には配色やイラスト、写真、文章だけでなく、”動き”もあることがわかります。動きをつけるメリットは、ダイナミックに見えたり、重要な箇所を伝えたり、おしゃれでスタイリッシュに見せたりすることなどです。
「動くWEBデザイン」と表現することもあります。もちろん動かすためには動く仕組みを実装しなければならないため、デザイナーさんなら誰でもどんなものでもできるというわけではありませんし、複雑な動きはブラウザや使用端末によって見え方が違うなどもあります。ただ、それほど難しい技術を使わなくても動きを出す方法もあり、一般的なものならそれほど費用負担もなく実装できます。
○よく使われるWEBサイト上での動き
・スライダー（スライドショー）
・ハンバーガーメニュー（スマホで閲覧時によく見かける折りたたまれたメニュー）
・ページトップリンク（ページ上部まで自動スクロール）
・アコーディオンメニューorパネル（開閉）
・ニュースティッカー（テキストが流れる）
“動き”にはさまざまなパターンがありますが、今回はその中から「アコーディオンメニュー」について深堀りしていきます。具体的には、アコーディオンメニューの作り方を、HTML、jQuery、CSS、プラグインの4つに分けてご紹介します。
一言でアコーディオンメニューといっても作り方がいろいろあり、それぞれにメリットとデメリットがあります。作り方のパターンを複数知っておくことで「私たちのWEBサイトに最適ものはどれか？」と選びやすくなりますので、この記事を参考にしていただければ幸いです。
■アコーディオンメニューの実装メリット
アコーディオンメニューは指定部分をクリックしたりタップしたりすることで、開閉して隠れている部分が出てくるような動きを実現します。
参考：https://where.inc/service/matsuya
Q&Aの部分や、規約など長文になりやすいページで活用されることが多い”動き”です。長いテキストもシンプルに見せることができ、デザイン重視であったり、必要な人にのみ見せたい場合だったり、活用できるシーンはたくさんあります。
アコーディオンメニューの私のオススメ活用方法は、シンプルで余白を大切にした美しいデザインで仕上げたいときです。真っ白なページに見えるけれども、しっかりコンテンツになる文章が隠されている。文字がズラズラと並ばないことで圧迫感がなく、デザイン重視でありながらスマホでも読みやすいページに仕上げられます。
では、ここから実装方法を4つ、挙げていきます。
１．jQueryを利用したアコーディオンメニュー
jQuery（ジェイクエリー）はJavaScriptを手軽に使えるようにするためのライブラリ（パックになったパーツのようなもの）です。手軽に動きを出したいとき、おしゃれでかっこいいWEBサイトをつくりたいときによく使われます。
高度なプログラミング技術を持ち合わせていなくても、アコーディオンメニュー実装用のライブラリを使うことで、WEBサイト上に動きを出すことができます。
■jQueryの「slideToggle()」を使って実装する手順
１．jQueryを実装する準備をする（過去記事：jQueryを使えばWEBサイトがガラリと変わるに詳しい説明があります）
２．HTMLタグのulとliを使って、シンプルなリストを書く
３．CSSで閉じたい部分を指定して、閉じさせておく
４．クリックで開閉するJavaScriptを書く
↓閉まっている状態
↓開いている状態
＜HTML/CSS/JS例＞
※class名等はわかりやすいよう名付け、CSSはデザイン部分はカットしています
<ul>
<li>
<p><a class="toggle">Q.jQueryは無料で使えますか</a></p>
<ul class="childmenu">
<li><p>A.はい。使えます。</p></li>
</ul>
</li>
</ul>
.childmenu {
display: none;
}
<script>
$(function(){
$(".toggle").on("click", function() {
$(this).next().slideToggle();
});
});
</script>
これらに追加する形で、デザインを入れたり、開閉のスピードを調整したり、矢印が動くような装飾を付けたりしていきます。
slideToggleについては過去記事にも詳しく掲載していますので合わせて御覧ください。
▶【簡単】初心者もすぐに使えるjQuery
今回例として挙げたのはほんの一例で、HTMLの書き方もさまざまで、ul,liではなくdl,dt,ddを使う方法や、class指定ではなくidを使うパターンもあります。
つまり、jQueryを使うことで、それだけ細かい部分までそれぞれのWEBサイトのコンテンツやデザインに合わせて調整できます。WEB制作の担当者と相談しながら、動きをみながら調整して思いどおりの仕上がりに近づけて行ってください。
◎デメリット
jQueryを使うデメリットはプログラムを使う＝それを読み込む必要があるため、WEBサイト全体の読み込みが遅くなることも。昨今のSEO対策ではページの読み込みを早くすることが高評価につながるともいわれていますので、SEO対策を重視するのであればjQueryを使うこと自体にデメリットがあるといえます。
２．CSSを利用したアコーディオンメニュー
CSS（スタイルシート）を使うことでアコーディオンメニューをつくることもできます。JavaScript（jQuery）を使わなくても、シンプルな開閉ならCSSで十分表現できます。
■CSSを使って実装する手順
１．HTMLタグのcheckboxの機能を使う
２．CSSに開閉の指示を書く
＜HTML/CSS例＞
※class名等はわかりやすいよう名付け、CSSはデザイン部分はカットしています
<div>
<label for="toggle">Q.SEO対策で力を入れるべきものは？</label>
<input type="checkbox" id="toggle" class="btn">
<div class="childmenu">
<p>A.コンテンツづくりです。</p>
</div>
</div>
.btn {
cursor: pointer;
}
.childmenu {
display: none;
}
#toggle:checked + .childmenu {
display: block;
}
チェックボックスの機能を使っています。
マウスやタップでチェックが入ったら開く仕組みです。
シンプルなので開閉のスピードを変化させるなど動きに関する表現の幅を広げることはできません。「押したら開く」というシンプルな表現でよければ、CSSを使うとjQueryを活用するより簡単に実装できます。
◎デメリット
チェックボックスの本来の機能とは違う使い方をするため、コーディングをしていない人がコードを見た場合に、「なぜこんなところにチェックボックスが？」と疑問を抱いてしまうことがあります。コーディングの技術者であれば、ここでチェックボックスを使っている意図はわかるため、更新時やリニューアル時に問題が出ることはありません。可能性として、コードに対してあまり詳しくない方が更新をする場合は引き継いだり注意を払うよう連絡したりする必要があります。
３．HTMLを利用したアコーディオンメニュー
jQueryやCSSを使わなくてもHTMLタグだけでもアコーディオンメニューの実装ができます。ただ、大きなデメリットがあるので先に挙げておきます。
この実装方法は対応ブラウザに縛りがあります。具体的にいうとInternetExplorer（以下、IE）に対応していません。IEはまだ一定のシェアがあるため、個人的なWEBサイトであれば利用に問題はありませんが、営業・広報のためのWEBサイトであればこの実装方法を採用しないほうがいいでしょう。
■HTMLを使って実装する手順
１．HTMLタグ️のdetailsとsummaryの機能を使う
<details> <summary>Q.IEのシェア率はどれくらい？</summary> <p>A.StatCounter調査によれば、2021年5月におけるInternet Explorerのシェアは1.48%とされています。</p> </details>
デザイン要素を入れていないとはいえ、とてもシンプルなコードで開閉の動きが出せます。
◎IEはいつまで利用されるのか？
アコーディオンメニューとは直接関係がないですが、いつまでIEに対応すればよいか？関心がある方も多いですし、いつからHTMLタグでアコーディオンメニューを作っていいのか気になる方もいらっしゃると思うため、まとめておきます。
今後、IEのサポートが終わる時期は2022年6月15日までとしてすでに公式に発表されています。これに伴い、MicrosoftはIEの代わりにブラウザ「Microsoft Edge」の使用を推奨している状態です。けれど、まだまだIE利用は根強いようです。サポートが終了しても一定数のユーザーは使い続ける可能性があります。しかしサポートが終了するタイミングが一つの区切りになるとも考えられます。
WEB制作時に「どのブラウザに対応するか」を発注側と制作側が確認することは必須です。IEに対応せずともよくなれば、いろいろなタグが使えるようになるはずです。
４．WordPressのプラグインを利用したアコーディオンメニュー
WordPressでWEBサイトを構築していれば、プラグインの活用でアコーディオンメニューを簡単実装できます。
ブロックエディタ拡張プラグイン（例えばCoBlocksなど）にはアコーディオンメニューがセットされているものが多く、導入することでアコーディオンメニューが簡単にブロックとして追加できます。
過去記事でプラグインの導入方法や表示例を詳しく載せていますので、プラグインのご活用を検討されている方はぜひ御覧ください。
▶ブロックエディタ拡張プラグイン「CoBlocks」全30ブロック解説、表示例付き
▶ブロックエディタを高機能化「Advanced Gutenberg」全22ブロック解説、表示例付き
▶ブロックエディタ拡張プラグイン「Ultimate Blocks」全19ブロック解説、表示例付き
まとめ
アコーディオンメニューを使うことでスッキリとしたデザインを実現したり、長いスクロールをせずとも読みたいコンテンツに到達できたりするメリットがあります。
スマホでも長文や多項目のページが読みやすく、活用するメリットはユーザー様視点で考えると大きいです。最近では補助金申請サイトなど公的なWEBサイトでもQ&Aなどのコンテンツでよく使われるようになり、一般的な感覚ではずいぶんユーザー様に馴染みが出ていると思います。
クリックorタップすると開く、ということをユーザー様に伝えるためにはわかりやすいデザイン、例えば矢印を付けたり背景に工夫を施したりする必要もあるでしょう。動きとデザインを上手くマッチさせて、使いやすく読みやすいWEBサイトを作っていきたいですね。