レスポンシブロゴデザイン-2018年の決定的なガイド

公開: 2018-02-07

ロゴは会社の物理的なシンボルです。 これは、特定のブランドや製品について考えるときに頭に浮かぶイメージです。たとえば、Appleの半分噛まれたリンゴやNikeのスウッシュなどです。 しかし、角を曲がった新しいトレンドで、ロゴが成功して効果的であるために必要なものも変化しました。 今、彼らは清潔で、ミニマルでシンプルである必要があります。 しかし、最も重要なことは、レスポンシブWebデザインに適応する必要があるということです。

2018年です—レスポンシブロゴデザインがない場合は、運命にあるかもしれません。 そして、私はそれが劇的であるとは言いません。 つまり、携帯電話でWebサイトを開いて、UXデザイン全体がファンキーに見えたことがありますか? それとも、メールを開いてロゴがすべて不均衡だったのでしょうか。 これは、一部の企業がレスポンシブロゴウェブデザインを利用していないためです。

nike responsive logo designs

ロゴは、コンピューターやスマートフォンの時代より前に作成されました。レスポンシブWebデザインがWebデザインの主力になる前のことです。 ただし、ロゴがレスポンシブWebデザインに反映され、適応できることが重要です。そうしないと、ロゴが乱雑で時代遅れになります。

そして、ブランドははるかに少ないために忘れられています。

したがって、レスポンシブロゴデザインが実際に何であるか、そしてそれを作成するために何が行われるかを理解することが重要です。 それはあなたのロゴが大きな誤動作なしに拡大したり縮小したりできることを確認するだけではありません。 ロゴを見る媒体に関係なく、ロゴが目立つようにする必要があります。ロゴが不均衡、ピクセル化、または押しつぶされているためではありません。

会社のロゴを作成または変更する際に留意すべき重要なヒントをいくつか紹介します。レスポンシブロゴのデザインが取り入れられており、取り残されたくないためです。

audi logo design

シンプルさ

ロゴに関しては、清潔さが重要です。 ロゴは人目を引くものであり、認識できるものでなければなりませんが、そのとんでもない(または不快な)ものであってはなりません。 混乱したり雑然としたロゴを分析する時間はありません。 彼らはただ十分に気にしません。 シンプルでクリーン、そして洗練されたロゴデザインを選ぶのは、ロゴのブレインストーミングが進むべき場所である理由です。 あなたは人々にあなたのロゴを見て、すぐにそれを認識し、そしてその後彼らの意見を形成して欲しいです。

あなたは彼らが彼らの頭を細めたり引っ掻いたりすることを望まない。

特にレスポンシブデザインテンプレートでの適応の必要性を検討する場合、長くて複雑なストーリーを伝えるロゴを作成することはできません。 うまく転送されません。 物事を過度に複雑にしないように、それは明確で微妙である必要があります。 ロゴを拡大および縮小する必要があります。コピーが多すぎる、とんでもないデザインが多すぎる、派手な色がうまく動かない。

あなたはあなたの聴衆をそれのために働かせる必要はありません—彼らはそのままで十分に働きます。

鮮やかな色のポップ、誇張されたドロップシャドウ、フレアとグローに別れを告げ、すっきりとしたライン、光、自然な色、モダンなフレアにようこそ。 ロゴをシンプルにすることで、モバイルデバイス、タブレット、ノートパソコンの画面で表示する際の柔軟性が高まります。

現代性

これにより、2018年のレスポンシブロゴデザインに関して、従う必要のある別のベストプラクティスがもたらされます。私たちは現代にあり、ロゴはそれを表す必要があります。

優れたレスポンシブ画像とロゴデザインは洗練されています。 彼らは強い。 彼らはきれいです。 それらは過度に複雑ではありません。 彼らは新しい時代に最新です。 これは、多くの企業が関連性と興味を維持するために、継続的に設計を適応させ、変更する必要があることを意味します。

色を減らし、シンプルなフォントを選択します。 シンプルな形で遊んで、抽象的すぎるものには近づかないでください。 もちろん、独自のスタイルを取り入れ、ブランドに基づいてロゴを作成しますが、夢中になりすぎないようにしてください。

kate spade logo

ミニマリズム

ウェブデザイン、印刷デザイン、アパートの装飾、そして特にロゴでは、少ないほど多くなります。 ミニマリズムがあり、ミニマルなロゴデザインはあなたのブランドや会社にとって必須です。 詳細を縮小しても問題ありません。視聴者は違いをほとんど知りません。

