和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました

今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね!和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう!

↑私が10年以上利用している会計ソフト!

1. 配色

「和風デザイン」と聞いて思いつくのはどんな色でしょうか?おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。

伝統色

wa-colour-dictionary
日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに紹介しています。全体的に彩度の低い色が多く、自然と調和するような柔らかな印象です。色の名前には動植物や染めの名前が用いられ、見ているだけで楽しくなってきちゃいます :D

襲の色目(かさねのいろめ)

襲の色目(かさねのいろめ)とは、平安時代に公家のファッションの中から生まれた着物の重なりの配色のこと。日本の四季折々の変化を、着物の表地・裏地の色相で表し、その美しい色合いを楽しんでいたそうです。

kasane
日本の伝統色の組み合わせ、襲色目(かさねいろめ)の色コードまとめ」という記事では様々な襲色目を紹介しています。カラーコードも掲載されているので、和風の配色を考える際の参考になりそうです。

配色アイデア

毎度おなじみ配色共有サイトCOLOURloversから、和風デザインと相性よさそうな配色をいくつかピックアップしました。リンク先には配色の元となった日本の浮世絵や写真等も紹介されていますよ。

colour1
#EACDCD, #75394D, #402E2B, #57734A, #BFBF56

colour2
#435847, #B1B4AD, #EBE9DA, #2B1F1F, #BA2A2A

colour3
#398793, #9DBDAE, #FFEFC9, #F4CA66, #E59A57

colour4
#F9E9CB, #94B78D, #BA0505, #F20F21, #0C1312

colour5
#FEFDED, #AAAE93, #2D343C, #350023, #060A07

colour6
#416853, #29261F, #E1CAA0, #C6665A, #DED09F

colour7
#C13A40, #8B1A1E, #F1D79A, #CABA89, #756F55

colour8
#2B2B2B, #DB3000, #E64215, #E0B34E, #FCFCFC

colour9
#DEE4BE, #A7B4AA, #221908, #F06C53, #F7EAD9

colour10
#AF736B, #FF9E73, #FCE1B4, #9EB394, #1E3835

colour11
#579485, #7F7460, #A2765B, #ECC2AA, #F1DDBC

2. 和柄パターン

波や桜花、渦巻、市松などなど、日本には昔から愛され続けている独自のパターンがあります。そのパターンをデザインにも取り入れてみましょう!和風のパターンが無料ダウンロードできるサイトをいくつか紹介します。

pattern1
wargo pattern
和柄だけでなく、ドットやペイズリーなどのパターンも用意されている素材サイト。和風イラストもいくつかダウンロードできます。商用利用OK!

pattern2
Japanese style pattern by gimei on deviantART
色とりどりの和柄が魅力的なパターンいろいろ。商用利用OK。色の入っていないシンプルな柄もいくつかダウンロードできます。

pattern3
粋屋
カラフルなものからシンプルなものまで、様々なパターンがダウンロードできます。商用利用は要連絡。

pattern4
Download 5 Premium High Resolution Japanese Paper Backgrounds for Free
記事内で紹介されている5つのパターン画像は個人・商用ともに無料で利用できます。40枚のパターン画像がセットになったフルパッケージは$4.99で購入可能。

3. イラスト

和風デザインでは頻繁にイラストが用いられます。その多くは花や木などの自然、人物など、当時の日本人が水墨画や浮世絵の題材として扱ってきたものです。着物の柄も和風デザインにはピッタリ!

hokusai
葛飾北斎のサイトでは、北斎による絵を全面に配置し、その独特な世界観をWebサイトで表現しています。配色やテクスチャとも見事にマッチしていますね!

以下は和風のイラストが無料ダウンロードできる素材サイトです。デザインのアクセントに使ってみるとよさそう。

illutration1
和風素材.comは浮世絵や水墨画風イラスト、江戸の古地図、和紙テクスチャなどが無料でダウンロードできる素材サイト。商用利用もOKです!昔和風デザインのサイトを作っていた時にお世話になりました!

illustration2
シルエットAC
様々なシルエットのイラストを配布している素材サイト。和風カテゴリーでは忍者や舞妓、和風小物などの画像が無料ダウンロードできます。商用利用OK。

4. フォント

和風デザインのサイトには明朝体のフォントがよく使われています。明朝体は中国から日本に伝えられ、日本にも定着しました。古くから愛されている書体なので、和風デザインとマッチしますよ。筆で書いたような毛筆フォントも人気。

ここでは無料ダウンロードできる明朝体&毛筆フォントを紹介します。すべて商用利用OKです!

honoka
ほのか明朝

utsukushi
うつくし明朝体

hannari
はんなり明朝体

kokoro
こころ明朝体

kouzanmouhitufont
衡山毛筆フォント

aoyagikouzanfontt
青柳衡山フォントT

和風デザインのWebサイト実例

上記のポイントをうまくおさえてデザインされたWebサイトをいくつか紹介します。参考にしてみてください!

design1
株式会社 菱健 HISHIKEN Co. Ltd.,
背景に使われている模様にただただうっとり!

design2
四季彩 美ゆ輝
余白をふんだんに使った配置がとっても上品です。

design3
千總
こちらも背景の絵が魅力的なサイト。着物ブランドのテイストに合わせて背景画像を変更しています。

design4
「綴」文化財未来継承プロジェクト
全体的に渋い色合いで統一されています。

design5
株式会社福井
ところどころに使われているイラストがアクセントになっています。

design6
白えび屋
えびちゃんの水彩イラストと全体の配色がかわいらしいサイト。

design7
宇治茶 祇園辻利
配色と個性的な明朝フォントで、上品な和風デザインに仕上がっています。

design8
花嫁和婚
写真はもちろん、配色やかわいらしいアイコンにも注目!


和風デザインのサイトは数が少ないこともあり、なかなか実例を探すのが難しい…X( みなさんのオススメサイトをぜひシェアしてください!

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)