コピペでOK！リストデザインサンプル14選

2025.09.17

リストデザインとは、Webページ上で箇条書きをするときに使うデザインのことです。

シンプルで使いやすいリストデザインは、実はSEOにも良い影響を与えることをご存じでしょうか？

リスト形式は情報が整理されていて、ユーザーが必要な内容を素早く把握できます。これにより、ページ滞在時間が伸びたり、直帰率が下がったりすることで、検索エンジンからの評価が上がる可能性が高まります。
ユーザーにとって見やすく、検索エンジンにとっても理解しやすいデザインが鍵です。

リストには、順序がない箇条書きの項目を表示する「ulタグ」と、順序がある番号付きの項目を表示する「olタグ」の2種類あります。

この記事では、弊社が実際に活用するリストデザインを紹介します。すぐに使えるデザインですので、ぜひ参考にしてみてください。

サイト運営の現状課題
把握できてますか？

課題がわからないまま
施策を進めていませんか？
「簡易チェックシート」で
現状の課題を整理して
今後の対策を明確にしましょう！
（初心者の方でもすぐに見直せます！）

サイト運営の全体像を俯瞰して確認できる
現状の課題がどこにあるか明確になる
今後やるべき施策の優先順位がつけやすい
初心者でも分かりやすい項目設定
PDF形式だからいつでも手元で確認可能！

まずは現状把握から始めましょう！

課題を整理することで、
施策の効果を最大化する
ことにつながります！

無料配布中

無料ダウンロードは
こちらから

目次

リストデザインを表示・アレンジする方法

リストデザインを作成するためには、基本的にHTMLとCSSを使用します。

まずCSS初心者に向けて、この記事で紹介するリストデザインを表示する方法とアレンジ方法をご紹介します。

HTML/CSSをよくご存じの方は、次のセクションからリストデザイン集を掲載しておりますので、そちらをご覧ください。

リストデザインを表示させる方法

① HTMLをコピペする

紹介しているHTMLをコピーして、リストを挿入したい箇所にペーストします。

② CSSをコピーする

HTML同様にコピーし、CSSを記述する場所にペーストしてください。

CSSを記述する場所は、Webサイト・管理方法によって異なります。
例）style.css、ページ内に直接入力など

③ レイアウトを調整する

基本的にコピペで使用できますが、Webサイトの状況によってはデザインが崩れる場合がありますので、必ず確認を行ってください。

リストデザインをアレンジする方法

色を変えたい

線や背景の色を変えたい場合、基本的には、コピーしたCSS記述のカラーコード（#〇〇〇〇〇〇）を変更すれば色が変わります。好みのカラーコードを探して、変更してみましょう。

カラーコードとは、HTMLやCSSで色を指定するための色の符号体系のことです。使いたい色を探す際は、以下のようなサイトが役立ちます。

点（・）の色を変えたい

リストの項目部分はそのままに、箇条書き記号の色のみを変えたい場合は、「::marker」の記述を追加します。

::markerは、リスト項目の記号や番号のアイコンを選択するCSS疑似要素です。色を変えるほか、記号の代わりにアイコンを付与することができます。

アイコンを使ったリストデザインはこちら

点以外のデザインにしたい

リストの記号や番号は、「list-style-type」を使って簡単にアレンジできます。

例）点を四角にしたいとき

例）点をいろはの順番にしたいとき

リスト - list-style-type: hiragana-iroha;の記述例

list-style-typeだけでできるアレンジ方法はほかにもあります。ぜひ試してみてください！

シンプルデザインのリスト

design 1
角丸枠リスト

HTML

/<ul class="list-design">
  <li>検索順位チェック</li>
  <li>エリア検索機能</li>
  <li>検索ボリューム</li>
  <li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  border: 2px solid #4c9ac0;
  border-radius: 20px;
  list-style-type: disc;
  margin: 20px auto;
  padding: 15px 20px 20px 35px;
}
.list-design li {
  margin-top: 10px;
}

design 2
上下区切り線のリスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  border-top: 2px solid #99bdde;
  border-bottom: 2px solid #99bdde;
  list-style-type: disc;
  margin: 20px 0;
  padding: 11px 20px 20px 35px;
}
.list-design li {
  margin-top: 10px;
}

