ユーザビリティを向上させるUI/UXの実践

こんにちは！GVA TECH株式会社でエンジニアをしているsakochiと申します。
エンジニアではありますが、たまにデザイナーとしてもデザイン業務を行なっております。

今回は、私が実装やデザイン作成をする上で気をつけているUI/UXについてご紹介したいと思います。

実装前にデザイナーがデザインや簡単なモックを作ってから、エンジニアが実装に取り掛かることが基本ですが、簡単な改修や機能追加であればデザインがない状態で実装に入ることも多々あると思います。
非デザイナーの方でも今回お伝えすることを意識して実装していただければ、ユーザビリティがぐっと向上して、より良いサービスになると思っています！

UI/UXとは

UIとは「ユーザーインターフェース（User Interface）」の略で、ユーザーと製品やサービスとの接点のことを指します。Webサイトで例えると、デザインやボタンの配置、フォントなどがUIにあたります。

UXとは「ユーザーエクスペリエンス（User Experience）」の略で、ユーザーが製品やサービスを通じて得られる体験のことを指します。Webサイトで例えると、サイトの使いやすさ、情報の見つけやすさ、操作の快適さなどがUXにあたります。

UI/UXの重要性

UIとUXは、どちらもユーザーの満足度を高める上で重要な要素です。UI/UXが優れていると、見た目が美しいのはもちろん、ユーザーにとって操作しやすいWebサイトになります。操作しやすいということはユーザーは目的を達成しやすくなり、Webサイトの利用に満足していただけ、結果として多くの人に利用されるようになります。

みなさんも一度は、操作しにくいサイトで離脱した経験があるのではないでしょうか？
離脱したあと、再度そのサイトを使ってみるということはあまりないですよね。

このように、UI/UXを整えることは、サイトに訪れたユーザーへの印象アップにも繋がり、利用後のリピーターになったり、ユーザーの紹介から利用者が増加したりといったことにも繋がっていきます。またユーザーの「離脱率が低い」「滞在時間が長い」といった状態はGoogleに評価され、SEOにも影響していきます。

UI/UXを考慮する上での私が気をつけていること

・モバイルファーストか、PCファーストか

Webデザインを作る際、最初に考慮すべき点はモバイルファーストか、PCファーストかという点です。モバイルファーストとはスマートフォンなどのモバイル端末を優先してウェブサイトを設計する考え方で、PCファーストとはパソコンでの閲覧を優先してWebサイトを設計する考え方です。

近年のWebサイトアクセス状況を見ると、モバイル端末からのアクセスが多数を占めています。そのためモバイルファーストでWebサイトを構築することが多くなってきていますが、どちらを採用するかは提供しているサービスの性質により異なってきます。

例えば弊社サービス「GVA 法人登記」では、法人の登記手続きに必要な書類作成を、自分で行うことができるサービスのため、利用するユーザーは法人が対象であると想定しています。

• 法人における事務作業は、主にPCで行われていることが多い
• 書類を生成する上で会社の本店住所や役員情報、株主リストの入力が必要
• 購入後に生成された書類を確認したり、編集する作業

上記の観点からPCでの作業を推奨し、新機能のデザインなどもPCファーストでデザイン作成をしております。
（※なお、モバイルからの操作も可能なようにレスポンシブデザインの対応を行っております。）

・Zの法則とFの法則

Fの法則とZの法則は、所謂人間の視線の動きをあらわしたものです。
人は無意識に下記のような順で文字やコンテンツを見ていくそうです。なんだか不思議ですね。

他にもNの法則（新聞など縦組みのテキストに使われる）もありますが、Webデザインにおいては縦書きはほとんどありませんので割愛します。

これらの法則は、Webサイトの設計において、重要な情報を配置する場所を決定する上で役立ちます。例えば、Fの法則に従えば、ページの最上部と左側に重要な情報を配置することで、ユーザーの目に留まりやすくなります。

そのため、一番覚えておいてほしいサービス名は左上に配置し、CTA（Call To Action = 行動喚起）である会員登録ボタンなどを右上に配置したりなど、情報を効果的に伝えることができます。
例えばECサイトなどであれば、商品情報をひと通り見た上で右下等に「購入」ボタンを置くことで、最終的なアクションを促しています。

Webサイトを作成する上でこの視線の流れを意識してコンテンツを配置していくと、会員登録数や購入数などが変わって来ることもあるため、侮ってはいけないポイントです。

なおこの考え方はWebデザインだけでなく、スライドなどの資料にも使えます。

視覚的階層

視覚的階層は、ユーザーの注意を適切に誘導するための重要な設計原則です。
全体的に同じ文字サイズや太さだと 平坦になり、強調したい部分が分かりづらくなってしまいます。
また、あまりに太字が多かったり文字サイズが大きすぎるものばかりの場合でも、同じく強調したい部分が埋もれてしまいます。

私は主に下記のことに気をつけて実装しています。

• 文字サイズ
  • サイズの種類をタイトル、(サブタイトル)、本文、注釈などの小さい文字の3〜4種類に抑え、それぞれ文字の大きさを統一します。それ以外の文字サイズの種類は使用しません。
  • タイトル：24〜30px
  • サブタイトル：18px〜22px
  • 本文：14〜16px
  • 注釈：10〜12px（10pxより小さい文字は使用しない）
• 太さ
  • 太さはタイトルと、強調したい文字以外には基本的に使用しません。
