JIN:R「アコーディオン」一歩先ゆくアレンジのアイデア

アシスタントさん

読者に詳しく丁寧な説明を心がけているとどんどん説明が長くなり、記事がごちゃごちゃしているように感じてしまうんです。

じゅん

アコーディオンブロックを使うと記事をスッキリと整理できて、必要な人に情報を届けられるよう調整できますよ。

ブログ記事やウェブサイトを訪れた人に、詳しく説明しようとすればするほど文字数がかさんでしまい、読み難くなってしまうと感じることはないでしょうか。

アコーディオンブロックは読者が必要に応じて情報を展開できるため、必要な情報が埋もれず記事全体を見やすく整理するのに役立ちます。

そこでこの記事では、JIN:Rのアコーディオンブロックの使い方と設定項目のアレンジをサンプルをたくさん使って紹介していきます。

この記事を読めば、アコーディオンブロックを使った情報整理の方法やFAQの作り方がわかります。

ウェブページの中に情報が散らばらずスッキリと整理して、情報を必要とする人に届けて、アピールしたいことを埋もれさせたくない方は、ぜひ最後まで読んでいってください。

もし「JIN:R」にしようか迷っている方には、あなたの決断を後押しする情報になると思います。

アコーディオンのクイックガイド

アコーディオンは詳細を閉じた状態で表示され、読者がクリックすることで詳細部分が開くブロックです。

アコーディオンブロックの詳細は、クリックのアクションを起こした人だけが目にする情報です。

• 詳細説明が必要な人だけに向けた情報
• 気になる人がいるかもしれない補足情報
• ページの主題からは少し逸れるけど伝えたい情報

このような全員が必要としていない情報を表示するのに適しています。

知っている人は読み飛ばしたくなる情報を省略したり、専門的と感じて分からない人には事細かく説明したりと両方に対応した幅広い読者に寄り添う記事になります。

選択できる設定項目

JIN:Rのアコーディオンブロックで選択できる項目は4つです。

デザイン選択は、アウトラインとベタ塗りの2種類あります。

タイプ選択は、ベーシックとQA形式の2種類です。QA形式では、アコーディオンのタイトルに「Q」と表示されます。ベーシックと動きは同じで、答えはクリックしないと表示されないです。

アコーディオンの色は、アウトラインとベタ塗りの色を選択します。白が多めの淡い系の8色とテーマカラーと文字色から選べます。

アコーディオンのタイトルの色は、初めから表示されているタイトル部分の文字の色を選択します。ライト系の８色とテーマカラーと文字色から選びます。

アコーディオンとタイトルの色は、それぞれ自由に選んで設定もできます。

アイテム項目の個数は、アコーディオンの親ブロックの中で自由に増やせます。

たくさん設定項目があってややこしいように思いますが、細かく選ばなくても初期設定が実用レベルになっているので安心してください。

デザインパターン一覧

JIN:Rのアコーディオンで設定項目を変更したデザインパターンをご紹介していきます。

まず、デザイン選択：アウトライン、タイプ選択：ベーシック、色：変更なし です。

最も標準的な設定です。

次は、デザイン選択：アウトライン、タイプ選択：QA形式、色：変更なし です。

次に、デザイン選択：ベタ塗り、タイプ選択：ベーシック、色：変更なし です。

次に、デザイン選択：ベタ塗り、タイプ選択：QA形式、色：変更なし です。

次は、デザイン選択：アウトライン、タイプ選択：ベーシック、色：変更 です。

プリセットで入っている色から選びました。

次は、デザイン選択：ベタ塗り、タイプ選択：QA形式、色：変更 です。

プリセットで入っている色と当サイトのテーマカラーに変更しました。

最後は、デザイン選択：アウトライン、タイプ選択：QA形式、色：変更 です。

プリセットで準備されている色から選びました。アイテム項目の数は、ポンポンとクリックだけで追加できます。

多彩なアコーディオンブロックの中から抜粋しましたが、表示イメージを膨らませるサポートになりましたでしょうか。

アコーディオンをアレンジした使い方

私が思う「アコーディオン」ブロックでおすすめの使い方をご紹介します。

オリジナルブロック単独の設定