design 3
ドット枠リスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  background: #ebf4f8;
  border: 5px dotted #99bdde;
  border-radius: 10px;
  list-style-type: disc;
  margin: 20px 0;
  padding: 15px 20px 20px 35px;
}
.list-design li {
  margin-top: 10px;
}

design 4
内側を枠で囲むリスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  background: #ebf4f8;
  border: 2px solid #99bdde;
  border-radius: 10px;
  box-shadow: 0 0 0px 10px #ebf4f8;
  list-style-type: disc;
  margin: 20px 0;
  padding: 15px 20px 20px 35px;
}
.list-design li {
  margin-top: 10px;
}

design 5
刺繍風リスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  background: #ebf4f8;
  border: 2px dashed #99bdde;
  border-radius: 10px;
  box-shadow: 0 0 0px 10px #ebf4f8;
  list-style-type: disc;
  margin: 20px 0;
  padding: 15px 20px 20px 35px;
}
.list-design li {
  margin-top: 10px;
}

design 6
影付きリスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  background: #ebf4f8;
  border: 2px dashed #99bdde;
  border-radius: 10px;
  box-shadow: 9px 9px 10px 0px #ededed;
  list-style-type: disc;
  margin: 20px 0;
  padding: 15px 20px 20px 35px;
}
.list-design li {
  margin-top: 10px;
}

『 box-shadow 』の値を変更すると、影の方向・濃さを変更できます！

項目で区切るリストデザイン

design 7
付箋紙風リスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  list-style: none;
  padding: 0;
}
.list-design li {
  background: #ebf4f8;
  border-left: 12px solid #99BDDE;
  margin-bottom: 3px;
  padding: .5em;
}

design 8
立体感のある付箋紙風リスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  list-style: none;
  padding: 0;
}
.list-design li {
  background: #ebf4f8;
  border-bottom: 2px solid #ededed;
  border-left: 12px solid #99bdde;
  margin-bottom: 5px;
  padding: .5em;
}

design 9
色が交互に変わる付箋紙風リスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  list-style: none;
  padding: 0;
}
.list-design li {
  background: #ebf4f8;
  border-bottom: 2px solid #ededed;
  border-left: 12px solid #99bdde;
  margin-bottom: 5px;
  padding: .5em;
}
.list-design li:nth-child(even) {
  background: #ebf8f0;
  border-left: 12px solid #99ded9;
}

色を交互に指定するときの『 nth-child 』の値は、以下を参考にしてみてください！

奇数項目の指定：「odd」、もしくは「2n+1」
偶数項目の指定：「even」、もしくは「2n」

アイコンを使ったリストデザイン

こちらでは、Font Awesomeを活用したリストデザインを紹介します。Font Awesomeの導入方法は公式サイトからも確認できます。

design 10
矢印アイコンリスト

HTML

/<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>

CSS

/.list-design {
  border: 2px solid #99bdde;
  border-radius: 10px;
  list-style: none;
  padding: 0 .8em .5em;
  position: relative;
}
.list-design li {
  border-bottom: 1px dashed #b9b9b9;
  margin-top: 10px;
  padding: .5em 0 .5em 2em;
}
.list-design li:before {
  color: #99bdde;
  content: "\f138";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  left : 1em;
  margin: 3px 0;
  position: absolute;
}
.list-design li:last-of-type {
  border-bottom: none;
}

無料のアイコン素材については、以下ページもぜひご参考にしてください！

タイトル付きのリストデザイン

design 11
タイトルが上についたリスト

HTML

/<p class="list-tit">GMO順位チェッカーとは</p>
<div class="list-box">
<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>
</div>

CSS

/.list-tit {
  background: #99bdde;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-weight: bold;
  font-size: .9em;
  line-height: 2;
  margin: 0;
  padding: .2em 1em;
  text-align: center;
  width: fit-content;
}
.list-box {
  border: 2px solid #99bdde;
  border-radius: 0 10px 10px 10px;
  line-height: 2;
  margin: 0 0 1.5em;
}
.list-design {
  list-style-type: disc;
}
.list-design li {
  margin-top: 10px;
}
.list-design li:first-of-type {
  margin-top: 0;
}
.list-design li::marker {
  color: #99bdde;
}

