タイトル

オシャレなサイトのリストのマークに使えそうな素材まとめ


何かリストを作ろうと思った時、どう表示されますか?
楽に「・」や「●」、「◆」などで表す方も多いのではないでしょうか。
ですが、それでは少々味気ないですよね。
今回はそんな時に使えるリストマークを集めました。

花
http://bluegreen.jp/sozai/list/flower/index.html
カラフルで優しい色合いの素材です。
全体をパステル調の優しいイメージに仕上げたい時にいかがでしょうか。

 

デザイン素材.com

デザイン素材
http://designsozai.com/item/web/listmark/
とてもシンプルなタイプのリストマークです。
色もカラフルに揃っているので重宝するでしょう。

 

チェック素材その2

チェック素材その2
http://dots-design.com/2009/02/check2.html
チェックタイプの素材です。
リスト中のチェックしたいものなどへ使えます。

 

癒しとやすらぎのフリー素材

癒しとやすらぎのフリー素材
http://www.yasuragian.com/icon1-1.htm
色は偏りがちですが、動きのあるアニメーション素材です。
動きがあると目がいくので目立たせたい場合に良いですね。

 

e-素材web 鍵盤

e-素材web-kenban
http://homepage2.nifty.com/yaslink/Listmark/Listmark4/Listmark4.htm
優しい色合いの鍵盤の素材です。
音楽系のリストに使うとマッチしていいですね。

 

e-素材web 木

e-素材web-tree
http://homepage2.nifty.com/yaslink/Listmark/Listmark2/Listmark2.htm
シンプルですが、4タイプの木のリストマーク。
自然系のサイトによく合います。

 

e-素材web 家

e-素材web-house
http://homepage2.nifty.com/yaslink/Listmark/Listmark2/Listmark2.htm
色も6種類あって、小さめの素材です。
子供向けのカラフルなサイトによく合うのではないでしょうか。

 

e-素材web 国旗

e-素材web-kokki
http://homepage2.nifty.com/yaslink/Listmark/Listmark5/Listmark5.htm
種類はあまりありませんが、国旗の小さいタイプの素材です。
外国系に関するもののリストなどにいかがでしょうか。

 

Fairy Tail

Fairy Tail
http://fairy-tail.com/graphics/icon/list/index.html
はっきりとした色合いのものが多いです。
また、白背景用だけでなく、黒背景用も準備されているので非常に便利です。

 

POMO①

POMO①
http://pomo.vis.ne.jp/icon/icon_favicon01.html
まるで地図記号のようのリストマークです。
様々な種類があるので、予定のようなリストの際に使用できます。

 

POMO②

POMO②
http://pomo.vis.ne.jp/icon/icon_favicon01.html
カラフルな旗の素材です。
順位付などするようなリストに最適ですね。

 

今日もわんパグ

イラストwanpug素材ブログ
http://wanpagu.undo.jp/s40.html
素材サイトの中でも有名なわんパグさんの素材です。
デザインの雰囲気など子供が好みそうな可愛らしい素材です。

 

Mini Flags of the world

Mini Flags of the world
http://icons.primail.ch/
かなり小さめのアイコンですが238国分あります。
これだけ揃っていれば国ごとで分けるようなリストに大活躍です。

 

Small mini Ecommerce Shopping icons – bullets

Small mini Ecommerce Shopping icons - bullets
http://icons.primail.ch/
小さくてもしっかり作られた買い物系アイコンです。
カートの種類はなんと41個もあります。

 

Mini Microsoft Office 2007 icons

Mini Microsoft Office 2007 icons
http://icons.primail.ch/
見慣れたオフィス系ミニアイコン素材です。
データのリストを作る際に、データの形式が何かを現せたりできて便利です。

 

LITTLE CHERRY STONE home

LITTLE CHERRY STONE home
http://www.eonet.ne.jp/~lcs/material/icon/home_1.html
1つ1つがとても可愛いですね。
優しい色合いなのでパステル調のところで使うと全体が落ち着きます。

 

LITTLE CHERRY STONE music

