パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

デザインの基本「機能性」のチェックポイント! ~クライアントの課題解決に貢献するWebデザインとは?

2017年04月04日

49ef1ea4a79d10c72a3a1371117e6084_s.jpg

こんにちは、アシスタントWebディレクター2年目のコボリです。

以前、パンセのタネに掲載した「デザインは『思考のプロセス』が重要」という記事からの続きで、今回はその基本的な考え方をもとに、Web制作におけるデザインチェックで気をつける「機能性」のポイントについて、未経験の方にもわかりやすくまとめました。

デザインとは? まず頭にいれておくべきこと

「デザイン=課題解決」

「デザインは『思考のプロセス』が重要」の記事のおさらいになりますが、デザインは見た目だけでなく、「課題解決のための一連の思考プロセスをカタチにすること」です。つまり、下図のような課題解決のための一連の計画そのものがデザインの領域となります。

design_process.jpg

「デザインは『思考のプロセス』が重要」より

この考えに基づいてデザインを行うときの重要なポイントが「機能性」です。Webデザインにおいても、実際に使ったときに「どう機能するか」を意識することが重要になります。......といっても、Web制作未経験の新人にとってはなかなか難しいですよね。でも大丈夫です。まずは以下にご紹介する「機能性のチェック項目」を認識すれば、重要なポイントが自然と把握できるようになります。

Webデザインの「機能性」チェック。注目すべきはココ!

「機能性」という観点から、下記のユーザビリティの視点の3つの項目を意識しましょう。
※ユーザビリティ:対象とするユーザーが目標を達成するまでの有効さ、効率、満足度、利用の状況
 

操作性・実用性

ユーザーが正確に操作できるか、実際に利用する際にデザインが有効に働いているか

視認性・汎用性

一目で情報がわかりやすいか、将来的に幅広く適用できるか

実現性・耐久性

マルチデバイス且つ多様な閲覧環境に対応できるか

では、それぞれ具体的にどこをチェックすべきか、各注目ポイントを追っていきましょう。

操作性・実用性

対象ユーザーが「どういう動きを何のために行うのか」を考えた上で、操作のしやすさや、指や手の動きといった身体的な反応まで考慮されているかがポイントです。ユーザビリティの説明でよく言われる「ユーザーが目的を達成するために実際に利用する際に有効か」という部分ですね。

- どのページからも簡単に目的のページに遷移できるか

- 目的の場所(見たい情報)にすぐに辿り着けるか

- クリックできる部分、できない部分が明確か

- クリックできる領域は適切か(大きすぎず小さすぎず、勘違いを起こさせていないか)

- リンク、ボタンが直感的に認識でき、遷移先が明確か

- マウスの移動量やページスクロールは最小限か(最小限の動きで目標が達成できるか)

- 指や手の動きやすい範囲に可動範囲が収まっているか

- ユーザーの目線の自然な動き(Fライン/Zライン)に沿った配置ができているか

  • Fライン(左上→右上→少し下に下がって左→右→下)
  • Zライン(左上→右上→左下、右下)

- 関係性のある情報同士は近くに設置できているか

視認性・汎用性

視認性は、目で見たときの見やすさです。一目で認識しやすく、機能が理解でき、操作が快適であることを感じさせるデザインかをチェックしましょう。特にWebデザインにおいては「何を一番伝えたいか、どの情報を見てもらいたいか」を念頭に置いた色の組み合わせや明度差が重要になってきます。汎用性は、将来的な追加や変更にも応用がきくデザインかということを意識しましょう。

- タイトルや見出しが明確に識別できるか

- 重要な情報がちゃんと目立っているか

- 太字などの強調表示を過度に使いすぎて、重要な情報が目立たなくなっていないか

- 文字と背景のコントラストは適切か

- レイアウト(テキストや画像、余白など)は適切か

- メニュー、ボタン、バナーがわかりやすく、ユーザーを目的の行動にスムーズに誘導することができているか

- 見出しのフォントサイズ等が統一されているか

- クリックできることが明確なリンク表現がなされているか

- 追加や変更が予想されるコンテンツに流用できるコンポーネントになっているか

実現性・耐久性

パソコンだけでなく、スマートフォンやタブレットからのアクセスも想定する必要があります。特定の環境に依存せずに、さまざまな閲覧環境に合わせて広く適用でき、使いやすいかに気を配ることが大切です。また、エラーの防止や、通信速度が早く、落ちにくくて安定したサーバを使用するなど、ユーザーが見たいときにきちんとアクセスできる環境も考えましょう。

- 文字サイズや画面サイズを変更してもレイアウトや画像の表示が崩れないか

- どのデバイスやブラウザで閲覧しても情報が見やすく整理され、優先度が変わらないか

- 閲覧状況(デバイスやブラウザ、オフィス内外での通信)によって読み込みスピードや動きに問題がないか

- html、CSS、JavaScriptの軽量化がなされているか

- 画像の最適化(画像の圧縮)がなされているか

- 十分な容量やスペックをもったサーバか

まとめ

「機能性」の向上 ⇒ Webサイトの質が向上し、課題解決に繋がる

いかがでしょうか。Webデザインをチェックする際は、どうしても色や形、印象に目が行きがちですが、クライアントの課題解決のためにもユーザー目線での確認作業が重要です。デザイン力の向上(=課題解決力向上)のため、是非この記事を参考に、「機能性」を意識したデザインチェックをしていただけたら幸いです。

では新年度も頑張っていきましょう。

仕事のご依頼・お問い合わせ

この記事を書いた人
kobori

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績