2008.04.03

タイポグラフィを用いたインタラクティブアートサイト

イメージ：タイポグラフィを用いたインタラクティブアートサイト

フォントブログ ANNEX ♯1
山田晃輔（PETITBOYS）

バックナンバー

皆さん、はじめまして。PETITBOYS（プチボーイズ）として、都内を拠点に、ウェブデザイン・ロゴデザインなど各種クリエイティブ業務を行っているヤマダといいます。

このたびwithDにて、私が運営しているフォントブログの特別版として、記事を書かせていただくことになりました。 フォントブログと合わせて、皆さんに楽しんでいただければ大変うれしく思います。よろしくお願いします。

タイポグラフィとインタラクティブの融合

私自身、現在ウェブデザイナーとして仕事をしていますが、ウェブの世界は進歩が著しく、日々新しい技術が登場しています。 皆さんもFlashや映像を駆使したインタラクティブなサイトやオンラインで制作したり共有できたりするようなサイトをご覧になったことがあると思います。

今回は、そのような新しい技術とタイポグラフィを融合させた実験的なサイト、とりわけユーザーがサイトにアクセスさえすれば誰でも簡単に楽しむことができるような 「タイポグラフィを用いたインタラクティブアートサイト」を3つピックアップして紹介したいと思います。

テキストデータから音楽データを生成するジェネレータ

1つ目のサイトは「P22 Music Text Composition Generator」。 P22とは、emigreやT26などと同様、1994年設立のフォントを扱う会社の１つです。 そのP22がテキストから音楽を作成できるジェネレータを公開しました。

「え？何それ？」と思うかもしれません。使い方は至って簡単。まずは試してみましょう。

  • “Your Text”に適当な英文を入力
  • “File Name”にアルファベットで任意のファイル名を入力
  • “BPM”でテンポを設定
  • “Instrument”で楽器を設定
  • “Generate Your Music”で作成

わずか5つのステップで、入力したテキストから譜面と音楽データ（MIDI）が生成されます。 どんな曲ができ上がりましたか？

P22 Music Text Composition Generator 1　P22 Music Text Composition Generator 2
P22 Music Text Composition Generator

もちろんこれはお遊びツールですので、「あのニュース記事が恐ろしい曲になった！」とか「あの単語を入力するとあの曲のフレーズになる！」といった軽い気持ちで遊んでみてください。 ちなみに作成した譜面はPDFで、曲はMIDIデータでダウンロードすることも可能です。

インパクト大！全身全霊な？ 手作りメッセージを送ろう

2つ目のサイトは、通信会社Sprintが提供する「Sprint Sweets」のコンテンツから（Send a handmade e-card をクリック）。 アルファベットを入力してみてください。 なんとその文字がLEDライトを用いて作り出す人の動画として表示されます！

文字によって、1人だったり、2人だったり、3人だったり、文字によってはイスを用いたりと、 とにかく一生懸命体を動かして文字を作り出しています（“LOVE”という単語を入れると、次の単語の直前にハートマークが追加されるみたいです）。

Sprint Sweets 1　Sprint Sweets 2
Sprint Sweets

一通り文字を入力したら“Preview E-Card”でプレビューしてみましょう。 “Send Card”ボタンを押してメールアドレス等を入力すると、E-Cardとして相手に送ることができます。

また設定項目として、Colorsではライトの色を8色の中から変更することもできます。 どんな文を作ったらよいか思い浮かばない人は、“Auto-Poet”から選んでみてはいかがでしょうか。

ちょっとひと休み：レンタルサーバに大規模な障害発生！

最近の話ですが、使っているレンタルサーバ会社が障害を引き起こしました。 ウェブサイトのほうは無事だったですが、メールサーバが何日間もまったく機能しない状態に…。 仕事でドメインも含めて使っているためホント参りました。

ドメインを移行しようにも、会社が大混乱のようで、なかなか連絡がつかない。 数日後、ようやくAuthCodeを発行してもらい移行手続きを行うことができました。 今回のような事件、実は2回目です。データ移行やドメイン移管は本当に面倒くさいですので皆さんも有事の際の対策を！

テキストが味のあるビットマップフォントに

3つ目のサイトは、スイスの「FONTSELF」です。 FONTSELFはテキストデータからビットマップフォントを生成するエンジンを開発しているプロジェクトで、 2008年3月28日現在、入力したテキストを好みのビットマップフォントに変換する「WRITE & MAIL」と、 RSSフィードを読み込んで、ニュースヘッドラインをビットマップフォントに変換る「NEWSMAKER」の2つが公開されています。

FONTSELF 1　FONTSELF 2
FONTSELF

FONTSELFプロジェクトは現在も進行中で、近々オンラインテキストエディタなるものをリリース予定だそうで、 最終的には、ユーザーが自由にビットマップフォントを作れるオンラインツールを目指しているようです。

今回は3つのサイトを紹介しましたが、いかがでしょうか？ 他にももっとユニークな実験的サイトがあると思いますし、これからも続々登場することでしょう。では、今月はこの辺で。

おすすめフォントの紹介：Kidwriting

P22 Music Text Composition Generator 1最後にフォントブログのほうでも不定期で行っているおすすめフォントの紹介です。 今回紹介するのは「Kidwriting」。その名の通り、子ども描いたような文字・イラストのフォントです。

とくにイラスト（Dingbats）のほうは、いかにも外国っぽいテイストですね。 日本のお子様はまずこんなイラストは描かないと思いますが…。

（PETITBOYS／ヤマダ コウスケ）

関連リンク

バックナンバー
PETITBOYS（プチボーイズ）
フォントブログ
P22 Music Text Composition Generator
P22 Fonts Online
Emigre Home
T.26 Digital Type Foundry
Sprint
Sprint Sweets
FONTSELF - A bitmap font & text engine
WRITE & MAIL
NEWSMAKER
Kidwriting font family（MyFonts）

山田晃輔さんプロフィール

約3年間勤めた都内の広告制作会社を退社し、2008年よりフリーランスとしての活動をはじめました。今月のひとこと：今まで知らない間に給料から引き抜かれていた税金の正体がわかって、衝撃を受けてしまいました。政治家のみなさん、国民の税金は大切に使ってくださいね。
http://www.petitboys.com/

このエントリーをブックマークする

このエントリーにトラックバックする

このエントリーのトラックバックURL
http://withd.jp/mt/mt-tb.cgi/2070

クリ博ナビ2011