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

関連記事

  1. Web関連

    目の疲れをスッキリ!!これで疲れ目解消!

    最近、あなたの目はお疲れではありませんか?パソコンの長時間使用により起…

  2. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた

    みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。GU…

  3. Web関連

    イラスト制作における時短への取り組み ~イラストのディレクションをしていて気づいた事~

    働き方改革が謳われるようになってから、様々な業務の効率化が急がれたり、…

  4. Web関連

    ECサイトの売上を向上させたい 第2回目

    連載第2回目の今回は、「ポイントはひとつ!効果にこだわれ!」について触…

  5. Web関連

    春がくる!春をイメージしたwebデザインサイト

    こんにちは、管理部の川又です。最近、少しづつですが外が暖かくなってきま…

  6. Web関連

    Webサイトは公開後が大切

    私が初めてインターネットを使用したのは、約20年前、小学校で行われた授…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    機械学習で進化した将棋界
  2. Web関連

    こんなものもあるの?面白い採用方法
  3. Web関連

    音声認識対決「Siri」VS「しゃべってコンシェル」
  4. AIさくらさん

    【人工知能(AI)×顧客満足度】ユーザーフレンドリーなWebサイト接客に欠かせな…
  5. Web関連

    WordPressをCMSとして活用するためのプラグイン Custom Post…
PAGE TOP