Web開発技術は伝統工芸にはならない。これだけ環境が変する中では最適な制作ワークフローも常に変化する。特に近年のモバイルデバイスの爆発的普及や、モダンブラウザの普及は、開発環境にあらゆる変化をもたらしている。

開発プロセスの変化

例えば私が行う実作業の中では、Photoshopを持ち出すようなビジュアルデザイニングはかなり小さく身を潜めているように思う。それはもちろんデザイナーにとって最も重要な1つであるが、プロジェクト全体においてはあくまで「最終的な」仕上げに過ぎない。ビジュアルデザインに到達するまでのラフスケッチ、ワイヤーフレームの作成が制作業務において、時間的にも重要度的にも大きな割合を占めるようになった。

つまり、全体像をスピーディーに設計し、その価値判断のタイミングを早期にもっていく。デザイナーやプログラマーという専門家が参加する前に多くのことを見極めることができれば、プロジェクトはより身軽になる。より多くのアイディアを具体的に試すことが出来るし、専門家ではないより広い範囲のブレインと共有し、なるべく早い段階で物事を判断できるようになる。

デザイナーがPhotoshopで絵を描き始めてしまったら、プログラマーがコードを書き始めてしまったら、引き返すのは非常に厄介なのだ。（不可能なのではない、「非常に厄介」なのだ。）

Travis Isaacs’s “How to Wireframe Like a Ninja”

今年の5月 the Big Design 2010 conference にて、UXデザイナーである Travis Isaacs 氏が行ったプレゼンテーションを紹介したい。
“Keynote Kung-Fu: How to Wireframe Like a Ninja” と題されたこのプレゼンテーションは、アップルキーノートを使った魅力的で効果的なワイヤーフレームやサイトモックアップの作り方について解説している。

彼はキーノートのオリジナルツールキットを作成し、KeynoteKungfu.comにて販売している。このサイトについては最後に詳しく。

高精度なプロトタイピングの重要性

個人的にこのプロセスにはかなり共感できた。
つまり各工程をどの媒体でどこまで突き詰めるかは、各工程が持つフリクションを考慮したプロジェクト全体におけるリスクの最小化が重要なのである。
そして精巧なビジュアルと、機能を深く表現した High-Fidelity Prototyping（高精度なプロトタイピング）がいかに重要かを教えてくれる。

スライドの多くはキーノートの素晴らしさについてだが、彼が言わんとするのはみんなが既に知っている「キーノートの便利さ」というよりは、「キーノートはWebサイトのモックアップ作成にとても便利」ということだろう。

具体的なデザインと開発プロセスについて

デザインと開発プロセスについての彼のインタビュー。

Isaacs「フロントエンドデザイナーとしてスケッチから始める。ただしかなり精巧なレベルで。ページのスケッチが完成したらそのままキーノートに移す。
インタラクションやインターフェイスの詳細を表現するのにキーノートを使うが、その後の行程が、一般的なフロントエンド開発者と少し違う。彼はそのままコーディングに進むのだ。コードに沿って（またはコードにならって）ビジュアルデザインをすることに意味がある。
コーディングには TextMate を使う。TextMate は全ての言語の構文バンドルを持ち酔いしれるようなキーボードショートカットがある。
フロントエンド言語にはHTML, CSS,そして jQuery。jQueryは唯一の必要なJSライブラリだ。また、960.gs grid system や the new HTML5 Boilerplate 、 the LESS CSS framework などをよく使う。」

キーノートツールキット KeynoteKungfu

彼が作成したキーノートツールキット KeynoteKungfu.com には、ナビゲーション、テーブル、画像やバナー、フォームエレメント、インジケータやソーシャル系ボタン、またタッチスクリーン用のインタラクション表現などのWebに必要なあらゆるエレメントがマスタースライドとして用意されている。

これらのエレメントの作り込み（例えばグラデーションだとかそういうこと）に時間をかける必要はない。彼が代表して作ってくれたのでそれを使わない手はない。12ドルの価値が十分にある。

私が特にいいと思うのは、960.gsのテンプレートを用いる概念だ。今まではワイヤーフレームの段階できっちりとしたレイアウト比率まで確定させたことがなかったが、Photoshopで使うのと同じグリッドガイドを下敷きにすることで、より高精度なワイヤーフレームが出来上がる。960pxかどうかは別として、これはいいアイディアだと思う。

iPhone用とiPad用のツールキットに関しては無料配布されているからぜひ試してみて欲しい。
KeynoteKungfu.com

まとめ

もちろんペーパープロトタイピングに重点を置くことは、今に始まったことではない。
大規模プロジェクトであればあるほど、ペーパープロトタイピングの資料は充実している。しかし、ワイヤーフレーム自体の作り方は実に多様であると感じる。

私自身いろいろなプロジェクトに参加して思うのは、それらの資料はどの程度深く考えられているかに関わらず、実際の描画においては「かなり適当に」作られるように感じる。ワイヤーフレームだからワイヤー（線）だけで表現すればある程度は分かるが、このシンプルな描画作業の品質（例えば丸みであったり、グラデーションであったり）が高まれば物事はよりスムーズに進むように思う。共有したときのリアリティが全く違ってくる。