design 12
中央寄せタイトル付きリスト

HTML

/<div class="list-box">
<div class="tit-bor"><p class="list-tit">GMO順位チェッカーとは</p></div>
<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>
</div>

CSS

/.list-tit {
  background: #99bdde;
  border-radius: 6px 6px 0 0;
  color: #fff;
  font-weight: bold;
  font-size: .9em;
  line-height: 2;
  margin: 0;
  padding: .2em 1em;
  text-align: center;
  max-width: 100%;
}
.list-box {
  background: #ebf4f8;
  border: 2px solid #99bdde;
  border-radius: 10px;
  line-height: 2;
}
.list-design {
  list-style-type: disc;
}
.list-design li {
  margin-top: 10px;
}
.list-design li:first-of-type {
  margin-top: 0;
}
.list-design li::marker {
  color: #99bdde;
}

design 13
タイトルが枠内にあるリスト

HTML

/<div class="list-box">
<div class="tit-bor"><p class="list-tit">GMO順位チェッカーとは</p></div>
<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>
</div>

CSS

/.list-tit {
  background: #ebf4f8;
  display: inline-block;
  font-weight: bold;
  font-size: .9em;
  margin: 0 0 0 1.2em;
  padding: .5em;
}
.tit-bor {
  background: linear-gradient(90deg, #99bdde 0%, #99bdde 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 20%;
}
.list-box {
  background: #ebf4f8;
  border-radius: 10px;
  padding: .5em 0;
}
.list-design {
  list-style-type: disc;
}
.list-design li {
  margin-top: 10px;
}
.list-design li:first-of-type {
  margin-top: 0;
}
.list-design li::marker {
  color: #99bdde;
}

タイトルが短いときにおすすめです！

design 14
ノート風・影付きリスト

HTML

/<div class="list-box">
<div class="tit-bor"><p class="list-tit"><span>GMO順位チェッカーとは</span></p></div>
<ul class="list-design">
<li>検索順位チェック</li>
<li>エリア検索機能</li>
<li>検索ボリューム</li>
<li>ずっと無料で使える</li>
</ul>
</div>

CSS

/.list-tit {
  font-weight: bold;
  margin: 0;
  padding: .5em;
  text-align: center;
}
.list-tit span {
  background: linear-gradient(transparent 50%, #fffd3e 50%);
  padding: 0 6px;
}
.list-box {
  border-radius: 5px;
  box-shadow: 0 0 10px 1px #d7d7d7;
  padding: 1em;
}
.list-design {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0 .5em;
  width: initial;
}
.list-design li {
  border-bottom: 1px dashed #b9b9b9;
  padding: .5em 0;
}

コピペで使えるデザインサンプル一覧

SEOタイムズではリストデザインのほかにも、見出しやボタンリンク、画像加工のデザインを紹介しています。

コピペで使えるデザインを豊富に紹介していますので、ぜひご覧ください！

まとめ

この記事では、シンプルで使いやすいリストデザインを紹介しました。

そのまま利用することはもちろん、目次のリンクリストとして応用できるデザインもあります。ぜひWebサイトの雰囲気に合わせてさまざまな場面で活用してみてください。

この記事を書いた人

SEO Writer / SEOタイムズ編集部

SEOタイムズ編集部は、最新のSEOを軸にWebマーケティング全般を横断するプロフェッショナル集団です。チーム内には、検索アルゴリズムの研究者、エンジニア、生成AI・LLMOの利活用を研究するデータサイエンティスト、そしてGoogle 検索品質評価ガイドラインを深掘りしてきた専任リサーチャーが在籍。

これまでに累計 3,000本を超えるSEO記事を制作し、膨大な順位データを活かしたソリューションを提供してきました。上位表示の成功、失敗パターンを学び、CTR・CVR などの実測値と自社ツールから得られた独自ナレッジを日々アップデートしています。

【ミッション】
「検索体験を進化させる知識とツールを Web 担当者へ届ける」

生成AI が検索行動を塗り替える時代でも、私たちは “数字で裏付けた SEO ノウハウ” にこだわります。段階的な品質フローを経て、今すぐ取り組める戦略とツールを読者の皆様にお届けします！

前の記事へ

SEO記事一覧へ

次の記事へ