FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

WEBデザイン

デザイン力を鍛える!Webデザインのフロー別セオリーと知識まとめ

投稿日:2014年2月2日 更新日:

medium_7850997682

以前、「WEBデザインが短期間で上達した方法」では、
上達する近道として模写を紹介しましたが、
それ以外にも基本的なセオリーや知識を知っているだけで、
デザインをする力が格段にアップします。

4月からWebデザイナーになる人、また学校に通う人向けに
Webデザイン(カンプ)を作成する際のデザインの制作フローごとに
大雑把にですがビジュアル面を中心として、
セオリーと知識をまとめました。

もくじ

情報共有

01

ディレクターや営業と情報を共有し方向性を統一するのが第一歩。
どのようなクライアントで、どのようなデザインをするのかを
ヒアリングやミーティングで共有することで、
デザインのクオリティが変わってきます。

競合調査

02

クライアントや営業・ディレクターなどと話し合ったことをもとに
デザインテイストやレイアウトなど競合を調査・研究します。
私は下記の3サイトをよくみています。

ワイヤーフレーム

ワイヤーフレーム

要素をどのようにデザインに落とし込んでいくか検討します。
ディレクターがつくることが多いですが、
もらったワイヤーフレームに無理があったりする場合は、
意図を汲み取りつつ、自分でリライトすることもあります。

デザイン

デザイン

競合調査とワイヤーを元にデザインを考えます。

セオリーを踏襲しつつ、基本的なことをきっちりできるようになると、
素早くハイクオリティなデザインができるようになります。

配色

最初の頃は色使いにまとまりがなかったり、どぎつい色を使いがち。
印象の決め手になりやすい配色はデザインの重要ポイントです。

文字

初心者はベタうちで提出してきます。
文字詰めやメリハリをつけるだけでクオリティが格段に上がります。
合成フォントは好みの組み合わせを先につくっておくと便利です。

キービジュアル

キービジュルは考えるのが大変なので後回しにする人がいますが、
一番重要な部分であり、デザインのテイストを決める箇所なので、
私の場合は、キービジュアルを先につくりはじめます。
キービジュアルを作る際の引き出しは多く持っていた方がいいです。

写真補正テクニック

切り抜き・人物のレタッチをする回数は多いため、スピードが要求されます。
こういう手順を確実に暗記することでデザインスピードが格段にアップします。

完成に向けて

仕上げ

仕上げ

最初の頃は、仕上げの余力がなく提出してしまう人が多いですが、
仕上げでクオリティが大きくかわります。

チェックポイント

できあがったデザインを提出する前にチェックし、
違う箇所・曖昧なところを徹底的に潰しましょう。
ここでダメと判断するならもう一度最初から作り直します。

まとめ

自分の場合は
ヒアリング・競合調査・ワイヤーフレームまでで、
大まかなデザインは頭の中でできあがってます。

実質的に頭の中にあるデザインをアウトプットしていく作業を行うだけです。
実際に作ってみると上手く行かなかったりするので、
この段階でデザインを素案は数案考えています。

どんなに時間をかけてもダメだと自分で判断すれば作りなおします。
ディレクターやクライアントから
求めているものと違うといわれれば、違う切り口で再度つくります。
(クオリティでダメだしされることは、最近はもうありませんが...)

スピードとアイデアの数がプロとして一つの素質かもしれません。
そのためにはセオリーが大いに助けになると思います。

余談

わたしの尊敬するデザイナーである松永真さんが
著書「松永真、デザインの話。+11」で

デザイン=客観性と行っても言い過ぎではない。
デザインの使命のひとつが共感を得ると言うことである以上、
色がきれいだ形がどうだという以前に、
そのデザインが正しく判断されているかどうかが重要なのだ

と書いています。

客観性を持てると、自分に厳しくなりますので、
プロとして成長できるかどうかの分かれ目なような気がします。

PR

PR

-WEBデザイン

執筆者:


  1. […] デザイン力を鍛える!Webデザインのフロー別セオリーと知識まとめ 以前、「WEBデザインが短期間で上達した方法」では、 上達する近道として模写を紹介しましたが、 それ以外にも基本 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

イラレで簡単に文字を「手書き風」にする方法

1分くらいで簡単に文字を「手書き風」にすることができるテクニックです。

Amazon Unlimitedで読めるおトクなWeb/デザイン関連本

Amazon Unlimitedのサービスが始まりました。 Web関連の本の価格の高さに悩んでいたところに、月額980円で読み放題なんて、夢のようです。 Amazon Unlimitedはじめるか迷っ …

できないと諦める前に知識をつける方法

デザイナーやコーダーになって新人が最初にあたる壁が、「センスがない」「私には向いてないのではないか?」と思うことです。 大半の人は、「好き」や「やってみたい」と思ってはじめます。 しかし、大量の情報を …

気持ちいいローダーの参考になる「Spring Loaders」

Spring Loaders ローディングは、後回しにして、ついついありきたりなものを作りがちになってしまいます。 そんな時に、気持ちいいローダーの参考になるのが「Spring Loaders」です。

単色でのデザインの参考になる「Mobile UI Blueprint」

Mobile UI Blueprint 単色でデザインすると単調になりがちです。 そんな時に参考になる「Mobile UI Blueprint」の紹介です。

PR




人気の記事

プロフィール

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。