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

関連記事

  1. Web関連

    オンリーワンと地道なチューニング

    2015年10月28~30日に国際展示場で行われた展示会にティファナも…

  2. Web関連

    地方移住×ローカルWEBメディア

    マイルドヤンキーなんて言葉が登場したり、ふるさと納税が注目されたり・・…

  3. Web関連

    エクセル管理はもうやめよう!プロジェクト管理ツール「Backlog(バックログ)」の導入メリット

    Webサイトを運用している皆さんは、タスクや課題をどのように管理してい…

  4. Web関連

    スマートフォン専用サイトに力を入れないといけないワケ

    こんにちは。2月~4月にかけて花粉症で目の痒さに悩まされるデザ…

  5. AIさくらさん

    GAFAは知ってた。じゃあBATHは?

    GAFA(ガーファ)ってすごいですよね。「Google」「Amaz…

  6. Web関連

    ROEとROAの関係がやっとわかった~知っているようで答えられない用語 その2~

    またお会いできて嬉しく思います。前回は1つのキーワードしかご紹介できず…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    AIチャットボットとは?
  2. AI関連

    エッジコンピューティングってなに?
  3. Web関連

    今さら聞けない!リードジェネレーション(リード獲得)のいろはのゐ
  4. AI関連

    最近よく聞く「AIチャットボット」、どこがAIなの?
  5. AI関連

    AIが新型コロナウイルスの感染を防ぐ!その驚くべき方法とは!?
PAGE TOP