LITTLE CHERRY STONE music
http://www.eonet.ne.jp/~lcs/material/icon/music_1.html
優しい雰囲気の可愛らしいアイコン素材です。
アニメーション付なので音符によく合ってリズミカルな印象を与えます。

 

ばじねこ茶屋

ばじねこ茶屋
http://basilcat.com/archives/tag/listmark
シンプルなものからポップなものまでいろいろ揃っています。
色もはっきりとしていてカラフルでいいですね。

 

ツカエル素材

ツカエル素材
http://muryosozai.com/sozai/icon/listmark.html
はっきりとした色合いから優しい色合いのものまで、丸と四角のものがあります。
1番上のリストマークは透明感と立体感があって目立ちます。

 

ハート形のリストマーク

ハート形のリストマーク
http://binta.missile.jp/sozai/archives/77
シンプルながら可愛いハートです。
こちらは16×16ですが、32×32サイズもあり、透過処理されているものもあります。

 

umisuke’s BuhiBuhi-web

umisuke's BuhiBuhi-web
http://buhibuhi-web.jp/sozai_listmark.html
シンプルな四角なリストマークで色合いは寒色系に寄っている印象です。
四角と言っても網目模様や影つきなどあり使い分け出来ます。

 

Tool-House

Tool-House
http://php.tool-house.info/icon/list.html
まるで顔のようにも見えるリストマークが面白いです。
どことなく忍者の顔のようなものをイメージしてしまいます。

 

ピカピカマーク2

ピカピカマーク2http://lazbiz.style.coocan.jp/materialflame.html
きらきらと綺麗なリストマークです。
こちらの素材サイトの利用規約は緩く使いやすいのがいいですね。

 

クルクルお花マーク

クルクルお花マーク
http://lazbiz.style.coocan.jp/materialflame.html
アニメーション付きの花のマークです。
お花がくるくると回って可愛いですし、カラーが豊富なのもいいですね。

 

王冠アイコン

王冠アイコン
http://sozai.akuseru-design.com/category/sozai/point/page/4/
王冠でリストを作成すると言えばランキングが真っ先に思い浮かぶのではないでしょうか。
金銀銅の3種類もあるので、ランキングリストにうってつけと言えます。

電話アイコン

電話アイコン
http://sozai.akuseru-design.com/category/sozai/point/page/4/
電話アイコンと言えばやはり電話番号が続くイメージですよね。
連絡先リストのぴったりです。

 

無料素材倶楽部

無料素材倶楽部
http://sozai.7gates.net/0400/0402/?limit=14&offset=14
あじさいとあさがおのお花のアイコンです。
花が混ざることで華やかに仕上がります。

 

和風素材の篆刻素材AOI ブログ(旧)

和風素材の篆刻素材AOI ブログ(旧)
http://sozai.paper.boy.jp/?eid=364467
とても小さ目の素材ですが、和風系素材もあります。
和風系サイトにはぴったりですね。

 

Design Leaves

Design Leaves
http://designleaves.y-com.info/list.php?p_page=0
どちらかといえば色が暗めの重みがあります。
落ち着いた色合いのサイトでリストを作成する際に落ち着きのあるまとまりになるでしょう。

 

ICON HOIHOI

ICON HOIHOI
http://iconhoihoi.oops.jp/
自然系アイコンなど、豊富なアイコンが揃っています。
状況に合わせて使い分けることができ、非常に便利です。

 

さいごに

今回は様々なリストマークに使える素材をご紹介しましたが、いかがだったでしょうか。
リストマークを使うだけで、シンプルなページがおしゃれに仕上がります。
様々なタイプのものがあるので用途にあったものを選ぶこともできますね。
利用の際には利用規約を十分に読んでからご利用するようにしましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


yuki

ウェブ制作に携わって15年。 様々な業種のサイトを制作してきました。 現在、フリーランスとして活動し、起業家ママの応援サイトMAMAStyle(http://mamastyle.yukiweb.jp/)を運営中!

Next Articleレスポンシブのサイトを作るなら覚えておきたいメディアクエリの書き方