wordpressでのスマホ対応webサイト制作・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サイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)

今回は、お仕事で対応したWebサイトの事例があって、お取引先さまより『ぜひ紹介してくれ』といわれたので、ご紹介いたします。 バンドなど音楽活動に役立てられるコン …

スマホページ高速表示のための、CSS圧縮方法まとめ

今回は、読み込み速度を速くしてwebページ(特にスマホ版)を高速表示するために、CSSをエディットしてみます。 絵はぱくたそさんからお借りしました。なぜCSSの …

ワードプレス派が覚えると便利なPHP~投稿記事・固定ページ指定して表示/非表示

今回はワードプレスサイト制作で使えるテクニックです。 PHPで使う条件分岐&ワードプレスタグを組み合わせて、投稿ページ/固定ページで表示/非表示を行っ …

【サイト高速表示】ワードプレステーマ・stinger(5)のCSS軽量化!どれくらい小さくなる?

今回は、前回やったCSS縮小続きで、『書き方変えたり、いらない部分カット』で、ワードプレステーマ・stingerのCSSサイズを縮小します。 画像はfreeim …

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行います。 その組み合わせは『コーポレートサイト&オウンドメディア』。早速、サーバー設定や企 …

検索エンジンに登録されやすくするため、xmlサイトマップ作成~ツール・wpプラグインなどのやり方紹介

今回は、ちょっと更新の必要がでてしまったため、xmlサイトマップを扱います。 googleなどの検索エンジンに送ったりするファイルで、きちんと登録されているとよ …

データベース圧迫するワードプレス リビジョンを、安定稼動のため削除・制限する(プラグインとconfig.php)

今回は、ワードプレスの機能である『リビジョン』を制御したいと思います。 データベースなどが絡んでくるのでちょっとややこしいかもしれませんが、長く運用する上では押 …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動してしまうという症状が発生したので、それにCSSの修正で対処してみます。 元のテーマは『wp …

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作ってみます(うまくいくかは微妙です)。 画像はfreeimages.comさんからお借りしま …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームページ制作請負)を少しリニューアルしてみた件についてお話します。 しばらくほったらかしだった …