ボタンがボタンっぽいかどうかなんてワイヤーフレームの段階において取るに足らないことのように思える。もちろん「クオリティの高いワイヤーフレームを作る」ということに情熱を燃やしてしまい、手段が目的化してしまってはいけない。

ただこのような先人の知恵や便利なもの（例えばたった$12のツールキット）はぜひ取り入れたい。

ビジュアルデザインとインタラクションデザイン、インフォアーキテクトとデザイナーやプログラマーのもっとも重要な架け橋がここにある。

あとがき
ご無沙汰しています。この記事は http://mashable.com/2010/11/12/travis-isaacs-web-design/ を参照し、一部引用と私的な感想を混ぜて書いたものです。

沢山の人に質問される。おすすめの書籍は沢山あるし「アイツより115%うまくやる55の方法」というありふれた記事を紹介するのは簡単だよ。

でも実際はスタートするにあたって学ばないといけないことなんてないんだ。一番重要なのはただシンプルに、やり始めることなんだ。

何かをつくりはじめよう。もしウェブデザインを学びたいなら、ウェブサイトをつくろう。
起業家になりたい、ウェブベースのプロダクトを売るビジネスを始めたい人は、アプリケーションをつくろう。

何も心配はいらない、その段階でスキルなんて必要ないのだから。
たぶん、自分にどんなスキルが必要なのかさえ分からないだろう。

既に持っているもので、始めよう

もし何かをウェブでつくりたいとしても、HTMLやCSS、Ruby、SQLを覚えることに心配することはない。そいういうのはプロダクトを完成させるのに必要な事柄であって、やり始めるには何一つ要らないんだ。

そのアイディアをキーノートやパワーポイントに書き散らかそうよ。枠を書いてキャッチコピーを書いて、ページごとをリンクさせればいい。

既に使い方をしってるソフトだったら、かなりちゃんとしたプロトタイプができあがるよ。パソコンに疎いだって？じゃあ鉛筆と紙とポストイットとかでやろう。画面を描き、壁に貼り付ける。そしてどんな流れになるか見てみよう。

どんなスキルが必要なのかすら分からないかもしれない。でも心配ない。
既に知っているものを使って始めればいいのだから。

簡単なスケッチやスライドだけですごく沢山の事ができるものさ。
アイディアを形にして、それが本当にいい感じになりそうかどうか評価することができるようになる。そしたら次のステップに移るポイント、つまりそのプロトタイプをブラウザで表示させるための必要十分なHTMLを学ぶ時だ。
要点は既に持っているスキル、ツールだけで行けるところまで行こうということなんだ。

自分を疑わない

僕らが何かをスタートしない理由は、多くの場合、スキルや素材、設備が足りない事とは関係ない。実際に僕らを妨げているのは自己批判と言い訳なんだ。

『Drawing on the Right Side of the Brain（右脳で描け）』っていういい本があって、その著者Betty Edwardsが本の中で「僕らは子どもの時は何でも描いていたのに、思春期になる頃には多くの人がその能力を伸ばすのをやめてしまう」というような事を言っているんだ。

多くの大人は、絵を描く能力という観点においては、思春期のはじめに芸術的な面での成長が突然終わってしまう。彼らにとってますます複雑化する身の回りの世界のことと、彼らの芸術的スキルとの間で葛藤が起こり、子どもたちは芸術的感性の危機に直面するのだ。

その頃の子どもはますます自己批判的になり、同様に絵を描くことにも興味をもつようになる。自分の思うように描けなくなった時、ほとんどの人は絵を描くことを諦めてしまう。

この感じは大人になっても続くようだ。僕らはウェブサイトをデザインたり、アプリケーションを開発したいけど、もし自分の持っている道具と知覚的スキルにズレがあると、始めることすら出来なくなってしまう。

インターネットは素晴らしい作品、才能のある人、優れた制作を僕らにを際限なく見せてくれるけれど、それは助けにはならない。

そんな最高な物たちと自分自身を比較してしまえば、自分が不甲斐なくなるのは当たり前。でも彼らだって生まれながらにそういうスキルを持っていたわけではないし、やり始める前までは何も持っていなかったんだ。

やってみるじゃなくて、やろう！

成功した人というのは、自己不信にも負けず進み続ける方法をなんとか見つけ出すものなんだ。
画家であるヴィンセント・ヴァン・ゴッホがまさに画家であったのは、彼の人生の最後の10年間にすぎない。僕らはみんな彼を巨匠と言わしめる見事な絵画作品を知っているけれど、彼は巨匠としてスタートしたわけじゃないんだ。

先ほどの『Drawing on the Right Side』で例として紹介されている下の絵を見てほしい。初期の絵とその2年後に描かれた絵だよ。

Vincent Van Gogh Carpenter, 1880 and Woman Mourning, 1882

彼はいわゆる神童ではなかったし（彼が絵を書き始めたのは27歳）、彼はそれを努力して学んだ。もし彼が自己の疑いに耳を傾けていたり、自分のスキルがポール・ゴーギャンに全く及ばないと絶望していたら、彼はやってみようともしなかっただろう。

