Web関連

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

0

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

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

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

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

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

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

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

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

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

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

 

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デザイン

0

コンバージョンを上げるABテストとは!?前のページ

【Web アプリ制作】スマホアプリ×ホームページ次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新しい販売形態であるDtoCについて考えてみる
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    【人工知能・AI×CSR】最新技術で実現する新しい社会貢献の形

    CSRって何?CSRという言葉、企業のWebサイトではよく目にするか…

  2. Web関連

    選んではいけないメール配信システムの3カ条

    多くの企業がメール配信システムを活用したマーケティングを行っています。…

  3. SNS関連

    上手く活用できていますか?企業としてのTwitter活用術

    SNSというものが流行り始めてから随分たち、私達の生活には欠かせないも…

  4. Web関連

    WEBサイトの障害対応に使えるコマンド

    自身の管理しているWEBサイトにつながらなくなったりした場合、皆さんは…

  5. Web関連

    ロボットも好みはやっぱりスリムでイケメン!

    こんにちはこの記事のタイトルと外見が似ても似つかないコーダーの須澤です…

  6. AI関連

    WEB接客と親和性の高そうなサービスを考えてみた

    2015年は"WEB接客"サービス元年と呼ばれていますが、WEB接客と…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. AIさくらさん

    【人工知能(AI)×飲食業界】飲食店が抱える課題をAIさくらさんが解決
  2. Web関連

    M2Mの加速化で運転手が居なくなる?
  3. Web関連

    クラウドサービスを使うと効率化はできるの?
  4. Web関連

    ポケモンGOはなぜヒットした?
  5. Web関連

    健康管理アプリ「あすけん」を一か月使用してみたので、感想を書きます。
PAGE TOP