NEWS & COLUMN
お知らせ・コラム
SCROLL
DESIGN
和風のWEBデザイン制作時に参考になるホームページ4選
2022
.04.14
WEBデザインを制作する際、お客様から「キュートなWEBデザインにしてほしい」、「高級感のあるWEBデザイン」といったご要望をいただくことがあります。WEBデザインはターゲットユーザーに与える印象に大きく影響します。
今回はデザインの印象を作り出すパーツや色などに着目し、和風のWEBデザインを制作する際に参考となるホームページを4つ紹介していきます。
【目次】
1. 「和」を感じるデザインとは
2. 参考になる和風WEBデザイン
a. 縦書きと和紙のテクスチャを用いたデザイン
b. 日本の伝統色を配色したデザイン
c. 和風のイラストを用いたデザイン
d. 縦書きの明朝体や行書体を用いたデザイン
3.今回のまとめ
「和」を感じるデザインとは
「和」を感じられるデザインでは、古来より使われている「藍色」や「緋色」といった日本の伝統色が多く使われます。伝統色のカラーコードはこちらのホームページ(https://www.colordic.org/w)から確認できます。
書体は、主に明朝体や行書体が使用されます。筆で書かれたような手書き文字が使われることもありますが、WEBデザイン時には装飾的な意味合いで使われることが多いです。
背景には市松模様や菱形模様など、伝統的な模様がよく使用されます。和紙のようなテクスチャも用いられます。
参考になる和風WEBデザイン
ここからは和風のWEBデザインを制作する際に参考となるホームページを、ポイントとともに4つ紹介していきます。
縦書きと和紙のテクスチャを用いたデザイン
縦書きのテキストは和風を感じられる一つのポイントです。参考サイトでは縦書きのテキストを和紙のテクスチャの上に使用しており、和紙の上に文字を書いたようなデザインとなっています。さらに、紙芝居のようなスクロールの動きも取り入れられています。
文字色や背景色は落ち着いた色を使用していますが、色味のある大きな写真を取り入れる事で、和風の空気を感じられる奥行きのあるデザインとなっています。
山あいの宿 喜安屋
https://www.kiyasuya.jp/
日本の伝統色を配色したデザイン
日本の伝統色を組み合わせる事で和を感じられるデザインに仕上げることができます。参考ホームページではお知らせのカテゴリ表記部分に日本の伝統色を用いています。こちらのホームページでも和紙のテクスチャを取り入れて日本らしさを演出しています。
WA･TO･BI – 和食の扉 – 料理人のための和食専門ウェブ･マガジン
https://watobi.jp/
和風のイラストを用いたデザイン
椿や桜、竹などの和を感じられるイラストや、雲のようなイラストを取り入れる事で和風のデザインに仕上げることができます。参考ホームページでは和紙のような背景の上に日本伝統の模様やイラストが散りばめられています。ゴールドの装飾を取り入れた見出し文字や、縦書きのテキストでも和風の印象を与えています。
東京ルルルン（和らぐお米の香り）
https://lululun.com/lp?u=tabisuru_tokyo-koji
縦書きの明朝体や行書体を用いたデザイン
ホームページ全体のデザインに縦書きの明朝体・行書体を用いることで、和風な印象を与えることができます。参考のホームページでは、ゆったりと余裕の感じられるような余白の中に縦書きのテキストを取り入れる事で、高級感を演出しています。また縦書きテキストの列ごとに罫線を入れることで、便箋に書かれている文字を読んでいるようなデザインとなっています。
佐嘉平川屋 | 佐賀のお豆腐文化を全国へ
https://saga-hirakawaya.jp/brand/
今回のまとめ
今回は和風のWEBデザインを4つ紹介しました。縦書きのテキストや、和紙のテクスチャ、日本の伝統色、日本古来より使用されている桜や竹などのイラストを用いることで和風のデザインに仕上げることができます。和風のテクスチャや背景パターンは無料で利用できるものもあるので積極的に活用しましょう。
和風のホームページを制作する際には、今回紹介したデザインを参考に和の要素を取り入れるのをおすすめします。
