WordPressテーマ「SWELL」でブログを運営していると、タグクラウドをもう少し印象的に見せたくなることがあります。
通常のタグクラウドは、タグ名を一覧で並べるシンプルな表示です。タグを探しやすいという意味では十分便利ですが、見た目としてはやや事務的に感じることもあります。
そこで今回は、タグを図形の形に沿って配置する、タイポグラフィー風のタグクラウドを紹介します。文字型のタグクラウドとは違い、今回は図形をテーマにした表示例です。使用した形は、● 丸、◆ ひし形、▶ 右三角、♥ ハート、♣ クラブ、➤ 矢印の6つです。
タグを単純に並べるのではなく、図形として見せることで、タグクラウドをデザイン要素の一つとして活用できます。
当記事を見ることによって、タイポグラフィー風のタグクラウドがどういうものかわかるでしょう。
※今回も表示例の紹介を目的としているため、コードの公開は控えます。タイポグラフィー風のタグクラウドを見る記事ということになります。
図形型タグクラウドとは
図形型タグクラウドは、タグを一定の形の中に配置し、全体としてひとつのマークのように見せる表示方法です。
一般的なタグクラウドは、タグの一覧を見せる役割が中心です。一方で図形型タグクラウドは、タグ一覧としての役割を持ちながら、見た目のアクセントにもなるのが特徴です。
たとえば、丸ならやわらかい印象になり、矢印なら動きのある印象になります。ハートなら感情や好みを連想させますし、クラブのような特徴的なマークなら、それだけで少し遊び心が出ます。
つまり、同じタグを使っていても、どの形に入れるかによって雰囲気が変わるということです。
図形型タグクラウドのよさ
図形型タグクラウドのよさは、単に「珍しい見た目になる」ことだけではありません。
まず、記事下やサイドバーに置いたときに、単なるタグ一覧よりも目に留まりやすくなります。サイトや記事のテーマに合わせて形を選べるため、ブログ全体の雰囲気づくりにも役立ちす。
さらに、文字型よりも図形型の方が、形が比較的わかりやすく、表示の安定感も出しやすい傾向があります。細かい調整は必要ですが、図形によってはかなり見栄えよくまとまります。
今回使用した6つの図形
今回は、次の6つの図形でタイポグラフィー風のタグクラウドを作成しました。
- ●： 丸
- ◆ ：ひし形
- ▶ ：右三角
- ♥ ：ハート
- ♣ ：クラブ
- ➤ ：矢印
それぞれ形の印象が異なるため、表示したときの見え方にも違いが出ます。ここからは、1つずつ特徴を見ていきます。
タイポグラフィー風タグクラウド「● 丸」
丸は、図形型タグクラウドの中でも特に使いやすい形です。角がないため、全体の印象がやわらかくなり、ブログのデザインにもなじみやすいです。主張しすぎないのに、普通のタグ一覧よりは見た目に特徴が出ます。
また、丸は外周が自然につながっているので、タグを中に収めやすく、形も比較的安定して見えます。タグ数が多い場合でも、全体としてまとまりやすいのが利点です。タグが少ないと中心部分に空きができます。
最初に試す図形としては、丸がかなり扱いやすいと感じます。
タイポグラフィー風タグクラウド「◆ ひし形」
ひし形は、丸や四角とは少し違う、デザイン性のある見た目になりやすい図形です。中央に広さがあり、上下左右の先端に向かって細くなっていくため、タグの大きさにメリハリが出やすくなります。中心部に大きめのタグ、周辺に小さめのタグが入ると、形としてまとまりやすいです。
ひし形は「整っているけれど少し動きがある」印象を作れます。単純な四角よりも変化があり、丸ほど柔らかすぎないため、ほどよく装飾感を出したい場合に向いています。
タイポグラフィー風タグクラウド「▶ 右三角」
右三角は、見るだけで進む方向や流れを連想しやすい図形です。そのため、行動、前進、変化、成長、チャレンジといったテーマの記事と相性がよいです。ブログの中でも、読者を次の行動へ促したい位置に置くと、視覚的な意味も持たせやすくなります。
ただし、三角形は先端が細くなるため、タグが入りにくい部分があります。特に先端まで形を出そうとすると、小さいタグの扱いが重要になります。形としてはわかりやすく、方向性を持ったタグクラウドとして印象に残りやすい図形です。
タイポグラフィー風タグクラウド「♥ ハート」
ハート型は、6つの中でも特に感情的な印象を持ちやすい図形です。「好きなこと」「趣味」「お気に入り」「気持ち」「自己表現」など、内面に関わるテーマとの相性がよく、見た目にも親しみやすさがあります。
ハートは上のくぼみと下の尖った部分があるため、丸や四角に比べるとやや調整が必要です。余白が多いと形がぼやけやすく、詰めすぎると見づらくなることがあります。それでも、うまくまとまると印象がかなり強く、タグクラウド自体をアイキャッチのように見せやすい図形です。
タイポグラフィー風タグクラウド「♣ クラブ」
クラブは、トランプのマークとして知られる図形で、丸が3つ集まり、下に軸が伸びる特徴的な形をしています。丸や四角よりも個性があり、見た目に少し遊び心が出ます。そのため、雑記ブログや趣味系の記事とも相性がよく、ブログに堅すぎない雰囲気を加えたいときに面白い形です。
クラブ型は構造が少し複雑なので、上部の丸い3つのふくらみと、下の持ち手部分のバランスを取る必要があります。ただ、そのぶん、他の図形にはない独特の見た目になります。ありきたりな形では少し物足りないときに使うと、印象に残りやすいです。
タイポグラフィー風タグクラウド「➤ 矢印」
矢印は、図形として非常に意味がわかりやすい形です。読む人に「次へ」「進む」「向かう」といったイメージを与えやすいため、記事導線との相性がよいのが特徴です。たとえば、関連記事の前、まとめの下、行動を促したい箇所などに置くと、自然に視線を流しやすくなります。
矢印はブログ全体の装飾として使っても、意味が伝わりやすいのが利点です。見た目に変化をつけつつ、ただの飾りで終わらない形ともいえます。先端部分と後方の軸部分の差があるため、レイアウトの調整は必要ですが、完成すると動きのあるタグクラウドとして表現できます。
図形ごとに向いている雰囲気は違う
今回の6つを見てもわかるように、図形によってタグクラウドの印象はかなり変わります。
- ● 丸：やわらかい、安定、親しみやすい
- ◆ ひし形：整った印象、少しデザイン的
- ▶ 右三角：前進、行動、方向性
- ♥ ハート：感情、好み、自己表現
- ♣ クラブ：個性的、遊び心
- ➤ 矢印：導線、動き、次への流れ
このように、単に図形の違いというだけではなく、記事やサイトの雰囲気と結びつけて使えるのが面白いところです。
まとめ
今回は、SWELLで使える自作カスタマイズとして、図形型のタイポグラフィー風タグクラウドを紹介しました。
使用した図形は、次の6つです。
- ● 丸
- ◆ ひし形
- ▶ 右三角
- ♥ ハート
- ♣ クラブ
- ➤ 矢印
通常のタグクラウドは、タグを一覧で見せる役割が中心です。一方で図形型タグクラウドは、タグの情報を見せながら、ブログの見た目にも変化を加えられるのが特徴です。
やわらかく見せたいなら丸、動きを出したいなら矢印、感情的な雰囲気ならハート、少し個性を出したいならクラブ、といったように、図形によって使い分けることもできます。
タグクラウドを単なる一覧で終わらせず、デザイン要素として活用したい場合、図形型の表示は面白い選択肢の一つです。
コメント