#26 さすが・・・素敵な世界観で、ほんとにいい香りがしてきそう〜なWebサイト🌸

こんにちは(^ ^)
今日もWebサイト研究していきます🌟
今日は、ギャラリーサイト「SANKOU!」 https://sankoudesign.com/  さんからです。


「A GREEN」
https://agreen.tokyo/

こちらのWebサイト、あの「UNDERLINE」の徳田優一さんが作られたものですね！さすがSANKOU!さん、仕事がはやい！
徳田さんのデザイン、いつも素敵です。。✨こちらを研究して、少しでも近づけるようにがんばっていきたいと思います！


☆リンク要素のルール
・マウスオーバーで、
写真は明るさ変化
下層ページへのリンクは矢印が横に伸びる
グローバルナビのメニューは色が変わる


☆王道サイズ、形のセオリー
・大見出しは20px
・文章は12px
・セクション間の余白は165〜265px


☆薄い色は何色あるかをつかむ
・ニュース欄などの下線に使われている薄いグレーと、contactを強調する薄いベージュ
・一部背景色に使われている薄いピンクは絶妙&上品だった。。。(#F7F6F0)


☆コンテンツの横幅、グリッドのルール
・最高3カラム
・ブロークングリッド
　→文章・写真・背景色をずらしている
　　& 左寄せと右寄せを交互に使っている


☆写真や図や比率のルール
・横長の写真が多い
・正方形の写真が4つ集まっていたり、余白なく横長の写真を載せていたり
　→セクションによってサイズの違う写真を乗せることで、違うセクションにいると認識しやすい
　　& ランダム感が出る！


☆レスポンシブの変化のセオリー
・左が上、右が下のルール
・1カラムになる
　→見出し部分や文章を基本左寄せにしている。


☆配色のルール
・白背景に黒文字
・写真に使われている色は、白・黒・ベージュ・緑が多い
・背景色として一部使われている水色はメインビジュアルに合ってる✨
・薄いピンクは他の部分では使われていない色なので、目を引きやすい！
かつ薄い色なので全体の邪魔をしない！
・基本色が使われている場合は彩度高め


ソースコードも見させてもらったのですが、写真画像<img>を囲う時は<picture>を使ったほうがいいのですね！
いつも<figure>ばかり使っていたので…！




香りのデザイナーさんのWebサイトのようですが、ほんとにいい香りがしてきそう〜と思って見ていました！
pcのような2次元の世界の中で、リアルの感覚を表現するのってすごく難しいと思います。

でも、
・交互に左右にゆらゆら寄せてるレイアウト
（香りって風にのってフワッと来るイメージなので…）
・たっぷりの余白
・香りを連想しやすい写真（果物、花など）

が香りを表現するのに近くかな？

今日も研究して素敵なところをたくさん盗ませてもらいました✨
最後までお読みいただきありがとうございました！

#Webデザイナー #Webデザイン #Webサイト研究