2011年 次世代電子出版とWeb表現技術フォーラム in 京都へご来場いただいた皆様へ

ご清聴ありがとうございました。ご意見、ご質問がございましたら下記までご連絡ください。
@masakick


tategumi.js

クロスブラウザ対応の縦組Javascriptエンジン。

2006年に制作した日本旅館のサイト制作をきっかけに縦書きに挑戦したスクリプト。そのプロジェクトでは、CMSから生成されたXMLをパースしていたが、HTML内の文字を縦組に整形し直すスクリプトとしてgithubで公開中。

demo

山路を登りながら、こう考えた。

智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。

住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。

人の世を作ったものは神でもなければ鬼でもない。やはり向う三軒両隣りにちらちらするただの人である。ただの人が作った人の世が住みにくいからとて、越す国はあるまい。あれば人でなしの国へ行くばかりだ。人でなしの国は人の世よりもなお住みにくかろう。

越す事のならぬ世が住みにくければ、住みにくい所をどれほどか、寛容て、束の間の命を、束の間でも住みよくせねばならぬ。ここに詩人という天職が出来て、ここに画家という使命が降る。あらゆる芸術の士は人の世を長閑にし、人の心を豊かにするが故に尊とい。

住みにくき世から、住みにくき煩いを引き抜いて、ありがたい世界をまのあたりに写すのが詩である、画である。あるは音楽と彫刻である。こまかに云えば写さないでもよい。ただまのあたりに見れば、そこに詩も生き、歌も湧く。着想を紙に落さぬとも※鏘の音は胸裏に起る。

底本:「夏目漱石全集3」ちくま文庫、筑摩書房

github

https://github.com/allianceport/tategumi.js


dangumi.js

クロスブラウザ対応の段組みJavascriptエンジン。

2008年にリニューアルした自社サイト制作のために開発。CMSから出力されたHTMLを2段組にするスクリプト。CMSからはひとつのブロック要素として出力されるがこのスクリプトによって、一定サイズのカラムに振り分けられる。当時主流だったJSフレームワークであるmootools v1.11を利用した。

demo

ウェブサイトをリニューアルしました。
テーマは「PULL」です。その時々において不要な情報までも押しつける(Push)ではなく、ユーザが本来得たい情報を中心に配して、気の赴くままに見て回れるようなシンプルなサイトを目指しました。トップページでは、サイトで更新されたテキスト情報を表示しています。気になる言葉が見つかったら、そこから自由にサイト内の情報に触れてみてください。

また、サイトの更新情報はAtom RSSから取得することができます。
今後はウェブマガジンなどのコンテンツも予定していますので、どうぞご期待ください。

リニューアルの試みについては、次のとおりです。

サイトにとってナビゲーションとは、ユーザがページを移動したり、情報構造を把握するために重要な役割を果たしています。従来、ナビゲーションは常に画面の多くを占有していましたが、今回のリニューアルではそれらを極力排してユーザが必要としている情報を中心に、シンプルにデザインすることを心がけました。

ナビゲーションを静止的なグラフィック要素として位置づけることをやめることは、先に述べた機能を損なう可能性もあります。必要時にはストレスなく表示され、一度経験したことから推測でき、推測から応用可能であるなどさまざまな形での配慮が必要となります。

今回のリニューアルは、ウェブサイトにおける情報閲覧のインターフェイスを考えるさまざまな試みを行っており、日々更新していきます。


新聞ブログ

tategumiやdangumiを使ったMovable Typeプラグイン

製品サイト


Random Typography

文字という最小の情報単位に、アルゴリズムを与えて表現する

demo

demo

Fractal Typography

活版時代の組版を想起させる、コンピュータ時代の文字による造形

動画:http://www.flickr.com/photos/kickers11/4016291656/in/set-72157622470920817/

公開日

2009年10月、活字ルネサンス「タイポロジック─文字で遊ぶ、探る、創る展覧会」にて発表。会場はSPACE NIO(東京・大手町/日本経済新聞社2F)

開発環境・使用機材

HTML
CSS
JavaScript(jQuery)
Google Chrome

コンセプト

アートディレクターで師匠の永原康史さんとの仕事で「デザイン言語2.0」の装丁に使う「行間、字間、書体を文章中の各文字にバラバラに適用するグラフィック」のためのプログラムをJavaScriptで実装している際に、フラクタル的な造形の中に文字を投げ込んでみたらどうなるかという興味で作ったものが原型となっている。活字ルネサンス「タイポロジック─文字で遊ぶ、探る、創る展覧会」に展示するにあたり、金属活字時代の組版のアナロジーとコンピュータ時代の造形を組み合わせたインスタレーションとして、空白から文字が全面を埋めるまでの流れを可視化し、書体の選定などもあらためた。