京都・滋賀を拠点にWEB制作とWEBデザインに関する情報発信を手掛ける STAND4U

STAND BLOG

HOME > 美しいWEBデザインの作り方と9つのポイント

美しいWEBデザインの作り方と9つのポイント

2016年2月15日

webdesign

 

私はWEBデザイン / DTPデザインを初めて約15年になり、広告代入店様からのお仕事もさせて頂いているおかげで、大手企業を含めの数々のWEBサイトをデザインしてきました。

その経験の中で、美しいWEBデザインを作る上で学んだ事を全て、お伝えしたいと思います。

これからWEBデザインを学びたい人や、WEBデザイナーとして「さらに一皮むけたい」と思っている人達の参考になればと思います。

1.手を抜くな、HTMLコーディングを学べ!

手をぬくな

美しいWEBデザインをする以前の問題ですが、私は本気でWEBデザイナーとして生きていくのであれば、HTML、CSSを理解していないと話にならないと思っています。

たまにデザインだけをしていて「HTMLコーディングは出来ません」という人をみかけますが、そんな人のデザインは大体「ひとりよがりのデザイン」になっています。HTMLで再現できないデザイン、文字要素が増えたり、更新されていく事を考えていなかったりするデザインはもはや、WEBデザインではありません。

逆にHTMLコーディングだけに縛られて、デザインの幅を狭める人もいます。「このデザインだとコーディングが面倒だから簡単にしよう」と思ってしまう人もいますし「このデザインはHTMLでは再現できない」と思っていても、CSS3やjavascriptを使えばできる事を知らずに消極的なデザインをする人もいます。

こういった意味を踏まえて、WEBデザイナーはHTML、CSSは最低限として、javascript、phpなどをどんどん学んでいく姿勢がとても大切であり、それらを学ぶ事が楽しいと感じれるモチベーションコントロールが必要です。

2.お手本となるWEBデザインをただ模写するのではダメ。

観察

お手本をたくさん集めて研究しよう

最初から美しいWEBデザインができる人はいません。美しいWEBデザインをする上で、まず重要なのがお手本となるサイトをたくさん集めて、たくさん見る事です。そしてお手本の見方としては、そのWEBデザインをただ眺めているのではなく、このWEBデザインは何が違うのか?なぜ美しく見えるのか?なぜ見やすいのか?という見方してWEBデザインを自分なりに研究をする必要があります。

そういった意味で言うと、よくお手本のデザインをそのまま模写して練習するという人がいますが、全く無駄ではないと思いますが、ただ模写するだけでは、なぜそうなるのか?という理解が得られないと思います。ただ模写するのではなく、自分の作るWEBサイトでお手本のデザイン手法を取り入れて試してみるという方法を繰り返す事が重要です。

さらにWEBデザインは技術の進歩に比例してWEBデザインのトレンドも日々進化して行きます。最新の技術情報を勉強しながらも、常に海外などの新しいWEBデザインを集めて勉強する姿勢も必要です。

パクリではなくオマージュ

また、パクリになるから嫌だ!と思うかもしれませんが、WEBデザインですでにあらゆるデザイン手法が出し尽くされた中で、他のデザインと被らないデザインというのは無理な話でです。

また初心者なら尚更、先人達の美しく見やすいWEBデザインをたくさん学んで、デザインの基本が出来てから、自分の色を出せば良いのです。最初から自分のカラーを出したいなんて10年早ぇーよ!と私は思います。

どうしても気になる人は、パクリではなくオマージュととらえるといいかもしれませんw

3.バランスや余白はデザインの基本

バランス

WEBデザインにおけるバランスとは

ここからはWEBデザインの基本的な事ですが、まず美しいWEBデザインを作る上で、バランスはとても重要です。これは、前述したお手本をたくさん見て勉強しないとすぐには感覚としてつかめないと思いますが、簡単に説明します。

1枚のWEBページとしての、文字や画像や装飾の比重が重要です。例えばこの画像が右にきたら、次は左にこれを置いたほうがバランスがいいとか、ここに暗い色のラインを入れたらデザイン全体が引き締まるとか、そういった類のバランスです。

