サイトの画面デザインを改良するコツは？UIデザインの基本を解説

優れた画面デザインとは、具体的にどのような条件を満たしたものを指すのでしょうか。一般的に言えば、スタイリッシュで洗練されたデザインが好まれると考えられがちですが、必ずしもそうしたデザインが効果的であるとは限りません。

Webサイトの目的を踏まえれば、良い画面デザインとは「ユーザーにとって使いやすい・見やすい」状態を指すと考えられます。Webサイトは多くのユーザーに見てもらい、ストレスなく利用してもらうことで、はじめて効果を発揮するものです。

そのため、まずはユーザー視点でどのように感じるかが基本のポイントとなるのです。このように、ユーザー目線に立って構築されたデザインのことを「UIデザイン」と呼び、サイトやアプリを立ち上げるうえで欠かせない観点となります。

UIとは、「ユーザーインターフェース（User Interface）」の頭文字をとったものであり、ユーザーとサービスをつなぐ接点を指す言葉です。Webサイトやアプリなど、ユーザーとサービスが接触するものはすべてUIと呼ばれます。

そして、UIデザインとは、ユーザーが快適にこれらのサービスを利用できるように意識されたデザインのことを指します。つまり、Webサイトやアプリでいえば、ユーザーがスムーズに利用できるようにヴィジュアルや導線などを設計することを示しているのです。

UIデザインの原則

UIデザインの大原則として、UXコンサルティングの専門家であるスティーブ・クルーグが提唱した「ユーザーに考えさせるな」という概念があげられます。ユーザーが迷ったり考えたりすることなく、直感的に操作できるデザインを実現することが、UIの基本的な目的ということです。

ユーザーに考えさせないという観点では、たとえば次のようなアプローチがあげられます。

UIデザインの重要性

UIデザインを追求する目的は、ユーザーにWebサイトやアプリのスムーズな利用を促し、本来の目的を達成してもらうことにあります。本来の目的とは、「気になる情報を見つけたい」「サービスの予約申し込みをしたい」「欲しい商品の情報を入手したい」「目当ての商品を購入したい」など、Webサイトの性質によってバラバラです。

しかし、いずれにしてもユーザーに本来の目的を果たしてもらうことで、アクセス数やコンバージョン率の向上につながるのは確かです。UIデザインに問題があれば、「知りたい情報がすぐに見つからない」「申し込みのやり方がわからない」「時間がかかりすぎて断念してしまう」などの不具合が生じ、ユーザーは離れていってしまうでしょう。

そのため、UIデザインを意識することが、サイトの成果をあげるうえでも重要な意味を持つのです。

どのようなデザインを使いやすいと感じるかは、人によってバラバラです。しかし、多くの人が共通してわかりやすいと感じる性質があることも確かです。

UIデザインを実現させるためには、こうしたユーザーの共通の性質に基づく「4つの基本」をおさえることが重要だといわれています。Robin Williams著『ノンデザイナーズ・デザインブック』から、UIデザインの4つの基本を紹介します。

ポイント1：近接

「近接」とは、関連性の高い情報をグループ化することです。たとえば、旅行情報を取り扱うWebサイトであれば、行先をランダムに並べるのではなく、国内と海外あるいは地方ごとのように共通の性質を持ったものを集合させるほうが情報を読み取りやすくなります。

ポイント2：整列

「整列」とは、散らばっている情報を一定のルールに基づいて配列し直すことです。具体的には、「横書きのテキストはきちんと左揃えにする」「図表やイラストを用いる際には余白を揃える」といった作業があげられます。

整列を心がけることで、ユーザーの視点が自然と整理されるため、必要な情報を抽出しやすくなります。

ポイント3：対比（コントラスト）

「対比」（コントラスト）とは、情報の重要度や意味に沿って、表現の強弱をつけることです。具体的には、「重要な情報は太字にする/サイズを大きくする」「注意点や警告は赤色を用いる」「目的に沿ったアイコンを付ける」といった方法が該当します

対比を心がけることで、ユーザーは優先的に着目すれば良いポイントを瞬時に判断でき、情報の取捨選択が行いやすくなります。

ポイント4：反復

「反復」とは、類似した要素に同じパターンを繰り返し使うことです。たとえば、「レイアウトや配色は一定のルールに統一する」「アイコンやモチーフの種類を制限して一貫性を持たせる」といった方法があげられます。

反復を意識することで、ユーザーにもレイアウトのルールが自然と浸透されていくため、操作性が大きく向上します。

ここまで、UIデザインの目的や基礎知識について解説してきました。そのうえで、Webデザインのトレンドは数年単位で変化しているため、最新の情報を集めておくことも重要です。

ここでは、2023年によく用いられている新しいUIデザインのアイデア例をご紹介します。

クレイモーフィズム

「クレイモーフィズム」とは、粘土を意味する「クレイ（Clay）」のような質感で、丸みを帯びた3D要素と影によって表現するデザインをいいます。3Dイラストやポップな色合いとの相性が良く、近未来的な印象を与えるデザインなのが特徴です。

近年では、メタバースなどの仮想空間が注目されていることから、クレイモーフィズムのデザインが様々な場面で取り入れられています。ただし、色づかいや影の付け方次第では、やや子どもっぽいデザインに見えてしまうので注意しましょう。

ユーザー層に応じて、色づかいなどに気をつけながらデザインを行う必要があります。

グラスモーフィズム

「グラスモーフィズム」とは、すりガラスのような質感が特徴的なデザインです。半透明でぼやけたデザインに持ち味があり、奥行きが生まれることで立体的なデザインとなります。

背景をぼかすことで、前面に表示されるテキストなどの要素の視認性を高める効果があり、Webデザインとして高いUIを実現しています。AppleのiOSで導入されたことから、人気のあるデザインだといえるでしょう。

デザインを行う際の注意点としては、鮮やかな配色カラーパレットを選ぶようにしましょう。シンプル過ぎる背景やくすんだ配色では視認性が低下してしまうので、細かな調整作業が必要です。

スクローリーテリング

「スクローリーテリング」とは、ユーザーのスクロールに合わせてアニメーションを起動させる手法です。スクロールとストーリーテリングを組み合わせた造語であり、スクロールに応じてコンテンツのストーリーを展開していくようなイメージを表現できるのが魅力です。

美しいヴィジュアル表現やストーリーによってコンテンツに没入感を持たせられるため、観光業系のサイトなどでは特に多く用いられる傾向があります。スクローリーテリングのもっとも大きな強みは、文字とスクロールに連動したグラフィックの両方で同時に情報を伝えられる点にあります。

そのため、ユーザーには短い時間でコンテンツを深く理解してもらいやすくなるのがメリットです。また、画面の切り替えが不要になるため、画面が全体的に狭いスマホやタブレットでも、PCと同じ情報量のユーザー体験を提供できるのも特徴です。

Webサイトの画面デザインは、単に見た目の美しさを実現するだけでなく、ユーザーにとってどれだけ使いやすいかを追求することが大切です。そのためには、UIデザインの観点による表現のブラッシュアップが重要なプロセスとなります。

まずは、「近接」「整列」「対比」「反復」というUIデザインの4つの基本を理解して、レイアウトや配色の設定に活かしてみましょう。

株式会社デパートでは、さまざまな業界・サービス開発におけるUIデザインの事例がございます。

お気軽にご相談ください。

UI開発の一例

株式会社ポプラ社｜「総合百科事典ポプラディア」発 調べ学習応援サービス『Sagasokka!（さがそっか!）』

株式会社 BookLive｜Xfolio（クロスフォリオ）サービスサイト制作

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています