Webサイトをデザインする上での基礎的なUIの考え方

この記事は2017年02月に書いた記事です。

はじめまして、こんにちは。ALIZE DESIGNのオノです。この度、株式会社スタートアップテクノロジーにデザインチームとして「ALIZE DESIGN(アライズ デザイン)」を立ち上げる運びとなりました。今後皆様に認知していただけると幸いです。

今後、ここでメンバー個人個人の記事を公開していこうと思うのでよろしくお願いいたします。

はじめに


皆さんは「デザイン」という概念をどのように捉えているでしょうか?デザインという言葉自体は幅広く使われていますよね、例えばデザインは直訳すると日本語では「設計」となると思いますが、日常で使われる「デザイン」は本の表紙の見た目であったり、物の造形であったり、視覚的な要素を指すことが多かったりしませんか?

私はWebデザイナーなので「Webサイトのデザイン」が主な仕事になるのですが、今回はWebサイトのUIを考える際の考え方についてお話していきたいと思います。

ここで知ってほしいのは、デザインはセンスや才能だけで成り立っているのでは無いということ、デザインには実は理論があるということです。

デザインには理論があり、デザインは理論で成り立っている

デザインと聞いた時に、何を思い浮かべるでしょう?人それぞれ違いはあると思いますが、先述したように視覚的な要素を思い浮かべる人は多いのではないでしょうか?

そんなイメージのデザインを作るとなった時に、そういう印象があると、センスや才能、直感でデザインはおこなっているのでは?と思う人は多くいるのではないかと思います。中にはたしかにセンスが必要な物もあるでしょう。

しかし、デザインは多くの場合、センスで成り立っているわけではありません。

Webデザインと言うものを例に上げた時、Webデザインには様々な学問の技術が転用されているます。Webデザインでは主にUI、UX設計を考えますよね、そういうの物を考える際には「建築学」「統計学」「心理学」が使われていたりします。

今回はあまり深い学問の話をするつもりはないのと、私自身すべての学問に精通しているわけではないので詳細は割愛させていただきますが、上記の知識や理論を知っているだけでデザインを組み上げることは可能だということです。

左上→右→左下→右が基本の目線パターン


実際に図を使って、簡単なUIを考えていきましょう。Webサイトを思い浮かべていただいた際に、よくお問い合わせフォームなどがありますよね?お問い合わせフォームには必ずボタンというものがあるので、今回はそのボタンのUI配置を例に進めていきたいと思います。

まず、このボタン一つの配置を考える際にに重要になってくるのは、どんな情報でしょうか?

そうですね、僕だったら欲しい情報としてこのボタンの「役割」を知りたいです。このボタンが何をするボタンなのか?このボタンを押したらどういう動作をするのか?ということです。

ボタンだけだとわかりづらいので、文字入力する場所を追加してみましょう。こうなると、Webサイトのお問い合わせフォームに慣れている皆さんであれば、「文字入力」→「ボタン操作」という流れを思い浮かべるのでは無いでしょうか?

そうなった場合、以下のようなUIが基本的な形が想定されます。

なぜ、これが基本的な形となるのか?これには明確な理由が存在しています。

Webサイトは構造上、上から下にページが構成されていくものが基本形となります。また、PCの成り立ちから現在までWebサイトの多くは「左から右」という文章記述ルールに従ってコンテンツが構成されているので、これらを踏まえて考えることで「左上」「右」「左下」「右」という流れが考えられます。

そして、これが人間の基本的な目線の動きとなります。

なので、この人の目線に合わせて物を配置するということが、理論的なデザイン構造の基礎となるわけです。

今回のような画像の例だと先述したように必然的に「文字入力」→「ボタン操作 」という流れが生まれるので、テキスト入力の右側に配置する、もしくは下に配置するというの人の行動に沿った配置となります。

ちなみに、下記のような配置はどうでしょうか?普段馴染んでいる行動パターンとは逆の配置です。

なんだかしっくりきませんよね?普段日常で慣れている行動とは逆のパターン、順番が逆になるだけで本当にこの操作で問題ないのかわからなくなります。

ただし、このパターンには実が使い道があります。

「スムーズに動作してほしくない」が「システム上必要となる機能」などに対して、このように配置することで、ユーザーに操作をわかりづらくすることで、あえて使用頻度を減らすことのできる配置を構成することができます。

デザインは人の行動パターンの繰り返しで構築されている


どうでしたでしょうか?今回はボタンの配置という物を例にあげて書いてみました。

デザインはこのように、日常のルール、そして、ルールに従う人の行動パターンの繰り返しです。構造ルール、文章ルール、人はどこに視線を置いて、どういう視線移動をするのかのような行動心理があって成り立っており、これがデザインとなります。

感覚だと思われがちだけど、実は感覚じゃない、そして、それらの知識さえ身につけさえすればデザインを構成をすることはできる。今回は、そういうことが伝えられたら良いなと思いました。

なんか最近一気に暑くなってきたので、そろそろ半ズボン履きたいなぁ、と思っている僕なのでした。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

16

オノ=サン

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
2つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。