余白の取り方

次にバランスの一貫である余白の取り方です。文字の段落と段落の間の余白や画像の周りの余白、右カラムと左カラムの余白などをどれだけ取れば見やすく美しいWEBデザインになるか。

これはWEBサイトの内容によって変わって来ます。例えば情報サイトなど1画面にたくさんの情報を詰め込みたい時は余白を少なめにしたり。写真ポートフォリオサイトのような美しさを優先させたい時は余白多めにとって美しくしたり。文字のサイズや行間も、開けすぎても読みづらいし、狭すぎても読みづらい。
この余白の取り方には、1つの決まった正解の値があるわけではなく、サイトの内容は文字量や要素の数や種類で変わってくるのです。

それを理解した上で、お手本サイトを見て研究したり、自分の感覚として体で覚える必要があります。

4.色づかいや色の組み合わせでデザインセンスが問われる

色使い

色の組み合わせ

バランスや余白が美しく見やすくなった次に大切なのは、色の使い方です。せっかく美しくバランスがとれていても、色の使い方や色の組み合わせが良くないと台無しになります。これは見やすさという意味も含めてです。

例えば背景が白で、文字の色を黒ではなく、薄いグレーにした時、多少のグレーであれば良いと思いますが、かなり薄いグレーにしてしまうと、読みづらくなり、また全体的に眠たいデザインになります。

色の組み合わせで学ぶべき点としては、背景色と全面にくる要素の色の組み合わせとして、見やすいかどうかと、色の組合せの相性です。色の組み合わせとして、どの組み合わせが美しか?またそのサイトの内容にあった色使いをしているか?これらも色を決める重要な要素となります。

色が持つ印象

たとえば食べ物を扱うサイトには暖色系をつかうと美味しそうに見えるとか、ビジネスサイトでは、寒色系をつかうと信頼感や誠実感を訴求できるなどなど。それぞれの色には人が感じる特性がありますので、それを学ぶ必要もあります。

また企業サイトであれば、その企業で決まっている色があります。その色に対して、使っていい色や企業の色に合う色を選ぶ必要も出てきます。

サイト内の色数

色数についても考える必要があります。楽しい雰囲気にしたい場合は色数を増やしたり、クールなデザインにした時は、色数を減らす。といった手法が取れます。極端にいえば、モノトーンのデザインがクールなのは、色を究極に削ぎ落とした結果ですが、逆に言えば「色がなくても成立するデザイン」であると言えます。

5.フォントで変わる

font

WEBデザインにおけるフォント選びは、サイトの印象をガラッと変える要素の一つです。明朝系なのかゴシック系でいくのかこれもサイトの内容によって変わってきます。

いわゆる王道的に使われているフォントを知る事も大切ですが、DTPと違ってWEBデザインにおけるフォントは、フォントを画像化する以外は、基本的にデバイスフォントを使用する事になりますので、すべてのフォントが使えるわけではありませんし、同じサイトでも見る人によってフォントが変わります。その事を理解してデザインしなければなりません。

しかし先ほど述べたようにWEBサイトの技術は進歩します。最近では、WEBフォントという技術がでてきているので、かならずしもデバイス内のフォントである必要もなくなってきています。googleフォントなど無料のWEBフォントも出てきていますので、フォント選びに関してもそういった知識をどんどん調べましょう。

使えるフォントをたくさん知る事で、当然デザインの幅も拡がりますし、美しいフォントを使う事で、デザインのクオリティーが格段にアップします。

6.ビジュアル要素は最も重要

写真選定

WEBサイトにに必ず必要になってくる写真やイラストといったビジュアル要素は、これが一番重要といっても過言ではない要素です。写真が美しいサイトはそれだけで美しく見えてくるものです。また単純に良い写真を選ぶだけでなく、その写真のトリミングの仕方やレイアウトの仕方、写真の加工などで大きく変わってくることも理解しなければなりません。

