デザインの参考

ピンク系のサイトデザインを作るとき参考にしたいおしゃれなWebサイト

ピンク系のサイトデザインを作るとき参考にしたいおしゃれなWebサイト

色の種類

ピンクと一括りに言っても、明度・彩度・色相によってその色味は様々です。

色名によっては広範囲の色を指す場合や、文献等によっては解釈が異なる場合もありますので参考程度にご利用ください。

ピンク:#EB97A8

ローズピンク:#EF93B6

桜色:#FFDBED

ベビーピンク:#FFC9D2

さんご色:#FF87A0

桃色:#E38698

ローズ:#D94177

ストロベリー:#BB1E5E

サーモンピンク:#FFA594

※これらの色は下記のサイトを参考にさせていただきました。
参照元 :JIS慣用色名(Wikipedia)

今回は、ピンク系のサイトを作る時参考にしたいサイトをまとめてみました。

作りたいサイトのイメージに迷った時に見ていただけると嬉しいです。

ピンク系のWebサイトデザイン

コスモスみたいなピンク

タカガール


https://wing2.softbankhawks.co.jp/ex/takagirl/

少しだけくすんだピンクの可愛らしいサイト。

#E383A5

#ed6f83

柔らかい印象のサーモンピンク

BLANK

http://www.blank.com.pt/

肌色に近いピンクが可愛らしいけど、黒や白のモノトーンと組み合わせることでスタイリッシュな印象。

#fead9a

爽やかなサクラ色

SAKURA SELECTION

http://www.keisatodesign.com/sakura/

全体的に明るく爽やかなピンクでまとめられたサイト。

#ff7baf

#ff90bf

#ffb4d5

#ffd5ea

和のデザインは落ち着いたピンク

出張着付け『久松』

http://www.hisamatu.net/

落ち着いたピンクとクラデーションが綺麗なサイト。
ザラザラしたパターンを重ねることで質感をプラスしており和風のデザインにマッチしています。

#fe9e8e

#f88d7c

#f6d2c5

王道の白×ピンク

プリマヴィスタ

http://www.sofina.co.jp/primavista/

はっきりした色合いのピンクを全体に使用したサイト。

#E95885

#f8dcea

#993e58

黒と合わせるとかっこいいディープピンク

株式会社ココノヱ

https://9ye.jp/

かなり濃いめのピンクと黒をメインカラーに、かっこよくまとめられたサイト。
下の方にいくと原色寄りの色がいくつか使用されているにも関わらず、黒背景のおかげで全然うるさくなく、むしろスタイリッシュです。

#e4027e

アイボリー×ピンクでシンプルに

Quoitworks

http://quoitworks.com/

ただの白ではなく薄いアイボリーと温かいピンクがマッチしたシンプルでおしゃれなサイト。

#e95d6a

ピンク×黒でセクシーキュートに

Pretty Ballerinas

https://prettyballerinas.fen.co.jp/

黒とピンクの組み合わせでセクシーさを感じるサイト。

#fac6cb

いくつかのピンクをうまく使う

埼玉女子短期大学

http://www.saijo.ac.jp/
ボーダーを合わせるとよりメルヘンチックな可愛い印象に。

#f03067

#e16577

#fa788b

#fcf0ed

意外な組み合わせ

Panic

http://www.panicstudio.tv/en/
奇抜な色の組み合わせも、うまく使えばそのサイトだけの個性に。

#ff8dac

さいごに

お好きなピンクは見つかりましたか?

ショッキングなパキッとしたピンクは若さやフレッシュさを連想し、肌色に近いピンクは優しさや温かさを感じます。

サイトのターゲット層や商品イメージに合わせて色味を考えていきたいですね。

あわせて読みたい
ブルー系のサイトデザインを作るとき参考にしたいおしゃれなWebサイト
ブルー系のサイトデザインを作るとき参考にしたいおしゃれなWebサイト ブルー系の色の種類 ブルー系の色味にもたくさん種類があります。 私の好きな色はブルーなので、このサイトのメインカラ...