Webサイトでサービスの特徴や、料金プランの注意点などを箇条書きにする際、どのように設定していますか？
テキストエディターを使って、「・」や「※」や数字など、文頭に手入力している方も多いのではないでしょうか。
実はそれ、スマホで見た時に文字が折り返されると、2行目の頭が揃わず、どうしても「素人っぽい」印象を与えてしまいます。
そこで今回は、箇条書きをワンランク上のデザインに引き上げる、Elementorでの「アイコンリスト」ウィジェット活用法をご紹介します！
なぜテキストエディターの箇条書きはNG？
テキストエディターで箇条書きを作ると、以下のような問題が起こりやすくなります。
⚫︎ スマホ表示で崩れる： 文章が長くなって改行された時、文頭の「・」の下に文字が来てしまい、非常に読みにくくなります。
⚫︎ デザインが単調： アイコンがテキストと同じ色・サイズになるため、重要なポイントが目立ちません。
⚫︎ 調整が面倒： 行間やアイコンと文字の隙間を細かく調整できません。
これらの悩みをすべて一瞬で解決してくれるのが、アイコンリストウィジェットです。
アイコンリストウィジェットのメリットと基本操作
「アイコンリスト」は、その名の通りアイコン＋テキストのリストを簡単に作れるウィジェットです。
【基本の設定手順】
ウィジェットパネルからアイコンリストを探し、配置したいコンテナ（セクション）にドラッグ＆ドロップします。
コンテンツタブのアイテムに、リストの項目が縦に並んでいます。
各アイテムを開き、テキストに箇条書きにしたい文章を入力します。
その下にあるアイコンをクリックすると、数多くの種類があるアイコンライブラリから、チェックマークや矢印など好きなのマークを選ぶことができます。
これだけで、PCでもスマホでも、絶対に文頭が揃う美しいリストの完成です！
プロっぽく仕上げるスタイル調整のポイント
アイコンリストを配置したら、スタイルタブでデザインを整えましょう。ここを少し工夫するだけで、見栄えが劇的に変わります。
【おすすめの調整ポイント3選】
⚫︎ アイコンの色を変える：
アイコンだけを、サイトのテーマカラー（赤や青など）に変更しましょう。テキストは黒やグレーのままにしておくことで、メリハリが出てパッと見て分かりやすくなります。
⚫︎ アイコンのサイズをテキストに合わせる：
アイコンが大きすぎたり小さすぎたりすると不格好です。スタイル＞アイコン＞サイズで、隣のテキストと同じくらいの大きさに調整しましょう。
⚫︎ アイコンとテキストの隙間を調整する：
スタイル＞リスト＞間隔で、アイコンと文字の間の余白を調整できます。少し広めに取ると、ゆったりと読みやすいリストになります。
【応用】箇条書きではない意外な活用法
アイコンリストは、単なる箇条書き以外にも様々な場面で活躍します。
・フッターのメニューリンクとして
各アイテムには個別にリンクを設定できます。矢印アイコン（＞）をつけて、フッターの会社概要、お問い合わせなどのメニューを作るのに最適です。
・連絡先リストとして
電話のアイコンの横に電話番号、メールのアイコンの横にメールアドレスを入力すれば、美しい連絡先エリアが完成します。
・横並びのメニューとして
コンテンツタブ＞レイアウトをインライン（横並び）に変更すると、リストが横一列に並びます。SNSのリンク集や、ちょっとした横並びメニューを作りたい時に非常に便利です。
まとめ
情報を整理して伝えるために、箇条書きは必須のデザインパーツです。
テキストエディタで「・」を手打ちするのを卒業して、「アイコンリスト」ウィジェットを活用するだけで、サイト全体のクオリティが一段階上がります。
設定もとても簡単なので、特徴一覧や注意書きなど、箇条書きを使っている部分はぜひ「アイコンリスト」に置き換えてみてください！
