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. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  3. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…

関連記事

  1. セルフブランディング

    ★スリームデザインの会員性サイト【ブログラーニング】参加者の逸材な記事のまとめ

    スリームデザインでは、ブログラーニングという会員制サイトを運営しており…

  2. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

  3. アフィリエイト

    ブログのアクセス月間10万PVを確実に達成させるために実践した10の重要事項+α

    ある一定以上の継続的なアクセス(以後PVと表記)を集めるブログメディア…

  4. キュレーション

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

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

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

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

最近の記事

  1. Photoshop CCのメニュー文字やツールバーが異常に小…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  3. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…

思考系のおもろい記事

ブログラ
  1. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. webデザイン

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
PAGE TOP