はじめに

先日、社内向けに技術のナレッジを共有するサイトをリリースしました！
私は主にWEBデザインや、フロントエンドの開発を担当したのですが、今回はそこで培った経験をもとに、さあWEBデザインをしよう！と思ったときに知っておくと便利な３つのことをお伝えできたらと思います。

こんな方におすすめ

HTMLやCSSの勉強をしたので、いよいよWEBサイトを作りたい！
かっこいいWEBサイトを作りたいが、何からすればいいんだろう？
これからフロントエンドについて知っていきたい！

※WEBの基礎や実践的なコーディングを勉強したい！という方はよかったらこちらもご覧ください！
Webクリエイター能力認定試験のすすめ
 新卒がHTML5プロフェッショナル認定試験レベル１に合格した方法

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

デザインをするときに悩むことの一つに"色使い"があると思います。
このサイトでは、彩度や明度の違う色の組み合わせパターンを調べることができ、簡単におしゃれな配色のパターンを見つけることができます。

2. FONT SQUIRREL

WEBデザインではフォント選びも大事ですよね。
こちらのサイトでは、数あるフォントを無料やお手頃な価格でダウンロードすることができます。
ちなみに私の好きなフォントは"Brandon Grotesque"です。
シンプルですが洗練されていて、使うだけでちょっとカッコよくなります。

3. プロトタイプを作ろう

プロトタイプとは、「試作モデル」の意味です。
デザインが決まったら、それをもとにプロトタイプを作成します。
プロトタイプを作ることをプロトタイピングとも言います。

なぜプロトタイプを作るの？

プロトタイピングの目的は、課題を洗い出すことです。
そのため、プロトタイプの制作に時間をかけることは望ましくありません。
プロトタイプは紙とペンでラフに作られることもありますが、コードを書かずにドラックアンドドロップなどの直感的な操作で画面を作れたり、チーム間の共有が簡単にできるようなサービスも存在します。

おすすめのプロトタイプ作成サービスは？

私はProttというサービスを利用しました。
以下が使ってみてよかった点です。

1. 1プロジェクトなら無料で使える

2. 疑似的に遷移を表現できる
疑似的にページ遷移ができることで、操作感のイメージがしやすくなります。

3. 自作のパーツを挿入できる
実際に使いたいパーツを素材として挿入することで、より完成系をイメージしやすくなります。

まとめ

WEBデザインをしよう！と思い立ったとき、知っておくと便利な以下の3つのことについてご紹介させていただきました。

1. WEBサイトで紹介するサービスそのものについて理解を深める
2. どんなデザインにするか、基盤となるガイドラインを作成する
3. 課題を洗い出すためにプロトタイプを作る

もちろん、全くこれが正解の形ではありませんので、ぜひぜひアドバイスなどいただけたらと思います！
最後まで読んでいただき、ありがとうございました。

WEBデザインを始めよう！知っておきたい3つのこと