「UIデザイン」カテゴリーアーカイブ

プログレスバーの面白カスタマイズ

スウェーデン、ストックホルムのビクトル・ハーツ(Viktor Hertz)さんによる、コンピューターの処理待ち状態を知らせるプログレスバーを使ったジョークデザインです。

progress-bar-receiving-mail

メールを受信してる感あり。

progress-bar-cigarette

タバコ吸ってます。「止める」「もう一本」

progress-bar-half-full

心理テスト: プログレスバーは「もう半分進んだ」「まだ半分しか進んでない」(参考)

progress-bar-jedi

ジェダイになる: 辛抱しなくてはならない、おまえは。「フォースを使う」「ダークサイドに堕ちる」

日本のウェブデザインがこんなに悪い^H^H違う理由

Why Japanese Web Design is so… Different?(なぜ日本のウェブデザインはこんなに…違うのか?) というのが、はてなブックマークで人気になっていたので読んでみました。

英語で日本のウェブデザインを語る記事は、良くわかってないものも多いのですが、今回のはかなり正確に現状やその理由を捉えているように思いました。ポイントをざっとまとめます。

禅庭などの文化、建築などで知られる日本のデザインが、ウェブについては15年も古く見えるのはなぜか?

人気サイトとして楽天を例に (同様の例としてヤフージャパン、ニコニコ、JR東日本、読売新聞なども)

  • 詰め込まれた文字
  • 小さな低解像度の画像群
  • 多すぎるカラム
  • 派手な色使いと動くバナー
  • Flashなど古い技術の使いすぎ

言語の違い

表意文字 – より少ない文字で多くの意味を持つ。日本人はここから短時間に多くの情報を読み取れる

強調手段が足りない – 日本語にはローマ・アルファベットにあるようなイタリックや大文字が無い

言語の壁 – 多くのウェブ技術は英語がオリジナル、最新の情報が翻訳されるのに時間がかかるので流行がが遅れて来る

日本人にとっては、漢字も絵文字も小さなバナーも、絵という点では同じなんですよね。

文化の違い

リスクを取らない – 出る杭を打つ文化。よりよい方法があっても他とあわせる

消費者 – 購入前に詳細な説明や仕様を求める。キャッチフレーズやオシャレ画像には簡単に乗せられない人達

広告 – 企業はウェブをもう一つの広告手段として見がち。ウェブサイトは対話ツールというよりパンフレットの凄いヤツになり、詰め込みが発生

都市の風景 – 渋谷などに代表されるネオン広告だらけの街やパチンコ屋やゲーセンの大音量。空間の貴重さはウェブでも余白を無駄とする

職業 – 求人サイトの大量のウェブマスター・ウェブ管理者の求人が示す、一人がサイト全体を手作りする傾向。逆にクリエイティブな人々は大企業を避ける

技術的傾向

レガシーなモバイル – iPhoneよりずっと前から折りたたみ携帯でモバイルウェブを使ってきたため、小さなページに詰め込む傾向が元からあった

webフォント – 中国語などもだが文字数の多さからwebフォントが実用でない。変わったデザインが必要な時、デザイナーはテキストより画像に走ることに

Windows XPとIE6 – 急速に減ってはいるが、特に企業でこれら古いものが使われている

webフォントについては、僕もStackoverflowで回答しています。

まとめ

東京は1980年代に見た未来のよう。大企業たちが退屈な大量生産品を売りつける一方で、すごい職人たちがとんでもなく美しく機能的な物も作っている。

良い面を探せば、日本でもUNIQLO, MUJI, CookPad, 紀伊国屋などが美学のあり機能的なウェブサイトを提供している。他がそこから学んで追いつくことを期待しよう。

自分の理解できる余白スカスカ系のサイトを並べただけじゃ、という気もしますが。ユニクロや無印は世界展開してますし、海外志向とか制作体制の一体化とかもあって西洋人に受け入れられやすいデザインなんじゃないですかね。

僕自身は、英語でよく言われるほど楽天のサイトが見にくいとも、使いにくいとも思わないのですが。

# そりゃ美しいか? といわれると、美しいとも思いませんけど。宣伝メールの受信のデフォルトをオフにさえしてくれれば、そこまで不満はない

記事のタイトル、最初は「なぜ…違うのか?」ではなく「なぜ悪いのか?」になっていたようです。この結びを見ると、やはり著者は日本のwebデザインを「遅れたもの」と捉える考えからは抜け出せていないようで、そこは残念ですね。

[追記] 元の記事、というかサイトごと消えていますね。アクセス超過で一旦コンテンツを消したようです。

[再追記] 復旧したようです

[さらに追記] The Bridgeが翻訳を公開しました

AppSeed – 紙のスケッチからスマートフォンアプリのプロトタイプを作るツール

KickStarterで募金を募っているので、完成前のプロジェクトではありますが。

AppSeed は、紙やホワイトボードに手書きで書いたアプリのスケッチ画像を撮影し、ある程度動くプロトタイプを作って他人と共有もできる、という、プロトタイピングのためのツールです。

appseed-1

撮影したスケッチの中の四角の枠などを認識(OpenCVを使っているそうです)してくれて、そこに「次へ」とか「地図」とか「テキスト入力欄」といった役割を与えると、

appseed-2

その場でGoogle Mapsが配置されたり、テキスト入力ができたりするようです。

appseed-3

この動くプロトタイプを、メール等で他のスタッフに送ることもできるので、リモートのチームであってもUIデザインの相談が簡単にできそうです。

appseed-4

このプロトタイプは、HTML5アプリとして出力することも、Photoshop形式で保存することもできるそうです。

KickStarterの募金目標は既に達成されており、本日10/9が締め切りです。ツールのリリース予定は来年1月で、8カナダドルの支援者はアプリのKickStarter版が入手できるということ。

