wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

   

こんにちは、管理人@SS_mshpです。

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなってるのかを学習します。

CSSでの使い方・色が商標登録される場合があるので気をつける点・カラーコードだとどうなるか(抽出したけど、光の当たり方などで異なって見える場合があります)といった内容で書いてみます。

■cssで色をつけるときのやり方一例

■文字につかう

h1 {color:#000000;font-size:26px;}

『h1タグ』に、プロパティ『色やフォントのサイズ』が指定されてる状況です。h1タグの部分が26ピクセルのサイズで、黒(カラーコード#000000)というように表示されます。文字に色をつけたいときはこんな風に書きます。

■背景につかう

header {background:#ffffff;}

こちらは、ヘッダーの背景色指定例です。白(カラーコード#ffffff)で背景が表示されます。

■注意点・色だけで商標登録されるケースに気をつける

有名サービスなどの色合いを参考にしたい、ということがあるかもしれません。しかしそのときは『色で商標登録されるケース』にも気をつけていないと、知らぬ間に侵害ということがありえます。

■例1:ティファニーの箱やロゴ・バックのターコイズブルー

ティファニーブルー、日本でも商標に?
http://news.livedoor.com/article/detail/8798774/

『カラーコード81D8D0のターコイズブルー』は、アメリカでティファニーが商標登録しているとのことです。とはいえ、色が完全に独占されるわけではなく、バックの色。

この色を使う場合は、バッグ等には使わないのはもちろんのこと、『ヘッダーやパッケージで背景色にして、黒でアルファベットロゴというのも、類似とみなされる可能性がある』ので、ワンポイントで使うようにします。

(そもそも、青とグリーンでグラデーションにした時点で勝手にこの色は入ってくるので、『完全に独占的利用』することは不可能です)

■例2:日本でも、色の組み合わせで商標登録されたケースがある

「色だけ商標」第1号、セブンやトンボ消しゴムに
https://www.nikkei.com/article/DGXLASFS01H29_R00C17A3PP8000/

こちらは、長年使っているロゴや商品の色の組み合わせが認められて商標登録されたケースです。

ていうか、『トンボ鉛筆の消しゴムに使われる青・白・黒は定番過ぎる色』なので、『これに類似する配列にならないよう使う』とokです。青・白・黒みたいな定番色をデザインで使うなっていわれても、何もできないからね(笑)

■有名サービス・企業などが使っている色を、カラーコードで覚えよう

ここでは、身近なサービス・製品・作品・企業などで印象的な色を、カラーコードで押さえていきます。

■カラーコード#55acee(水色)例・ツイッターの鳥

ツイッターに出てくる鳥の色です。明るい感じの水色。ちなみに鳥のロゴは、色や余白・用途などのガイドラインを守れば、使っても良いとのことです。

■カラーコード#375794(ソフトな紺色)例・フェイスブックのサイトの色

フェイスブックのサイトのメニュー部分や、ロゴ背景などに使われています。こちらも、ロゴの使用ガイドラインを守って利用できます。windows95もこれに近い色合いだったかと思います。一時はリア充snsといわれたけど、色合いは落ち着いた印象。

■カラーコード#00b900(黄緑)例・チャットアプリLINE

スマホのアイコンや企業ロゴとかがこの色。時期によって少しずつ変わってるようです。管理人はLINEのテーマはすぐに変えて紫色にしてしまったので、あまりこの色になじみがありません(笑)

■カラーコード#ff9900(オレンジ)例・アマゾン通販のaとzをつなぐ矢印

アマゾンのaとzをつなぐ矢印の色。メニュー部分の背景が青っぽいグレーだったりするので、この矢印がやけに目立ちます。

■カラーコード#00704a(濃いビリジアングリーン)例・スタバのカップについてるロゴ色

カップについている緑色のマークです。お店の看板はバックライトの関係で、これより明るく見えます。個人的に好きなメニューはラップサンド&キャラメルマキアートです。

■#78b4d8(くすんだ水色)例・映画『かもめ食堂』サイト&店舗カラー

小林聡美さんが主演の、フィンランドで食堂をやるお話。その映画にでていたお店・サイトの色合いがこれでした。一時期流行したので、内壁を白&この色に塗ったカフェが増えました。

■カラーコード#c1002b(ちょっと青入った赤)例・高級クリスタルガラス製品Baccarat(バカラ)

フランスの高級グラスメーカーのロゴ・箱・サイト文字などの色。単純な赤より大人びて見えるのはR193・G0・B43というように青入りだから。ワインレッドにしたいときは、G(グリーン)を少し混ぜます。

■カラーコード#53268b(深紫)例・ムラサキスポーツの看板・文字色

あのスポーツ用品店の、看板文字色。背景が黄色なので目立ちます。隣接補色&濃さを落としてレモンイエローみたいな感じで、ハレーションが避けられてそうです。

■あとがき・まとめ

そんな感じで、身近なサービス・製品・作品・企業などで印象的な色をカラーコードで押さえてみました。単純に赤・青・黄色とかそんな感じでなく、微妙な色合いで見やすさやブランドイメージを狙っています。

CSSなどで使う場合は、『ロゴの配置とかで類似し、商標を侵害しない点』など『色相環などをみて、バランスは大丈夫かチェックする』などに気をつけて使ってみましょう。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のweb …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

ワードプレスで画面真っ白で積んだとき、データベースから記事データを抜いて復旧

今回は、ワードプレスで、画面真っ白でどうしようもなくなったときの復旧方法 …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』では …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …