素人っぽいWEBサイトに見えてしまう4つのロゴデザインの特徴と誰でも簡単にできるPhotoshopとGIMPの3分解決策。

webデザイン

ウェブサイトやブログなどでデザインクオリティの高いテンプレートを使用しているのにも関わらず、ロゴを自作しているために素人っぽく見えてしまうサイトを良く見かけます。ここではその4つの特徴をまとめてみました。

  • ① ロゴの背景に写真を挿入している
  • ② ドロップシャドウのかけすぎ(なぜかポップな書体とセットが多い)
  • ③ 背景を透明にすることができず枠が浮いている
  • ④ サイト全体とミスマッチな色とマークを採用

↓ 画像をクリックして全体を見てみるとそのロゴひとつでサイトの印象がガラっと変わってしまうのが確認できると思います。

素人っぽいロゴデザインの4つの特徴

logo-back001logo-back002
logo-back003logo-back004

これらの特徴に見られる素人っぽさは適切なカラーと書体を選び、ヘッダーの背景色とロゴの周りを同色にすることでほとんど解決することができます。

今回のようにヘッダーの背景に模様があったりグラデーションなどがかかっている場合にはレイヤー構造で背景を非表示にして、PNG保存できるPhotoshopやGIMPなどのデザインソフトでロゴの周りを透明にしてみましょう

ここでは誰でも無料で使えるフリーソフトのGIMPでPNG保存する方法と、デザイナーご用達のPhotoshop&ロゴマルシェを活用して、素人っぽさから簡単に抜け出す方法をどちらも3分程度の動画で解説します。

GIMPを使って背景を透明したpng保存で解決。

logo-back-gimp01
YouTube動画で制作工程を見る
GIMPのダウンロード&インストール方法はこちら 》

Photoshopとロゴマルシェを活用して素人っぽさから抜け出す方法。

logo-back-psd01
YouTube動画で制作工程を見る
バリエーション
logo-back03logo-back04logo-back05
ロゴマルシェを活用したい場合はこちら 》

合わせて読みたい関連記事:素人っぽいWEBサイトに見えてしまうアイキャッチ画像の3つの特徴とアクセスとイメージをアップさせる有料素材の活用法。


WordPressのTCDテーマ(Gorgeous)はロゴの適用がすごく簡単

ワードプレス管理画面にログインし 外観 》テーマオプション をクリック。

logo-solution01

先ほど作成したロゴをアップロードするために参照をクリック。

logo-solution02

ロゴファイルを指定してアップロードする。

logo-solution03

カーソルを動かしてロゴの位置を微調整

logo-solution04

これだけで完成!CSSをいじらず誰でもロゴを配置できるので簡単

logo-solution05

Gorgeous (tcd013)

デモサイトを確認する

スリームデザイン

2,537,987 views

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとカーケティングと玄米ご飯。 フリーランス時代に独学で身に...

プロフィール

ピックアップ記事

関連記事一覧

小笠原広記

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインと玄米ご飯。

 

フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。

 

ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。