月別アーカイブ: 2012年8月

透明なWebデザイン

Twitter Bootstrapは素晴らしいんだけれど、何か腑に落ちない。 まずメニューバーがStickyで視野を制限してくるし、ボタンだらけになるし。 無個性のようでいて、結構主張が強いのはどうしたことか。

「使っている事を感じさせない」デザインがいいとはよく言われる通り。 ここでは、透明なWebデザインはどうであるべきか問い直す。

グラフィックが、自分自身を説明していること

シンプルなページを作ろうとするとき、 テキストUI+テキスト+DIVによるブロックのみとすることがある。

テキストだけで情報表現を行うのは、確かに「シンプル」ではあるけれども、 「ここには何が書いてあるのか」といった点を一目で把握できる訳ではない。 まずは図表の採用を検討すべきである。

一番目に入りやすい場所でデータのビジュアライゼーションを行う。 「このページは何についてのページか?」「データの大まかな傾向」を 目視で確認することが出来るようにデザインする。

テキストUIに対して、デザインされていない印象を持つのは、 そのページが視覚面での自己紹介を怠っているためである。

視野を妨げる・見たいものに被さるデザインを採用しない

ボタンが沢山ある、メニューバーがある、といったデザインは コンテンツへの集中を妨げてしまう。 中立かつ透明なUI部品を使うことで、没入感のあるサイトにすることが出来る。

しかし飾りっ気のない、透過されたUI部品を使っていても没入感が妨げられることがある。 例として、ZeroWatchのコメント欄(透明度が高く普段は隠れているが、マウスオーバーで表示される)や、 Google Plusのフレーム(サイドバー、検索窓などを含む。視野を制限されている感じが強い)がある。

Stickyなメニューバーや、スクロールインしてくる UI部品などは、そこに目が行ってしまう上に、目が行ったところの情報を隠してしまう。 普段は隠して置いて、状況に応じてコントロールを出すのは、一見合理的に見えるけれど、 動きのある場所に目が行ってしまうものなので、実際は邪魔になることが多い。

なので、まずは視野を制限するようなコントロールをそもそも画面上に置いてはいけないし、 マウスオーバーで重なってもいけない。

シンプルさを追求しすぎるより、アイコンの記号性を活用する

ここでいうミニマルデザインとは、Metroや、一部のFlashサイトで使われているような、 丸とか四角でデザインされたUIを指す。

個人的には、単なる小さなアイコンよりも、丸とか四角の方が目立ってしまうように感じる。 ちょっとしたイラストは、「図」よりも「地」になりやすいのかもしれない。

また、素人目にも、アイコンを使った方が「デザイン」されている印象を持ちやすい。 アイコンの機能性や色の識別性、雰囲気の整合性を積極的に使っていく。

UIは、一旦決めた場所から動かさない

記憶というのは場所に紐付いているもので、 状況が変わる度にコントロールが動かれては使いづらい。

jQuery等でSlideDownが簡単に使えるようになったが、 安易に使わず、できる限り場所を固定しておきたい。

UIがオブジェクトの直接操作になっている場合に限り、 コントロールの移動が許される。 (オブジェクトの場所とコントロールが紐付いている為、別の場所への集中を必要としない)

例としては、PhotoshopやIllustratorにおける拡大縮小ハンドルなど。

ごちゃごちゃもデザインの一つ

mixiのリニューアルの際、適切なマージンを取っていたものの、「白すぎて見づらい」という苦情が出たことがあった。 理不尽といえば理不尽な感じもするけれど、マージンが無条件に読みやすさに貢献するわけではなく、 多くが無視されてしまうコンテンツ(ニュースサイトとか、日記の件名一覧とか)だと、圧縮して一度に多くのコンテンツを 一覧出来た方が「探しやすい」のではないか。

行間についても同じようなことが言えて、 広く行間を取るのは一見読みやすいけれども、 プログラムのコードの行間は詰まっていないと読みづらい。

「内容の全てを読ませる」場合のみ、行間は役立つのではないだろうか。

白すぎる、というのは、液晶というのは発光する媒体である、ということも 関わっていると思われる。文字が多くて画面が黒い方が読みやすいのだ。

Webアプリケーションを成果物中心に

アプリの終わりの始まり、という記事を読んで、Webアプリにこそこういった「使い捨て指向」が必要ではないかと思った。

