冬に使いたい!幻想的なデザインのWebサイト&無料で使える雪や氷のフリー素材まとめ

やっとブログの冬デザインを作りました!これで春夏秋冬すべてのテーマを作ることができました。

今回は、クリスマスも間近ということで、冬のデザインを作成するにあたって参考になる素敵なデザインのwebサイトや、冬デザインに使える雪や氷の無料素材をご紹介します!

勝手に始めたブログテーマの四季シリーズ4つめ「冬」です!こちらも2月末くらいの期間限定で公開します!またもスマホ版は作ってないのでPCで見てくださいねー!

Design Color 冬テーマのデザイン

参考になる!幻想的な冬のデザインいろいろ

冬デザインを制作する時に参考になるWebサイトやUIデザインなどを集めてみました!

スノービューティー

資生堂スノービューティーのランディングページ。昨年は濃い配色や巧みなグラデーションづかいが魅力でしたが、今年は淡い色彩でフラットなデザインとなっています。ロゴに使われているエレガントな筆記体は今年も変わらず、ラインがうっとりするほど美しいです。

スノービューティー2016(資生堂)

Snow Beauty|資生堂

ちなみに2015年の資生堂スノービューティーのサイトデザインはLP アーカイブさんのサイトから見ることが出来ます!こちらも素敵!

スノービューティー2015(資生堂)

ランディングページ LP Snow Beauty|スキンケア・美容商品|自社サイト

冬を楽しむインタラクティブアート 雪とくらげ

ただようクラゲと舞い散る雪の組み合わせが幻想的な京都水族館のサイト。思わずその独特の世界観に見た瞬間目が釘付けになりました。残念ながらこの展示はもう期限が過ぎてしまいましたが、とにかく素敵なサイトだったのでご紹介。

冬を楽しむインタラクティブアート 雪とくらげ | 京都水族館

冬を楽しむインタラクティブアート 雪とくらげ | 京都水族館

冬のドコモフェア

ドコモのキャンペーンサイト。グレーをメインカラーにすることでカラフルなテキストやキャラクターが際立ち、楽しい雰囲気になっています。文字に雪が降り積もっていたり、雪の結晶をところどころに散りばめて冬らしさを演出しています。

キャンペーン : 冬のドコモフェア | NTTドコモ

キャンペーン : 冬のドコモフェア | NTTドコモ

ハンズのクリスマス

東急ハンズのクリスマス特集のサイト。背景に雪が降り積りそそいで冬らしい雰囲気です。抑えめな青い色彩の中にビビッドな赤や緑のクリスマスカラーを用いているため、寒々しくなりすぎない絶妙なバランス!

ハンズのクリスマス-Present THE MERRY Christmas!-

ハンズのクリスマス-Present THE MERRY Christmas!-

冬をテーマにしたUI素材

アナと雪の女王をテーマにした冬らしいUIデザインのフリー素材。鮮やかな寒色同士のグラデーション使いが素敵です。カチカチに凍った氷のようにほとんどのパーツがストレートなラインで構成されています。

Snowflake UI Kit

Snowflake UI Kit

冬デザインのテンプレート

冬デザインのテンプレート素材。サムネイルに雪が降り積もったようなフレームを重ねたりと、細部に工夫がされています。

Winter Ski Centre Web Design by vasiligfx on DeviantArt

Winter Ski Centre Web Design by vasiligfx on DeviantArt

冬デザインに使える!無料ベクター素材

雪の結晶のシルエット素材(シルエットデザイン)

もはや私にとってデザイン制作では欠かせないサイトです!シルエットデザインには雪の結晶はもちろん、クリスマス素材や氷山のシルエットまで、冬デザインに使えそうな素材が盛りだくさん!「雪」「氷」などのワードで検索してみると色々見つかりますよ!

雪の結晶のシルエット素材(シルエットデザイン)

雪の結晶のフレーム素材(フレームデザイン)

こちらは雪の結晶をモチーフにした素敵なフレーム素材です!中に文字が入るので、Webデザインはもちろんクリスマスカードのデザインなどにも使えそう!

雪の結晶のフレーム素材(フレームデザイン)

