初めてアクセスされる場合、フォントのダウンロードを行いますのでページのロードが極端に遅い場合がございます。ご了承ください。

de-liKeR Logo

About Medium Contact

デザイン考察、論理性

2015·08·23

なんだそれ…

デザイン界のArial Unicode MSとも異名高い@CreatorQsFです。

論理性なんて言葉を使っていますが、果たしてそんな言葉があるのかどうかも知りません。無学です。
でもそれなりに私はデザインにおいて思うところがいろいろとあるので、せっかくブログを持っていますし、書きたいなーなんて、思っています。

「ひどい」とはなんなのか。デザインとはなにか。

デザインって何でしょう。どんな言葉にも、広義・狭義があると思います。
僕の言う広いほうのデザインは世界そのものです。
狭い方はディスプレイに表示されるピクセルで何が描かれるかです。

今回は、その狭い方で行きたいなと思っています。どっちかっていうと、そこに辿り着くまでの考え方とかの方かな、なんて思っています
(書く前からタイトル決めないほうがいいですね…このgitブログもそろそろひどいのでv2のv2出したいな…)

さてさて、本題に入ります。

私の考えるブログですので、ひどいデザインとは何かを私なりに考えてみたいと思います。そのためには、まずデザインとは何なのかを考える必要があります。

私にとってのデザインは「秩序のないものをできるだけ合理的に考えて論理だてて魅せる」ことです。

つまり、デザインとは(とはいってもロゴなどはまた別だなと思っています)…センスが無いとかよく言いますが…まぁ多少は必要なのかもしれませんが…センスなどとは無縁の世界に位置するもので、本来であれば、「魅せる」わけでなければセンスなどは必要ないのです。何と何がどのように論理的に考えて一枚のその画面のなかにどうあるべきなのか、どういうつながり方を見る人に意識させるのか、また「意識的に」意識させないのか、そういうことが考えられるものなのです。

たとえば。Googleのホームページデザインで行きますか。
もしこの世界に装飾など何もなくて、そこにおくものだけが存在していたとしましょう。

Googleのホームページ

このページには、いろんな要素がありますね。目につくだけでも

があります。これらの要素はひとつのページを構成するために必要なものですが、どうしてこういう配置の仕方をしているのでしょう?
もしGoogle検索に慣れすぎてどんな配置でも検索ボックスに言葉を入れてエンターを押せばいいって思っている人がいるとしましょう。そんな人ばかりが使うServiceにほんとにこんなコストの掛かるデザインが必要なのでしょうか?
結論から言います。必要です。

たとえば、その検索ボックスに言葉を入れるとわかるのは何故ですか?Googleがそう意識させるために、中央にわざわざ、大きな幅をとって四角を作ってるからです。そしてページを開いた時にかってにそこをすでにフォーカスしている状態にして、google.comを読み込んだ瞬間から言葉を打ち込めるようになっているのです。ですから、あなたはそこに「検索語を入力」とか書いていなくても、そこに書くとわかるのです。人間の学習能力ってすごいですね。
でもこれが?もし装飾というものがなかったら。

QsFのGoogle

…使いたくないです。恐ろしい。
Googleさんすみませんこんなことしてしまって。勘違いされたくないので言いますが、わたしはChromebookもわざわざ海外から輸入して使うくらいGoogle大好きです。もうGoogleさんいなかったら人生ないようなものです。
Gogoleのデザインが優れているので、ここでひとつの例として挙げさせていただいただけです。なんかまずいかもしれない…。

とにかく、デザインを語っているんでした。お分かりいただけましたか?秩序と論理。なぜGoogleが現在のような配置にしているか。

右下、

は、すべてユーザーによる能動的行動が必要になる、主な機能を使用する上でそこまで問題とならないがつかうときに必要になる可能性を秘めたもの、です。

左下、

は、Googleのお金やブランドに関わることです。Googleがどういうものなのか、これでわかるようになります。

右上、

はちょっと特殊で、Googleの検索以外のServiceをあらわしています。
なぜ、おなじServiceなのにふたつだけ外に出ているのでしょうか?またログインボタンだけ青いボタンになっているのでしょうか。
それは、この2つは検索に関わること、だからです。Gmailは少し怪しいですがメールをやりとりすればそのメールがものすごく簡単に探せることはGmailの売りの一つです。画像はいうまでもなく。ずっと前は検索ボタンの近くにあったきもするのですが…^^;
ああ、あとGmailはそのほかの項目とは違い直接Google検索で中を探しても出てきません。Gmailの検索バーから探す必要があります。そういう意味でGoogleはGoogle+のリンクを外したのもあるかも知れませんねw
そういう感じでここはすこしごチャついております。
ログインボタンはそれらのServiceを利用するのに必要だから、また目立ってほしいから、というわけでこのへんはService関係だなと。

