デザインの参考

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

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

ブルー系の色の種類

ブルー系の色味にもたくさん種類があります。

私の好きな色はブルーなので、このサイトのメインカラーもブルーを使用しています。

カラーコードは#26c0efと水色よりの爽やかな色。

その他にもいくつか色の種類を挙げてみました。

ブルー:#3170B9

ターコイズブルー:#399ECC

シアン:#219DDD

ベビーブルー:#ABBDDA

青緑:#0090A8

ナイルブルー:#5190A4

るり色:#3451A4

藍色:#2E4B71

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

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

今回は、ブルー系のサイトデザインを作るとき参考にしたいサイトをまとめてみました。

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

ブルー系のWebサイトデザイン

落ち着いた色合いのサイト

Luxury NoMad Condos for Sale | 88 & 90 Lex – Amenities

https://88and90lex.com/amenities

おしゃれなWebサイト

#002846

#c0d7d2

ネイビーブルーとミントグリーンの組み合わせが可愛いなと思いました。

彩度が低いと落ち着いた印象になりますね。

VIORO(ヴィオロ)

VIORO(ヴィオロ)

おしゃれなWebサイト

#232F5F

#7097C3

#444f7c

こちらも全体的に彩度が低く、すっきりとまとまった印象です。

エコロジーなイメージを連想するサイト

バリューデザインカンパニー 株式会社ユニメディア

https://unimedia.co.jp/

おしゃれなWebサイト

#21b7b6

#91cd99

グリーンが入ると途端に地球に地球に優しい感じがします。

個人的にすごく好きな色合いだなと思いました。

ホワイトとブルーの爽やかなサイト

ポカリスエット公式サイト|大塚製薬

ポカリスエット公式サイト|大塚製薬

おしゃれなWebサイト

#015db2

#193b73

ベースカラーにホワイト、メインカラーにブルーを使用すると爽やかな印象になります。

Wantedly, Inc. (ウォンテッドリー株式会社)

Wantedly, Inc. (ウォンテッドリー株式会社)

おしゃれなWebサイト

#01a4bc

#95adfc

#54ccc5

グリーンやバイオレットの混ざった色味のグラデーションがとても綺麗です。

アクセントカラーが素敵なサイト

Action500

Action500

おしゃれなWebサイト

#483994

#ee4b44

ブルーがほぼバイオレットですが、アクセントカラーのレッドとマッチしていてとても素敵です。

株式会社クリーチャーズ

株式会社クリーチャーズ

おしゃれなWebサイト

#0b318f

#d52868

アクセントカラーのピンクがいい感じに目を惹きます。

採用情報 | マリモグループ

採用情報 | マリモグループ

おしゃれなWebサイト

#3d7bf2

#fef22a

ブルーとイエローの組み合わせは細田守監督の映画作品を思い出してしまいます。

さいごに

どれも素敵なデザインでうまくブルーを取り入れていました。

企業の採用ページにブルーを使うサイトが多いように感じます。

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

あわせて読みたい
ピンク系のサイトデザインを作るとき参考にしたいおしゃれなWebサイト
ピンク系のサイトデザインを作るとき参考にしたいおしゃれなWebサイト 色の種類 ピンクと一括りに言っても、明度・彩度・色相によってその色味は様々です。 色名によっては広範囲の色を指す...