待つこと１ヶ月。CEREVO CAMがやってきた!

翻訳書、発売

去年末に翻訳書が発売された一冊。オライリーからインターフェイスデザインについての本は数冊でていますが、中でも一番具体的で速効性があるといえそうです。ajax以降のフロントエンドの使い勝手にフォーカスし、ケーススタディの集積から、系統だててデザインパターンとしてまとめあげたベスト・プラクティス集となっています。監訳者の浅野さん（http://blog.iaspectrum.net/）に献本いただきました。ありがとうございます！

本の内容について

「いずれデスクトップとウェブの境界はますますあいまいになってくるだろうが、それでもウェブでのリッチインタラクションを作ることには独特の特徴というものがある」と言う著者の一人、Bill Scott（http://looksgoodworkswell.blogspot.com/）は、Yahoo!在籍時代にYahoo! Design Pattern Libraryの一般公開に貢献した人物。共著のTheresa Neil（http://www.designgenie.org/）は、フリーランスのインターフェイスデザイナとのことです。

少しだけiPhoneやFlashによる実装の事例も含まれていますが、対象は主にPC向けサイトにおけるajaxを前提としたものといってよいでしょう。ロールオーバーが多用されてることや、画面サイズの差から考えても、ここに掲載されている手法はモバイルやiPhoneでは使えないことも多いはず。スマートフォンとi-modeブラウザ2.0搭載のDocomo端末をのぞくモバイルではJS使えないですしね。Flashの場合にも援用できますが、前提としている制約が違うかな、とは思いました。

使い勝手について、動作ロジックも含めてかなり細かく解説されていますが、具体的なデザイン手法やソースコードには触れていず、まさにユーザー・インターフェイスにフォーカスした内容になっています。少し前にとりあげたページングについても、カルーセル型も込みでばっちり規定されてました。素敵！

とりあげられているサイトは、メジャーで大勢の人に使われている今も動いているサイトが多いので、実際に触って確かめられるほか、デザイナー以外の人へ挙動を説明するのにも有用です。
またこれらを実際に多くの人が使っているということは、これらのユーザー・インターフェイスを学習しているともいえる訳で、この洗練ともいえる振る舞いや手法を、踏襲するにしてもしないにしても参考にせずにはいられないでしょう。
原書を持っていたのですが、素晴らしい和訳書を得た今、躊躇なく売るつもりですw

目次

• 第１原則　直接的なインターフェイスを作ろう
  • １章　ページ内編集
  • ２章　ドラッグアンドドロップ
  • ３章　直接的な選択
• 第２原則　軽快さを心がけよう
  • ４章　コンテキスト連動型ツール
• 第３原則　１ページで完結させよう
  • ５章　オーバーレイ
  • ６章　インレイ
  • ７章　バーチャルページ
  • ８章　プロセスフロー
• 第４原則　インビテーションを仕掛けよう
  • ９章　静的インビテーション
  • １０章　動的インビテーション
• 第５原則　トランジションを利用しよう
  • １１章　トランジションのパターン
  • １２章　トランジションの目的
• 第６原則　すばやく反応しよう
  • １３章　情報探索のパターン
  • １４章　フィードバックのパターン
• エピローグ

実現に向けて

読者対象としては、デザイナーやエンジニアをはじめ、企画職の方や、企業のご担当者などにも読んでいただきたいと思いますが、実現にあたっては、デザイナーが主導することが肝要です。具体的には用語ひとつ、機能ひとつ、実現したいこととインターフェイスの結びつきひとつにとってもデザイナーでない人の場合には齟齬が発生する可能性があって、それは専門ではないので当然のことともいえますが、そこは正しく、険がないようにw 矯正してあげることが必要です。

また自戒をこめて書きますが、実現にはデザインマターだけではなく、プロジェクトの座組みや進行に如何にきちんと組み込むか、にかかっているともいえそうです。具体的にはフロントエンドのスクリプトを誰が書くのかといったことや、作業負荷の見定め、システム会社との連携を如何にスムーズに行えるかが求められます。

