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

関連記事

  1. Web関連

    基本中の基本!webで行う品質を上げるための対策3か条!

    Webサイトのデザインを制作しているとよくあるのですが、いかにカッコイ…

  2. Web関連

    あなたは分かる?!パンダ・ペンギンアップデート

    前回に引き続き、パンダアップデート・ペンギンアップデートについてお話し…

  3. Web関連

    最も身近なWEBシステム、CMSに強くなろう!

    今さら聞けない、「CMS」って何ですか?よく「ニュースリリース」など…

  4. Web関連

    進化する電子マネー

    今回は、近い将来お金の形態として主流になってきそうな電子マネーについて…

  5. Web関連

    Webアプリに対する攻撃手法とその対策

    こんにちは。昨今、WEBセキュリティ関連の問題が浮上してきています…

  6. Web関連

    WEB制作・システム開発と迷惑メール対策について

    最近携帯電話のメール宛に迷惑メールが多く届くようになりました。「○…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    今年のホワイトデーは3Dプリンターが熱い
  2. Web関連

    今更聞けない!!レスポンシブ対応のメリット・デメリット
  3. AI関連

    飲食サービス業界のルーチンワークを人工知能(AI)で削減
  4. Web関連

    【Web制作】最強はどれだ!?堅牢な認証方式「生体認証」
  5. Web関連

    なぜ2MBなの!?ビジネスマナーの意外な理由
PAGE TOP