[&] on screen typography

言葉のデザイン 2010
オンスクリーン・タイポグラフィを考える
------------------------------------------------
http://www.jagda.org/information/jagda/637

原研哉

皆さんの、とても熱意を感じます。
あさから銀座も長い行列ができて、iPad が日本でも発売された。
デザイナーも iPad をさわるといろんなアイデアが生まれる。
動的な言葉の世界にはいっていって、
旧来の文字の組み方がどんどん変わっていくことを感じる。

基本は言葉、文字、きちんと制御することができて、
安心して信頼できるコミュニケーションができる。

主張を押し付けるのではなく、謙虚に耳をかたむけながら、
言葉の形を創造していきたい。

Web だけではなくて、Twitter だけではなくて、
今後いろいろなコミュニケーションがある。
いま、マイクで話しているが、メディアが変わるとまたかわる。

新しい言葉の形の可能性がどういう発想のものから開花していくか
といった機会になるといい。

Twitter で、ぽろっとフォントのことをぽやいたら、はじまった。
知らないことも原因でぼやいてしまった。
まずは、文章をオンスクリーン上に置いていく基本を説明してもらう。
是非、皆さんも頭のメモリをゼロにもどして話を聞いてもらいたい。

今後７回にわけて、研究会を展開していきたい。
フォントの設計や、言葉そのものの形がかわってきているではないだろうか？
テレビの中で言葉がずっと見ていると文字がでてくる。
テレビの中ではタイポグラフィーがメジャーなメディアすぎたので
進化してこなかった。
今後テレビも大きな可能性を秘めている。
テレビの人もオンスクリーン上の文字には興味がある。
今後、新聞がどうなっていくのか？
新聞社がネットの中でどうしていくのか？

研究会を拡げていくので、ご期待ください。

■永原泰史
デジタルメディアにおけるタイポグラフィの概説

バタバタして、
慌てて準備をしてきました。
原さんの場合「ゴリゴリ」準備を重ねてきたそうです。
くすぐりから始めたかったのですが、みごとにすべりました。

[ メディアを構成するもの ]
ハード = 資材 + 仕組み
ソフト = 表現記号 + コンテンツ

表現記号というのは文字など、コンテンツを具体化していくもの。
オンスクリーンというのは資材の話。
ペーパーメディアというのは紙という資材のこと。

オンスクリーンメディアも資材にあたるもの、液晶画面や、プロジェクタの画面、
e-Paper など。
ハードウェアに着目してオンスクリーンメディアと名付けたか？

ペーパーメディアは紙になる一歩手前までデジタルで扱われる。
アウトプットの状態だけでわけている。
デジタルメディアの中にペーパーメディアとオンスクリーンメディアが近接している。

今はデジタル楽器が電子的にスピーカーから音が出る。
生楽器もスピーカーからだす。

紙とオンスクリーンと寸前まで同じ技術を使っている。
紙のデザインをしている人ならすぐわかると思うが、
紙の選択によって、色の出方、文字の出方が違う。
今までは CRT や液晶モニターなど、
紙が多種多様なものがあるように、オンスクリーンにも多種多様なものが増えてきている。
様々なアウトプットがオンスクリーンメディアにもでてきた。

それなりに紙によってデザインを変化させてきたように、
オンスクリーンメディアもさまざまな工夫があるのではないか？

紙と変わらないことができるのだろうか？という疑問。

「日本語のデザイン」




http://www.amazon.co.jp/dp/4568502438/

オンスクリーンのタイポグラフィを考えようと思って、書いた本。
はじめてする体験ではない。
日本語を使ってきたわれわれ
すみのくらそうあん。が民間出版を始めた時の本。
その時の活字はニューメディアであった。
グーテンベルク式の活版印刷であった。
書体から組版から、全部自分たちで工夫して取り込んで、書物を作った。
今現在スクリーンメディアがでてきて、日本語をどのように表現するか？
われわれができないハズが無い。