ウォーターフォール型かアジャイル型かによっても違ってくると思いますが、できるだけプロジェクトの早い段階でこういったことをプロジェクトチーム内で共有し、実現できそうかどうかを見極めることが大事といえそうです。

ぜひ手にとって読んでみてください。

• O’Reilly Japan – デザイニング・ウェブインターフェース
• IA Spectrum: 監訳書『デザイニング・ウェブインターフェース』が発売されます

日本語対応したハードウェアキーボードは、まだ改善の余地があるんじゃないかという話。

入力モードが英語兼ショートカットと日本語の２モードあるのに、現在どのモードを選択中かをハードウェア的にわかりやすくなっていないんじゃないかと。せいぜいランプの点灯をトグルスイッチ的に表示しているだけとか。

Photoshopでショートカットを使うんですが、英語入力モードでないと有効ではなく、操作直前にモードを確認する必要があるんですが、これがちょっと面倒で。個人的にはソフトウェア的に目立たず大きく表示してくれるImageUpを入れているのと、相対切り替え（押す度に日英切り替わる）ではなく絶対切り替え（押せば必ず英語入力モードに）のキーバインドを設定しています。

やや脱線気味にPhotoshopの話を続けると、iPhoneアプリでショートカット集をソフトウェアキーボード化したアプリでPhotokeysというのがありましたが、英語圏のアプリなので特に強制的に英語モードにするわけではないので操作直前に確認するというプロセスをはさむことになり、心理的なワンクションや実際の手間は変わらず。入力時、矯正的に英語入力に切り替えて、その後操作前の状態に戻してくれるのであれば有用かなと思います。誰か作って!

以下Photoshopの話から一般的な文字入力に話を戻しますが、その点、iPhoneでいいなと思うのが、ソフトウェアキーボードであることで、これはナビゲーション用ボタン、これは英語キーボード、日本語キーボード、と出し分けることができること。入力がしやすいかはここでは問題にしませんが、少なくとも何が入力されるか自体は迷いようがない（入力したい文字が画面上にない場合は迷う可能性がありますが）。
ソフトウェアキーボードであることが、たどり着く唯一の正解とは思っていないんですが、ハードウェア的に解決はされていないんじゃないかと。

制作に使う場合とウェブブラウジングなど遊びに使う場合など目的にもよると思いますが、例えば仕事でPC使わないでリタイアしたシニア世代とか、キーボードになじみのない人たちにとっては現在のキーボードはエンジニア専用端末すぎて使いづらいんじゃないかと。これおそらく英語圏の人たちはあまり問題意識を感じないと思うので、なんとか日本製で良いものが出てこないかなー、と思ってます。英語よりも合理的な、日本語の50音配列を生かした配列の文字入力デバイスというか。

LEADING EDGE DESIGNさん作のメディアアートっぽいプロダクトで、tagtypeというものがありました。
日本語の50音配列を生かし、行選択のち列選択で文字を確定させる感じ。すばらしい。これは市販されていないはず。
障害を持たれている方をそばで１ヶ月近く観察して、ゲームコントローラを流暢に扱っているのを見たのが発想の原点とのこと。

実際に手にとってみたことがあって、写真をじっくり見てもわかりますがその時気づいたんですが、日本語は、行が１０行、列が５列なので、行入力には左右両側に入力項目が並んでいて、列入力には同じ値のものが左右両方に同じ値が並んでいます。
なので文字によって、最初に押す行の側で列も入力できるようになっています。ここは最初は少し戸惑うかもしれないけど慣れてしまえば使いやすそう。

もちろんこれでPC使って制作に使う用途にはむいてないので、ブラウジングなどで必要最低限、文字入力が必要な人への入力デバイスとしては面白いんじゃないでしょうか。

マウス

iTunes Storeが先日リニューアルしました。
HTMLベースになり、以前よりもだいぶすっきり＆まともなデザインになったと思います。

びっくりしたのが横スクロール対応。

以前はこんなのでした。

