#032 海外っぽいスパニッシュレストランのwebサイト

こんにちは！Webサイト研究です！
最近レストランサイトをトレースしたので、今日もレストランサイトを選んでみました！


「The Ringo」
https://the-ringo.jp/

ブロークンレイアウトがイマドキで海外感！
行きたくなりますよねこのサイト！✨
自粛が長くなってきている今は特に…！

では研究していきます！

☆リンク要素のルール
・グローバルナビはマウスオーバーでopacity
・ボタンリンクはマウスオーバーで線or矢印が動く


☆王道サイズ、形のセオリー
・大見出しは30px
・最小テキストは14px
・セクションごとの余白は80〜100px


☆薄い色は何色あるかをつかむ
・フッターやボタンリンクにある線に、背景とコントラストが低い色あり。


☆コンテンツの横幅、グリッドのルール
・2カラムの写真、写真は少し重なるようなレイアウト


☆レスポンシブの変化のセオリー
・左が上、右が下の基本ルール
・フォントサイズはほぼ一緒

☆配色のルール
・背景が白に近いピンクグレーとくすみピンク
・アクセントにゴールドっぽい黄土色
　→カラーコード不明ですが黒と薄ピンクとゴールドの組み合わせ、すごく上品！飲食店だと赤系の色の方がいいと思うので、素敵なカラーチョイスだと思いました。


☆読みやすい文字量
・メインビジュアルや大見出しなどは'Playfair Display'というフォント、セリフ体で高級感あり。
・文章などのテキストはゴシック体で読みやすく、現代っぽく。



写真二枚横並び→文字→写真二枚横並び→文字…
というレイアウトだけど、
・写真と縦横ずらして少し重ねる
・文字も見出しと小見出しを上下にずらす
・大きく空いた余白に線
という感じで、ブロークングリッドのようなイマドキっぽさが出ていると思いました〜！

飲食店は写真がとにかく大事だと思っているのですが、写真を引き立たせるレイアウトや文字量、色使いが勉強になりました！

最後までお読みいいただきありがとうございました！