Web上の文字表現。
グリッドシステムを使ったWebデザインと、
文字によるインタフェース、文字による表現の辞書。
辞書はタイポグラフィにとっては大きな場所。
辞書専用に書体を開発することもある。
広辞苑はシュウエイタイ。
物書堂のお話。

■アライアンス・ポート（山辺真幸、小川裕子）
http://www.allianceport.jp/

2006年から会社を初めて、今日のテーマに沿っている、
デザインと最新の IT 技術の変遷においついていけるデザイン事務所をやっている。
プロフィールは Web サイトをご覧ください。

Webタイポグラフィーのツールを紹介、後半にこれまでの Webのタイポのコントロールに関して。

小川：タイポグラフィックグリッドを活用した web デザインについての話。
文字サイズのベースを組み合わせたグリッドシステム。
なんでこのツールを作ろうを思ったのか？
もともと印刷のデザインしかやっていなくて、
3年前くらいから Web のデザインを初めて、
その時に何か、印刷のメソッドを使ってデザインを展開していきたいと思ったのが、
このツールを作った由来。

印刷、フォントや行間を決めていくのだが、
Web の場合、紙に出力してもブラウザで見るのと違うので、
Web 上でパラメータが調整できれば、どんなにいいかと思って作ったもの。

http://lab.allianceport.jp/web-typography-app/

font / size / line height / color / weight / letter space
をリアルタイムで確認できる。
OS ブラウザによるラスタライズの違いを確認しながら、調整できる
Windows, Mac を行き来しながら調整することができるのが便利な点。

InDesign のグリッド、文字サイズ、行間を設定して、それからさらに
グリッドを設定するところがあり、設定したグリッドが反映したドキュメントがでてくる。

Web Grid System
CSSのパラメータが決定して、CSS の中に入れて使えるようになる。

実際、Webサイト制作にも使った。

http://www.gkid.co.jp/portfolio/over-view/index.html

ブラウザ上でリアルタイムに調整できるようなツールも作っていた。
パラメータで設定した Grid Maker の設定値で Web サイトが自動生成されるツール。
グリッドと表示を見ながら、Unit のスペースなどを調整し、作った。

山辺：
これまでの取り組み。
スクリーンメディアでデザインするツールの話をしていったが、
実用的でないもの。

Random typography
日本語の文字の組み方、Webの場合、行間、字間。禁則処理。
紙メディアがやってきた細かなところまで手が届かない。
CSS/HTML の中でコントロールしていくのだが、
いろいろな意味で限界がある。
Web デザイナーに Webデザインにはコントロールするのに限界があるという意識がある。
行間、書体、文字
スクリーンメディアはコンピュータなんだから、いちもじいちもじバラバラなものを
当てはめることはできる。
原文を JavaScript で読み込み、スタイルを一文字一文字変える。
リローロするたびに全然違う組み方になる。
毎回、表情が変わる。プログラムだと一発で出来る。

思い出話をすると、エディトリアル、グラフィックデザインをやっていた。
もともと、学生の頃は工学系の学部に居て、プログラムを書くのが
日常的なことであった。コンピュータを使うということはプログラムを書くことであった。
文字の１つ１つはパラメータじゃないかと思った。
仕事の中で、こういうことができないかとたのまれて作った。
文字の表情としても面白い。
本の装丁の一部に使った。そうしたグラフィックの要素として使った例がある。

Fractal typography
http://lab.allianceport.jp/?page_id=29

文字を組んでいくルールをどこまで複雑にしても大丈夫なのか？
自己相似性といった特徴がある。大きなところと小さなところに類似性がある。
スクリーンメディアに文字を並べるのが当たり前になったことで
こういう表現がでてきている。

これに関してどういうルールで並んでいるのか？
Web をご覧いただきたい。

ローカルに持っている文字列を形態要素解析して、どこかの角に文字をおく。
さらに細分化された角に文字をおいていく。ある種スクリーンメディアにならなければ、
見えなかった文字の流れができると思って作っている。