大胆だなーとしばらくアホみたいに眺めていたのですが、少しおいてMagic Mouseが発売されて合点した次第。
デバイス的に縦スクロール／横スクロールが等価的に扱えるので、横スクロールを疎ましく扱う必要がない、と。
なるほど。と思ったのですが、実はその前のMighty Mouseでも横スクロールは対応されていた。

すべてのiTunes Storeユーザーがアップル製マウスを使う訳ではないので、先取りするならサービスの主戦場たるiTunes Storeでやるよりもアップルのサイトなどでやればいいのではと思いましたが。ホイールつきマウスは一般的に縦スクロールのみ対応、のちに横スクロール対応のものも出てきました。これは縦スクロール用のホイールを横に倒すという若干力技な仕様。
一般的にディスプレイモニタは横に長いので、デバイスの普及具合によって、今後はウェブサイトでの横スクロール対応の仕方が変わってくるのかもしれません。

ディスプレイ

愛用中のNECのLCDモニタ（MultiSync LCD2690WUXi2）これはWUXGAなんですけど、縦置きでも使えるので買ってみたのですが、縦に置くと横幅が1200pxになってしまい、狭く感じてしまうというオチ。
ウェブをブラウジングするだけ使う分にはあまり問題ない感じでしたけど、Photoshopで使うとフォントリストが豪快なことだけは確か。

日本では珍しい、ネット家電ベンチャー、和連和尚のブログ「キャズムを超えろ！」でもおなじみのCEREVOさんの、ロゴおよび基本的なデザインのトーン作りを担当させていただきました。具体的には今月発売予定のネット連携デジカメの、ソフトウェアUI、連携ウェブサービスなどを担当させていただきました（実装や展開部分は担当していませんが）。

今週木曜日(12月10日)、渋谷でお披露目イベントが予定されてまして、参加する予定です。当日参加される方は、どうぞよろしくお願いします。

Thunderbirdチームが取り組むプロダクトで現在開発中。
現状クライアントアプリとして動きますが、将来的にはウェブサービスを目指しているよう。
Twitter, IM, Skype, Facebook, Google Docs, Emailなど、アプリケーションに分断されてしまうコミュニケーションをアグリゲートし、あくまでシンプルなUIでコミュニケーションそのものにフォーカスしてもらう目的があるとのこと。
白眉だなと思うのは、メールの取り扱いも含めていることで、メーリングリストなどにまつわるメーラー上の煩雑な設定を避けたい目的があるといいます。
GoogleWaveとも近しいですが、開発よりというより、一般の人が日常的に使う想定のようですね。
どうせならtwitter専用端末といわず、Raindrop端末みたいなものが出てくると面白そう。

開発中の画面がいくつかFlickrにあがってました。

• Picasa Web Albums – Kosei – raindrop
• 責任者に聞いた!! Mozilla新プロジェクトRaindropとThunderbirdの最新状況

撮影後、何もしていない写真のExif：

Exif IFD0

• Camera Make = Apple
• Camera Model = iPhone 3GS
• X-Resolution = 72/1 ===> 72
• Y-Resolution = 72/1 ===> 72
• X/Y-Resolution Unit = inch (2)
• Software / Firmware Version = 3.1
• Last Modified Date/Time = 2009:10:06 20:45:32
• Y/Cb/Cr Positioning (Subsampling) = centered / center of pixel array (1)

Exif Sub IFD

• Exposure Time (1 / Shutter Speed) = 1/15 second ===> 0.06667 second
• Lens F-Number / F-Stop = 14/5 ===> ƒ/2.8
• Exposure Program = normal program (2)
• ISO Speed Ratings = 165
• Exif Version = 0221
• Original Date/Time = 2009:10:06 20:45:32
• Digitization Date/Time = 2009:10:06 20:45:32
• Shutter Speed Value (APEX) = 3711/949
• Shutter Speed (Exposure Time) = 1/15.04 second
• Aperture Value (APEX) = 4281/1441
• Aperture = ƒ/2.8
• Metering Mode = spot (3)
• Flash = No flash function
• Focal Length = 77/20 mm ===> 3.85 mm
• FlashPix Version = 0100
• Colour Space = sRGB (1)
• Image Width = 800 pixels
• Image Height = 600 pixels
• Image Sensing Method = one-chip color area sensor (2)
• Exposure Mode = auto exposure (0)
• White Balance = auto (0)
• Sharpness = soft (1)

