SWELLアコーディオンブロックの使い方と使用例を解説!
1-1.jpg)
え、アコーディオンブロックって何?
使う必要あるの?
こういった疑問を解決します。
SWELLのアコーディオンブロックは、情報を隠しておきたい場合、情報を閉じた方がユーザビリティが向上すると考えられる場合に大活躍してくれる便利ブロックです。



アコーディオンブロックを上手に使えば、ユーザビリティを向上させられますよ。
というわけで、さっそく見ていきましょう。
SWELLアコーディオンブロック
\タップしてみてね/
SWELLアコーディオンブロックの使い方
では、SWELLアコーディオンブロックの使い方を解説していきますね。


①ブロック追加をタップ。


②アコーディオンをタップする。


上側の「常にオープンになっている部分」と、下側の「隠される部分」へのテキスト入力を行う。
(隠されている部分はテキストに限らず、画像でも何でもオッケー。)


閉じた状態


タップして開くと・・・


こんな感じで、完成となります。
アコーディオンのおすすめ使用例
続いて、アコーディオンのおすすめ使用例をご紹介します。
内容としては下記です。
- 長くなってしまう内容を隠す
- Q&A(質疑応答)方式にして使う
一つずつ解説しますね。
①長くなってしまう内容を隠す
たとえば、下記のような感じです。
このような、Twitter埋め込みなどでも便利です。
Twitter埋め込みをたくさん並べると、人によっては「邪魔」に感じる場合も…
なので、アコーディオンを使って見たい人だけ見られるようにしておくというのがオススメです。
②Q&A(質疑応答)方式にする
たとえば、下記のような感じです。
といった感じで、Q&A形式にも使えます。
まとめ|SWELLアコーディオンブロックの使い方
いかがでしたでしょうか。
SWELLのアコーディオンブロックは、情報を隠しておきたい(閉じておきたい)場合に便利です。
人によっては見たくない情報などを隠すことで、ユーザビリティ向上にもなりますね。



画像がたくさんになってしまう場合も使えます。
画像が多いと表示が遅くなりますが、隠すと改善しますね。
というわけで、今回は以上です。
SWELLにしてない方は、下記から入手しましょう。




上記は、SWELLの「17種類の専用ブロック」「カスタマイズ方法」「爆速化」など、SWELLの使い方をまとめた記事となっています。
コメント