和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました
今月はじめに初めて箱根旅行で洗練された美しい温泉宿に宿泊して以来、「和」な雰囲気やデザインの素晴らしさに魅了されたManaです。伝統的な配色や配置、書体等、見ていて飽きの来ない魅力がありますよね！和風デザインには大きく分けて4つの特徴があります。それぞれの特徴を理解し、うまくデザインに反映していきましょう！
↑私が10年以上利用している会計ソフト！
1. 配色
「和風デザイン」と聞いて思いつくのはどんな色でしょうか？おそらくビビッドなピンクや透き通るような水色ではなく、わさびやからし、えんじのような、少しくすんだ色合いを思いつく人が多いかと思います。日本には伝統的な色や配色というものが存在し、それらを上手に使うことでグッと和の雰囲気漂うデザインに近づきます。
伝統色
日本の伝統色 和色大辞典では日本の伝統色をカラーコードとともに紹介しています。全体的に彩度の低い色が多く、自然と調和するような柔らかな印象です。色の名前には動植物や染めの名前が用いられ、見ているだけで楽しくなってきちゃいます :D
襲の色目（かさねのいろめ）
襲の色目（かさねのいろめ）とは、平安時代に公家のファッションの中から生まれた着物の重なりの配色のこと。日本の四季折々の変化を、着物の表地・裏地の色相で表し、その美しい色合いを楽しんでいたそうです。
「日本の伝統色の組み合わせ、襲色目（かさねいろめ）の色コードまとめ」という記事では様々な襲色目を紹介しています。カラーコードも掲載されているので、和風の配色を考える際の参考になりそうです。
配色アイデア
毎度おなじみ配色共有サイトCOLOURloversから、和風デザインと相性よさそうな配色をいくつかピックアップしました。リンク先には配色の元となった日本の浮世絵や写真等も紹介されていますよ。
#EACDCD, #75394D, #402E2B, #57734A, #BFBF56
#435847, #B1B4AD, #EBE9DA, #2B1F1F, #BA2A2A
#398793, #9DBDAE, #FFEFC9, #F4CA66, #E59A57
#F9E9CB, #94B78D, #BA0505, #F20F21, #0C1312
#FEFDED, #AAAE93, #2D343C, #350023, #060A07
#416853, #29261F, #E1CAA0, #C6665A, #DED09F
#C13A40, #8B1A1E, #F1D79A, #CABA89, #756F55
#2B2B2B, #DB3000, #E64215, #E0B34E, #FCFCFC
#DEE4BE, #A7B4AA, #221908, #F06C53, #F7EAD9
#AF736B, #FF9E73, #FCE1B4, #9EB394, #1E3835
#579485, #7F7460, #A2765B, #ECC2AA, #F1DDBC
2. 和柄パターン
波や桜花、渦巻、市松などなど、日本には昔から愛され続けている独自のパターンがあります。そのパターンをデザインにも取り入れてみましょう！和風のパターンが無料ダウンロードできるサイトをいくつか紹介します。
wargo pattern
和柄だけでなく、ドットやペイズリーなどのパターンも用意されている素材サイト。和風イラストもいくつかダウンロードできます。商用利用OK！
Japanese style pattern by gimei on deviantART
色とりどりの和柄が魅力的なパターンいろいろ。商用利用OK。色の入っていないシンプルな柄もいくつかダウンロードできます。
粋屋
カラフルなものからシンプルなものまで、様々なパターンがダウンロードできます。商用利用は要連絡。
Download 5 Premium High Resolution Japanese Paper Backgrounds for Free
記事内で紹介されている5つのパターン画像は個人・商用ともに無料で利用できます。40枚のパターン画像がセットになったフルパッケージは$4.99で購入可能。
3. イラスト
和風デザインでは頻繁にイラストが用いられます。その多くは花や木などの自然、人物など、当時の日本人が水墨画や浮世絵の題材として扱ってきたものです。着物の柄も和風デザインにはピッタリ！
葛飾北斎のサイトでは、北斎による絵を全面に配置し、その独特な世界観をWebサイトで表現しています。配色やテクスチャとも見事にマッチしていますね！
以下は和風のイラストが無料ダウンロードできる素材サイトです。デザインのアクセントに使ってみるとよさそう。
和風素材.comは浮世絵や水墨画風イラスト、江戸の古地図、和紙テクスチャなどが無料でダウンロードできる素材サイト。商用利用もOKです！昔和風デザインのサイトを作っていた時にお世話になりました！
シルエットAC
様々なシルエットのイラストを配布している素材サイト。和風カテゴリーでは忍者や舞妓、和風小物などの画像が無料ダウンロードできます。商用利用OK。
4. フォント
和風デザインのサイトには明朝体のフォントがよく使われています。明朝体は中国から日本に伝えられ、日本にも定着しました。古くから愛されている書体なので、和風デザインとマッチしますよ。筆で書いたような毛筆フォントも人気。
ここでは無料ダウンロードできる明朝体＆毛筆フォントを紹介します。すべて商用利用OKです！
和風デザインのWebサイト実例
上記のポイントをうまくおさえてデザインされたWebサイトをいくつか紹介します。参考にしてみてください！
株式会社 菱健 HISHIKEN Co. Ltd.,
背景に使われている模様にただただうっとり！
四季彩 美ゆ輝
余白をふんだんに使った配置がとっても上品です。
千總
こちらも背景の絵が魅力的なサイト。着物ブランドのテイストに合わせて背景画像を変更しています。
「綴」文化財未来継承プロジェクト
全体的に渋い色合いで統一されています。
株式会社福井
ところどころに使われているイラストがアクセントになっています。
白えび屋
えびちゃんの水彩イラストと全体の配色がかわいらしいサイト。
宇治茶 祇園辻利
配色と個性的な明朝フォントで、上品な和風デザインに仕上がっています。
花嫁和婚
写真はもちろん、配色やかわいらしいアイコンにも注目！
和風デザインのサイトは数が少ないこともあり、なかなか実例を探すのが難しい…X( みなさんのオススメサイトをぜひシェアしてください！