アコーディオンでは、基本的にテキスト（段落ブロック）を使って詳細説明します。

パーソナルトレーニングの料金表をイメージしました。料金を知りたい又は確認したいだけの人と、サービスの内容まで知りたい人のニーズに対応しています。

ブロックを組み合わせて使う場合

アコーディオンに、テキストと背景、ボタンのブロックを設置しています。

詳細にあるブロックは、他のページでも使えるPRエリアと一緒の組み合わせです。でも、アコーディオンの中に隠すことで、好奇心を刺激し興味を持ってもらうことを目的にしています。

アコーディオンに、テキストとブログカードのブロックを置き内部リンクを設定しています。

詳細にあるテキストで質問に対して最低限の回答をしてから、さらに知りたい人に別の記事を紹介します。記事をスッキリと読みやすさを保ちながら、簡単に答えだけ知りたい人と詳しい情報を知りたい人の両方に対応できます。

「例」美味しいコーヒーの淹れる2大ポイント

アコーディオンに、タイムラインのブロックを設置しています。

アコーディオンのアイテムを増やすと箇条書きのようにも見えることを利用しました。サンプルのようにベタ塗りのデザインを選ぶと背景ブロックも使っているような雰囲気が出せます。

様々なレベルの読み手に合わせた説明に使います。基本を知っている人は読み飛ばせるけれど、初めての人は読みたいチェックポイントをタイムラインで表示しています。

PCのみ表示に設定したテキスト（段落ブロック）です。パソコンからサイトを訪れてくれた方に向けた説明を文章にして説明していきます。スマートフォンで見ていただくと、アコーディオンが表示されています。

上記は、PCとスマホで見えるボックスが異なるように設定しています。JIN:Rのブロックは基本的にPCとスマホの全ての端末で表示されますが、それをPCのみ表示とスマホのみ表示に設定も可能です。

スマホで見たときはテキストを非表示してその内容をアコーディオンブロックにする方法で、情報量をコントロールしページをスッキリとできます。スクロール量を減らすことになり、スマホユーザーの読みやすさ向上を狙っています。

JIN:RにはこのWordPressテーマを開発した方々がデザインした、コードをコピーするだけで使えるデザイン見本帳があります。こちらも超助かる便利メニューなので活用してくださいね。

アコーディオンブロックの基本的な使い方

「アコーディオン」ブロックの使い方を説明していきます。設定項目は、右サイドバーに表示される内容を選択するだけで完了です。

アコーディオンブロックを設置する

「/アコーディオン」と入力します。

ブロックの設定項目を選ぶ

デザイン選択やタイプ選択、アコーディオンの色、アコーディオンのタイトルの色を右サイドバーから選びます。

アコーディオンアイテムを増やす

親ブロックを選択した状態で、「＋」をクリックする。

アコーディオンのタイトルと詳細を入力する

最初から表示されるタイトルを入力し、クリックされて展開する詳細にブロックを設置します。

まとめ：巧みな情報整理で読みやすい記事にしよう

WordPressテーマ JIN:Rのオリジナルブロック「アコーディオン」の使い方とメリットを紹介しました。

アコーディオンの詳細部分は読者がクリックすることで展開され初めて表示されるため、全てを書き並べず必要な人だけが詳細を確認できます。ブログ記事がスッキリとした印象を保ちながら幅広い読者に向けた情報を伝えられる効果があります。

知識がある読者は基本的な情報を読み飛ばし、詳細を求める読者や初心者は必要に応じてより深い情報にアクセスできるからです。

「よくある質問」のセクションを作るのにも対応したデザインが選択可能です。

この記事がJIN:Rをもうすでにお使いの方にも、検討されている方にもお役に立てば幸いです。

豊富なオリジナルブロックでサイト運営をサポート

JIN:R 公式

じゅん

ブロガー

Contact

2020年9月から細々とブログを書き始め、現在2つのブログ運営中です。
主に、JIN:R購入者限定コミュニティ「JIN BLOG CAMP」 で学びを得ています。
元々、ITやWeb、デザインとは縁遠い、普通の会社員だった私でも、JINやJUN:Rに出会ったことでこんなに整ったブログが作れて感動です。