デザインが苦手なWebデザイナーが、ニガテを克服するためにやっている5つのこと

Pocket

image

かれこれ8年ぐらい、Webデザインの仕事で食べていますが、実はわたし、デザインが苦手です

今の仕事に就いてから1~2年は、デザインのフェーズが苦痛で仕方ありませんでした。
今回は自分の頭の中を整理することも兼ねて、そのニガテを克服するために行っている5つの項目を書きます。

そもそもデザインが苦手な原因ってなんだ?

自己分析の結果、それは「自信のなさ」から来ているという結論になりました。

デザインにはHTMLやCSSのように一定のルールがあるわけでもなく、
学校のテストのように解答もありません。
何が正解かわからない」というところが、一番の不安要素だったわけです。

それであれば、HTMLのようにルールを作って、自分なりの模範解答を見つけよう!と思い立ち、Webデザインのルールを作ることにしました。

1.ベーステイストを決める

Webサイトには必ずターゲットとゴールがあります。
それらに最適なテイストとは何か考え、まずは3つのことを決めるようにしています。

テイストサンプル

素材感

そのサイトに沿った素材感を決めます。例えば、

  • フラット … トレンドを利用して、新商品など目新しさを出したい
  • グラデーション … ボタンなど立体感を明確にして、病院や自治体など誰でもフレンドリーに
  • テクスチャ … ブランドイメージを強調したい、雰囲気を重視

形状

ボタンやアイコンなどを作成するときに指針となる形状を決めます。

  • 直角…お堅い、最新鋭
  • 角丸…やわらかい、親しみやすい

フォント

フォントサンプル

表現したい印象に合わせてフォントのルールを決めます。

  • 文字の読みやすさ、堅実さ … 角ゴシック
  • 易しい、親しみやすさ … 丸ゴシック
  • かちっと、渋い、和風 … 明朝
  • かわいい、ポップ … 手書き文字

角ゴシックの中でも使い分けルールを決めておくと迷いを減らせます。
定番の「ヒラギノ」すっきり「小塚」、ちょっと太めで元気な印象なら「新ゴ」など。

2.レイアウトのサイズを決める

複数カラムのレイアウト、バナーやボタンなど画像パーツの比率を決めます。
ここは自分ルールではなく、先人の知恵を借りています。

グリッドでカラム・余白を決める

グリッドキャプチャ

グリッドとは、レイアウトを制作するときに垂直/水平方向に分割したガイドラインのことで、Web以外のデザインでもよく利用される手法です。
このガイドラインによって、カラムや余白を決めることができます。

参考サイト:グリッドを使ったウェブレイアウトのデザイン方法&具体的サンプル(PhotoshopVIP)

黄金比・白銀比でパーツの比率を決める

グリッドで横幅が決まったら、あとは縦幅です。
美しい比率を出す計算式「黄金比」「白銀比」などを活用して決めます。
横の数値を入れるだけで計算してくれるサイトもあります。

参考サイト:Web計。

3.配色を決める

配色サンプル

配色センスのなさも、パターンを検索できるサイトでカバー。

参考サイト:COLOURlovers

ロゴなどすでに決まっている色で検索すれば、その色に合った配色を見つけることができます。
ベースカラー、キーカラー、サブカラーの3色ぐらいに収める方が全体にまとまりが出る気がします。

4.各パーツのルール決める

パーツサンプル

見出しやリスト、テーブルなど細かいパーツのデザインルールを決めます。
これまでに決めた配色や形状を使えば、ここはラクチンです。

5.足す・引く

初めて使う要素を入れる

1つだけでもいいから、必ず初めて使うデザインや、CSS・JSなどを取り入れるようにしています。
引き出しを増やして自信のなさを払しょくするための方法の一つです。

問いかける

このページで一番目立つべきコンテツが一番に目を引くデザインになっているか、
目的へ誘導できる動線は確保できているか、
コーディングや開発の仕様に反している部分はないか、という全体から、
なぜこのボタンは赤なのか、ここに1pxのボーダーがいるのは何故なのか、など一つ一つの要素までざっと見返して、調整しながら完成させます。

まとめ

デザインルールを決めることは、ニガテを克服するだけじゃなく、
デザイン展開の効率化やサイト全体の統一感を出すことにも役立ちます。

これからはもっと引き出しを増やして、ルールにとらわれなくても筋の通ったデザインができるようになりたいたいです!

Pocket

あなたにオススメの記事