まず写真の選定が重要です。例えばタイトル画像の場合、タイトルの文字が美しく見える画像を選定する必要があります。よく見かけるのが、無理やりゴチャゴチャした写真を使っているため、見やすくする為に文字を白い縁取りしているデザイン。タイトル文字が読みづらい画像なんて、何の為の装飾か本末転倒であり、文字の無駄な装飾は、デザインを野暮ったくさせます。

文字を見やすく美しくする為に、写真選定にしっかり時間をかけて下さい。その時間を惜しんではいけません。

写真がクライアントから支給されて選ぶ余地が無い場合は、その写真を文字が見やすくなるためにしっかり加工して下さい。その具体的な方法はまた今後の記事で書きたいと思います。

7.デザインに行き詰まった時の対処法!

捨てる

デザインに行き詰まったら、今のデザインを捨てよう

WEBデザインをしていて、デザインに行き詰る事はよくあります。どう試しても良くならない時ありますよね?

そんな時の特効薬は「今のデザインを捨てる事」です。

一からデザインをやり直すのです。「9割近くできているのに、そんな事できない!」と思いがちですが一度捨ててみて下さい。一度作った要素のデザインなので、案外時間がかかりません。

むしろ、ダメなデザインをいつまでこねくり回すより、よっぽど早く完成します。

一度作ったデザインをそぎ落としてさらにシンプルに

デザインが7〜8割できた時点で、一度休憩したり別の事をして時間をあけます。そして改めてそのデザインを俯瞰してみた時に、無駄な装飾や表現が無いかチェックします。

私の経験上、その段階でさらにそぎ落とすことで、より洗礼されたデザインになります。もちろん例外もありますが、究極にシンプルにしていく事が、美しいデザインへの近道かもしれません。しかしシンプルとチープは表裏一体であり、そこを美しく見せるのがプロの仕事なのです。その良い例がAppleのデザインでしょう。

8.情報設計がWEBサイトの命

設計

どれだけ見た目に美しいWEBデザインができても、内容がスカスカだったり、どこに何があるか分かりにくいサイトでは意味がありません。

まずは情報設計をしっかりして、誰が・何のために・どうするサイトなのかを考えて、最終的なゴールを見据えたコンテンツ内容にする。具体的には、ターゲットユーザーにあった文字サイズやデザインテイスト、最終ゴールへの動線や、ユーザーが読み進める目線を想定するなど。どこに何を配置し、重要な内容をいかに自然に目立たせるかなど、WEBデザインをする前段階の設計がとても重要です。文章の場合は、読みやすい見出しなどを効果的に使い、文章量を調整するといった事も大切です。

この辺りはデザイナーの担当ではない場合もありますが、本来この部分からデザイナーがなんらかの形で関わる必要がある部分だと思います。もしそれができない状況で、雑な内容が支給された場合は、しっかりとその提供者にその重要性を説明しなければなりません。

自分の責任では無いと言ったところで、結局出来上がったWEBサイトが全然アクセスされないサイトになってしまったら、せっかくのデザインも台無しで、損をするのは自分です。

9.デザインの正解

努力

デザインに正解はありません。ただ、これまでのすべての事を踏まえた上で、デザインに迷った時に一番の助けとなるのは「ユーザーにとって何がいいか?」「ユーザーにとってどうすれば見やすいか?」といった「ユーザー視点」で見ることが唯一の正解であると言えます。

WEBデザインにおいて、クライアントやディレクターと意見がぶつかった時には「ユーザーの為にはこうした方がいい!」という明確な理由が一番説得力があります。

私も長年WEBデザインを仕事としてきましたが、正直私自身のWEBデザインもまだまだ発展途上です。常に向上心をもってデザインに手を抜かない事が、美しいデザインを作る唯一の方法ではないでしょうか。


ABOUT

京都・滋賀・大阪を拠点にWEB制作とWEBに関する情報を中心に、その他ライフハックや思う事などを発信しています。
制作会社に所属しており、夜な夜な少しずづ書いております。その他、WEBデザイン、HTMLコーディング、jquery、wordpress、イラスト作成、写真撮影など。通勤時間を最大限に活かすのが目下の課題。

Twitter @stand_4u_

新着記事

カテゴリー