こんにちは！

Twitterでは技術的なツイートばかりしていて技術者からフォローされたり仲良くさせていただいたりしていることが多いのですが、よくよく考えたら僕の肩書きはWebデザイナーでした。

せっかくならデザイナーっぽいnoteも書きたいということで備忘録として個人的に実践しているデザインガイドラインを長々と書いていこうかなと。

基本的には以下のツイートに注釈をつけて説明したものとなります。

記事が長くなるのでパート毎に記事を分けてます。

【注意書き】
- 僕がnoteに掲載するガイドラインは僕個人が実践しているもので世間一般の常識とは逸れることがあります。ふーんって感じで聞き流して頂ければ嬉しいです。
- 断定調で書いているところも多々ありますが、基本的に自分の感想です。

(※2019.11.03 追記)こちらのnoteですが、2019年10月の「もっとも多くスキされた記事の1つ」に選ばれました。ありがとうございます。

記事一覧はこちら↓

# Webデザインにおいて大切なこと

デザインとは「設計」である。

Webデザインは決してファインアートではない。アート性ももちろん大切だが、それよりも操作性やエクスペリエンス（UI/UX）を考慮してデザインすることが大切。Webサイトに訪れるユーザーの目線移動や操作性、導線にアクセシビリティ、SEOなども含めてデザインする。

Webデザインはローンチして終了ではなく、ローンチして運用されてからが本番であることを意識する。

目的をもってデザインする。「なんとなく」でデザインしてはいけない。

自分の制作物にクライアントはお金を払ってくれることを意識してデザインする。

# Webデザインを始める前に

デザイン前の事前調査やディレクターとの要件確認は必ず行い、クライアントの要望・サイトを制作する目的・ユーザーのターゲットをしっかりと理解する。

リニューアル案件で現行サイトが存在する場合はそのサイトの抱える問題点を把握する。Googleアナリティクスが導入されている場合はそれを参考材料に。

ヒアリングする場合のチェック事項とWebサイトのリニューアルの際に抑えておくべき基本手順は以下の記事を参考に。

# ユーザー像を明確にする

得た情報を元にペルソナを作る。設定したペルソナを元にデザインすることでユーザーが何を求めているか、優先すべきモノゴトが見えてくる。想定される、もしくは実際に使ってくれているユーザーの視点に立ってデザインを見ることが大切。

ペルソナの設定方法については以下の記事を参考にすると良さそう。

とは言うものの、デザイナーが考えるユーザー像と実際のユーザー像には隔たりがあることが多いので、可能なら実際に類似サービスを利用しているユーザーなどの「生の声」を聞いて、ペルソナ像だけでなくそれも参考にしたほうがいい。

# 「ドリル」と「穴」を意識したデザインを心掛ける

マーケティングの世界で有名な格言にレビット博士が提唱した「ドリルを買いに来た人が欲しいのはドリルではなく穴である」という言葉がある。

ドリルを購入する人が何を求めているのかというと、ドリルという「製品」ではなく、ドリルによって生み出される穴という「結果」や「利益」。

Webデザインにおいてもドリル（僕たちが制作するプロダクト）と穴（クライアントやユーザーが本当に求めているモノゴト）をしっかりと認識してデザインする必要がある。ドリルの制作にウエイトを置きすぎて穴を軽視してはいけない。

クリエイターにとっては斬新な表現・最先端のサイトであっても、クライアントやユーザーはそれがどれだけすごいのかよく分からない。デザインも開発もペダンチックになりやすいので注意。

# 同業他社のサイトデザインを参考にする

同業他社のサイトデザインや動向・傾向を調べることは業界の方向性の理解に役立ち、差別化を考える上での判断材料にもなる。Webデザインギャラリーの多くは業界カテゴリ毎にサイトを検索できるので素敵。

個人的によく見ているギャラリーサイトは以下。

# 参考サイトを自分なりに真似る

インスパイアされたサイトを自分なりに真似る。ただ真似るだけではなく、そのサイトのどこが良いデザインだと思ったのかを噛み砕く必要がある。

そのうちお話するとは思うけれど、「センス＝経験値」。

良いと思ったデザインを貯蓄して、デザインの現場で引き出せるようにすることが大事だと個人的には思う。

「マネるデザイン研究所」というギャラリーサイトは掲載されているサイトのどこが優れているのかを「マネしたいデザイン」としてポイントに絞って纏めているので素晴らしいと思った。

有名制作会社の実績を参考にしてみるのもおすすめ。アワードを受賞している制作会社のデザインは格が違うなーって感じた（小並感）。

ただ、参考サイトにひっぱられすぎないように。自戒を込めて。

当たり前だけど丸パクリはNG。

# 流行を意識する。意識しすぎて目的とズレるデザインはしない

Webデザインのトレンドを意識する。トレンドとは見栄えだけでなく、アクセシビリティなどの流行も含まれる。

例えば近年はスマートフォンの画面の大画面化傾向によりメニューボタンを画面下に設置する事例も増えてきている。

ただ、トレンドを優先して、目的とずれるようなことがないようにする。あくまでもサイトの目的にあったデザインをするように。

# 現在のデバイス事情やブラウザ仕様を考慮したデザインを心掛ける

横幅320pxのスマホサイズからフルHDの画面サイズまで対応できるデザインを作る。

現時点でのブラウザのシェアを考慮し、シェア率の高いブラウザでできない表現は極力避ける。

ブレンドモードなど、IE11やEdgeといったブラウザでは対応していないが、他のモダンブラウザでは使いたい表現がある場合は代替案を用意しておくといいかも。

現時点でのブラウザやデバイスのシェアは「statcounter」で調べることができます。

日本国内のシェア率も確認できるのは本当に便利だと思った。

IE10以前やAndroid 4系などは基本的にプログレッシブ・エンハンスメント対応で。

リニューアル前のサイトにGoogleアナリティクスが導入されているならそれを参考に対応ブラウザを決定するのが良いかも。

プログレッシブ・エンハンスメントについての解説は以下参照

# 参考文献

---

次回「配色編」はこちら↓