5/28/2010

[&] on screen typography

photo-6.jpg

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

原研哉

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

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

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

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

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

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

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

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

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

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

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

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

オンスクリーンメディアも資材にあたるもの、液晶画面や、プロジェクタの画面、
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 で読み込み、スタイルを一文字一文字変える。
リローロするたびに全然違う組み方になる。
毎回、表情が変わる。プログラムだと一発で出来る。

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

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

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

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

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

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

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

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

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

新聞ブログ
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 では美しい。それが普通になっていく。
モバイル環境でも普及/発展させていく。
豊かなフォント文化を育む。
僕らはこういう取り組みを継続していく。
フォント屋がもうかって事業を継続させていく仕組みが必要。

(この後、パネルセッション)

5/01/2010

[&] Information Graphics for News Paper

20100428_1944031.jpg

第5回情報デザインフォーラム

「新聞インフォグラフィックスのデザインプロセスのフィールドワーク」小池星多氏

●デザインで社会を変えたい

(1) 小池研究室の活動 ソーシャルデザイン
(2) インフォグラフィックスのデザイン手法
(3) 新聞インフォグラフィックスのデザインの現場

■小池研究室
 東京都市大学環境情報学部
 文理融合の教育研究
 小池情報デザイン研究室、3年生から配属、20名在籍
 デザイン学科ではない
 デザイナーになりにきていない
 小池研究室のみの活動
 学生も授業後に研究室に来る
 サークルみたい
 就職活動があるので、半年しか活動できない。集中して活動
 大手新聞社のインフォグラフィックスデザイナー
 大手家電メーカーのインタフェースデザイナー

■コミュニティバスのデザイン
 ●バスの形をデザインするのではなく、
  多摩ニュータウンのような、そういう地域でやっている活動をサポート
 ●ロボット NEC PaPeRo 小学校で共創プロセス研究
 ●学習環境のデザイン SCRATCH, Squeak
 ●インフォグラフィックス

 フィールドワーク&デザイン
 多摩ニュータウンでの活動
 コミュニティバスを通す住民活動にデザイン面で参加
 多摩市ミニバスラッピング
 総合的な感覚が養われる
 地域を協調した立体模型をつくり、バスのルートを考えると、
  高低差が立体で示され、必要性がわかる。

 ロボットの共創プロセス。小学生がブレスト、プレゼンする時代。
 劇の内容を小学校 5年生が考え、ロボットを使った劇を考える。

インフォグラフィックス
 1998年ころから研究スタート
 人文学部系のデザイン学科の課題として
 グラフィックスデザインから入っていない
 情報をグラフィックスでわかりやすく伝える
 論理的に情報を収集、編集、表現
 デザイン系で無い人にも参入の余地がある

 リチャード ソウル ワーマン
 INFORMATION ARCHITECTS ( RICHARD SAUL WURMAN )
 鉛筆でスケッチして描くだけではない、デザインプロセスを考えた

 デザイン方法論を確立したい 
 デザイナーにならなくても必要なスキル
 どんな仕事にもの必要
 手順にそって誰でもある程度できるように

 情報を収集、分解、統合、デザイン
 グラフィックスの色、形、レイアウトに情報をあてはめていく
 情報の差異を作る
  
 インフォグラフィックス展 6付き
 神奈川新聞インフォグラフィックスの共同制作 2009.8.25
 横浜市の受託研究、統計情報のグラフィックス

 非デザイン系学生の課題(現実的な対処)
 はじめての人にもデザインできるように
 デザインプロセスをパッケージ化できないか?
 
 プロの現場を知らないで活動 寂しかった
 最近プロとやっとコミュニケーション
 プロから逆に感心持たれるようになる
 他大学のカリキュラムに採用されたことも。

 既存 IG の調査
 テーマ、コンセプト決定 
 情報の収集 
 情報の分解(時間、空間、関係)
 情報の構造化
 情報のグラフィック化

 既存IGの分析
 収集した情報の分析
 情報構造図
  ストーリー
  イントロ→問題点→対策
  順序、並列、階層
  多視点の構造を明確化
  多重の構造
   情報構造図:収集した各情報同士の関係性を構造図にし、IGをどう構成するかを検討
   構造図に無い情報はグラフィックにはせずに関連性を見ていく。
   ラフスケッチを何度も書いて考えていく。構造図を自動変換できるものではない。

■今後の課題
 情報の構造化はデザイナーの手法にすぎない
 オーディエンスの良いはデザイナーの作った構造を超える
 オーディエンスの多用な読みを受け入れるデザイン

■プロの現場のフィールドワーク
 新聞のインフォグラフィックスの制作現場
 プロはどうやってで財しているのあk
 プロの現場のフィールドワーク

 2009年に調査
 デザイナー公人の手法として見ない
 朝日新聞、共同通信、産經新聞
 デザイナーの組織での立場
 仕事環境
 コラボレーション

 新聞は激動期、部数減少
 若年層読者のとりこみ、字を読まない
 グラフィックの紙面拡大
 デジタル、Webへの移行問題
 インタラクティブグラフィックスへ

 新聞インフォグラフィックスの分業
 記者が文章、デザイナーがグラフィック
 記者が現場で取材、記事の企画、一次情報握る
 デザイナは現場に行かないが、一次情報から豊かな二次情報をデザイン
 取材段階からデザイナーが関与
 
 グラフィックス領域の拡大
 文章で書いていた情報をグラフィックスへ移行
 グラフィックスの内容に記者が大きく関与
 記者はデザイナーがグラフィックスを描くための情報を提供

■欧米の事情
 欧米にはリサーチャーという職種がある
 記者とデザイナーをつないで記事を企画する役目
 日本にはリサーチャーはいない 記者が兼任
 日本は整理分が大きな力、紙面レイアウトとタイトルを決める
 欧米ではアートディレクターが紙面をデザインする
 (欧米の新聞は宅配ではなく売店売りなので、
  インパクトのある紙面をアートディレクターが主導で考える)

記者:会社にいない、情報を持っている、専門分野ひとつ
デザイナー:会社にいる、全ての分野を担当

専門分野に属していないデザイナーのために
記者は情報を選別したり、
ラフ画を書いたりして意図を伝える努力をしている。

デザイナーはユーザー目線で分かりやすくする。
ラフ画を作り、話し合いの材料とする。
記者の頭の中にしかないイメージを具体化していく。
さらに追加したい情報や、より面白い提案を再発見できる。

共通意識を生み出す
 立場の違う記者とデザイナーでは?
 共同通信では、デザイナーは「グラフィック記者」と名乗っている。
 自分がジャーナリストであることを意識

朝日新聞にはアートディレクターが居る。
 社内のデザイン的な問題を解決する役目。
 それまでデザインに無関心だった層の感心を見いだすことにつながる。
 
■今年度の研究
 インタラクティブグラフィックスの現場のフィールドワーク
 テレビ局,Web
 インタラクティブグラフィックスの手法とデザイン
 静止画を活用して動画に

インフォグラフィックス展 2010
6/5-6 東京都市大学横浜キャンパス
11月 インタラクティブグラフィックス学生作品の展示