あとは明確ですね、真ん中

は言うまでもないってかんじですが(I’m Feeling Luckyは本来検索して一番上のリンクに直接飛ぶボタン)、あとはこのServiceがそれだけだとなんだかわからないので、Googleと大きく出すことでそれがGoogleであると認識できる、そういうわけです。(音声マークは検索が音声でできますよっていうだけですから…)

なお、「であるわけ」なんて書いてますが、専門家でもこれを作った人でもないので信じすぎないでCriticalThinkingしてくださいw

こういうものを、押せるものは押せるもので、入力するものは入力するもので、画像は画像はなんてまとめていったら…そりゃ偉いことになりそうですよね^^;
そしてみなさんはそれらを覚えてデザインがほんとに必要あるのかとか思ったりするわけですが、勘違いしないでください。デザイナーが必死にこのページに載せたいもののお互いのつながりを考えて、やっとのことで四カ所にまとめられたものなんです。結晶ですよ。みなさんはその見えない誘導にのせられて、これを使っているわけなんです。

先ほど、私つながりを意識させることと意識的に意識させないこと、と言いましたが、別にGoogleの全サービスがYahoo Japanのように全面に出ていてもいいんです。なぜそれをしないのか。それは検索にはあくまでも必要のないことだからです。あなたのこのページにきた大体の理由は検索するためでしょう。でしたらリンクは必要ですが、それ自体がそこにある必要はないはずです。だから意識的に意識させないために、文字とおなじ色のアイコンに収納したんです。
つまり、検索ボタンやログインボタンは意識させる必要があるってことでしょうかね。

本題、酷いデザインとは

さて、これでデザインがつながりを意識させ「秩序のないものをできるだけ合理的に考えて論理だてて魅せる」ということがわかっていただけたでしょうか。では逆に良くないデザインとは?
私は今日、2つの例を持っています。

1つ目。

v2.de-liker.com

うーん、どこかでみたことが…ゴホン。
論理立ててない自虐ではありません。私は本気でこのブログのデザインはひどいと思っています。

その中でも、私はこのブログに使っていたり、最近見かけるようになった、この「ハンバーガーアイコン」と呼ばれるメニューボタンが好きでないです。好きでないけれど使っているのは使いやすいからです。
デザイナーにとって、使いやすいデザインとは考えなおすべきものの一つだと私は思っています。使いまわししやすい汎用的なデザインということは、そのプロダクトと真剣に向き合えてないことの多いデザインです。

ま、それはおいておきまして、なぜハンバーガーアイコンはよくないのでしょう。
ある画像を作りました。見てください。

デザイン比べ

ここに2つのボタンが有ります。突然ですが、クイズです。

左側のボタンを押したら、なにができるでしょう?

うーん、多分、何か書いたんでしょう。そしてそれが送信できると、予測できます。違う人がいたら教えて下さい。僕は違うような気もしますから。何も前提もなく送信ボタンなんておかしいですよね。普通なにか書いてから出てくるものなんですから。ごめんなさい。

では、右側のボタンを押したら、あなたが得られるものは何でしょう?

About?でもこれがアプリだとしたら?設定でしょうか。あれ、でもSlackなどはこんなボタンないのに設定ボタンありますね。じゃあこのブログのようにTopへのリンクでしょうか。あれでもそれはde-liKeRのところを押せば行けますね。このボタンは何なんでしょう。
私の嫌いなそもそも論ですが、そもそも、メニューってなんですか。一体、「何の」メニューなんですか?

デザインとは、余ったからそこに突っ込むことではありません。「秩序のないものをできるだけ合理的に考えて論理だてて魅せる」だとしたら、それはデザインでは残念ながらない気がします。

ずっと昔に私は、理不尽な怒り#というServiceなどを作りました。これらにはメニューボタンはアリますが、じつは押してもなんの反応もありませんw

それは本来別の意味でよくないことなのですが(ユーザーの混乱をまねきますので取り払うべき)、何故私がこのdevelopingなServiceのメニューの中になにも置いていないか?それは汎用デザインを使ったはいいがいったいなかに何を置けばいいのかわからなかったからです。置くものがなかったんですw特にUserPolicyとかもつくってなかったので…。恥ずかしい。(当時は作る気でした!当時は!)

また、Queensyaのトップページにもありません。設置すべきものがなかったので。

そう、何が得られるかわからない、のです。まったく明確でもないのに目立って、ユーザーに意識させてしまっています。これは実に論理的ではありませんね。「秩序のないものをできるだけ合理的に考えて論理だてて魅せる」ではないです。秩序をみつけられなかったものものをテキトウに入れてもいいところにぶっこんだだけです。