Exif GPS IFD（GPS値の一部を伏せ字に）

• GPS Latitude Reference = N
• GPS Latitude = */*,*/*,*/* [degrees, minutes, seconds] ===> *° *.*′
• GPS Longitude Reference = E
• GPS Longitude = */*,*/*,*/* [degrees, minutes, seconds] ===> *° *.*′
• Links to online mapping websites
  • Google™ Maps
  • Yahoo!® Maps
  • MSN® Maps & Directions
  • Mapquest®
  • Open KML data with Google™ Earth
  • Save KML data to file
  • Save KML data to file and open with Google™ Earth
• GPS Time Stamp / UTC Time = 20/1,44/1,1980/100 [hours, minutes, seconds] ===> 20h 44m 19.8s
• GPS Image Direction Reference = magnetic direction
• GPS Image Direction = 17/1 degrees

MMSを通した後のExif情報：

Exif IFD0

• X-Resolution = 72/1 ===> 72
• Y-Resolution = 72/1 ===> 72
• X/Y-Resolution Unit = inch (2)
• Y/Cb/Cr Positioning (Subsampling) = centered / center of pixel array (1)

Exif Sub IFD

• Exif Version = 0221
• FlashPix Version = 0100
• Colour Space = sRGB (1)
• Image Width = 800 pixels
• Image Height = 600 pixels

元ネタ

• iPhoneで撮影した写真の危険性と対策のまとめ | MY IPHONE . JP
• 【注意喚起】iPhoneから個人情報が漏洩している可能性アリ！ – ロケットニュース24（β）

少し前の話になりますが、前職時代にアートディレクションを担当しました「演劇ライフ」が第4回 アックゼロヨン・アワードにおいて入賞しました。賞の性質を考えると、きっちりワイヤーフレームを作ったことと、HTML実装とシステム実装を同じ社内で密に行ったことが活きているのでしょう（いずれもぼくの担当ではないですがw）。関係者の皆様おつかれさまでした!

参議院はともかく衆議院は特に、そもそも国政に参加する政治家を選ぶのに、地域に候補者を紐付けてしまう所がすっきりしないんですよね。

ウィキペディアなので正確かわかりませんが、昔（1947年から1980年）は衆議院選挙で全国区制が行われていたのですね。ネットがない時代には、選挙活動の範囲が全国に及ぶので選挙費用が膨大にかかったようですが、これはネットで選挙活動や投票ができればかかるコストやあり方がだいぶ変わってくるのではないでしょうか。

（衆議院でいうと小選挙区比例代表並立制から）全国区制へ移行するメリットとして思いつくものをあげますと、

• 政党でなく政治家個人単位で支持を表明できるようになる。

• いわゆる1票の格差が全くなくなる。

• 候補者と地域の利益が結びつきづらくなる。

• 出馬する地域によって競争率が異なる現状が解消される。

一方で選挙活動が地域に紐づかないので、町中を街宣車で騒音をまきちらしながら名前を連呼して走り回る必要がなくなり、演説する場所は効率を重視すれば人が集まる場所に収束していき、政策の訴求は全国を対象とするのであればネットや他のメディアが中心になり、有権者は「Yahoo!みんなの政治」のような人名ディレクトリに掲載されている、経験した役職や実績のリストやマニフェストなどを参照して判断し、自分の支持する政治家へ貴重な一票を投じることができる、と。

仕組みだけで考えると総理大臣も直接投票できてしまうかもしれませんが、まずは国会議員だけでも直接投票できるようになってほしいですね。