動画中のアプリの動作は実物のもの(=ものができてないのに特殊効果で動いてるように見せているわけではない)が、募金はアプリの改善のために使われるということです。

# クラウドファンディングの常で、必ず約束どおりの製品ができてくるかはわかりませんが

パソコンやタブレット上でのプロトタイプツールも色々なものが使える現在ですが、それでも紙やホワイトボードで画面を検討する、したい、という需要は多いのでしょうね。

via AppSeed Promise to Turn Your App Mock-ups into Working Prototypes

時間で色が変わるシャワーヘッド Uji で、節水や時間節約

パソコンやスマートフォンをずっと使ってる生活だと、そこにいつも時計があることは多いかと思います。シャワー中は、日常で数少ない、はっきり時間がわからなくなる時だという人も多いのではないでしょうか。僕は遅刻しそうと言ってるルームメイトがシャワーをなかなか終えないので心配したことがよくありました(結果遅刻してた)。

Ujiシャワーヘッドは、時間が経つ事で色が変化するというシャワーヘッドです。最初は青色ですが、

uji-blue

途中から色が変わり、

uji-green

最後は赤色になります。

uji-red

この商品は、人々のシャワータイムがもっと省エネルギーなものになるための助けになりますよ、とは発明家の弁。6ヶ月の実験結果では、このシャワーヘッドをつけてもらうことでシャワーの時間が平均で12%短くなったということです。

現在は7分で赤色になる設定ですが、この時間についてはまだ研究中で、将来変更されたり、あるいはユーザーが時間をカスタマイズできるようにすることも検討中なのだとか。

10年もすれば、シャワーヘッドか鏡か何かが遅刻しそうなら喋って教えてくれるようになるとは思いますが、シャワーが長くなりがちな人にとっては手軽で効果のあるアイデア商品かもしれませんね。

via Shower head shames you into taking shorter showers | DVICE

世界に一台しかない超かんたんケータイが作れるイギリスのOwnFone

イギリスの新しいプリペイド携帯電話OwnFoneは、かんたんケータイの考え方をさらに徹底したような、特定の相手にだけかけられる専用の電話機をカスタムメイドできるサービスです。
Ownfone1
見ての通り、電話機についてるのはボリューム、受話、オン/オフ/切断、そしてかけられる相手の名前のついたボタンだけ。通話先の名前と番号は、webサイトから自分でデザインして自分だけのカスタマイズOwnFoneを注文できます。
Ownfonecustomize
宛先ボタンは、2/4/8/12個つけられるようです。
「おばあちゃんにOwnFoneを作ってあげた」というこのサンプルだと、孫のジャッキーさんと999(緊急番号)にかけられるだけの電話を作っています。
Ownfone2
子供と一緒に、その子供のためのOwnFoneをデザインしている様子の動画がこちら。

日本でも、ダイヤルボタン以外をなるべく廃して電話機能に特化したらくらくホンとか、そのスマートフォン版もありますが、完全にダイヤルもできないというのは無かったような気がします。
[訂正] ドコモとauしか見てませんでした。ソフトバンクにみまもりケータイという、ボタン1個で接続先固定のケータイがありました。ソフトバンクすごい (感謝@takesako)
子供に持たせる系の日本のキッズケータイでも、電話できる相手を「電話帳にある番号のみ」などと固定できますが、それでもOnwFoneよりはボタン数が多く、本当に小さい子だと使い方を忘れてしまうかもしれません。暗証番号等がわかればアンロックして好きな番号にかけられるので、普通の携帯に機能制限モードをつけたようなものと考えて良さそうです。それに対して、OwnFoneではそもそもボタンの無い相手にかける方法がないので、たとえ紛失して拾われても、拾った人がそのOwnFoneを使うメリットがまったく無さそうな所も利点でしょう。
一人暮らしの老人に持たせる、子供に持たせる、といった使い方以外にも、ランニングの時にはOwnFoneを持っていく、とか、メインの携帯電話は不要だけれど最低限の連絡は取れるようにしたい、といったシチュエーションで使うことも提案されているようです。
緊急番号999(日本でいう110や119?)を一番最後のボタンに割り当てることもできます。ボタン二つでそのうち一つが緊急番号だと、簡単に警察や救急車を呼べてしまってよくないのではと思いましたが、緊急番号にかける時は3度押さないといけないそうで、間違ってかけるというのは避けられるのかも。
OwnFoneでは、このあと、ボタンの点字対応や、写真対応を予定しているそうです。
Ownfone7
子供とか認知症の老人に使わせることを考えれば、文字で名前を書いたボタンよりも相手の顔写真のボタンの方が、より直感的で使いやすそうですね。
ウェブで完全に自分向けにカスタマイズした商品を一品買いするというのは、シューズメーカーのナイキがやっているNIKEiDとかも思い出しますね。このOwnFoneの値段は55ポンド(約6800円)。通話料はプリペイドで購入し、切れたら追加でチャージ購入するシステムです。
via OwnFone will only let you call the people most important to you | The Verge

iPadのソフトウェアキーボードでタッチタイプを可能にする補助アイテムiKeyboard

Ikeyboard1
なるほど! 指の場所が決まれば、見なくてもキーボードが打てるかもしれないですね。

Ikeyboard3

タブレットはハードウェアキーボードが無いぶん、ノートパソコンに比べて小さくて軽いし、ソフトウェアキーボードは使うときだけ表示できるのも良いところです。もしこのガジェットで手元を見なくてもキーが打てるようになるのなら、外出はタブレットだけで十分、という人も増えるのではないでしょうか。

Kickstarterで30ドル(3404円)以上貢献すると、一番最初の試作品が一個もらえるということですよ。