![見出し画像](https://assets.st-note.com/production/uploads/images/104099980/rectangle_large_type_2_384811748d89407b0825021b1e9c5cfe.png?width=800)
回遊性が高いサイトデザインの7つのポイント【WEBデザイナー】
はじめに
UIデザインは、ユーザーの使いやすさを考慮したデザインを作り上げることが求められます。
しかし、具体的にどのようにユーザビリティを考慮したUIデザインが良いのかが分からない方も多いのではないでしょうか。
そこで、ユーザビリティを考慮したUIデザインのポイントを解説し、初歩的ですがデザイナーの方々に役立つ情報をまとめてみました。
1、ユーザーの行動パターンを把握する
![](https://assets.st-note.com/production/uploads/images/104097263/picture_pc_3b2041f0ad768a18e8e7fed011b956dd.gif?width=800)
UIデザインを行う上で、ユーザーの行動パターンを把握することが大切です。
ユーザーがどのような手順でウェブサイトを閲覧するかを理解し、その情報をもとにUIデザインを行うことで、ユーザービリティを考慮したデザインを作り上げることができます。
例えば、ウェブサイトにおいては、ユーザーが最もクリックしやすい場所は、左上のロゴやメニューとされています。
また、サイト内での移動に関しては、トップページからのルートが最も多く、特定のページへの直接リンクよりも、サイト内のリンクを辿る方が多い傾向にあります。これらの情報をもとに、UIデザインを行う上での配色や配置などの決定を行うことができます。
<参考サイト>
株式会社はりま家
スクロールしていくと気持ちいいタイミングでタイトルがでてきたりして
促されるようにトップ全て読み終えれるレイアウトが気持ちいいです。
余白をリッチに使いながら、寂しくなくコーポレートサイトの気品があります。マウスオーバーした時の挙動も次へのアクションの一助になっているのがわかります。
2、ナビゲーションのわかりやすさを重視する
![](https://assets.st-note.com/production/uploads/images/104096634/picture_pc_0c475f9e8c4448f7e11cf964c2879358.gif?width=800)
ウェブサイトにおいて、ユーザーが求める情報にたどり着くためには、わかりやすいナビゲーションが必要不可欠です。
そのため、UIデザインを行う上で、ナビゲーションのわかりやすさを重視することが必要です。
例えば、ナビゲーションに表示されるメニューの項目名は、ユーザーが簡単に理解できるように、分かりやすく表示することが大切です。
また、トップページからのリンクの配置に関しても、ユーザーが求める情報に近い場所にリンクを配置することが、ユーザービリティを高めるために重要です。
<参考サイト>
Chatwork株式会社
大きなメニューは外にあり、かつメガメニューでおおよそ全てのページへの回遊を可能としていてわかりやすいです。新着情報もメガメニューに入れることでどのページから見逃さずにいていただく工夫もしています。
あとはマウスオーバーした際の色が「働くをもっと楽しく、独創的に」のキャッチ下に弾いているグラデと合わせていて元気なフレッシュさを演出していて素敵です。
![](https://assets.st-note.com/img/1682596559675-1BeZInGTOT.jpg?width=800)
3、フォントサイズやレイアウトに配慮する
![](https://assets.st-note.com/production/uploads/images/104098018/picture_pc_7e1ae8af30780d149db5f779a8a84766.gif?width=800)
UIデザインを行う上で、フォントサイズやレイアウトにも配慮することが必要です。
フォントサイズが小さいと、文字が読みにくくなってしまうため、ユーザービリティを下げる原因となります。そのため、適切なフォントサイズを選ぶことが大切です。
また、レイアウトに関しても、ユーザーが情報をスムーズに把握できるように設計することが重要です。
例えば、テキストの行間を広くすることで、読みやすさを高めることができます。
また、画像の配置に関しても、テキストとバランスをとるように配置することが重要です。
<参考サイト>
京都文教短期大学
文字が比較的多く、情報も多いですがコンテンツや要素ごとのマージンや文字のカーニング、行間などが違和感なくスルスル読めます。
いろいろな要素を詰め込んでいるからこそ、文字はシンプルな書体にしているところがユーザーへの配慮を感じます。
4、ユーザーにとっての最適な操作方法を提供する
![](https://assets.st-note.com/production/uploads/images/104098941/picture_pc_a6c8a07c2aef6536dee22631942888fa.gif?width=800)
UIデザインを行う上で、ユーザーにとって最適な操作方法を提供することも重要です。ユーザーがウェブサイトをスムーズに操作するためには、適切なUI要素を提供する必要があります。
例えば、ボタンやフォームに関しては、ユーザーが操作しやすいようにサイズや配置に配慮することが大切です。また、ボタンの表示名に関しても、ユーザーが意図する動作を想起させるような名称を表示することが望まれます。これらの要素に加え、ユーザーが必要とする情報を簡単に取得できるようにすることも重要です。例えば、ウェブサイト内の検索機能を提供することで、ユーザーが必要な情報をすばやく検索できるようにすることができます。
<参考サイト>
カンダまちおこし株式会社
カーソルにあしらいがあり、ボタンやリンクになっている箇所のオーバーの挙動が気持ちいいので思わずリンクを探してしまいます。
(若干サイトが重いので、その点が気になりますが…)
![](https://assets.st-note.com/img/1682597497903-wWov8YTi3V.jpg?width=800)
6、レスポンシブデザインに対応する
スマートフォンやタブレットなど、様々な端末からウェブサイトにアクセスされることが一般的になっています。
そのため、UIデザインを行う上で、レスポンシブデザインに対応することが必要不可欠です。
レスポンシブデザインとは、端末の画面サイズに応じて、ウェブサイトのレイアウトやフォントサイズなどを自動的に変更することです。これにより、ユーザーがどのような端末からでも快適にウェブサイトを閲覧できるようにすることができます。
7、実際に使ってみる
UIデザインを行う上で、最も重要なことは、実際にユーザーが使ってみたときにどのような印象を持つか、ということです。
そのため、UIデザインを行う前に、プロトタイプを作成し、ユーザーに実際に使ってもらうことが大切です。
ユーザーがウェブサイトを使いやすいと感じるかどうかを検証することで、UIデザインを改善することができます。
また、ユーザーが抱える問題や要望を把握し、それに対応するUIデザインを行うことが、ユーザービリティを向上させるために重要です。
まとめにも書きましたが、実際にローンチされているもので使う際に
自分が使いやすいと思った場所を書き留める
何も考えずにスムーズに操作できたのはなぜか考える
使い辛い、リンクやボタンと間違えた場所を書き留める
見た環境で違和感があった部分を把握する
このような内容を把握しましょう。
まとめ
ウェブデザイナーになって3年未満の人向けに、UIデザインを行う上で重要なポイントについてまとめてみました。
UIデザインにおいては、ユーザーが求める情報をスムーズに取得できるようにすることが最も重要です。
そのためには、配色や配置、ナビゲーション、フォントサイズなどに配慮し、ユーザーにとって最適な操作方法を提供することが必要です。
また、ベーシックな対応になっていますが、レスポンシブデザインにも対応することが、ユーザービリティを向上させるためでもあります。
最後に、UIデザインを行う上で重要なことは、ユーザーを常に意識し、ユーザーの立場に立って設計することです。
ユーザーにとって使いやすく、快適なウェブサイトを作ることができれば、ユーザービリティの向上につながり、ウェブサイトの評価も高まります。
このように、UIデザインには様々なポイントがありますが、基本的にはユーザーを中心に考え、シンプルで使いやすいデザインを心がけることが大切です。
また、UIデザインに関する知識を深めるために、Webデザインに関する書籍やオンライン講座などを活用することもおすすめですが、
私が一番おすすめする学習方法はすでに効果されているサイトやアプリのUIをトレースしたり、使ったりしてみることです。
この記事がすこしでも参考になったら、♡をお願いします。(アカウントがなくても♡できます)
引き続き、デザイナーや制作界隈の方のためになる記事を書いていきますので、フォローもぜひよろしくお願いします🥺
ぜひサポートお願いいたします。いただいたサポート費用はクリエイターの活動費や本を購読してオススメ記事にしたりと利用させていただきます。