UI/UX設計
サービスを左右するUI設計
UI設計の出来栄えはウェブマーケティングの成果を大きく左右します。
アトミックドロップでは、今まで20年以上のスキルを積み重ねたUX(User Experience)を元にUIを設計します。まずサイト制作に入る前にクライアントと制作意図や問題などを一緒に確認し、UI/UXルールに沿って制作を行います。
ここでは弊社実績に加え、目的に適したUI設計をするためのポイントを簡単にご紹介します。
UIとは?
UIとは、User Interface(ユーザーインターフェース)の略称で、一般的にユーザー(利用者)と製品やサービスとのインターフェース(接点)すべてを意味します。
「User」はWebサービスやサイトを利用する人を指し「Interface」は直訳すると「境界面」「接点」です。異なる2つのものを仲介するという意味を持っています。
WebサイトでのUIは、サイトの見た目や使いやすさを指します。
「UI=見栄え」と思われがちですが、レイアウト、画像、文字のフォント、メニューデザイン、ボタンの操作性などなど、ユーザーが「目にするもの」「操作するもの」すべてがUIに含まれています。
つまり「UIが使いにくい」ということは、「操作手順が複雑で見た目や操作性が悪い」ということを示しています。
実績
制作指針に従いクライアント様と施策を練りながら下記の評価を更新しています。
オリンパス株式会社様のコーポレートサイトでは「トライベック・ブランド戦略研究所のWebユーザビリティランキング上位15位表示」を実現いたしました。
![トライベックの結果](/images/advantage/ui/img01.jpg)
出典:Webユーザビリティランキング|トライベック・ブランド戦略研究所 (※2021年6月現在)
https://brand.tribeck.jp/usability/
Point 1.
サイトの目的とターゲットを決めよう!
ターゲットを想像しながら設計する。
万人受けするUIは存在しません。
サイトの目的やターゲットがふわっとしたままだと、設計段階でも混乱が生じます。
例えば、ビジネスメディアの場合。
幅広く「30代男性」ではなく、ここまでユーザーの人物像とユーザーの目的は何かまでを具体的に設定します。
30代男性
商社勤務
業務効率化のためにマーケティングオートメーションを導入したいと考えている
このようにターゲットモデルを仮定することで
「この男性は何を求めてこのサイトに訪れるだろう」
「この男性だったら、情報は簡潔に記載したほうがいいな」
「スマートなデザインのほうが受けそうだな」
など、仮説を元に作り込むことができます。
このように具体的に定めたターゲットに向けてUIを設計することが重要であり、結果として「良いUI」へと繋がります。
アトミックドロップでは、ターゲットユーザー設定のお手伝いもいたします。
ここを怠ると、せっかくのサイトが無意味なものになってしまう危険性もあります。
一緒に考案させていただきますので、お気軽にご相談ください。
Point 2.
伝えたい情報は優先順位をつけよう!
情報設計で差をつける。
ユーザーへ多くの情報を、正確に、しっかりと伝えたいと思います。
伝えたいことをてんこ盛りにしてしまうと、受け取り手はきっと混乱するでしょう。
ここで必要なのは情報設計です。
閲覧ユーザーへ伝える情報には優先順位をつけ、伝え方にも工夫を凝らします。
こちらから一方的に伝えたい情報ではなく、ユーザーが求めている情報を基本に情報設計していくと、わかりやすく満足感の高いページになります。
Webサイトにおける「つかみ」は重要です。離脱率にも影響します。
見せ方(デザイン)の例
フォント:種類・サイズ・太さ・色味
カラーコントラストを強めて
注目色を使用する
操作・視覚効果の例
パララックスを用いたスクロールエフェクト
動画、SVGアニメーション
マウスホバーアニメーション
Point 3.
情報のフルコース、特盛りは禁止!
「何が言いたいかわからない」を避ける。
情報を精査し優先順位を付けたとしても、「盛り込み過ぎる」ことには注意が必要です。
結局、何が伝えたいのかが不明確になってしまいます。
目的に応じて、盛り込むべき情報の数を限定しましょう。
Point 4.
見やすく、わかりやすいデザインに!
操作性の悪いサイトは離脱率を上げる。
デザインは、デザインの原則に沿って作成します。
コントラスト
近接
整列
反復
ユーザーは自身の記憶情報や視覚反応により情報を見つけたり読み進めます。
その反応を邪魔しないように、あるいはその反応を使って注目させたりと工夫をします。
優先度の高い情報は「コントラスト」を強める
せっかく優先度づけした情報も、視覚的にそれを表現できていなければ意味がありません。
色やサイズに変化を持たせることで、重要な情報をしっかりと強調しましょう。
![コントラスト](/images/advantage/ui/img02.jpg)
関連性が高いものは「近接」
情報の関連性を示すために用いるテクニックです。
「情報同士の距離感を調整することで、どの情報がセットで、どの情報がセットじゃないか」を明確にします。
テキストや画像はきちんと「整列」
整列とは、その名の通り、テキストや画像などの要素の位置を揃えることです。
読みやすさを提供すると同時に、ユーザーへのストレスも軽減させます。
全体の統一感を出す「反復」
テキストや画像を一つのくくりとして見た時に、その一つ一つの配置や、列が毎回違うと見づらい画面になってしまいます。
この一つのくくりのデザイン特長を繰り返し使用することを反復といいます。
(例えば、太字・罫線・色・アイコンなど)
デザイン要素を繰り返し用いることで、レイアウトに一貫性や統一感を持たすことができます。
![反復](/images/advantage/ui/img03.jpg)
Point 5. お申し込みやお問い合わせ、購入などゴールへの誘導を分かりやすく!
ゴール(お申し込み/お問い合わせ/購入)までの道筋がスムーズであること
「ここを押せば目的が達成できる」とすぐわかる位置にボタンを設置/ボタンデザインにする
World Wide 海外で流行のUIデザイン
World Wide展開を念頭に海外で流行のUIデザインを取り入れたい方、英語、フランス語で進行したい方、弊社には10年以上UIデザインを行っているフランス出身のデザイナーが在籍しています。
ひと味違うUIデザインをぜひご依頼ください。