デザイン枠、飾り罫素材専門サイト「フレームデザイン」frames-design.com – 雪の結晶フレーム

冬のイラスト素材(EVENTs Design premium)

冬に使えるイラスト素材がたくさん!雪だるまやサンタといったスタンダードなイラストに加え、こたつやおでんといったちょっと変わったイラストまで揃います!「冬」や「クリスマス」のカテゴリーで絞ると使える素材がたくさん見つかります。

冬のイラスト素材(EVENTs Design premium)

冬 | クリスマス・ハロウィン、お正月イラストEVENTs Design

冬デザインに使える!無料テクスチャ・パターン素材

氷のテクスチャ(写真AC)

雪や氷をパターン素材として背景に敷きたいな・・・と思っていざ探そうとしてもなかなか見つけるのが難しいテクスチャ素材。無料の写真を多数配布してくださっている写真ACで見つけることができました!

氷のテクスチャ(写真AC)

テクスチャ【氷04】|写真AC

冬デザインに使える!無料ライン素材

冬の罫線・飾り罫ライン素材(FREE LINE DESIGN)

クリスマスや雪などのシンプルで使いやすいライン素材。冬のデザインを楽しく彩れそうです。

冬の罫線・飾り罫ライン素材(FREE LINE DESIGN)

冬 | 罫線・飾り罫ライン素材 FREE LINE DESIGN

冬デザインに使える!無料写真素材

雪・氷の写真素材(ぱくたそ)

四季の写真を探すのにいつもお世話になっているぱくたそ!雪景色はもちろん、冬の凍った川や南極の氷の島なんて珍しい写真も見つけられます!

雪・氷の写真素材(ぱくたそ)

雪・氷の写真素材 | ぱくたそ

冬のフリー写真(PHOTO STOCKER)

こちらも季節ごとの写真を配布してくださっている無料の写真素材サイト。一枚一枚の写真の色合いがとても美しいものばかりです!写真のカラーパレットも見えるのが便利。

冬のフリー写真(PHOTO STOCKER)

冬のフリー写真一覧 | PHOTO STOCKER

冬デザインに使える配色

冬の配色は、直接的に寒さを連想させる寒色系、逆に室内の暖かさを連想させる暖色系、どちらのパターンもあるから迷っちゃいますよね。冬デザインに迷った時の配色に役立つ記事がありましたのでご紹介!

これで配色はバッチリ!冬にぴったりな配色パターン10選 | オリジナルTシャツプリントのT1200BLOG

これで配色はバッチリ!冬にぴったりな配色パターン10選 | オリジナルTシャツプリントのT1200BLOG

ちなみに私はいつも通り、Adobe Color CCで「winter」というワードで検索し、好みの配色を見つけました!今回の冬テーマのカラーパレットはこちら。

Design Color 冬テーマのカラーパレット

サイトに雪を降らせるスクリプト

季節のデザインを作る時、いつも使わせてもらっているactywayあくちーさんが作成されたスクリプトです!サイトに読み込ませるだけであっという間にWebサイトに雪を降らせ、幻想的な雰囲気にすることができます!あくちーさんいつもありがとうございます〜!

クリスマスに使いたい!雪のパーティクルをチラチラ降らす JavaScript を作ってみよー | actyway

クリスマスに使いたい!雪のパーティクルをチラチラ降らす JavaScript を作ってみよー | actyway

さいごに

これでようやくブログに、春夏秋冬の四季テーマが揃いました!実を言うと、個人的に冬は寒いので嫌いなほうなのですが、この新しい冬テーマと一緒に冬の憂鬱を吹き飛ばして楽しく乗り越えたいと思います!

Design Color 春夏秋冬のテーマ

夏はありませんが、他にも春と秋のデザインについての記事を書いたので、よければそちらもぜひ見てみてください!
以上、彩がお送りしました〜!

この記事をシェアする!

関連記事

コメント

0件のコメント

コメントを残す

もし何かコメントをいただければ幸いです。また、ご指摘等も大歓迎です。
よろしくお願いします。(※Eメールアドレスは公開されません)

トップに戻る