• 色
  • 色も文字サイズと同様、基本的には3種類程度に抑えます。
  • プライマリカラー：最重要アクション（購入、登録など） ロゴなどブランドカラーと揃えることが多いです。
  • セカンダリカラー：補助的なアクション、効果的にアクセントとなるカラーを設定します。
  • グレースケール：補足テキスト、ボタンの非活性化などに使用する薄めグレー

これらに気をつけると下記のように改善することができます。

文字サイズを段階的に大→小で表現し、タイトルにあたる箇所のみを太字にしました。
本文部分（「日付　6月14日(土)」等の部分）の中でも、「日付」「時間」「場所」といった項目のデザインは青色ラベルで統一し、メリハリを付けています。
全体的に重要な箇所を認識しやすくなったのではないでしょうか。

情報のグルーピング

ゲシュタルト原則（人間が物事を認識する際に、個々の要素ではなく全体的なまとまりやパターンとして捉える傾向のこと）を活用してみます。WebデザインやUI/UXにおいて、情報を効果的に整理し、ユーザーが理解しやすくするための重要な概念となります。

ゲシュタルト原則には様々な種類がありますが、以下はその一部です。

原則	説明	デザインにおける活用例
近接	近くに配置された要素はグループと して認識する	関連要素は近くに配置して、他要素 とは余白をとる など
類同	同じような見た目、色、形、サイズ の要素は関連性があるものとして認 識する	同じ種類のボタンは同じスタイルに する、カテゴリごとに色分けする など
連続	線や曲線に沿って配置された要素 は、一連の流れとして認識する	フローチャートやステップ表示で矢 印・線を用いて読む順序を示す など
閉合	途切れている線や図形など不完全な 状態でも、全体像が認識できる場合 は補完して認識する	カルーセルの一部を見切れさせて、 横スクロールで続きがあるように見 せる など
共通運命	同じ方向に動く要素は関連性がある ものとして認識する	同時にフェードインするアニメー ション効果や、同じタイミングでス ライドする要素 など
面積 (図と地)	ある範囲を見ているときに、そこに あるものを視覚的に前景（図）と背 景（地）を区別して認識する	モーダルウィンドウで背景を暗くし て前景を強調、ホバーした要素が周 りの要素より大きくする など
対称	人間は複雑なものを見ると簡略化し て解釈するという傾向があるため に、対称な形や構造を持つものは自 然に「まとまり」として認識する	カードレイアウトでの左右対称、 ファーストビューでの中央に見出し やボタンを置き、背景画像や装飾が 左右対称に配置されている など

これらの原則を意識することで、情報を整理し、ユーザーが混乱することなく操作できるWebサイトやUIを設計できます。デザインの一貫性を持たせることで、ユーザーの学習コストを削減することができます。

私は特に、デザインを作成する際は下記のことに気をつけています。

• 近接
  • 関連項目は近くに配置する
  • 隣接するコンテンツの間隔は16px（1文字分程度）マージンをとる
  • セクション間の間隔は60px-80px程度マージンをとる
• 類同
  • 同じ種類の要素は同じスタイル
  • 同じレベルのタイトルは同じフォントサイズ・フォントファミリーを使用
  • 同じレベルのボタンは同じ大きさデザイン（色や角丸など）

これらを踏まえてデザインを作る場合、例えば下記のように改善することができます。

近接

余白を用いることでゆとりがあり、関連性のある要素がグルーピングされ、コンテンツを見やすくします。要素ごとに「上下」「左右」で余白を均一にすると尚良いです。

類同
種類によってボタン、フォント、色使いを統一してまとまりを表現したりすることで、一番強調したい部分を目立たせることができます。

コンテンツ幅の統一

コンテンツの最大幅を決めて、そこからはみ出さないよう意識しています。そうすることで全体的なガタガタ感や不揃い感がなくなり、ユーザーに安心感を与えます。

統一といっても、AFTERのように部分的に最大幅からはみ出た要素を作ってもおしゃれに見えるパターンもあります。
実際にGVA 商標登録のサービスサイトTOPページのデザインでは（2025年6月現在）、全体的なコンテンツの最大幅は1200pxに統一していますが、

• ファーストビューの背景画像は画面いっぱいに表示させる
• セクションの背景色を一部分変えることでメリハリをつける

のような工夫をしています。

最後に

Webデザインと実装において私が重視している点をご紹介しました。
これらの点を意識することで、ウェブサイトの見やすさと使いやすさは向上すると思います。多くのユーザーに長く利用してもらうためには、UI/UXの改善が不可欠です。

また、デザインがない状態での改修依頼も少なくないと思いますが、そのような場合にエンジニア側から配置やデザインを提案したり、実装時に上記の内容に注意を払うことで手戻りを減らし、リリースまでの期間を短縮できる可能性があると思っています。

まずは始めに、デザインを作成した後は以下のことを確認するよう意識してみると良いかと思います！

• Fの法則・Zの法則にならって、コンテンツの配置がユーザーの視線の流れに沿った配置になっているか
• 文字の大きさ・太さ・色の多用をしていないか、視覚的階層が意識できているか
• 要素（コンテンツ）のグルーピングができているか

このように後から確認するだけでもデザインのクオリティは変わってくると思っています。

ぜひ今回の記事を参考に、よりユーザーフレンドリーなWebサイト制作に挑戦してみてください！
最後まで読んでいただきありがとうございました！