でも、秩序があるなら使っていいんです。何も使うことが悪だとはいってません。たとえばAppleは自社のプロダクトを小さい表示Spaceでみせるために、モバイルでのみ、それを使っています。それがないと縦に長いつかいにくいものになってしまうし、上に置かないとデスクトップとあまりに互換性のないデザインでユーザーの混乱をまねきますし、それにappleが何をしているか一番示せる者達だからです。
Googleではandroid5.0と合わせてそのボタンをmaterial designで採用しました。もっとも名前はメニューではなくListです。その中で、「いくつかのいろんな一連のアイテムを一つの縦長のシートにする」みたいな感じに定められています。でもその中でも何かにそってソートするべき、とか、いろいろ定まっています。inboxなどを見ていると、どうもアプリの第二階層に当たるものがこの中に収容されているようです。「受信トレイ」というinboxのアプリの下にあるコンテンツ、と言った感じですね。でもそれ言い始めたら何入れてもいいとかだめとか^^;

それにそっていうと、私のブログは「トップへのリンク」という第一階層のものと「About」という第二階層が入り混じり、さらにsortもされていないという(Alphabet逆順かもよ!?)ひどい状況。
こういうのは、だめってことです。

なぜか?ユーザーは、それを押すことで何が得られるかが明確で無いからです。ユーザーは記憶力よくて、Googleのホームページぐらいだったらどこに何を入力して何を押せば検索できるか知っています。というより覚えています。逆に、いろんなところでハンバーガーアイコンをいろんな使い方してしまったら、ユーザーは覚えたことが生かせなくていらいらするでしょう。そうやって混乱させてしまうくらいで「何をもってメニューとするか」が定まっていないならば、ハンバーガーアイコンは使うべきではありません。といいつつめちゃくちゃな使い方で使っている私。なんと説得力のないw

2つ目

2つ目はAndroidの戻るボタンです。よく便利だという声を聞きますが…。

android戻るボタン

何をどの程度戻るかが明確で無いからです。

たとえばiOSの場合、戻るボタンは左上に個別に表示されます。これは先ほどいたページ名までご丁寧にアニメーション付きで見せてくれるわけで、いったいこれを押すことでどこに戻るのかあまりに明確すぎるくらい明確です。

Androidのこの戻るボタンはアイコンのみで、さらに、メニューバーにあり、どこへ言っても表示されています。戻れない時でさえ…。

慣れているユーザーはそれを押すといったいなにが戻るのか理解しています。しかし初めてのアプリでこれを押すことで、例えば、戻るを押したばっかりにせっかく書いた長文がなんの確認もなく消えてしまうとか…。ありそうですね。戻るボタンですから。ってことは、もう一度おせば書いた時に戻れ…あれ、できない。戻るってなんだろう。

「戻る」にはそういう怖いところもあります。一見実に明確に見える言葉ですが、よくデザインの巨匠として言われるAppleのつくったものでは「戻る」なんて表記、みませんね…。あ、たしかにcmd + zとかはありますけどw、あれはもう…なんていうか、ずっと昔からの遺産みたいなもので、多分ここから新たに開発されるとしたら戻るはないのではないのでしょうか。iOSの場合、文字の変更を戻すのも、Appleは「戻る」ではなく「取り消す」などの表記を使っています。

曖昧さはユーザーの混乱をまねきます。

結局のまとめ

いやぁ、ここまでよんでいただきありがとうございます。多分一生自分でも見直さない記事が出来ましたw。お疲れ様でした。

なお、言っておきたいのはこれが答えではないってことです。あくまでも私の考えであり、より合理的で論理的な観点ももちろん存在すると思います。またそれらのデザインが必ずしも人に使いやすいとは限りません。ざったにメニューのなかに入れてしまうことで使いやすい人もいるかもしれませんから。

でも言いたいのは、デザインっていうのは、センスとかの問題じゃなくて、どれだけそのプロダクトに真摯に向き合えるか、想いに正直になれるかっていうことなので、、これならおれでもできるとか、シンプルすぎるとか、そういうのはちがうってことです。ロゴはまた別です。

デザイナーは表示すべき内容を取捨選択し、それのつながり、どれを見せてどれを見せないかをきめるわけで、いうなればそこでそれは成功するかどうかも握っていると言っても過言ではありません。そのうえで、はじめてそれに従い表示をどう装飾するかを決めていくわけです。
デザイナーはデベロッパーとユーザーをつなぐ翻訳者です。作った人の想いはそうやって伝わっていくわけです。デザイナー次第で、メールアプリはメモアプリにしてしまうことも可能でしょう。

というわけで、すごく長くなってしまいました。閲覧有難うございました。よろしければぜひとも、このブログの「メニューボタン」を押していただき、閉じるボタンへのアニメーションやトップへ行き他の記事を楽しむなどw、ざったに混乱していただければと思いますw

そのうち、このブログはリニューアルします。あまりに説得力がなさすぎでした。書いてて悲しくなりました。

それでは。

おわり