デザインを整理して縮小するための小さな変更や微調整により、実際に視認性が向上する可能性があります。 そして、今よりもミニマリストに行くのに良い時期は何ですか? 化粧品のパッケージから家具まですべてがミニマルになっていると、ミニマルではないロゴは時代遅れに見えるかもしれません。

適応性

変更は避けられないので、ロゴが変更されることを理解することが重要です。たとえそれが完璧だと思っていたとしても。 そのため、避けられない変化と適応性に備えてロゴを作成する必要があります。

過度に複雑なデザインは、何年にもわたって変形や単純化が難しくなります。代わりに、そもそも元のロゴの整合性が失われます。 ロゴを完全に変更すると、ロゴが提供するはずのブランド認知度が失われます。

特にレスポンシブウェブサイトのデザインでは、変更しやすいロゴを持つことは、より多くの人にロゴを見てもらうのに役立ちます。 あなたのロゴが適応できない場合、あなたの会社全体も適応することができません。

より多くのロゴデザインのヒントが必要ですか? ニュースレターにサインアップしてください!

レスポンシブウェブデザインでレスポンシブロゴデザインを最適化するために他に何ができますか?

画面サイズによっては、ロゴをまったく新しいものに変える必要がある場合があります。

まあ、完全ではありません。 ただし、表示されている場所によっては、ロゴの特性の一部を削除する必要がある場合があります。

場合によっては、ロゴに単語やフレーズ、または追加の記号が含まれている場合、画像が小さくなるほどそれらを残す必要があります。

スマートフォンとタブレットのどちらで読んでいるかによって、ロゴはワードマークを削除したり、1行ではなく積み重ねられるように再調整したり、タグラインを失ったり、上記のすべてを行う必要があります。

これは、ロゴがすべての認識可能性を失うことを意味するものではありません。 それはあなたのロゴのままですが、それの骨組み、つまり誰もがあなたのブランドや製品に関連するイメージやシンボルです。

ドミノはこれを行います。 メインのロゴは次のようになります。

dominos logo

縮小すると、次のようになります。

dominos responsive logo

最後の画像がドミノに関連していることはまだご存知でしょう。小さな画面に簡単に収まります。

それを正しく理解したブランド

多くのブランドは、レスポンシブWebデザインに合うようにロゴを変更し始めています。 彼らは削減し、簡素化し、ミニマルになり、ロゴを彼らのために、そしてユーザーのために機能させました。

Twitterは、何年にもわたってロゴを変更した1つの会社にすぎません。新しいイテレーションは、前回よりも優れています。

twitter logo old

当初、Twitterは非常に基本的なロゴデザインを署名の青い色で使用していました。 それは、すべて小文字の「twitter」という名前だけでした。

シンプルで、認識しやすく、理解しやすいものです。 しかし、縮小することになると、判読できなくなる前に単語を非常に小さくすることしかできません。 彼らの次のロゴデザインは、私たち全員が知っていて愛しているツイッターの鳥を紹介しましたが、それでも、あまりにも多くのことが起こっているようでした。

最近、Twitterはそのロゴで非常に最小限になり、その署名のTwitterブルーを保持していますが、その象徴的なロゴとして鳥のみを使用しています。

new twitter responsive logo

これでレスポンシブロゴデザインになりました。

しかし、ロゴを使って遊んだのはTwitterだけではない。 順応する素晴らしい仕事をしたもう一つの会社はSpotifyです。

old spotify logo

Spotifyは、ファンキーでユニークな、あなたの顔のロゴから始まりました。 一部の人にとっては、フォントと色の選択を見ると少し若かったですが、何年もの間はうまくいきました。

しかし、彼らがほぼ独占的にモバイルデバイス上に住んでいることを考えると、彼らはよりモバイルフレンドリーなレスポンシブロゴデザインを必要としていました。

それらの最新の反復は、はるかに単純で柔軟性があります。 彼らが色を変えたとき、それはいくらかの騒ぎを引き起こしました、しかし、リードプロダクトデザイナーのトビアスファンシュナイダーは彼がブログ投稿で述べているように彼が現代の時流に乗る必要があることを知っていました:

古い「ブロッコリー」グリーンに慣れたのと同じくらい、退屈なブランドパレットはアップグレードに必死であると感じました。 少しリフレッシュして、活気に満ちた新しいカラーパレットとうまく調和することを確認する時が来ました。 新しいグリーンはもう少し「ポップ」で、3ダース近くに成長した新しいカラーパレットでくつろいでいます。 それはより新鮮でモダンに見えるだけでなく、特にフルスクリーンで適用するとき、目にもより簡単に感じます。

