ワンクリックに命がけのWEB・ホームページ制作会社「エムハンド」

インバウンドサイトを作るときに知っておきたいこと

WEB担当者のデザイン力を高めるための3つの基本ポイント

  • WEBデザイン

ブログの投稿をもっといいデザインに仕上げたい。でも、どうすればいいのかわからない。ホームページ制作会社との打ち合わせで、デザインの善し悪しの判断に悩む。そんな、デザインに関する漠然としたモヤモヤを感じることはありませんか?

ブログやホームページ以外でも、パソコンで営業資料を作ったり、簡単なDMを作成したり…と、デザイナーでない職種の方にもデザイン力が必要とされることが多くなっています。スタッフのデザイン力を磨けば、企業イメージもよくなり、ひいては集客力アップも期待できます!今回は、社員のデザイン力を向上させるための、3つのポイントをご紹介して行きます。

ポイント1.デザインする目的を間違えない

デザインするということは、何も専門的なソフトを使いこなして格好良いものを作ることではありません。デザインの基本は、見る人に「より伝わりやすくする」ということです。

情報は、整理するとわかりやすくなる

では、どうすれば伝わりやすくなるのか…という話ですが、情報を整理してすっきりシンプルにすることです。シンプルなものほど、伝わりやすくなります。例えば、いま読んでいただいているこのブログでは、次のようなことを行っています。

  • タイトル部分は大きくして明確にタイトルとわかるようにする
  • 適度に目立つ見出しを入れて、文章を読みやすい長さのブロックに切り分ける
  • ポイントは箇条書きにする
  • 内容を強調したいところは太字にする
  • 写真や図を使用してビジュアルで伝える

このように、見る人(読む人)にとって見やすく、わかりやすく流れを整理していくことが「デザインする」ということの基本です。デザイン力を高めることは、整理力を高めることだとも言えます。

<参考情報>

デザインするということの基本がわかりやすく説明されているスライドやホームページも、参考にしてみてください。

01

「伝わるデザイン」

ポイント2.「配色」に強くなる

デザインする時、あるいはデザインをチェックする時、「悪くはないんだけど、いまひとつしっくりこない」と感じることがありませんか?そんな場合には、配色を見直すとうまくいくことがあります。

しっくりこない原因は色にあることが多い

プロのデザイナーの仕事でも、伝えたい内容はしっかりと入っているし、レイアウトもわかりやすいのにクライアントからのOKが出ないということがあります。そんなケースでは、「デザイン全体の印象が、何かちがう」と思われていることが多く、その原因となっているのは主に配色なのです。

もしも、高齢者向けのサイトなのにショッキングピンクのような鮮やかな色でまとめられていたり、やる気のある社員を求める採用サイトがパステル調の色味だったり、コーポレートカラーはブルーなのに暖色系でまとめられていたりしたら、どうでしょう?何か狙いがあって、あえてそうしている場合は別として、配色がコンセプトとズレていると、パッと見た時の印象がしっくりこないので、「何か違う…」と感じてしまうわけなのです。

いい配色のための2つのポイント

次の2つのことに気を付けるといい配色ができます。

1.色が持つ印象を考えるようにする

色には一般的な共通認識としての印象があります。例えば「暑い」と言えば赤などの暖色系、「寒い」と言えば青などの寒色系。「男性的」といえば黒、青などの濃いはっきりした色、「女性的」と言えばピンクや赤などのパステル系の優しい色味、など。そのデザインで伝えたいことやターゲットをしっかり意識すれば、使うべき色は自然と決まってきます。WEB上には、自分でデザインをする際に役立つオンラン配色ツールもたくさんありますので、ぜひ活用してください。

2.色数を絞る

1つのデザインで使う色数が多いとチラシのようなごちゃごちゃした印象になり、少ないほど洗練された印象になります。デザインで陥りやすい失敗は、とにかく多くの色を使って収拾がつかなくなってしまうこと。そうならないためには、最初に使う色を決めてしまいましょう。タイトルは青、本文は黒、結論は赤、のようにそれぞれのポジションに応じた配色を最初に決めてしまえば、デザイン全体が統一感のあるものになります。