物事は創るべき物を創る途中になって得られる事がとても多い。つまりそういう事だろう。
自分が不十分だからといって、またスキルや知識、経験がないからといって夢を追わないのは無駄なことだよ。実際のところ、疑問のあるプロジェクトこそが、追求すべきプロジェクトなんだ。それらは最大のチャレンジと最大の報いを与えてくれるだろう。

なあ兄弟、なんでもう何百回もやった事を繰り返しやるんだい？もう学ぶことなんてないぜ。

プロジェクトを完成させることにこだわる必要なんてないじゃないか、やり始めるために必要なものは全部持っているんだから。

credits

Jason Zimdars [ http://stream.jasonzimdars.com ]
Original Post – http://37signals.com/svn/posts/2538-the-first-step-is-to-start

This is great article and really inspired me. So I translate to Japanese for myself and share with friends in japan. Thanks Jason.

あとがき
個人的にとてもいい内容だと思ったので訳してみました。かなりざっとした訳で、よく意味が分からなかった部分も雰囲気で流してしまっています。（たぶん意味は合っていると思う）
ちょうど「Fine Software Writings」というソフトウェア開発の良記事翻訳集のサイトにも訳されていましたが、そちらの方がかなりしっくりきている感じです。
http://www.aoky.net/articles/jason_zimdars/the_first_step_is_to_start.htm

無限のスペースは実在するのか

WEBブラウザがスクロール機能を持っていることで、WEBサイトを作る人はそこに無限のスペースがあると考えるようになる。

せっかくWEBサイトを作るのだから、あれもこれも載せたい。あれもこれも載せるんだから、そっちもこっちも載せよう。採用するCMSではこんな機能もあんな機能もある。どれもこれもすごい感じ、あるとかっこいい感じ。

しかし、本当に無限のスペースがあるのだろうか。言いたいことばかり書き散らかされた広大なスペースに、忙しいユーザーはいちいち付き合ってくれるのだろうか。

ユーザーは基本的に急いでいる

人は実に様々な理由でインターネットを使うが、ほとんどの場合に共通するのは「何かを探している」ということ。

何か知りたいことがあって検索する。表示されたサイトの中から良さそうなものを選び、そのサイトの中で知りたい事の場所を探す。彼らにとってはWEBページが表示される1秒2秒の読み込み時間でさえもどかしい。とにかく、できるだけ速く知りたいと思っている。

（もちろん暇を持て余してただ当てもなくネットサーフィンする人もいるだろう。でもおそらくあなたのビジネスにとって彼らは重要ではない。）

目に見える要素が増えれば増えるほどユーザーの視線は迷い、気は散らされ、1つの要素への注意は薄れ、選ぶべきものを選ぶことが難しくなる。
受け手が選ぶべきものを選べない理由は、語り手が本当に伝えたいことを選べていないからに他ならない。

ユーザーに最も喜ばれることは、探している情報を他のどのWEBサイトよりも明確に伝えること。1つの情報に1つのWEBページを与え、そのページの中ではそれだけを伝える。1つ上の階層のページでは、格納されている情報を明示して選んでもらうことだけを考える。

種類の異なる全く別の情報へのリンクリストや、様々な検索機能や、自分のビジネスと無関係で大した収入もない広告は、思い切って消し去ろう。
全て消し去ることが難しいなら、本当に必要かどうかを改めて考え、リンク1つでも消し去ろう。1つでも。

それによって、本当に伝えたかったメインの情報が浮き出てくる。スペースの大きさや色使いの問題ではなく、相対的な情報量の問題である。

機能は少ないほどいい

CMSベースのWEBサイトが主流になってから得に問題なのは、あらゆる設計が見本として用意されたテンプレートに左右されてしまうことだ。
CMSの多機能化は評価基準の1つであることは間違いない。優秀なCMSほど拡張性を兼ね備えている。しかし、ブログシステムに代表される汎用性のあるCMSは「あったら便利そうな機能」として提案しているに過ぎない。

それを採用するかどうかはその都度決めよう。全てのページにタグクラウドが本当に必要かどうか、その都度考えよう。

情報設計は作業の１行程なのか

インフォメーションアーキテクトという言葉が再定義され脚光を浴びている中、とあるセミナーで、ある情報デザイナーがこんな事を言っていた。

「インフォメーションアーキテクトなんて職種は存在しない」

インフォメーションアーキテクトという役職、肩書きを見るたびに同じことを思っている。それはプロジェクトを通して全員の気配りを以てして初めて成功する概念であると。分業体制の中の１行程ではないと。

ディレクターがデザイナーに画面構成書・原稿を渡す。
「シンプルで分かりやすいサイトでお願い」
しかしそれらの書類がシンプルでなければ、デザイナーがいくら見栄え上のシンプルさを実現したとしても、出来上がるサイトは本質的にシンプルにはならない。

もっと前の段階に戻ってみる。

クライアントがディレクターに原稿を渡す。ディレクターが、インフォメーションアーキテクトと呼ばれる人が、いくらがんばってシンプルに情報設計をしようとしても、クライアントの事業がシンプルでなければ本質的にシンプルにはならない。

つまり、制作を担当する各プロフェッショナルが出来る事は多くあるが、最終的な出来栄えは関わる人全ての意識によって大きく振れるということだ。

日産、アウディのカーデザイナーを経て独立した和田智氏が著書『未来のつくりかた』にてこのように書いていた。

部屋の美しさはその国の文化レベルを示す
その街に住む人の部屋の美しさは、その街の美しさと比例します。
部屋は国の文化的なレベルを示すものであり、美意識の度合いを表すものとも言えるのです。
引用：未来のつくりかた アウディで学んだこと 和田 智 (著)amazon

自宅の部屋や職場のデスクを常に綺麗に保つ能力は、その人の性格の現れであり1つの才能であると思う。形を持たない情報を整理することは、普段の生活をよりよくするためには必要な作業なのだ。

これは学んで習得できるものではなく、向き不向きのある難しい作業だと言えるだろう。

極端に言うならば、本当に整理された情報設計を実現するためには、プロジェクトに登場するクライアント、ディレクター、デザイナーの職場のデスクが綺麗に整理されている必要があるかもしれない。

まとめ

実際の制作現場から目を逸らさなければ、これらが理想論であることは否めない。
紙媒体のチラシよろしく、スペースさえあれば情報を詰め込みたくなる気持ちはどうしても先行してしまうし、かといって予算があり、タイトなスケジュールで動くプロジェクトを進める中でクライアントと「シンプルとは何か」を論じている暇など無い。

しかしながら、Webサイトの構築作業が、クライアントが自分たちのビジネスを整理し、構造的に可視化する初めての体験になるということは少なくない。

このような場合では、サイトを構築することを通して成果物以外にいろいろな発見、ヒントを見つけるための頭の超整理体験を提供することができるかもしれない。情報を可視化するウェブサイトの完成度はクライアント社内での意思統一においても非常に重要な資料となる。そういうものを作ることができれば、エンドユーザーにとっても有意義なものになるだろう。

インフォメーションアーキテクトという役割があるとすれば、それは制作現場でのサイトに対しての働きかけではなく、クライアントとの対話の場で人間に対して働きかけるものであるべきだろう。

あとがき

久しぶりのブログが、いまいち要領を得ない長文になってしまった。しかも少し偉そうだ。その辺りは、この猛暑による思考能力の低下ということで大目に見ていただきたい。

Photo Creits:

• Ryoanji Temple- Kyoto By Flavio@Flickr
• Road to… By Absolutely Simple
• Ryoanji Temple in Kyoto By mrhayata
• Tea Room/茶室 By Yuki Yaginuma

チェコの公用語はスラブ語を源流とするチェコ語で、外国人にとっては発音どころか、字面を見ても何を意味しているのかすら難解。各所に多言語のリーフレットが充実しているのは国際的観光地ならではですが、言語に頼らない案内図、インフォグラフィックが各所に見られました。

地下鉄で移動してみる

現在「MALOSTRANSKA」という駅にいて、「Flora」という駅に行きたいとします。
ホームを挟んで両岸に上り下りの線路があるアイランド型のプラットホームです。

線路のある壁は個性的なデザインで楽しいですが、そのラインがどちらに進むかどうかは特に明記されていません。日本ではよく左右の矢印と共に前後の駅名が書かれていますが、それは無いようです。

ホームの上には線路と垂直に次のような案内版があります。

「MALOSTRANSKA」と書いてある緑の丸で示された所が現在地のようです。

線路の壁には線路と並行方向での案内が存在していませんでしたが、ここでは線路と垂直方向にこのラインの地下鉄マップをまとめて表示してあり、左の列車に乗れば右側に並ぶ駅に向かう、左の列車に乗れば右側に並ぶ駅に向かう、ということが直感的に理解できます。

「Flora」駅に行きたい場合、駅名は現在地より左側に書いてあるので「左側の電車に乗る」、そして6つめに書いてあるので「6つ目の駅で降りる」ということが分かります。

どちらのホームから乗ればよいのか、いくつ目の駅で降りればよいのか、がこの案内図1つだけで一瞬で分かります。2つめの「Mustek」が黄色のBラインと、3つめの「Muzeum」がCラインと連結しているということは言うまでもありません。

駅名以外に「Kolej」「Smer」という単語がありますが、意味が分かる人には少し親切に、分からなくても全く問題ないもの。「読ませる」文字情報が最小限に絞られています。

前提となる知識は最小限

日本ではよく最終駅名を利用して「◯◯方面行き」という表現が使われますが、もしその方法で案内されていたら「Flora」に行きたいだけなのに終着駅「DEPO HOSTIVAR」という駅名を覚えなければいけない。現在地「MALOSTRANSKA」の前後にどんな駅があるのかもチェックしておかなければいけない。

住人ならまだしも、短期的に訪れる外国人旅行者にとっては難しい駅名を覚えるのは出来るだけ少なくしたいもの。この地下鉄案内図は地味ながらも情報が完璧に整理され、デザインされているようで感激しました。

実際に、何の下調べもせずガイドブックも持たずチェコ語も分からず、初めてプラハに着いて初めて利用した時から何の迷いもなく目的の駅に行くことができました。これはすごいことだと思います。

読ませるのではなく、感じさせる

日本の大都市がよい例ですが「いろんな国の人が利用出来るようにしよう」となった場合、しばしば文字情報で解決しようとしがちです。
「出口」の下に連なるExit、Salida、退出、출구…の各国語。一見親切に見えますが、それ自体が情報を煩雑に見せてしまったり、いずれの言語も分からない人はどうするのかという問題が残ります。

プラハはヨーロッパに位置する国際的な観光都市であり、しかも旅行者のほとんどは独自言語であるチェコ語は話せない。そういう状況で、文字情報はチェコ語と英語との併記という安易な策ではなく、最小限のチェコ語表記に留め、インフォブラフィックでの表現が大きな役割を担っているように感じました。

まとめ：WEBサイトは異国の街

強引にWEBに関連付けてまとめます。

「インターネットに慣れない人が、WEBサイトにアクセスする。」
この状況は、旅なれぬ人が外国の見知らぬ街に訪れるという状況に似ていると思っています。

沢山の情報があちこちで手招きすればするほど訪問者の視界は狭くなり、ピントは一点に集中し、迷い、本当に見たいものが何か分からなくなっていく。

ヴィジュアルデザイン以前の、情報デザイン。情報デザイン以前の、言葉のデザイン。
こういうものが非常に大切だなあと思ったのでした。

おまけ：分からないこともある

チェスキー・クルムロフ城の入口にある注意事項、左下の絵について。

解釈1：ライター禁止
解釈2：チョビひげは短めに

街中に、唐突にあった公式な感じの表札。

解釈1：車がくるから遊ぶな
解釈2：車も子ども家も、みんな平和なプラハです

それは、

最新トレンドのグラデーションをチェックする事でもなく、
セクシーなjQueryエフェクトを習得する事でもなく、
HTML5やCSS3の斬新な表現で同業者を驚かせる事でもなく、
CMSのありあまる余計な機能を使いこなす事でもない。

誰もいない静かな湖畔で

快適なチェアに腰掛けて

たった100ページの本『シンプリシティの法則』を読むこと

（もちろん、iPhoneは自宅に置いておこう）

◆

このエントリーはプロローグ。また詳しく読み解いていきたい。
Amazon：シンプリシティの法則：John Maeda (原著), 鬼澤 忍 (翻訳)

新聞や書籍の文化・習慣や出版業界の構造は国ごとに、特に日本は欧米諸国とは大きく違う面もあるので、電子出版自体が日本でどのように受け入れられて行くのかはまだ分かりません。（そもそもKindleはまだ日本版出てないし、iBooksはアメリカだけとか…）
コンテンツは置いといて、Kindleというツールの話です。

読むことに特化したツールとしての、Kindleのアプローチ

Amazon Kindleの画面は、単純に見ると「今時なぜ白黒？」「昔のゲームウォッチみたい」な地味な見栄えですが、これこそが最大の特徴と言えます。E Inkという電子ペーパーシステムを採用していて、その画面は透過光ではなく反射光なのだそうです。

この点について詳しく書かれたブログ記事（Amazon Kindle：「反射光の電子ブック」という革命的に新しいメディア）より引用させて頂きます。

紙の本もそうだが、物体に反射した光が目に入る。これが反射光。一方、テレビやパソコンのモニターはブラウン管や液晶やプラズマディスプレイが光を発して いる。これが透過光メディアだ。
E Inkを使ったキンドルは、電子本デバイスでありながら、透過光ではなく反射光なのである。

E linkとは何か

E link自体は2002年6月に現E Ink社が発表した電子ペーパーです。
凸版印刷のウェブサイトによると、E Inkの表示原理はマイクロカプセル型電気泳動方式：基材面にコーティングされた透明なマイクロカプセルの中に、帯電した白と黒の粒子があり、電圧を掛けて顔料粒子を移動させることで表示するとのこと。

（図版は凸版印刷E Inkページより）

砂鉄が入っていて磁石のペンでお絵かきするおもちゃのような感じでしょうか…。

とにかく反射光であるというのは、文字を読むという目的には最適なものであるというのは、KindleやソニーのReaderをはじめとして，世界で数十種類の電子書籍端末のほとんどで採用されていることからも分かります。

透過光メディアはまぶしい

私は発光するディスプレイが嫌いです。
嫌いというか、仕事で1日中見つめる反動で必要に迫られなければ出来るだけ見たくない。
本や雑誌をわざわざ電子化してまぶしい画面で読むなんてありえない。
と思っている人間なので、電子メディアでありながら反射光という点にとても好感が持てます。

もちろん、美しい写真や映像はパソコンやテレビのディスプレイだからこその表現ですが、それは「見る / 観る」であり、文章を「読む」となるととてもストレスを感じてしまいます。

画面照度を下げればよいという問題ではなくて、心理的に疲れるような気がするのですが、反射光と透過光での心理的な違いについて興味深いことも書かれていました。

透過光メディア（テレビ、パソコン、ケータイ、iPhone）は、情緒的・主観的でのめり込みやすい。一方、反射光メディア（紙、映画、そしてキンドル）は、分析的・批判的で客観的に冷めて見ることになる。

なるほど、これはウェブサイト制作の際の「文字校正はパソコンの画面ではなく一度プリントアウトして校正した方が見落としにくい」という理由としても説得力があります。

プロダクトそのもののデザインや連動するコンテンツストアの面で評価されがちですが、こういった点で大きな特徴を持っているというのは面白いですね。
私は読む手間や保管場所が必要だとしても、紙として実存する物が好きなので電子書籍にはあまり興味ないのですが、Kindleはぜひ欲しいなと思いました。

AppleのiPadは電子書籍リーダーの枠を超えた可能性を持っているので、あまりこの比較に意味はないかもしれませんが「iPad + iBooks は雑誌や写真集も豊富で楽しげな本屋さん」「Kindle + Amazon は小説や新聞が豊富な落ち着いた本屋さん」という感じで棲み分けられていくのでしょうか。

関連面白記事
「なぜ，誰もE Inkを攻めてこないのか」 – 日経エレクトロニクス – Tech-On！
アップルが電子書籍で最初に教科書を狙う理由 – My Life in MIT Sloan

ウェブサイトの文章も出来るだけ読みやすくするKUFU

ウェブコンテンツでも、新聞記事などが読めたり、読み物として充実したブログを書く人が増えたりと、「集中して文章を読む」ことが一昔前よりも増えてきています。
パソコンのディスプレイが透過光であることは変えられませんが、ちょっとした工夫で読みやすくなります。

• 文字サイズ [ font-size ]
• 行間 [ line-height ]
• 1行内に含まれる文字数 [ width ]

表示範囲が限られたディスプレイでは、この３点が密接に関連しています。
読みやすいように文字サイズを極端に大きくしているサイトもありますが、必ずしも「大きい＝読みやすい」ではないように思います。

人は読んでいる箇所に焦点をあてながら、視界に入っている今後の文章量を意識しながら読み進めます。このセンテンスはとても長そうなのか、すぐ終わりそうなのか。なので文字サイズを大きくして画面上に数行しか表示されない状態では文字は読みやすいものの、文章を読むという点ではストレスとなります。

余裕のある行間、折り返した時に次の行を見失わない程度の１行の幅、適度な文字サイズをバランスよく調整する必要があります。

• 背景色と文字色のコントラスト

コントラストが弱いと読み辛いのは当然ですが、極端な明度差では細かい文字ではチラツキを起こします。

よく、ユーザビリティーに極端に配慮したサイトなどで、HTMLそのままの真っ白背景、真っ黒の文字、真っ青のリンクにされたものを見ますが、透過光であることを考慮すると個人的にはそれがベストではないと考えています。コントラストの強い状態から、２つの色を少しだけ歩み寄らせた状態が最も読みやすいと思います。

最近のウェブデザインのトレンドとして「繊細なノイズのあるテクスチャを背景にする」というのがあるようです。（Design Trends (Predictions) in 2010の中盤「Texturized Background」の項目参照）
個人的な見解ですが、これは背景の光の拡散を押さえる、またテクスチャは上に乗る文字との僅かな距離感を生み出すことになり、結果として文字の読みやすさにつながっているのでは、と考えています。

これらはちょっとしたCSSの調整で変えられる部分なので、ぜひ調整してみましょう。

簡単に仕様を説明すると

• 12cm×7cmの柔軟性のあるソーラーフィルムが4枚、折り畳み式
• 太陽光全開で単三型充電池2本を約5時間でフル充電
• USBソケットから電源出力（iPhone3G/3GSにも対応）
• 折り畳むと14cm×9cm×3cmのコンパクトサイズに

というもの。

発電した電流をそのままUSBに流すのではなく、単三電池を充電し、そこから改めてUSBに出力されます。
発想としてはパネルとUSBだけにすればより小さく軽量になるのですが、太陽光では発電量が不安定なため機器にダメージを与えること、また単三電池があれば用途も増え、発電した電気をそれだけ溜めておくことができるので合理的な形といえます。（ iPhoneは電源対応もシビアなようで、この同名商品でも正式にiPhone対応したのは2009年の夏以降 ）

iPhone は電話として以上に音楽プレーヤーやGPSなど、アウトドアでの利用価値も高く電源消費は大きいです。太陽がある限り電源確保できるというのはとても心強い。iPhoneに限らずラジオや懐中電灯の電源として、災害時などにも活用できるかもしれません。

iPhoneでの実際

快晴の元で単三電池2本を5時間という仕様ですが、実際に快晴の太陽を5時間キャッチするのは結構大変です。また充電済みのエネループ2本を使い切ってもiPhoneがフル充電するには容量が足りません。
つまり、「これがあればiPhoneはいつでもどこでもガンガングングンズイズイ充電」という訳ではなく、iPhoneも予備電池も全て電池切れという「どうしようもない状況にはならない」というものだと考えた方がいいです。

バッテリー残量100%でも10%でもiPhoneは使えますが、0%では単なる文鎮。そういう意味では利用価値の高いツールです。

いろんな所で充電

（テーマ：トレッキング経路をGPSで記録 with karrimor trim 25）

（テーマ：自転車でもさりげなく充電 with Gravis HOBO Large）

（テーマ：長旅でもさりげなく充電 with karrimor ridge 40）

（テーマ：テーブルの木漏れ日も容赦なくキャッチ）

（テーマ：日向が移動しても容赦なくキャッチ）

商品にはエネループが2本セットとなり、アマゾンから購入できます。
『PowerFilm AA SOLAR CHARGER（amazon.co.jp）』
販売元の正規輸入販売店GEOPHONEYさんからも直接購入できます。

USBソケットを省き単三電池4本、ソーラーパネルを2つ増やしたものもあります。USBが必要なければこちらの方がおすすめです。
『AA SOLAR CHARGER（amazon.co.jp）』

2010.7 追記 iPhone4で使えるか

iPhone4に繋げてしばらくすると「充電機能はこのアクセサリではサポートされていません」というメッセージが出て充電解除されます。

手持ちのものは2009年に購入したものです。2010年7月現在発売中のものは対応済みなのか、これから対応されるのかは不明。メーカーなどに確認してみてください。

最近のビデオカメラの多くはAVCHDというHDビデオフォーマットを採用していますが、編集・書き出し・保存といった行程を全てフルハイビジョンのまま行うというのは結構大変な作業です。少なくとも、家庭用HDビデオカメラの普及率に対して家庭用パソコンで行えるHD動画編集というのは結構ハードルが高いようです。

といってもビデオカメラには専用のAVCHD編集ソフトが付属しているので、簡単な編集や書き出しはそれで済みます。しかし、それで済まないのがマックユーザー。付属ソフトはほぼ100%マック非対応だからです。

以下に、家庭レベルでMacでAVCHDを扱う方法を書いてみます。

iMovieでできるもん

Macに付属している iMovie が既にAVCHDの読み込みに対応しています。正確にはiMovie08以降となり、旧iMovieHD では対応していません。
iMovie では読み込み段階で AVCHD を自動的に AIC（Apple Intermediate Codec）へ変換し、.movファイルを編集することになります。それ以降は iMovie の編集機能で自由に編集し、用途に合わせて書き出します。
もしビデオ共有サイトにHD画質でアップしたい場合は、「共有」→「QuickTImeを使用して書き出す」を選択し、オプション設定のビデオフォーマットに「H.264」イメージサイズに「1280×720HD」とするとHD画質で書き出すことが出来ます。

問題1：iMovie 読み込みでのファイルサイズが肥大化

元がAVCHDという高画質軽量データだけに、iMovie 読み込みでの変換後はかなり肥大化していしまいます。元のAVCHDも保管、その何倍ものサイズの編集用データも増えて行くとなると大容量ハードディスクがいくつ合っても足りません。

そこでToast。Macでは定番のToastですが、Toast 10 TITANIUM では主にAVCHDへの対応が強化されています。
ToastではAVCHDからmp4に一括変換が可能なため、mp4を素材として iMovie で編集書き出しすることができます。AICのmovファイルを作らないため全体のファイルサイズはかなり小さくなります。1万円台のソフトなので割と気軽に導入できます。

問題2：AVCHD データとして書き戻すことが出来ない

現状では編集したデータをAVCHDとして書き戻すことはできません。
つまり編集した映像をカメラに書き戻してフルハイビジョンテレビなどに接続して鑑賞することが出来ません。パソコンで見たり、画質を落としてDVDに焼く事はできると思いますが、そうなるとHDで撮った意味が無くなってきます…。

Blu-Rayドライブや別のHDビデオ機器があれば可能ではありますが、メーカーの専用ソフトウェアが対応していない限り Mac 本体のみではどうしようもないようです。

それぞれの目的によって方法はいろいろ

Macでやろうとするといろいろと面倒なのは事実です。
しかし、いくらフルハイビジョンと言っても、実際撮ったもの全て編集して大型ハイビジョンテレビで観る訳ではなく、再生環境を考えればBlu-Ray再生機やHDテレビは誰もが持っているものでもありません。
それよりもYouTubeやVimeo、FlickrなどがHD対応した今、映像の共有・公開においてはパソコンの方が楽しいし便利という人も多いはず。

1. 出来る限り高画質で残すという意味で、AVCHDはとりあえず全てそのまま外付けHDDなどに保存しておき、素材として半永久保存する。
2. 必要な部分だけ扱い易いフォーマットに変換して iMovie のようなお気軽ソフトで編集し、YouTubeやVimeo、FlickrといったHD対応サービスにアップして楽しむ。場合によってはBlu-rayドライブを購入し、Blu-rayDiscにオーサリングする。

というスタンスがよいのかなと思います。

参考サイト

AVCHD Front Page：AVCHDに関する総合案内@MacDTV情報ひろば
http://www.macdtv.com/InfoCenter/FrontPage/AVCHD.html

追記 2009.11.9

ビデオ技術情報誌 ビデオアルファ 2009年11月号にて、『AVCHDの撮影と編集』という特集がなされていました。ノンリニア編集環境の現状ということで、PremierPro CS4 によるAVCHD編集、FinalCutPro7 によるAVCHD編集など詳しく書かれています。

Macで、という訳ではありませんが、2009年末現在でのワークフロー考察として結構参考になる内容でした。

Matt さんのプレゼンはとても面白かったです。
テクニカルな部分での具体的な話というよりは、WordPress の誕生から現在までの経緯や、世界中での WordCamp のエピソード、その他オープンソースとして続けて行く為に大切にしていることなどを超早口で紹介してくれました。

オープンソースであるWordPressを開発しているAUTOMATIC社がどのようにして収益を上げているのかという話は興味深かったです。「技術はいくらでもコピーできるけど、コミュニティはコピーできない」という言葉も印象的でした。

その他、いくつかのプラグインの作者さんの紹介プレゼンがありました。

個人的に為になったのは、田中さんの『20分で見るプラグインの作り方』でした。ただでさえ難しいコードの話は、言葉で説明されても「で、何からやればいいの？」という事は多いので、最初に実際の流れを画面で見せてくれるのはとても勉強になります。

あと雰囲気として感じただけですが、参加者の多くは開発者系の方々のようでした。
WordPress をカスタマイズして高機能な CMS として使うことは既に特別なことではないというか、全く難しくないしデザイナーの範囲でできてしまうくらいの事なので、デザインができる人はもっと参加するといいのかなと思いました。

CMS を自由自在に使うことは覚えれば誰でもできる事ですが、カッコいいデザインを作れる人は少ないですからね…。

やはり開発系の人だけが集まっていると敷居が高くなりがちなので、デザイナーによるフロントエンドカスタマイズの話題などが沢山あればより多くの人が集まり、結果的にコミュニティーも広がって行くのではと思います。

『このデザインを10分でWordPressで動くようにする』とか。10分じゃ厳しいか。

余談

会場は葛西という初めて行った街。
ランチ時に歩いてみましたが、チェーン系のお店が多く、なかなかよい店がみつからず。
30分くらい歩いて見つけたのが『ティールーム 街角』。
少々古びた外観で、外から中が見えない薄暗さ。ランチがあるのかどうかも分からなかったのですが、ただならぬオーラを感じて入ってみました。

思ったより広い店内に、革張りの古い家具、オレンジ色のライト、外を見つめながら煙草を吸うおばあさん。無愛想だけど嫌な感じがまったくしない、無駄の無い接客。完璧すぎます。

フードはトースト系とビーフカレーのみ。
カレーはごく普通の美味しいさで、コーヒーも深みのある味わい。1杯1杯丁寧に入れられている感じで、後から入ってきた女性が注文したオレンジジュースはミキサーの音がして5分くらいかけて作っていたり。

あまりに落ち着く空間で、あっという間に時間が過ぎてしまいました。
こんなお店が近所にあったなら！！！

ぜひ次回のWordCampも葛西でやって頂きたいと思います。

しかし、最近 DW を使う案件（要するにdwtファイルと共に納品が必要）が久しぶりにぽつぽつとあり、平和なメモリ草原に不穏な空気が流れていたため、メモリを増設することにしました。

メモリ交換まとめ

MacBook (Late 2008) のメモリ仕様は

2GB（1GB SO-DIMMs ×2）1066MHz DDR3 SDRAM、SO-DIMM2スロットで最大4GBをサポート（http://support.apple.com/kb/SP500?viewlocale=ja_JP）

となっています。

DDR3 は昨年末はまだ割高感があったものの、2009年3月時点ではアップルのBTOでも既に4GBが+10000円となっており、バルクメモリは2GB1枚2000〜4000円くらいにまで下がっていました。

ロットによって違うかもしれませんが、デフォルトメモリがSAMSUNG製だったためバルクメモリですが同じくSAMSUNG製を選びました。価格は2GB 1枚3500円。

http://www.rakuten.co.jp/archisite/611814/1796387/#1468261

交換作業自体は簡単すぎるので省略します。（ASCII.jpにて詳しく解説されています）

交換後起動して4GB認識されていることを確認、念のためPRAMクリアして完了。

で、どう？

今までも512MBから1GB、1GBから2GB、という倍増は経験してきましたが、2GBから4GBとなると一気に2GBが増える訳で体感する効果もすごいです。
重量級のアプリケーションを複数同時に起動してもストレスなく動き、メモリマネージャーを見ていても常に1GBくらいは空いている余裕があります。

四隅にギリギリ手が届く広々としたデスクが2GBだったとしたら、半分近くは手が届かない大きな作業台。余裕があるってすばらしい。もうみんな4GBにすればいいと思う。（via）

メモリが安くなっている分、費用対効果が大きいのでお薦めです。

※どんなに広くても、散らかせばキリなし。