circumstance evidence | 状況証拠 – ヤザキユウイチ

「デザイニング・ウェブインターフェース」発売

翻訳書、発売去年末に翻訳書が発売された一冊。オライリーからインターフェイスデザインについての本は数冊でていますが、中でも一番具体的で速効性があるといえそうです。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 目次第１原則　直接的なインターフェイスを作ろう１章　ページ内編集２章　ドラッグアンドドロップ３章　直接的な選択第２原則　軽快さを心がけよう４章　コンテキスト連動型ツール第３原則　１ページで完結させよう５章　オーバーレイ６章　インレイ７章　バーチャルページ８章　プロセスフロー第４原則　インビテーションを仕掛けよう９章　静的インビテーション１０章　動的インビテーション第５原則　トランジションを利用しよう１１章　トランジションのパターン１２章　トランジションの目的第６原則　すばやく反応しよう１３章　情報探索のパターン１４章　フィードバックのパターン ...

Jan, 08 · in review

キーボードとマウスとディスプレイ

キーボード日本語対応したハードウェアキーボードは、まだ改善の余地があるんじゃないかという話。入力モードが英語兼ショートカットと日本語の２モードあるのに、現在どのモードを選択中かをハードウェア的にわかりやすくなっていないんじゃないかと。せいぜいランプの点灯をトグルスイッチ的に表示しているだけとか。 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で使うとフォントリストが豪快なことだけは確か。

Dec, 13 · in opinion

CEREVO CAMいよいよ発売

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

Dec, 08

Raindrop

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

Dec, 04

iPhone上で撮影済みの写真からExifを削除

iPhoneで撮影した写真をそのままウェブにあげると位置情報ダダ漏れしている件が気になってたので自分でも調べてみました。設定の一般 > 位置情報サービスを「オン」にした状態で撮影をすると写真画像にExifが埋め込まれますが「iPhone上で撮影済みの写真からExifを削除できないか」と調べていたところ「MMSで写真を送る」とExifが削除されるとの情報を発見。試しに自分宛に送ってみたところ、削除されている様子でした（Firefox extensionのExif Viewerとプレビュー.appで確認）。ある意味、富豪的な解決方法? 削除できるiPhone アプリがあればいいんですが、なくても「自分宛にMMS」で解決できそう。個人的には普段は位置情報サービスを「オン」にしておいて、ウェブに乗せて差し障りのあるものだけ「自分宛にMMS」しようかと。撮影後、何もしていない写真の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) ...

Oct, 08

演劇ライフがacc04入賞

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

Sep, 30

ネットで選挙活動／投票できるようになることの本質って？

ネットで選挙活動ができるようになったり、実際にネットで投票ができるようになったりした場合の目指すべき本質は、よくいわれる無党派層／無関心層の票の掘り起こしにとどまらず、その先にある、選挙制度の全国区制（地域にとらわれない言い方をすれば直接投票）への移行なのではないかと思います。参議院はともかく衆議院は特に、そもそも国政に参加する政治家を選ぶのに、地域に候補者を紐付けてしまう所がすっきりしないんですよね。ウィキペディアなので正確かわかりませんが、昔（1947年から1980年）は衆議院選挙で全国区制が行われていたのですね。ネットがない時代には、選挙活動の範囲が全国に及ぶので選挙費用が膨大にかかったようですが、これはネットで選挙活動や投票ができればかかるコストやあり方がだいぶ変わってくるのではないでしょうか。（衆議院でいうと小選挙区比例代表並立制から）全国区制へ移行するメリットとして思いつくものをあげますと、政党でなく政治家個人単位で支持を表明できるようになる。いわゆる1票の格差が全くなくなる。候補者と地域の利益が結びつきづらくなる。出馬する地域によって競争率が異なる現状が解消される。一方で選挙活動が地域に紐づかないので、町中を街宣車で騒音をまきちらしながら名前を連呼して走り回る必要がなくなり、演説する場所は効率を重視すれば人が集まる場所に収束していき、政策の訴求は全国を対象とするのであればネットや他のメディアが中心になり、有権者は「Yahoo!みんなの政治」のような人名ディレクトリに掲載されている、経験した役職や実績のリストやマニフェストなどを参照して判断し、自分の支持する政治家へ貴重な一票を投じることができる、と。仕組みだけで考えると総理大臣も直接投票できてしまうかもしれませんが、まずは国会議員だけでも直接投票できるようになってほしいですね。政治家にとっても政局よりもちゃんと実績を残す方にインセンティブ的なものを感じるようになるんじゃないか、そうなってほしいという率直な思いです。あきらかにこっちの方が風通しがよさそうに思うのですけどねー。素人の一意見でした。

Jul, 07

Feeds

Susbscribe to our awesome Blog Feed or Comments Feed

Pages

Categories