<参考情報>

配色について書かれた記事はWEB上にいろいろありますが、いくつかわかりやすいものをご紹介します。

02

配色を考えるときに便利なオンラインツール10個集めてみました

ポイント3.画像加工をマスターする

情報の整理と、適切な配色。この2つを押さえてデザインすれば、かなり伝わりやすいものができるはずですが、ポイント的に画像を使いたいと思うこともあると思います。例えば、ブログの投稿にアイキャッチ画像があると効果的ですよね。画像はFacebookなどのソーシャルメディアでシェアされた場合にも表示されるので、拡散のためにもとても重要です。

デザイナー以外の人にとって、画像の加工はちょっとハードルが高いイメージがあるかもしれませんが、無料で手軽に使える画像編集ソフトがいろいろあります。使ってみれば意外と簡単。画像加工は高度なソフトを使ってプロのデザイナーが行うものというイメージを捨てて、チャレンジしてみましょう。以前の記事、「ブログ画像の作成時に超便利。お手軽なのに本格派の無料画像加工ツールをご紹介!」も参考に、ますは使いやすいツールを探してみてください。

<参考情報>

03

はじめてアイキャッチ画像を使う人が知っておきたい6つのルール

今回のまとめ

ブログやホームページの更新に限らず、パソコンでの資料づくりなど、いまや「デザインする」という作業は日常的になっています。同じ時間をかけるなら、しっかりと伝わるものに仕上げたいですよね。ご紹介した参考サイトなどもチェックして、ぜひデザイン力アップをめざしてください!

この記事に関連する記事

カテゴリー

アクセスランキング

月間

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  3. 3

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  4. 4

    今どきの幼稚園・保育園ホームページ研究。32サイトに見る傾向と課題とは?

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  7. 7

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

  8. 8

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    「プッシュ通知はアプリのもの」は過去の話。簡単にできるブラウザでプッシュ通知する方法

総合

  1. 1

    いまさら聞けない!フリック、スワイプ…スマホ操作の基本用語まとめ

  2. 2

    【保存版】アツイ視線が集まる激戦区!女性向けWEBメディア50選

  3. 3

    【WEBデザイン10選】これぞ進化系!今どきのレスポンシブWEBデザインサイトまとめ

  4. 4

    初めてでもできる!iPhone動画編集アプリ【厳選4つ】

  5. 5

    【WEBデザイン10選】コンバージョンUPにも!パララックスを効果的に使ったLPまとめ

  6. 6

    【事例に学ぶ】話題の新興SNS、Instagramを集客に使うコツ

  7. 7

    【WEBデザイン10選】シンプルでわかりやすい「1カラム」サイトまとめ

  8. 8

    【WEBデザイン10選】背景に動画を大胆に使った日本のサイトまとめ

  9. 9

    今年はこうなる!2016年のWEBデザイン、5つのトレンドを大胆予想!

  10. 10

    【WEBデザイン10選】雑誌風デザインを上手く取り入れたWEBサイトまとめ

エムハンドブログ編集部

  • 編集長みつむね

    得意分野はWEBマーケティング/コンテンツ編集。「インバウンドブログ」立ち上げから編集に参加。

  • 伊藤 高啓

    SNS運営からWEB広告/マーケティング業界を経て、鳴り物入りでエムハンドブログ編集長に就任。

  • 新棚幹太

    雑誌出版社を経てフリー編集者に。東京生まれ、京都暮らし4年目のオールラウンドライター。

  • 島田

    某グルメ雑誌の編集長を経て、業界違いのWEBへ転身。独自の視点で個性的な記事を手がける。

  • ヨネクラ

    WEBメディアの立ち上げに参加したくエムハンドライティングチームに参加。早稲田大学出身。

  • キクチ

    京都大学卒業後、京都大学院工学研究科に進学。研究を続けながらライター業に従事。

  • 池田仮名

    週末Webプランナー。情報システムの発展によって変化していく人の心や共同体のありかたに興味。

最新記事

  • M-HAND 士業
  • M-HAND 歯科
  • Logonic
  • M-HAND TechnicalBlog

ワンクリックに命がけのホームページ制作会社「エムハンド」