new spotify responsive logo

Spotifyは、これに明るい緑とシンプルでクリーンなデザインを採用しました。 画面のサイズに応じて簡単に適応でき、機能します。 「Spotify」という言葉を見なくても、Spotifyのシンボルが何を表しているのかすぐにわかります。 そしてそれがポイントです。

もう1つの成功したロゴの変更は、ロゴがわずかに変更されただけですが、永続的な影響を与えるMastercardに行きます。

これは彼らの古いロゴでした。

mastercard logo

ご覧のとおり、この象徴的なロゴは間違いなく人目を引くものですが、時代遅れです。 真ん中で色が変わる様子は少し耳障りで、ロゴの中の名前は読みやすいですが、見た目が良くありません。 しかし、1マイル離れたところから、これがMastercardのロゴであることがわかります。

しかし、近年、彼らはより自然にそして流動的に一緒に流れるより単純な設計に切り替えました。

new mastercard responsive logo

その新しいロゴは、会社名をデザインの下に移動し、フォントをよりクリーンで読みやすいものに変更します。 また、ロゴデザイン自体のすべての側面のバランスをとる3番目の色を中央に追加しました。

画面サイズが小さい場合はワードマークを簡単に削除できるため、これはすばらしい更新でもあります。 そして、このロゴがどのブランドに属しているかは誰の心にも疑いの余地はありません。

あなた自身のロゴ、またはあなたのグラフィックデザイナーが取り組んでいるロゴの再設計に関しては、これらの成功したロゴデザインから本当に学ぶことができます。

ブランドは、小さくてきれいで認識可能なシンボルを利用し始める必要があります。 このように、彼らは注目を集めるために彼らの名前だけに頼っていません、そして彼らがレスポンシブウェブサイトのデザインにどのように収まるかについて心配する必要はありません。

それを殺したいくつかのロゴの再設計をチェックしてください。

間違えたブランド

かさばり、不均衡で抽象的な— 2012年ロンドンオリンピックのロゴは、レスポンシブロゴの素材ではありません。 それはいたるところにあり、バランスが取れておらず、一見したところ、ロゴが何のためにあるのかを実際に理解することはできません。 そのうえ? デザイン内の書き込みは、それが小さくなりすぎたときにそれが言うことを読むことができないことを保証します。

london olympics logo

ブリティッシュテレコムも最近ロゴの再設計を行いました。 古いロゴの代わりに、30年以上で5番目のロゴである新しいロゴには、さまざまな色のオーブの前にBTの文字が含まれています。 ブリティッシュテレコムはシンプルさでポイントを獲得していますが、色の虹は現代的でもミニマルでもありません。 それだけでなく、シンボル自体がBritishTelecomにすぐに役立つわけではありません。 まだブランドに精通していない場合は、これがどの会社であるかさえわかりません。

british telecom logo

これは1990年代のロゴのように見えます。

今後できること

2018年ですが、ウェブサイトやロゴが反応しない場合は、すでにボールを落としています。 毎日の毎秒技術的に進化している世界では、あなたのブランドはほこりの中に残されるわけにはいきません。 そのため、ビジネスの成功に役立ついくつかの重要なデザインのベストプラクティスを理解し、理解する必要があります。デザインプロセスの改善、グラフィックデザイナーからウェブデザイナーへの切り替え、さまざまな種類のデザインのレッスンなどが必要です。 。

あなたのロゴはあなたのブランドについて最も目に見えるものです。 目立つ必要があります。 それは認識可能である必要があります。 そして何よりも、レスポンシブWebデザインに適応する必要があります。 あなたのロゴが適応して進化することができないならば、あなたのブランド自体は進化することができません。

レスポンシブロゴデザインは次のようにする必要があります。

  • 単純
  • モダン
  • ミニマル
  • 適応可能

ロゴのデザインに関しては、間違いの余地はありません。 あなたが悪いものを持っているなら、誰もが知っているでしょう。 また、レスポンシブ画像とロゴデザインを最適化するには、ロゴを確実に適合させる方法を知ることが重要です。 ロゴがすべての画面サイズに最適化されていることを確認するには、次のことができます。

  • ワードマークを削除します
  • タグラインとフレーズを排除する
  • ロゴデザインを再調整または中央揃えします
  • 単一のシンボルを選択する

レスポンシブロゴデザインは未来です—過去に置き去りにされないでください。

あなたが好きなロゴデザインは何ですか? ソーシャルメディアで教えてください!

より多くのデザイントレンドの洞察が必要ですか? ニュースレターにサインアップしてください!