「ブログのタグクラウドを、ただのタグ一覧ではなく、もっとデザインとして見せられないか」
以前から、そう考えていました。
タグクラウドは便利です。記事に使っているタグを一覧で表示でき、読者が興味のあるテーマを探しやすくなります。しかし、一般的なタグクラウドはどうしても「リンクの集合」に見えやすく、デザインとしては少し地味になりがちです。
そこで今回は、WordPressテーマ「SWELL」で使うタグクラウドを、タイポグラフィ風に図形の中へ配置してみました。
作成した形は、四角形、円形、逆正三角形、星形、T字です。
かなり満足できる仕上がりになりました。
タグクラウドというより、ブログ内の言葉を使って作る「文字のオブジェ」のような表示です。
前回記事
タグクラウドを図形の中に入れるという発想
今回やりたかったことは、単にタグを並べることではありません。
タグそのものを使って、ひとつの形を作ることです。
ブログには、そのサイトらしさを表す言葉があります。
「ライフスタイル」「やりたいこと」「自己理解」「WordPress」「ガジェット」など、タグにはそのブログが積み重ねてきたテーマが出ます。
そのタグをただ横に並べるのではなく、四角形や円形、星形などの中に詰め込むことで、タグクラウドがサイトの雰囲気を表すデザインになります。
つまり、これはタグ一覧でありながら、同時にブログの世界観を見せるパーツでもあります。
整列表示型とランダム型を作成
各図形には、整列表示型とランダム型を用意しました。整列表示型は、各タグがほぼ決まった位置に配置されます。そのため、形が安定して見えます。図形としての完成度を重視する場合は、整列表示型の方が向いています。
一方で、ランダム型はアクセスするごとにタグの位置が再配置されます。毎回少しずつ見た目が変わるので、動きのあるタグクラウドになります。同じタグを使っていても、配置が変わるだけで印象はかなり違います。
整列表示型は「完成された図形」、ランダム型は「毎回変化する文字のかたまり」という感じです。
スマホ表示について
このタグクラウドは、スマホでも表示できます。
ただし、スマホ表示では画面幅に合わせて縮小されるため、細かいタグの見え方が変わります。そのため、図形としての本来の表示を確認する場合は、ブラウザのPC表示で見るのがおすすめです。
スマホでは「全体の雰囲気を見る表示」、PC表示では「本来のデザインを見る表示」という感じです。
Chromeの場合は、メニューからPC版サイトを表示すると確認しやすいです。
表示に少し時間がかかる点は今後の課題
今回のタグクラウドは、見た目としてはかなり満足しています。
ただし、問題もあります。
それは、表示に若干時間がかかることです。
タグの数、文字サイズ、図形の形、ランダム配置などを計算して表示するため、通常のタグクラウドよりも処理が重くなります。
特にランダム型は、アクセスするたびに配置が変わるため、表示速度とのバランスが課題になります。このあたりは今後、タグ数を絞る、配置処理を軽くする、キャッシュを使うなど、改善できる部分がありそうです。今回は、一部の図形のランダム型は削除しました。
タグクラウドはもっと表現にできる
今回作成して感じたのは、タグクラウドは単なるナビゲーションでは終わらないということです。もちろん、タグクラウドの基本的な役割は、読者が記事を探しやすくすることです。しかし、タグはサイトのテーマを表す言葉でもあります。その言葉を使って形を作れば、タグクラウドはサイトの個性を見せるデザインになります。
- 四角形なら安定感
- 円形ならやわらかさ
- 逆正三角形なら動き
- 星形なら遊び心
- T字ならタイポグラフィ感
同じタグでも、入れる形によって印象は変わります。
各図形表示
以下が各図形の表示です。
四角形表示
四角形は、もっとも安定感のある形です。
タグをきれいに詰め込むと、文字で作ったブロックのように見えます。ブログのサイドバーやフッターにも使いやすく、図形としても崩れにくいです。
四角形はシンプルですが、そのぶんタグの密度や文字サイズの違いがよく見えます。タグクラウドとしての実用性と、デザインとしての見やすさのバランスが取りやすい形だと思います。
正四角形と縦長方形があります。
正四角形
整列表示型
ランダム型
縦長方形表示
整列表示型
ランダム型
円形表示
円形は、四角形よりもやわらかい印象になります。
タグが円の中に収まることで、まとまりのあるデザインになります。角がないのが特徴です。
ただし、円形は外側のラインをきれいに見せるのが意外と難しいです。タグの長さや文字サイズによって、外周の見え方が変わります。
それでも、完成した時の見た目はかなり面白く、タグクラウドというよりロゴのような雰囲気も出せます。
整列表示型
逆正三角形表示
逆正三角形は、下に向かって細くなる形です。
四角形や円形に比べると、かなり個性的な印象になります。上部に大きめのタグを配置し、下に向かって小さなタグを詰めていくことで、図形としての流れが出やすいです。ただの装飾ではなく、視線の流れを作れる形だと感じました。上から下へ自然に目が動くので、見た目にも少し動きがあります。
タグクラウドに「形の変化」を出したい場合に面白い図形です。
整列表示型
星形表示
星形は、今回作成した中でも遊び心のある形です。
タグクラウドで星形を作ると、かなり目を引きます。ブログパーツというより、ひとつのデザイン作品に近い印象になります。
ただし、星形は角の部分が多いため、タグをきれいに収めるのが難しいです。タグの長さによっては、うまく入らなかったり、形が崩れやすくなったりします。そのため、タグ数は制限しています。
星形は完成した時のインパクトがあり、少し特別感のある表示になります。
整列表示型
T字表示
T字は、文字そのものを図形にしたような形です。
タイポグラフィ風のタグクラウドとしては、かなり相性が良いと感じました。タグで「T」の形を作ることで、文字が文字を構成しているような面白さがあります。
四角形や円形のような一般的な図形とは違い、T字はよりデザイン寄りです。ブログのテーマやサイト名に関係する文字を使えば、もっと個性的な見せ方ができそうです。たとえば、サイト名の頭文字や、テーマを象徴するアルファベットをタグクラウドで表現できれば、かなり面白いパーツになると思います。
全横表示
整列表示型
一番小さいタグだけ横表示
整列表示型
まとめ
長い間、タグクラウドを図形の中に表示できないかと考えていました。もしそれができれば、「ただのタイポグラフィ調ではなく、タイポグラフィと言ってもよいデザインになるのではないか」、そんな感覚がありました。
そして今回、四角形、円形、逆正三角形、星形、T字という複数の形で、タグクラウドを図形として表示することができました。
まだ表示速度などの課題はあります。それでも、ブログのタグを使って形を作るという表現は、かなり可能性があると感じています。今後は、さらに任意の形で表示できるように調整していきたいです。
たとえば、サイトのテーマに合わせた図形、ブログ名の頭文字、ジャンルを象徴するマークなどを、タグクラウドで作れるようになれば面白いでしょう。
タグクラウドは、ただのリンク一覧ではありません。ブログの中にある言葉を集めた、サイトの小さな地図です。その地図をどんな形で見せるか。そこにも、ブログの表現が出るのだと思います。
コメント