大抵のWebアプリでは、自身のストレージに抱えこんだオブジェクトの編集しか許していない。ちょっとした画像を編集したいだけで、ユーザが下記のような行動をさせられるのは適当だろうか。

  • 「特定のWebアプリ」を開き
  • 「特定のWebアプリ」にサインアップし
  • 「特定のWebアプリ」の機能を使い
  • 「特定のWebアプリ」でしか再編集出来ないコンテンツを作る

基本的にユーザはサインアップして、無用な個人情報を公開したくない。現状、インストール以上に面倒な手順を踏まされている。そのためにOAuthがあるんだろうけれど、そもそも認証の必要自体があるんだろうか。

Pixlrの様な、サインアップをせずとも使えるWebサイトが望ましい形なのではないかと考えている。問題は編集したものをどこにストアするかなんだろうけども…(サインアップしてないので、自サーバに保存させたとしても削除権限をユーザに与えられない。掲示板みたいに、削除用パスワードを設定させるのが一つの解になるかな?)。

再編集が作成時と同じWebアプリでしか出来ない、というのも考え物だ。Webアプリの成果物ってどうやって再活用するんだろうか。エクスポート出来るのもあるけれど、本来はシームレスにWebアプリを切り替えて、得意な部分は他のアプリに任せたいところなのだけれど。

いちや先生の10の提言

いちや先生の。これ、個人の力で、小さく実現出来ないだろうか。ニーズさえ見いだせれば、もっと大きな所に持ち込む事も可能になるんじゃ無いか(甘いか)。

1.全番組がテレビ、PC、ケータイでアクセスできる(現在13%の地上放送二次利用比を2015年に50%に引き上げる)

これは無理かな。ニコニコに任せていればいいと思う。

2.世界の国々で日本の全コンテンツがアクセスできる(現在2.5%の「国内市場に対する海外収入比」を2015年に10%に引き上げる)

ローカライズ頑張ろうという話。Pixivとかはもっと頑張ってもいいかもしれないな。コミックSubを付けられるプラグインでもあればいいんだけどな?

3.紙、CD、DVDを使わなくて済む(現在39%の通信・放送流通比を2015年には75%に引き上げる)

ネットレーベルはもう物理メディアに頼っておりません。

4.どこにいても緊急情報に触れることができる(現在650億円のデジタルサイネージ市場を2015年に1兆円に引き上げる)

これは携帯のエリアメールとかで実現されているかな?デジタルサイネージはさすがにもう伸びる余地は無い気がする。

5.買い物はすべてケータイでできる(現在1.5%の小売・サービス分野のEC化率を2015年に5%に引き上げる)

Amazonの力だけど、これは問題なく実現している。個人の店とかは楽天使ってるのかな。

6.大学、病院、役所の活動はすべてオンラインで処理できる(現在30~50%の教育、医療・福祉、行政サービスのICT利用率を2015年には60%に引き上げる)

これ、全然だめだ。運営している側が求めてもいなさそうだし。

7.ロボットが演じるドラマが実現する

面白いけど、小さな形で実現したのが「gdgd妖精s」なんじゃないかな。

8.一流ポップクリエイター志願者は日本に留学する(海外からの留学生30万人のうち4万5000人がコンテンツについて学べる大学/大学院を整備する)

インターンするとかならいいのかもしれん(日本で働きたい、という人はたまに居る)。

9.全国民がアニメ制作と作曲ができる(2015年には3割の小学生がアニメ制作・作曲ができるようにする)

小学生向けすたどんたん作るか。

10.結果、コンテンツ産業が拡大する。

するといいね。個人的にはコンテンツ制作系雑誌がもっと盛り上がるといいなあ。

小さく作るということ

喜ばれることはあまりないが、小さく作り直すことで、より(作っている人間の)満足感の高いソフトウェアを作ることができる。

小さく作り直すことの利点は何だろう。

1.フォーマットを他社が利用出来る。

肥大化したシステムのデータ再利用性は著しく下がる。例えばPDFなんかはフォームも入れることが出来るが、使わないし、脆弱性を作るし、互換性の妨げになっている。 ちゃんとデータを作り直すことで、データ構造をクリーンに保てる。

2.コンポーネントとして、他のソフトウェアに組み込み出来る。

そのツールであれもこれもやりたいが、利用シーン自体が異なる、という場合、ツールのコアになる部分を抽出してコンポーネントとして公開することが出来る。OSSにしてしまえば、さらに利用者からPull Requestを受けることも出来る…のかもしれない。

3.移植性が高まる

コードベースが小さくなることで、他の言語に移植しやすくなる。

基本的に作り直しは悪手だけれど、コードも一から書き直しをせず、ロジックを流用することでそれなりに手間は削減することが出来る。