はじめに
先日、社内向けに技術のナレッジを共有するサイトをリリースしました！
私は主にWEBデザインや、フロントエンドの開発を担当したのですが、今回はそこで培った経験をもとに、さあWEBデザインをしよう！と思ったときに知っておくと便利な３つのことをお伝えできたらと思います。
こんな方におすすめ
- HTMLやCSSの勉強をしたので、いよいよWEBサイトを作りたい！
- かっこいいWEBサイトを作りたいが、何からすればいいんだろう？
- これからフロントエンドについて知っていきたい！
※WEBの基礎や実践的なコーディングを勉強したい！という方はよかったらこちらもご覧ください！
Webクリエイター能力認定試験のすすめ
新卒がHTML5プロフェッショナル認定試験レベル１に合格した方法
目次
1. ユーザー調査をしよう
2. デザインガイドラインを作ろう
3. プロトタイプを作ろう
4. おすすめ書籍
1. ユーザー調査をしよう
なぜ調査が必要なの？
WEBサイトは、商品やサービスを伝えるための一媒体、一手段であると言えます。
伝えたい商品やサービスにはどんな需要があるのか、利用者はどんな人なのかを把握することで、より使いやすいデザイン、多くの人に見てもらえるデザインを考えることができます。
システムそのものの利用価値をUX、システムの操作性をUIと表現することもあります。
どんな調査を行えば良いの？
私が利用した方法は、利用者となる方にアンケートを実施し、その回答をもとに親和図法という手法を使って分析を行うというものです。
親和図法とは
* 親和図法とは、まとまりのないバラバラなデータを言語の親和性によって整理する手法。 * 具体的には、意見を一つづつ付箋に書き出し、カテゴリー分けをして情報を整えて、最終的にはそれを文章にまとめる。 * 目的は、単純に情報をまとめることではなく、**ユーザーの言葉にできない要求を想像して課題を洗い出すこと**。調査から何がわかるの？
例えば、ターゲット層からは受け入れられるデザインを想定することができます。
また、商品の用途によってWEBサイト上で何を際立たせるかも変わってきます。
このように、調査の結果は密接にWEBデザインにも反映できる部分が多くあります。
2. デザインガイドラインを作ろう
デザインガイドラインとはデザインを進める際の指針のことです。色・文字・レイアウトなど、様々なデザイン要素について、ルールが定義されています。
なぜデザインガイドラインが必要なの？
1. デザインの美しさを担保するため
複数人で別々に作業することがあっても、みんなが同じ品質のものを作ることができます。
2. ユーザビリティーに一貫性を持たせるため
操作のルールに統一感があれば、ユーザーはどうやって動かすんだろうといちいち考えずに済みます。
3. 開発を楽にするため
新規ページを作成するときも既存のデザインガイドラインから部品を組み合わせることで開発が楽になりますし、新しくデザインを発注したり考えるコストを抑えることができます。
以上のような理由から、何名かで作業をすることが前提だったり、別の方が保守をする場合には簡易的にでもデザインガイドラインがあると便利かと思います。
どんなデザインガイドラインがあるの？
他にも多くの企業がデザインガイドラインを公開しています。
iphoneとAndroidのユーザが多いため、WEBデザインを検討する際には上記2社のデザインガイドラインを参考にすることが多いようです。
当然のことのような気もしますが、iphoneとAndroidでUIが違っていたりするのは、それぞれのOSに応じてこのデザインガイドラインに則って制作を行っているからなのですね。
どんな内容を書けばいいの？
私が作成した際に記載したのは以下の項目です。
1. サービスそのものに関する項目
- どんなサービスか
- なぜそのサービスが生まれたのか
- ターゲット層は誰か
- ユーザーのメリット（要求）は何か
2. WEBサイトのビジュアルに関する項目
- 色味の方針（メインカラー・サブカラー・アクセントカラー）
- 構成の方針（シンプル、知的、女性的など、何か一言で表現&イメージに近いサイトの参考URLなどで共有）
- フォントの方針
- 使用する素材の方針（アイコンなどのイメージ）
いろいろな企業のデザインガイドラインを参考に記載する項目を決定しました。
自分以外の方でも、デザインガイドラインをみることで新しいページのイメージができるかどうかという基準で項目を決めていくといいのかなと思います。
今回作成したデザインガイドラインに関しては、今後変更することも考えられたので、かなり大枠のみを記載しています。
デザインガイドラインを作るときにおすすめのツール
1. COLOR SUPPLY
デザインをするときに悩むことの一つに"色使い"があると思います。
このサイトでは、彩度や明度の違う色の組み合わせパターンを調べることができ、簡単におしゃれな配色のパターンを見つけることができます。
WEBデザインではフォント選びも大事ですよね。
こちらのサイトでは、数あるフォントを無料やお手頃な価格でダウンロードすることができます。
ちなみに私の好きなフォントは"Brandon Grotesque"です。
シンプルですが洗練されていて、使うだけでちょっとカッコよくなります。
3. プロトタイプを作ろう
プロトタイプとは、**「試作モデル」**の意味です。
デザインが決まったら、それをもとにプロトタイプを作成します。
プロトタイプを作ることをプロトタイピングとも言います。
なぜプロトタイプを作るの？
プロトタイピングの目的は、課題を洗い出すことです。
そのため、プロトタイプの制作に時間をかけることは望ましくありません。
プロトタイプは紙とペンでラフに作られることもありますが、コードを書かずにドラックアンドドロップなどの直感的な操作で画面を作れたり、チーム間の共有が簡単にできるようなサービスも存在します。
おすすめのプロトタイプ作成サービスは？
私はProttというサービスを利用しました。
以下が使ってみてよかった点です。
1. 1プロジェクトなら無料で使える
2. 疑似的に遷移を表現できる
疑似的にページ遷移ができることで、操作感のイメージがしやすくなります。
3. 自作のパーツを挿入できる
実際に使いたいパーツを素材として挿入することで、より完成系をイメージしやすくなります。
おすすめ書籍
Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで
- 執筆自体にUXデザインのプロセスが利用されている。
- 最近UXデザインに興味を持ち始めた白石由香（27歳/女性）という読者像を想定して作られているので読みやすく、分かりやすい。
- 記事内で紹介している親和図法のやり方やペルソナの作成方法なども記載。
Design Rule Index 要点で学ぶ、デザインの法則150
- 心理学、数学、インテリアなどの他分野の原則をデザインに当てはめて解説。
- 人間の構造や心理学に基づいて解説されているので、合理的なUIデザインを設計するのにも役立つ内容。
- 例えば、注意を促す時に黄色が使われる現象について本書ではこう記載している。
黄色はもっとも視認性の高い色だ。これはおそらく、熟した果物を見つけるために視覚が変化した結果だろう
- デザインをする上で必要な基礎、概念、ルールといったものをイラストや写真などのビジュアルを使って具体的に解説。
- 非常に分かりやすく、満遍なく知識を網羅できる良書。
- 近接・整列・反復・コントラストというデザインの4つの基本原則をプロダクトのいい例、悪い例を比較しながら解説。
- なぜかっこいいのか、なぜダサいのかを説明することができるようになることで、意識的にデザインもコントロールできるというのが本書の主張。
- プレゼンの資料や日々のドキュメント作成などのビジネスシーンでも活用できるようなヒントも多く書かれている。
まとめ
WEBデザインをしよう！と思い立ったとき、知っておくと便利な以下の3つのことについてご紹介させていただきました。
1. WEBサイトで紹介するサービスそのものについて理解を深める
2. どんなデザインにするか、基盤となるガイドラインを作成する
3. 課題を洗い出すためにプロトタイプを作る
もちろん、全くこれが正解の形ではありませんので、ぜひぜひアドバイスなどいただけたらと思います！
最後まで読んでいただき、ありがとうございました。