少し実用的なもの。
JavaScript を使うことによって、Web上の文字はかなりコントロールできることが
今の例でご覧頂けたかと思う。

縦書きもできるんじゃないか？
天童荘のWebサイトでブログを縦に組んでみた。

http://www.tendoso.jp/index_f.html

プログラムでやりくりしていく。縦組の文字が無いので、ブロックをずらすなどということをしている。
入力する時は、横書きなので、【】など、文字を置き換える必要もある。
禁則。
弱い禁則ぐらいはやってあげよう。
プログラムでやりやすい、追い出し型の禁則処理をしている（１文字ひきつれて改行する）
ブラウザで表現する場合、ブラウザの仕様だけだと物足りない場合、
プログラムを自作する場合、作りたい表現をつくっていける。
この時に実感した記憶がある。

新聞ブログ
MTのプラグインとして開発している。six apart との共同開発。
オリジナルは中央大学の企画。
われわれの方で奇麗な表現がどこまで JavaScript で出来るのか？
文字組を自動でできるようプログラムを書いた。

http://www.allianceport.jp/shunbunblog/demo/

記事自体は普通のブログとして投稿し、
レイアウトの形を選んで、どのエリアにどの記事を割り付ける、
写真の位置が右にくるのか左にくるのかは、組版プログラムが自動的にトリミングと
リサイズをして、配置してくれる。
ユーザー側は、ほとんどコントロールすること無く自動組版してくれる。

スクリーンメディアのタイポグラフィー
行き届かないところは、プログラムを書くことで補完ができるなと実感している。
HTML5/CSS3 でプラットフォームが変わってくれば、コントロールしやすくなる。
日本語は特殊なので、
日本人として違和感のある部分は JavaScript でコントロールしていけばいいのではないか？

■物書堂（廣瀬則仁）

物書堂は iPHone のウィズダム、大辞林をリリースしている。
2008/4 に 2人でスタート
全色はソフトハウスでワープロを作っていた。
2008/7 iPHone アプリを展開。英和和英辞典を作った。
独自に企画／開発／販売。全部自分たちでやるスタイルを貫いている。

外国語の辞書、英和和英辞典。
国語、大辞林、類語辞典
模範六法
ドリル：TOEIC, 漢検

商用フォントをバンドル
　大辞林、類語新、漢検プチドリル5000
アプリケーションの中にフォントを組み込んで製品として販売している。

大辞林にはヒラギノ明朝を組み込んでいる
類語新：イワタUD明朝、明朝オールド
遊教科：漢検

iPHone/iPad におけるフォント
最初にはいっているフォントには制限がある。
標準形（Web標準、PDF標準）PCの Web標準よりもずっと少ない。
　似たものと置きかえながら使っている。
iPhoneはヒラギノ角ゴ、
iPadからヒラギノ明朝がはいっている。

