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プロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…

関連記事

  1. キュレーション

    これは参考にしたいっ!WordPress日本語テーマのBlogPress (TCD010)を使用した…

    ここではアルファーブローガーご用達、コンテンツを量産してアクセスアップ…

  2. webデザイン

    細部(ディティール)へのこだわりがWEBデザインに差をつける。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の5番目、ここでは⑤ …

  3. フォトショップ

    Photoshopの【色の置き換え】の使い方

    Photoshopで【色の置き換え】を使うと部分的に色を変えることがで…

  4. webデザイン

    ブロガー必見!パソコン画面のはめ込み画像がわずか10秒で作れるMockDropが便利すぎた。

    ブログを書いているとパソコン画面の"はめ込み画像"を作りたい場合があり…

  5. コピーライティング

    ダイレクト出版【月刊ビジネス選書】会員限定の電子書籍iphoneアプリの使い方

    一般の書店では買うことができない、本場アメリカのマーケティングやセール…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. コピーライティング

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

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

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

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