#16 和風なwebサイト研究誌

おはようございます。Webサイト研究していきます！
今日は「MUUUUU.ORG」さんhttp://muuuuu.org/から選びました。


「IPPUKU&MATCHA」
https://note.com/notes/new

最近和風なwebサイトを制作し始めたので、和風っぽさを出すための研究をしたいと思って、選びました!(^^)!

ターゲットに外国人もいるのですね、英語も日本語も使われてます。
高級感のある雰囲気ですね！
抹茶をいただくコース？を楽しめるお店のようで、テイクアウトもできるようですね！日本の美しい文化をアクセスの良い都心で楽しめて、観光客には楽しそう！

ナビは英語で、ニュースも完全英語の記事もありますね。言語別のページを作らないのは、やはり予算等の関係というのが大きいのでしょうか。

ユーザビリティの視点から、英語をどこまで使うのか悩むことが多いです・・・英語を使うとかっこよさも雰囲気も倍増しますが、普段全く英語使わない嫌い、という方だと、特にリンクとか英語で書かれてると、直感的に押しづらくないか？と思ったり・・・


まずは装飾の研究します！

☆リンク要素のルール
・マウスオーバー
→ハンバーガーメニューはハンバーガーを囲ってる円形が動く
→カーソルを乗せると半透明の背景色が出る
・メインビジュアルの写真はスライド、カーソルを乗せると矢印が出て写真をスライドできるようになってる


☆王道サイズ、形のセオリー
・ナビはサイドのボーダーで分けてる
・ニュースの記事も上下のボーダーで分けてる
・ヘッダーは436px
・見出しの文字の大きさは19px
・文章は12～16px


☆コンテンツの横幅、グリッドのルール
・コンセプトなどの部分は、写真と文章が並んで、左右が逆になっている（説明へた・・・・）
・

☆写真や図や比率のルール
・使われてる写真は正方形が多い


☆レスポンシブの変化のセオリー
・写真が上、日本語がその下、最後に英語
・padding15pxくらい


☆配色のルール
・黒背景、白文字
・写真は緑ベース


☆読みやすい文字量
・letter-spacingは3.2px
・line-heightは42px
→コンセプトや抹茶の説明など文字量が多いが。文字・行の間が広いので読みやすい
・日本語は縦書き、英語は横書き

和風感は、やはりサンセリフですかね・・・
高級感のある雰囲気で、ザ和風なwebサイトではないですが・・・
市松模様を連想させる模様が入っていて、でも細い線なので高級感が出てると思いました！

和風なwebサイト研究をしばらく続けていきたいと思います。
最後までお読みいただきありがとうございました!(^^)!

#webデザイン    #webサイト   #webサイト研究