レイアウトと表示。
WebView (WebKit, HTML+CSS)
UIKit (標準の UI部品）
PDF, Bitmap (.png, .jpg) 力技。絵にしてしまう。
Quartz API (独自レイアウト）
　Quartz を使うと自由なフォントを使って自由に表示できる。

独自のフォントを使う場合
　iPad 以降は（普通に）使える
　iPHone の場合は非公開API →リジェクトのリスク
　Quartz API (独自レイアウト）プログラムを自分で作らなければいけないが、
　非常に高いクオリティのものが得られる。

独自フォントを使う理由
　コンテンツに相応しいフォント
　　明朝体、教科書体、UDフォント
　効果的な演出。フォントによってガラッと印象が変わる。
　　小説でもなんでも印象が変わってくるそこをうまく演出するため。
　競合製品との差別化
　　AppStore は非常に厳しい。独自のフォントを使ってリッチに見せる。

レベニューシェア
Apple 30%, コンテンツ30〜50%, フォント 5〜7%, 物書堂20〜35％
フォントベンダーに 5-7%
一般的にいって、アプリケーションを作って 5-7% 負担するのは
大きい部類に入る。
プロジェクトのフォント代が 5-7% になるのは非常に厳しい。
僕らは 2人だけの会社なので、フォントのコストを負担してちゃんといれていく。
アプリケーションに関わっている人みんなで分け合っていくスタイルはとてもいい。
リスクをとるかわりに、皆でわけあう。

大辞林 2009グッドデザイン賞 12万本販売。一本 2500円、非常に高いが
皆さんに支持してもらっている。
大辞林、印刷技術としてはとても高度なもの 3kg を超える重さで、
開いてちゃんとしていて、紙も薄いのにぱらぱらできる
インクをちゃんと載せないと読めない。3000ページ。
基本ベタぐみ、読みやすくする改行は皆無。
微妙に丸数字の前にスペースがあるくらいで、そのまま
読んでいくしかない文字組。23万語が 3000ページに収まらない。

電子辞書。普通に搭載されている。
横組、小項目ごとに改行がはいっている。
フォントを見るとビットマップフォントで、トメなのかハライなのかわからないくらいの文字
Sharp は液晶フォントがあるので、高額モデルを買うともうちょっとフォントはいい。

大辞林は、紙のイメージをできるだけ iPHone の上で再現しようというのが
最初の出発点。
紙を全く同じにする必要は無く、画面上の制限が無いので、
見やすいように改行をいれたり、ゆとりを持って間をあけたりできるようになった。

大辞林
　縦書き
　和文欧文が混在、縦中横、漢文、数式。　漢文のレ点
　ヒラギノ明朝 ProN W3
　独自のレイアウトエンジン

ヒラギノ明朝を使った理由は、iPhone に入っているヒラギノゴシックとあう。
クールなデザインにぴったいするのがヒラギノ明朝。
ProN というは文字が多いフォント 2万文字はいっている。
国語辞典は珍しい漢字が使われているのでそれにも対応できる Pro フォント。
英字は寝かせて表示したが、プログラムが自動的に判断する。

ルビは紙の方では横についているが、iPHone では文字が小さくなりすぎ、
本文の 1/2 で表示するのが普通だが、読めなくなってはしかたがないので、
分かち書き 2/3 くらいの大きさで表示。

レイアウトエンジン
独自の XML
最小限のマークアップ＞コンパクト
Pro書体のポテンシャルを引き出す。
高速＆高精度

高速というのは重要なポイント。指でさわった時にパッと表示されることが大事。

「なぞってジャンプ」の機能
文字をなぞって選択
指はマウスポインタではない。
タッチしやすい文字サイズ
可読性だけではなく操作性も考えた文字サイズ。

類語辞典ではUDフォントを利用
一覧性と、可読性のトレードオフ
小さなサイズで可読性を確保
思考を妨げないデザイン
読者は頭を使いながら眺める辞書。
ヒラギノとはまた違った雰囲気。ビットマップっぽい雰囲気
UDフォントを使って、トップ画面の見出しの一覧を作るとモッサリした感じがする。

クールさの演出
iphone アプリの場合、クールさは重要

見出しには「明朝オールド」を使用
本文と使い分ける。しっくりくる。

まとめ
いろいろとアプリケーションにフォントをつけて、独自に開発した
レイアウトのコードを使って、いままであったことがそのまま生かせるように
文字の美しさをいかして。

日本のフォント文化を伝承
書籍、PC環境ではあたりまえの存在　
　ほとんどの読者はフォントを意識しないで読んでいる。
　いいのはあたりまえ。それが普通のこと。
　ビジネスとしては、携帯小説などはある。
　モバイルになってしまうと、非常に制限がある。
　iPHone では美しい。それが普通になっていく。
モバイル環境でも普及／発展させていく。
豊かなフォント文化を育む。
僕らはこういう取り組みを継続していく。
フォント屋がもうかって事業を継続させていく仕組みが必要。

（この後、パネルセッション）