HPデザインする際に覚えるべき「3つのコツ」!

サイトデザイン3つのコツ

オリジナルデザインなんて無理!

こんにちは、ワルコマです。

いきなり失礼しました。

しかし無理なんです、、

これからWebサイトデザインなどを始める初心者の方にハッキリと言っておきたいのですが
自分のセンスだけではやはり難しいものがあるのです。

まずは作り方。

人の目にどう映るのか。

デザインしてみたがしっくりこない、上手くデザインできないという方も合わせて
以下のポイントを押さえてみてください。

 

この3つのポイントを押さえる!

1,デザイン案を身につける

冒頭でオリジナルが無理という話をしましたが、
そもそも今頭の中にある画期的と思われるオリジナルデザインはおそらく何かの影響を受けています。笑

何が言いたいかと言いますと素晴らしい様々なデザインはすでにたくさんあるということです。

今までにないと思ったものは大抵どっかにあります。

つまりそれで良いのです!

この作り方上手いな!
なんかあのデザインが頭に残ってる。
衝動買いさせられた!

など、このようなものを研究していくことで自分が作ったものも同じような効果を見る人に与えることができます。

間違いなく一番の近道といえるのです。

つまり街などで目立つ看板や印象に残るCMなど、
デザイン案はたくさん周りに落ちているのでそこで勉強するようにしてみてください。

なぜこれが目につくのか。
どのように一つの言葉を印象づけているのか。
どうして見ただけで何の宣伝かすぐに分かるのか。

ちょっと意識するだけで見え方は全然違います。

作る側と見る側の両方の目線から見るのが良いでしょう。

 

2,統一感を出す

サイトとチラシやLPなどでは気をつける箇所も変わってきますが、
今回はWebサイトについて書いていきます。

全体のまとまり感です。

目立たせたい文言や写真や告知など印象づけたい箇所は多々あると思いますが、
まとまり感というのは非常に大事です。

これがなければそのサイトに訪れた際にごちゃごちゃな印象のみを受けて
結果、目立たせた箇所なども印象づくことなく共倒れです。

HPのしっかりとした会社は信用があります。
逆に信用のある会社はHPもしっかりしています。
素人が作ったようなサイトでは人は寄ってはきません。
たとえ作った人が素人でもそれはバレてはいけないのです。

これも良いサイトをたくさん訪れマネできるようになるのが一番の近道かもしれませんね。

簡単に統一感を出すための要点をまとめると、

・整列方法
・字体
・色

これらを気にすることで、できてなかった人はうんとまとまり感が出ると思いますよ!

 

3,見えやすさ!

もう少し細かい実践編です。

背景が白であれば黒が最もよく見えます。
小さい文字は読む気がないと読めません。
一つのページに何色もカラフルな色をいれてはいけません。

このような当たり前のことを施していくのですが、意外と難しいです。

これにはコツがあります。

色に関しては原色など見えにくい色は避けましょう。
色を変えるだけで与える印象も変わります。
基本が黒文字の場合、赤文字は重要な印象を持ちます。
特定の目立たせたい文字には色以外にも大きさや字体などを変えるとより効果的でしょう。
大体ひとつのページに使うのは3〜4色です。
それ以上は使わないようにしてみてください。

まとまり感です。

文字の大きさで小さいのが許されるのは説明部分くらいです。
そこは読もうとしている人なので読んでくれますが普通は目に止まりません。
いくつかカテゴリー分けしてあるのなら遠目で見た時に
どこにどんな内容が書いてあるのかがパッと分かるくらいでなければいけません。

 

まとめ

何度も出てきましたが、やはり一番上達する方法は上手なものから学ぶことです。

今回話した点も上手なデザインのものは全て実践しています。

そこはまだ基本部分で差をつけるのはそこからなんですね。

デザインは目に見えるものなので良いところも盗みやすいですが、
その分ボロもでやすくダメな部分が顕著に表れます。

まずは基本をしっかり押さえてオリジナルに手を出せるようになりましょう。

わるこま
わるこま
個人で転売ビジネス、投資で成功している。その傍ら株式会社MRAZ GROUPにてウェブスキルがぐんぐん上達し、キャラクターデザイン、アニメーション作品を制作中。制作一覧

この記事をシェアする

  • ぼんど
  • りゅうへい
  • すきゃる
  • わるこま

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">