短時間でクオリティが上がる│Web制作会社のWebデザイン関連コラム

Columnコラム

Webデザイン

短時間でクオリティが上がる、Webデザインのテクニック

短時間でクオリティが上がる、Webデザインのテクニック

2016/01/27
このエントリーをはてなブックマークに追加

こんにちは。
育児に家事に大忙しのディレクター、望月です。

Webデザイン作業は、クオリティとスピード、どちらも両立させることが重要になっています。
時間をかければかけるほどクオリティは上がりますが、それでは採算度外視になってしまいます。

時間内でいかにクオリティの高いデザインを作るかを考えた場合、様々な時間短縮のテクニックを知っていた方が有利です。ここでは、私が今までに経験した内容から、短時間でデザインするためのテクニックをピックアップします。

デザインのクオリティを上げる、とは(定義)

デザインのクオリティとひと言で言っても、色々な視点での評価があります。
ここで説明するのは、デザインの細かな作り込みや、レイアウトのバランス、インパクト等によるクオリティについてのテクニックです。

Webデザインの評価基準は色々あります。見た目だけの話であれば、極論を言うと見た人の好みに依存するのですが、本来のWebサイトのゴールからたどれば、これが理想的なデザインだ!というものは見えてくると思います。その「人の好み(印象)」と「理想のデザイン」を少しでも近づけるために、細かいテクニックが必要となります。

ボタン1つとっても、ただ単純にシンプルなデザインで作成するよりも、作り込みされたデザインのほうが、クオリティが高いと感じてもらいやすいです。

色数は少なく、余白は広く、メリハリを持たせる

情報の多いサイトほど、多くの色で表現しがちですが、結果的にごちゃごちゃしてしまうのがよくあるパターンです。また、多くの色を使うとなった場合、どこにどの色を充てるのが正しいのか、いちいち考える時間がかかり、制作時間がどんどん膨らんでしまいます。
ユーザー目線で考えても、色は2~3色に抑えた方が、重要な部分とそれ以外の部分との差が明確になり「ここが一番大事!」と誘導できます。

また、余白の取り方も大事です。
簡単に言ってしまうと、重要な要素ほど余白や領域を大きく取ります。文字や情報を詰め込むよりも、まわりにスペースがありすっきりしているほうが、その中心にある情報に注目されやすく、情報の差別化になります。

mochi_2015_10_2_001.jpg

UIコンポーネントを利用する

アイコンやボタンを1から作ると、とても多くの時間がかかってします。
UIコンポーネントを使うことで、ゼロからデザインするよりも、2倍も3倍も速く完成させることが可能になります!

『UIコンポーネント』とは、Webサイトを制作するにあたり必要な画面やパーツをひととおりまとめたデザイン素材のことです。国内ではまだあまり馴染みが無い言葉かもしれませんが、海外ではデザイン系のサイトでたくさん扱っています。自分が作成したいサイトのジャンル、カラーにあったものを使えば、デザインのヒントになります。

ここで1つ、UIコンポーネントのサンプルをピックアップします。

mochi_2015_10_2_002.png

Edge UI Kit - Limited Edition
https://ui8.net/product/edge-ui-kit

ヘッダーからフッター、コンテンツのレイアウトパターンなどのデザインが、ひととおり詰まったデータです。
PhotoshopのPSDデータとしてまとまっているので、自由にカスタマイズが出来ます。

mochi_2015_10_2_003.pngmochi_2015_10_2_004.png

いかがでしょうか。
このデータを使えば、最初に説明したような余白や色使いについても、あらかじめ基本的な要素が作られていますので、かなり時間短縮につながると思います。

他にも、短時間でクオリティを上げるテクニックは色々あります。
また次の記事で紹介していこうと思います。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

関連キーワード
text_totop