文字を入力するだけで自動でレイアウトしてポスター画像を作成可能な「TypeSlab」

テキストボックスに入力した文字を自動でレイアウトしてオシャレなポスター風に仕上げてくれるサービスが「TypeSlab」です。英語だけでなく日本語にも対応しているとのことなので、実際にTypeSlabでポスターを作ってみました。

TypeSlab - simple, shareable typographic posters
http://typeslab.com/

サイトを開くと下記画像のようなページが表示されます。ページ左側にある灰色のテキストボックスに文字を入力すると、右側のテキストボックスに入力した文字を自動的にレイアウトしてくれるようになっており、初期状態では「Whatever you write here will be rendered as a slab-type poster!～」というTypeSlabの使い方が入力されています。

フォントはデフォルトの「Avenir Next」や「Sigmar One」「Raleway」「Alfa Slab One」「Gentium Book Basic」「Playfair Display」から選べるようになっており、フォント名をクリックすると画面のフォントも変化します。

Sigmar Oneはポップな感じ。

Raleway。

Alfa Slab Oneは西部劇の賞金首のポスターで見るものに近いです。

斜体のGentium Book Basic。

装飾が施された斜体のPlayfair Display。

画面左下にはカラースキームが12種類並んでいて、作成したポスターの色を変更することも可能です。

試しに「JAFFA」をクリックして選択すると、画面の右側全面がアイコンと同じオレンジ色になりました。

基本操作を一通り確認したところで、実際にポスターを作成してみます。まずは「You」と打ち込むと……

かなり大きなサイズで「YOU」と表示されました。

残りの文章「You can't connect the dots looking forward; you can only connect them looking backwards」を入力します。なお、入力した文章はスティーブ・ジョブズの言葉です。

改行を一切せずに文章を入力すると、めちゃくちゃ小さい文字でレイアウトされました。これではポスターっぽくならないので……

「You can't」で改行してみます。

すると1行目の「You can't」だけ大きく表示されました。1行の文字数が少ないと文字サイズが大きくなり、反対に文字数が多いと文字サイズが小さくなるというわけ。

ということで以下のように1行に文字数が偏らないように改行してみます。

これで改行なしの場合より、かなりポスターっぽくなりました。ただし、文字がテキストボックスからはみ出てしまっています。

フォントをSigmar Oneにするとテキストボックスの中にきれいに収まりました。

Alfa Slab Oneだと少しかっこいい感じになります。

Playfair Displayでオシャレにしてみるのもアリです。

TypeSlabは日本語にも対応しているので、日本語でポスターを作成してみます。江戸時代前期の俳人・山口素堂の有名な句「目には青葉 山ほととぎす 初鰹」と入力。

やはり改行を入れないとただの文章に見えてしまいます。

ということで改行を入れてみました。

これでかなり良くなりましたが、デフォルトのAvenir Nextだと文字が重なってしまいます。

Ralewayでも少しだけ文字が重なっています。

いろいろ試した結果、Playfair Displayが日本語のレイアウトにぴったり。

背景を黒にするとスタイリッシュ。

水色にすると「初鰹」の文字がかなり映えます。

背景が赤で文字が黒だと力強い感じに。

今度は少し長めの「使った弾丸11811 吹っ飛んだ部屋148 絶体絶命97 破った約束35 爆破したビル12 そして便器1」という映画「リーサル・ウェポン4」のキャッチコピーを入力してみました。

Avenir Nextだと、先と同じく文字同士が重なってレイアウトに問題あり。

Alfa Slab Oneを選択すると、文字通しの重なりは気にならないレベルになりましたが、インパクトに欠けます。

Playfair Displayだとレイアウトには何も問題ありませんでした。日本語のレイアウトにはPlayfair Displayが適しているようです。

背景を赤色にして迫力のある感じに仕上げてみました。作成したポスターは画像アップロードサイトのImgurに投稿したり、ローカルに保存したりすることが可能です。今回は「Save Locally」をクリックしてローカルに保存してみます。

「ファイルを保存する」にチェックを入れて、「OK」をクリックするとローカルに保存可能です。ポスターはPNG形式の画像で保存され、作成したポスターのファイルサイズは30.6KBでした。