![見出し画像](https://assets.st-note.com/production/uploads/images/26295231/rectangle_large_type_2_125a8116a233015df3c22348d2ef779a.jpg?width=1200)
#032 海外っぽいスパニッシュレストランのwebサイト
こんにちは!Webサイト研究です!
最近レストランサイトをトレースしたので、今日もレストランサイトを選んでみました!
「The Ringo」
https://the-ringo.jp/
ブロークンレイアウトがイマドキで海外感!
行きたくなりますよねこのサイト!✨
自粛が長くなってきている今は特に…!
では研究していきます!
☆リンク要素のルール
・グローバルナビはマウスオーバーでopacity
・ボタンリンクはマウスオーバーで線or矢印が動く
☆王道サイズ、形のセオリー
・大見出しは30px
・最小テキストは14px
・セクションごとの余白は80〜100px
☆薄い色は何色あるかをつかむ
・フッターやボタンリンクにある線に、背景とコントラストが低い色あり。
☆コンテンツの横幅、グリッドのルール
・2カラムの写真、写真は少し重なるようなレイアウト
☆レスポンシブの変化のセオリー
・左が上、右が下の基本ルール
・フォントサイズはほぼ一緒
☆配色のルール
・背景が白に近いピンクグレーとくすみピンク
・アクセントにゴールドっぽい黄土色
→カラーコード不明ですが黒と薄ピンクとゴールドの組み合わせ、すごく上品!飲食店だと赤系の色の方がいいと思うので、素敵なカラーチョイスだと思いました。
☆読みやすい文字量
・メインビジュアルや大見出しなどは'Playfair Display'というフォント、セリフ体で高級感あり。
・文章などのテキストはゴシック体で読みやすく、現代っぽく。
写真二枚横並び→文字→写真二枚横並び→文字…
というレイアウトだけど、
・写真と縦横ずらして少し重ねる
・文字も見出しと小見出しを上下にずらす
・大きく空いた余白に線
という感じで、ブロークングリッドのようなイマドキっぽさが出ていると思いました〜!
飲食店は写真がとにかく大事だと思っているのですが、写真を引き立たせるレイアウトや文字量、色使いが勉強になりました!
最後までお読みいいただきありがとうございました!