PAGE TOP ▲

大副業時代を生き残るためのブログ。切り売り労働からの脱却、少しでも収入をアップしたい方へ。

TOP 初心者がサイトを上手くデザインするには「色」と「余白」が大事。

初心者がサイトを上手くデザインするには「色」と「余白」が大事。

色使いと余白が重要

Webデザイナーとして独立を目指して、実際にサイト制作を始めると
プロとの完成度の違いがはっきり別れます。

私自身、デザインスキルが格段に上がった瞬間が何度かあるのですが
大きくまとめると「色」と「余白」が重要になります。

色の使い方と余白の空け方でデザインが格段に変わります。

サイトのデザインをする時に
ほかのサイトを参考にみることが多々あると思います。

その時に
漠然と「カッコいい」とか「オシャレ」とかといった感じで
参考にするのではなく、色使いや余白のバランスなども
じっくりと見ることで見方がかわります。

色の使い方

プロのサイトデザインをじっくり見ていくとわかりますが
色の使い方に統一性があります。

微妙に違和感のある色の使い方はしません。

まずは
トップページと下層ページの統一性も考えますので
ベースと色を考えそれに合わせて配色を考えます。

背景色や飾り枠、ボタンなどベースの色に合わせて
作っていくことでキレイなサイトが仕上がります。

余白って何か

余白と言ってもピンと来ないかもしれませんが
余白の使い方次第でイメージが全く変わります。

素人かプロかはここで差がはっきりと出るので。

例えば枠の中に入る文章。
枠と文章の関係と、文章の文字間や行間などの余白を丁寧に
空けていくことがプロの仕事です。

細部にこだわることで全体を作る

デザインは感覚でサラっとスピーディーに完成させるイメージを
強く持っている方が多いようですが、実際は地味で緻密な感じがします。

Webで使用する色は数値で設定します。
例えば白を設定しい場合は#FFFFFFとか黒は#000000などアルファベットと数字で
設定することで表示されます。

そして余白はピクセルという単位で調整していきます。

例えば
余白を作る場合に適当な感覚で上下は100ピクセル開けているのに
左は10ピクセル、右は25ピクセルといった感じで配置すると
やはりバランスは良くないです。

場面にあったものを考える

上品なサイトの場合は上品に、元気のあるサイトは明るくというように考えます。

そういった雰囲気は文字だけでも伝えることが可能です。

明るい感じの時は文字を太くしたり、大きくしたりすることで
表現できますし、逆に上品な感じは明朝体や細めのゴシックなどで表現します。

また文字を一文字ずつ間隔を開けることでもきれいな感じが出たり
太いゴシックで文字間をつめると迫力が出るので強調できます。

スーパーの値段が書いたポップと
化粧品メーカーの広告の違いはこんなところで表現しています。

保管庫の関連記事一覧

タグ打ちとコーディングの違いについて。

2017年05月29日
タグとは何か。。。 まずは「タグ」とは何だろう?という所から説明します。タグとはHTMLで使用するもので例えば「こんにちは!」という文字をそのページのタイトルにしたい時 <title

ヒアリング の重要性を理解することでワンランク上がります。

2017年02月05日
ヒアリング の重要性 ヒアリング がWeb制作を行う上で最重要と考えています。段取り八分です。 例えばクライアントに確認する事が100項目あったとします。最初に全て確認しても、作業しながら

ハッキングにあったのでWordPressの運用をできるだけシンプルに考え直す。

2017年02月03日
ハッキング にあったサイトは現在ご覧頂いているこのサイトです。無事解決しているので運用を再開しているのですが、この機会にデザインも一新してみました。技術的な解決方法は色々なサイトで紹介していると思いま

ランサーズで経験を積む。

2017年02月02日
このサイトを見て頂いている方のほとんどは、未経験者や独学で勉強中の方が多いと思います。ただ実践を積み重ねないことには経験を積むことも出来ないが、経験がない人には実践を与えられる機会も少ないのが現実です

Youtubeのサムネイルの代わりに画像を貼り付ける

2016年12月17日
動画サムネイルの代わりにご自身で制作した画像を表示することが出来ます。これは動画の埋め込みタグ(iframe)をjsに流し込み画像をクリックしたら消え、動画を表示するという順序で動きます。 ※埋め込

専門学校やスクールを出ないとWebデザイナーなることは出来ないのか

2016年02月06日
この質問はWEBデザイナーを目指している方からだけではなくクライアントからも「やっぱりそういった学校卒業されたのですか?」という質問をよく受けます。 私の場合は独学でした 私のお話をさせて