政治家にとっても政局よりもちゃんと実績を残す方にインセンティブ的なものを感じるようになるんじゃないか、そうなってほしいという率直な思いです。あきらかにこっちの方が風通しがよさそうに思うのですけどねー。素人の一意見でした。

49階で眺めもよくて室内空間もゆったりしていて、人はたくさんいますが席間の距離がたっぷり取られてるので作業中はあまり気になりません。本もたくさん置いてあるし、週2回も行けば十分元がとれそう。

実際に来てみて施設を使ってみましたが、色んな場所に、色んなタイプの机とイスのセットがあるので、自分のする作業に応じてフリーアドレス制のオフィスみたいに席を選べるのがいい感じです。
無線LAN（パスワード保護されてないけど）完備、電源完備、複合機（カラーA3も出る）完備。
飲み物とかプリンタ出力代もいたって普通の値段で六本木プライスとかじゃないですね。
初回月は会費無料。なので月の頭に申し込んだ方がお得のようです。

あ、あと比較検討のため、ちょっと前はてブで盛り上がってた勉強カフェも早速行ってはみたんですけど、実は月会費はこちらの方が高かったりするんですよね。あとは副都心線なので個人的にはアクセスがちょっと悪かったかなー、と。

という訳でしばらくは週2〜3日ぐらい六本木にいることにします。
何かあればtwitterアカウント（@yuichy）までDMでお声がけください。

#しばらくブログ書いてなかったのですが、ライブラリーから早速投稿。

.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.–.

国民生活金融公庫の融資制度を利用するつもりだったんですが、結果からいうと一旦見送りました。

元資金の２倍まで借りられるんですね。でそれを元にした事業計画を立てるので、創業時の必要資金としては手持ちの３倍が基準になります。
500万あれば1500万の事業計画になる訳ですが、大きな出費であるオフィスを借りるタイミングと、公庫へ申請するタイミングをちょうどうまく合わせるのが困難なわけです。

オフィスを借りる前と後で手持ちの資金が変わってくるので、どちらのタイミングで事業計画書を出すかで計画書の数字がかなり変わってきてしまう、と。この辺ほかの人はどうやってるんだろう…。

オフィスはいい物件であればあるほど、仮契約なんてしてくれません。
また公庫の方も申請から面接まで２週間程度、その後結果が２〜３週後としても１ヶ月かかる訳で、この間オフィス物件を仮契約しつづけるというのも難しいのではないでしょうか。

以前から申請する前提で、商工会議所に何度か通って創業計画書を準備して、各所から見積もり取ったりしていたので残念ですが、numbers（Macのエクセルみたいなソフト）の操作はこれで覚えたのでまあいいっか。

せっかくなので、いくつかtipsです。

公庫の面接は落ちると記録に残るらしいので、面接で見込みがないと思ったらその場で申請を取り下げた方がいいらしい。

借りたお金で月々の利払い自体は出来てしまうので、そうではなくてちゃんと利益から返済できる事業計画にして、それを口に出してアピールすることが大切。

商工会議所の人でも意外に金利を正確に把握していなかったりするので、公庫で面接前の相談予約をしてその場で事業計画を見てもらうと話が早そう。

事業計画の説得力は、自分（の会社）以外からみた自分（の会社）への数値的な評価。そういう意味ではビザの申請に似てるのかも。申請したことないのであれですが人の話を聞いてそんな印象。

もしくは昔の銀行が、融資先の会社の事業計画や内容を評価できるスキルがないので、土地を担保にしか貸すお金を決められなかったのと同じ感じといいますか。

公庫の人は、業種ごとのの相場感は持っているでしょうが業界知識はないものとして話す必要があるので、専門外の人へ自分の専門を分かりやすく説明する必要があるかと思い、わかりやすく説明しようと試みる訳です。
が、その辺は肩すかしな程フンフンフンと聞き流されて、結局集めてきた書類とそこに書かれた数字しか見ていないような印象ではありました。そういう意味では、よりアピールできる数字と書類を作れる行政書士に頼む方が楽かもしれません。