目次
ごきげんよう、和風デザイナーの清水です。
2021年に東京オリンピック、2025年に大阪万国博覧会の開催が決まりより日本らしいデザインが求められてる傾向にあります。
和風デザインのコツについては詳しく見ていきましたので、今回は和風デザインのホームページについてご紹介致します。
和風デザインの特徴
和風デザインは時代によって変わり多様なデザインが表現可能です。
白鳳文化の高松塚古墳壁画のような華やかな色彩美、質素で静かなに美を見出す室町時代の侘び寂び、江戸時代になると琳派や狩野派など豪快で力強い…
これらの時代の絵画、建築、彫刻、工芸など見られる特徴や技法をデザインの要素に取り込むことで「和風デザイン」をつくる事ができます
和風デザインホームページでありがちな事
時代背景がめちゃくちゃになってしまう
ホームページに関わらず、和風デザイン全体に言える事なのですが『色』『テクスチャー』などが時代に即していないデザインになっている事があります。
極端な例で申しますと『忍者』と『縄文人』が同時のモチーフが同時に使われているデザインを想像してください。忍者がタイムスリップして縄文人に出会ったのようなコンセプトがあれば不自然ではないのですが、忍者と縄文人は違う時代のイメージになりますので不自然に思われる方が多いはずです。
このように時代背景によって和風デザインは異なります。
和色、和柄、文様…すべてに意味があり、時代背景があるので、コンセプトに即した和色、和柄、文様を使いましよう
表示速度が遅くなる
和風デザインでは、テクスチャー・イラスト・写真をふんだんに使う。明朝体などのWebフォントを使うなど表示するファイルが多く表示速度が遅くなる傾向になります。
適度にSVGを適度に使ったり、適切な画像圧縮が必要になります。
画像圧縮にはhttps://squoosh.app/がおすすめです。
その他にも速度の早いサーバーやgzip圧縮をかけたり、適切にキャッシュをしようするようにしましょう。
和風デザインに使いたいCSSテクニック
縦書きを使おう
日本は文字が大陸より文字が入ってきたときより縦書きで文字が書かれてきました。そのため、縦書きを使用すると洗練された和を連想するデザインになります。
CSSのwriting-modeを使うことによって縦書きの実装が可能です。
See the Pen pojgGLg by 狂鶏 ひむちしみず (@hidachi_shimizu) on CodePen.
ひし形
日本のひし形の歴史
ひし形の由来は、水草の一種である菱の葉に由来します。
日本の歴史は古く、縄文土器にもひし形が象られるなど太古から日本人に親しまれてきた形です。
平安時代より先は着物などの衣装の柄や家紋としても使われてきました。
CSSでひし形を書く
See the Pen abvdMLR by 狂鶏 ひむちしみず (@hidachi_shimizu) on CodePen.
ひがき柄
ひがき柄の由来
檜垣はひのきの枝を編んだ垣根を模した柄で着物の柄としてよく使われ、規則的に並んでいる事から行儀作法・礼を尽くすという意味がある模様です
CSSでひがき柄を書く
See the Pen PoPZLxG by 狂鶏 ひむちしみず (@hidachi_shimizu) on CodePen.
青海波（せいがいは）柄
青海波柄の由来
シルクロードを経て日本に伝わったのは飛鳥時代、平安時代に書かれた源氏物語の中に『青海波』という雅楽を舞う若き光源氏の姿が描かれています。
青海波柄は元々、古代ペルシャが由来の柄です。
シルクロードを通って奈良時代付近に日本に伝わったと言われています。
広大な海の恵みを感じさせる柄で、無限に広がる波の文様に未来永劫へと続く幸せや安心の願いが込められた縁起の良い柄です。
CSSで青海波を書く
See the Pen gOaPyOg by 狂鶏 ひむちしみず (@hidachi_shimizu) on CodePen.
七宝（しちほう）柄
七宝柄の由来
古代エジプトが由来とされる模様で中国で定着して日本に伝来しました。
無限に連鎖する平和や円満を意味する輪の交叉から成る文様です。
CSSで七宝柄を書く
See the Pen bGVEJgL by 狂鶏 ひむちしみず (@hidachi_shimizu) on CodePen.
Webフォントを使う
CSSは直接的に関係ないかもですが、Webフォントについてもご紹介します。
– はんなり明朝体
やさしくて、ふんわりとした、ひらがなとカタカナをデザインしています。
筆者はよくボディーコピーなどのワンポイントに使ったりします。
– さわらび明朝
太めのフォントで見やすいのが特徴。
筆者は見出しなどによく使います
まとめ
和風デザインには、その時代や背景に即した色や形があり時代や背景を気にしないとよくわからないデザインになってしまいます。
今回は、ホームページに絞って和風デザインを見てきましたが和風デザインはとても奥深いです。
今後も奥深い和風デザインを紐解くブログを書いていきますのでご期待くださいませ！
