「黒」×「ピンク」ってオシャレな色の定番の組み合わせのはずなのに、過激な印象が先行してしまうためか、ウェブデザインに限定して探してみると意外に人気がなく、採用しているサイトが少ないんです。
特に性的なイメージを喚起させる側面があるためか、企業サイトではほぼ使われることがありません。

しかし何と言っても「ピンク」は女性が好むNO.1の色ですし、できれば効果的に利用してウェブデザインに取り入れたいものです。
そこで今日は弊社スタッフが果てしないネットサーフィンの末に見つけ出してきた Black & Pink のオシャレなウェブサイトを11個、紹介していきます。

「黒」と一口に言っても濃淡があり様々な種類がありますが、今回はより濃い『リッチ・ブラック』と、同じ「ピンク」の中でも彩度が高い『ショッキング・ピンク』を組み合わせたサイトをメインにピックアップしました。

以下よりどうぞ!

RANA 007

黒・ピンク - Black & Pink - RANA 007

各種デザイン制作に携わる[RANA DOUBLE-O-SEVEN]様のウェブサイト。ローディングのエフェクトから凝っていて非常にカッコいいサイトです。
単純なテキストも文字が流れるように表示され、リンク部分にマウスカーソルを合わせたときの処理も気持ちイイですね。
また、スクロールしていくとコンテンツがフェードインしながら順に表示されていく動きも素敵です。

RANA 007 : http://www.rana007.com

株式会社ココノヱ

黒・ピンク - Black & Pink - 株式会社ココノヱ

こちらは[株式会社ココノヱ]様のウェブサイト。
鮮やかなマゼンダとリッチブラックの組み合わせが目を惹きます。
ユニークなキャラクターが上から降ってくる様子もカワイイ!

株式会社ココノヱ : https://9ye.jp

CP+B

黒・ピンク - Black & Pink - CP+B

海外の[CP+B]様のウェブサイト。最初に背景動画が目に飛び込んできます。ピンクの背景やテキストには透明化の処理が加えられていていますね。
矢印などのボタンをクリックしたときのヌルヌルした動きも見事で、真似したいテクニックが満載です。

CP+B : http://www.cpbgroup.com

アウトレイジ・ビヨンド

黒・ピンク - Black & Pink - アウトレイジ・ビヨンド

続いて北野武さん主演の映画[アウトレイジ・ビヨンド]のホームページです。
動画やMasonryを効果的に使っていますね。

アウトレイジ・ビヨンド : http://wwws.warnerbros.co.jp/outrage2/

ornis

黒・ピンク - Black & Pink - ornis

ワインショップ[orris]様のウェブサイト。
ワインボトルをモチーフにした縦長のデザインです。赤ワインやロゼのスパークリングワインを彷彿させる綺麗なピンクをメインカラーにしています。
なんと Google Maps までワインボトルの形にマスクされています。
レスポンシブ対応。パララックス効果も随所で使われていて非常にクオリティが高いですね。

orris : http://www.ornis.co.jp

STOP!子供によるゲームの高額決済

黒・ピンク - Black & Pink - STOP!子供によるゲームの高額決済

オンラインゲームを扱う[Gungho Games]様が制作したネタ・サイト。
面白い要素が満載ですが、コンテンツ自体は「子供たちのオンラインでの高額決済に警笛を鳴らす」という真面目なテーマに取り組んでいます。
一見の価値アリ。とりあえずアクセスしてみてください。

STOP!子供によるゲームの高額決済 : http://family-precept.gungho.jp

DIGITI

黒・ピンク - Black & Pink - DIGITI

ベルギーとアメリカにオフィスがある[DIGITI]様のウェブサイト。
アイコンとタイトル部分にのみ、紫がかったピンクを使っています。
使用箇所は少ないですがセンス良くデザインされています。

DIGITI : http://digiti.be

C2

黒・ピンク - Black & Pink C2

フリーランス・デザイナーの[Ana Travas]様と[Sergej Skrjanec]様による共同サイト。
トップのデザインからも垣間見れるとおり、新しい試みをウェブサイトにも積極的に取り入れています。
配色は典型的な「黒」×「白」×「ピンク」を使用しています。

C2 : http://www.wearec2.com

Skyskraper™

黒・ピンク - Black & Pink - Skyskrapper

こちらは海外のブログサイト[Skyskraper™]様です。
鮮やかなマゼンダが綺麗ですね。
グリッド・レイアウトを採用していますが、メイソンリーやレスポンシブには完全に対応していない点が惜しいですね。
残念乍ら更新も止まっています。

Skyskraper™ : http://skyskraper.net

BIRDMAN

黒・ピンク - Black & Pink - BIRDMAN

ご存知の方も多いかと思います。業界でも有名な[株式会社 BIRDMAN]様のウェブサイトです。
圧倒的なクオリティで洗練されています。世界観も素晴らしく引き込まれます。

BIRDMAN : http://www.birdman.ne.jp

螢光TOKYO

黒・ピンク - Black & Pink - 螢光TOKYO

最後はコチラ。[螢光TOKYO]様のウェブサイトです。
フルスクリーン対応の個性的なカード型のレイアウト。
やはり「黒」×「白」×「ピンク」を採用してインパクトが強力です。記憶に残るサイトですね。

螢光TOKYO : http://keikotokyo.com


以上。いずれも完成度が高く、個性的で素敵なデザインでしたね。
ぜひ「黒」×「ピンク」のウェブデザインの参考にしてみてください。

もし「他にもこんなサイトがあるよ〜!」というご意見がありましたらコメント欄からどうぞ。