webデザイン

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

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

デモサイトを確認する

スリームデザインの無料メールマガジン

ピックアップ記事

  1. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  3. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…

関連記事

  1. キュレーション

    WordPress日本語テーマのGorgeous (tcd013)を活用した高級感の漂う9サイトを厳…

    ここでは高級感が漂い、ユーザーの直感に訴えるスライダーとスタイリッシュ…

  2. webデザイン

    Photoshopで文字に影を付ける”3つの方法”を知っておくだけで表現の幅…

    Photoshopで文字に影を付けるには、レイヤースタイルのドロップシ…

  3. SEO

    アフィリエイトに最適化されたWordPressテーマ”CUBEY”は広告スペ…

    CUBEYは、アフィリエイトやアドセンスなどの広告収益を望むブローガー…

  4. マーケティング

    WordPressで個人のネットショップが簡単に作れるTCDテーマ【BLOC】の有効的な使い方

    ネットショップを運営したいと考えた際に、いちから作ろうとすると数十万円…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
PAGE TOP