着物や料亭、旅館、伝統文化など日本ならではのものを表現する際は、それらに合った世界観を表現するため、和風の雰囲気でデザインしているサイトが多いですね。今回は「和風」のデザインの参考にしたい良質サイトを集めてみました。
 

デザインの参考にしたい良質サイト

TAICHIRO

シンプルなファーストビューに大きく存在感を放つ「一」の文字。 サイトのデザイントーンがモノトーンでまとまっており、それによって画像が引き立っています。

御船山楽園

スプリットレイアウトのファーストビューになっていて左のロゴ周りの大きな余白と右のロケーションイメージのバランスが良いです。全体的にとてもシンプルにまとまっておりますが、シンプルな分、画像に文字などを重ねていたりとレイアウトは工夫されています。

株式会社八百彦本店

水墨画のようなメインビジュアル。サイト全体にも水墨画風の食材や花などが散りばめられていていて全体の雰囲気がとてもまとまっています。

鈴乃屋オリジナルコレクション　衣のいのち Vol.37

こちらもスプリットレイアウトのファーストビューとなっています。右のゆっくりスケールアップしていくイメージの見せ方が心地良いです。左のメニューにロールオーバーすると右のイメージが変わります。

茶ッカソン

オープニングでスクリーンが4つに分かれて四方に開くいて行きますが、その切れ目が後に出てくるメイン画像の畳の切れ目と合っています。こういった見せ方は本当に優れているなぁと思います。

まとめ

和風デザインのサイトを集めていて気づきましたが、最近では縦書きを取り入れているサイトもよく見かけるようになってきた気がします。今回まとめたサイトでも積極的に取り入れられておりました。

以前は縦書きで見せたいところは画像で書き出していましたが、今はテキスト要素として縦書きを表現できるようになりました。ですので、近く和風デザインと相性バツグンの縦書きを取り入れているサイトのまとめや、その実践テクニックの記事も書いていきたいと思います。

縦書きを取り入れているサイトのまとめアップしました。

webdesignday.jp

 

1 Share

7 Pockets

【Web Design】縦書きを取り入れたデザインの優れたサイト10選

以前、「デザインの参考にしたい「和風」テイストの良質サイト5選」と言う記事を書きました。その中で紹介したサイトにも縦書きのテクニックは取り入れられておりましたが、「和風デザインじゃない」サイトでも縦書きを取り入れているデザインの優れたサイトはたくさんあります。今回は「縦書きを取り入れたデザインの優れたサイト」を集めてみました。  和風デザインで縦書き 和風じゃないデザインで縦書き 1.和風デザインで縦書きまずは王道の和風デザインで縦書きを取り入れたサイトです。 あきた舞妓 -akitamaiko-...

縦書き実践テクニックの記事をアップしました。

webdesignday.jp

 

1 Share

27 Pockets

【CSS】徹底検証！CSSで縦書きデザインをやってみる！

以前「縦書きを取り入れたデザインの優れたサイト10選」という記事を書きましたので今回は実践編をやりつつ、色々検証してみます。（IE以外はMac環境での検証です。） 目次 CSSで縦書きを設定 縦書きのボックスの表示のされ方 縦書きの文字の表示のされ方 縦中横の表示 縦書きと他の文字スタイルを合わせた表示 縦書きと他のタグを合わせた表示 1.CSSで縦書きを設定writing-modeプロパティ縦書きは「writing-mode:vertical-rl;」だけで簡単に設定することができます。「vertical」が縦という意味で、「rl」は「right（右）」...

当サイトで集めたその他の和風デザインのサイトはGALLERYで確認できます。ぜひご覧ください。

それでは良いWEBデザイン日和を！Have a nice WEBDESIGNDAY!