今回のテーマは「Web用アクセント」

ブログやWebサイトを作る際に、ちょっとしたアクセントは欠かすことができない。最近は様々なジャネレータやオープンソースの素材を組み合わせることで、サイトを華やかに演出できるテクニックが存在する。また、デザイン的な理由だけでなく、利用することによりユーザビリティを高めることもできる。

今回はそうした「アクセント」を作るためのWebサービスやオープンソース・ソフトウェア(OSS)を紹介したい。それぞれのサービスは単機能だが、それだけに何でもこなせる高度な画像編集ソフトウェアを使うよりも手早く、ごく簡単に作成できること間違いなしだ。

今回紹介するOSS・Webアプリ
『Navigation Tab Menu Generator CSS』 Web上でタブメニューを生成
『Warning Label Generator』 危険なラベルを作ります
『Flash Menu Labs』 Flashで多階層サイドメニューを作る
『Iconize』 リンク先のファイル種別をアイコン表示


スライダ調整でタブメニューをカンタン生成

名称 Navigation Tab Menu Generator CSS
URL http://www.tabsgenerator.com/

『Navigation Tab Menu Generator CSS』にアクセスすると、いきなりタブの作成画面が表示される。それだけに使い方はすぐに理解できるはずだ。高さ、幅、枠線の太さ、角の丸み、背景色、スタイル、向きや色などそれぞれのパラメータをスライドやカラーピッカーを使って変更できる。パラメータを変更したら、REFRESHボタンを押せばタブの画像に反映されるので、ちょうどいいものに仕上がったらDOWNLOADボタンを押せばよい。画像はPNG形式でダウンロードされる。

「Navigation Tab Menu Generator CSS」のトップページ。いきなりタブ作成になる

ごく簡単に使えるので、操作に迷うことはまずないだろう。文字をあらかじめ載せることはできないが、海外サービスなので日本語はまず使えないことを考えると、このほうがよいかもしれない。

スライダーやカラーピッカーを使うので、見た目にも分かりやすくタブを作成できる

サイトのナビゲーションとして、タブはよく使われる。それをわざわざ画像編集ソフトウェアで作っていると大変だし、そもそも持ち合わせていない場合もある。その点、Navigation Tab Menu Generator CSSはタブを作るという目的の上ではサイズの微調整など、とても柔軟に対応できて便利だ。



この先通行禁止、なラベルを生成する

名称 Warning Label Generator
URL http://www.warninglabelgenerator.com/

『Warning Label Generator』はお遊び的な画像生成Webアプリケーションだ。使い道としては、登録会員向けの入り口によいかもしれない。11種類の外観、45種類のアイコンと任意の文字(英語のみ)をそれぞれ組み合わせてラベルを作成する。WarningやDANGERなど、危険なコンテンツを意味するラベルを簡単に作成できる。

「Warning Label Generator」のトップページ。全体のラベル、アイコンを選ぶ

作成したラベルはすぐにダウンロードして使える。アイコンは、物々しいものからコメディなものまで多彩な揃えとなっている。ジョークとして使うこともできそうで、サイトのアクセントとして使ってみてほしい。

作成されたラベル。後は画像をダウンロードして好きな場所で利用できる

日本では2007年に脳内メーカーが流行り、その類似サービスも数多く登場した。Warning Label Generatorは2年くらい前からあるものだが、久々に触ってみても全く色褪せていなかった。自分だけの画像を作り出せるサービスというのは人気が高い。これからもまだまだ登場しそうだ。



多階層もOK! Flashでサイドメニューを作る

名称 Flash Menu Labs
URL http://www.flashmenulabs.com/opensource.htm

タブメニューと同じようによく使われるのがサイドメニューだろう。HTMLだけの場合もあるし、JavaScriptを組み合わせてインタラクティブに作るものなど、様々な種類が存在する。『Flash Menu Labs』はそのサイドメニューをFlashを使って実現するソフトウェアだ。

「Flash Menu Labs」のサンプル。XMLファイルの設定だけで自サイトに組み込むことができる

メニューの内容はXMLで作成し、Flashでそのファイルを読み込んでメニューを生成してくれる。メニューはマウスポインタをあわせると反転され、下から競り上がってくるように表示される。多階層メニューの作成にも対応しており、ユーザが一度のアクションで奥深くのコンテンツまでアクセスできるようになる。Flashは大抵のブラウザで利用できるので、これを使えばユーザビリティが高くなりそうだ。

メニューはマウスを当てると下からせりあがってきて表示される

ただ表示するだけでなく、ちょっとしたアクションを含んでいるところが格好いい。デザイン系のサイトをはじめ、幅広いサイトで対応できるライブラリだ。



踏んで困る前に……リンク先のファイル種別は?

名称 Iconize
URL http://pooliestudios.com/projects/iconize/

最近はPDFやMicrsoft Office文書ファイルを配布しているサイトが増えてきたが、それと気づかずリンクを踏むと、突然Webブラウザ内でファイルが表示されることがある。また、音楽や動画のリンクを踏んでしまい、突如音が流れ出した、なんて経験はないだろうか。

リンク先のコンテンツがわかっていればよいが、そうでない場合は困る。それが原因でサイトのPVが下がってしまうのも困り者だ。サイト開発者として『Iconize』を導入しておけばそうした問題はいくらか回避できる。

「Iconize」のトップページ。様々なファイル形式、IMによるアイコンの表示が行われる

Iconizeはリンク先のURLを調べて、その拡張子に応じてリンク先の横にアイコンを表示してくれる。各種Office文書ファイル、PDF、実行ファイル、画像やCSSなどの種別を判別する。MP3や動画のURLも表示してくれるし、「YouTube」や「Metacafe」などの動画系サービスへのリンクならムービーアイコン、「flickr」や「Zooomr」などの写真系サービスであれば画像アイコンを表示してくれる。

「YouTube」や「flickr」などのWebサービス向けのリンクにも対応している

あくまでも拡張子ベースなので、確実とは言い切れない。だが、ある程度わかるだけでも安心感があるだろう。HTML以外のコンテンツを扱っているサイトを運営している、または開発する場合は導入を検討してみてほしい。

いかがでしたか?

ここ数年でWebサービスの開発コストは相当低くなっていると思う。使うだけなのもよいが、やはり自分でサービスを提供してみるとさらに面白さが感じられるのがインターネットだ。個人であれ、企業であれWebサービスを提供するのであればこうしたライブラリを使って、ユーザビリティを高めてほしい。

また、こうしたジェネレータ系のサービス、ソフトウェアは全体的にウケがいい。使う側も便利に感じられていいが、ジェネレータ自体を提供してみるのもまた面白そうだ。

著者プロフィール
MOONGIFT 中津川 篤司(なかつがわ あつし)
1978年生まれ。オープンソース紹介サイト「MOONGIFT」管理人。プログラマ、SE、ITマネージャを経て、オープンソースのビジネス活用を推進する。現在は独立し、Webサービスのコンサルティング、プロデュースを行う。