plusadd blog: Design アーカイブ

ユーザインタフェースにおける「制約」と「自由」 (Apple vs. Microsoft)

本日発表のiSlate？の発表に夜も寝れないhiroyukiです。楽しみですね〜。

カーソルの移動にボタンがダメなら、他の手段はどうでしょうか。iPhoneのユーザインタフェースとして真っ先に思いつくのは、傾けるとカーソルが動くというもの。右に傾ければカーソルキーがトトト、と右に進むイメージです。

これは、Appleの開発者にしてみればもちろん思いついていたでしょうし、実装もおそらく簡単なものです。もしかすると既に機能としては入っているかもしれません。が、いずれにしても今は使えない、つまり、ユーザがそれを選択することをAppleは許されなかったわけです。

こういった「強い制約」が、Appleの製品らしさたるものではないでしょうか。

新年に入ってから、いつでもどこでもモノづくりのhiroyukiです。

--
そんな中、良く見るブログの一つである金融日記さんが「ロゴを募集！」しているとのこと。

最近、Twitterをはじめて、自分でロゴを作ったのですが、これが自分でいうのもなんですが、なかなかしょぼいんですよね。
誰か金融日記のかっこいいロゴ作ってくれませんかねー？
ついでにライブドア・ブログの方も作ってもらえると超助かります。

というわけで、早速作ってみました。左から、16px、60px、160pxサイズとなっています。

ロゴ1

ロゴ2

ロゴ1の方は16pxになってもロゴの"雰囲気"が残るようにし、ロゴ２の方は「金融日記」というサイト名そのものをイラストにしてみました。また、ライブドア標準の縦横60pxを基準に作っています。

60pxという制約の中でデザインするのは勉強になりました。いかにシンプルに分かりやすく表現するか、ということを心がけて書いてみたのですが、思いの外狭いんですよね。

そこで考えてみたこととしては、

一目でサイトの印象が伝わるデザインになっているか ⇒ 金融を表すシンボルとして「￥」や「＄」を使ってみる、金融関連ニュースで見かける配色(青)を使う
16px(favicon的な利用？)にしたときでも、元のアイコンの印象を残せるかどうか ⇒ 文字を大きめにする。全文字を大きくすると面白みにかけるので、より重要な語を大きく見せる。
文字を主体にするか、図形を主体にするか ⇒ 2種類作ってみる
様々な背景に合うようになっているか ⇒ 角丸ロゴは、imgタグにborderが入るとダサくなる可能性があるので避ける
英語表記(Financial Diary)を使うか ⇒ サイト内では一貫して「金融日記」という言葉を使われているようなので、それに従って日本語表記のみに。

などです。

僕はデザインは本業ではないのですが、少しでもお役に立てることを願っています＞金融日記さま。