![見出し画像](https://assets.st-note.com/production/uploads/images/26644444/rectangle_large_type_2_7c2bf081434ea54f6ea090157f4c4477.jpg?width=1200)
#033 シズル感…!なWebサイト
こんにちは!Webサイト研究です!
今日は「muuuuu.org」さんから選びました。
そして今日も、こちらの記事を参考にさせていただきます。
「丸亀製麺」
みんな大好き丸亀製麺(^ ^)
私は期間限定でやってる担々麺が大好きです!
以前は焼き鳥メインでやっていたトリドールが、うどんに変更してここまで売り上げを伸ばしてきたマーケティングストラテジーについての記事を読んで以来、さらに好きになりました!笑
丸亀製麺のサイトは、「らしさ」がうまく出ているように感じるので、すごく好きです!
最近Webサイトが結構似てるーって思うことが多いなと感じるので、コーポレートサイトは特に企業の「らしさ」「独自性」をきちんと出していけることが重要だなあと思いました。
ということで、研究に入ります!
☆リンク要素のルール
・グローバルナビや新着記事などの文章は、マウスオーバーで色が変わる
・商品の写真はマウスオーバーで動く
・ボタンリンクは、マウスオーバーで色が変わる
・リンク要素には全て矢印マーク付き
☆王道サイズ、形のセオリー
・説明文など最小サイズは14px
・見出しは32px
・小見出しは24px
→6の倍数で作ってる?
・セクションごとの上下の余白は60〜90px
・サイドの余白は20px
☆薄い色は何色あるかをつかむ
・新着記事欄の下線:#d0cecc
・新着記事欄の日付:#999795
・ヘッダーの文字色:#b0b9bf
☆コンテンツの横幅、グリッドのルール
・商品部分は4カラム
・バイト募集やアプリの周知などのバナー部分は3カラム
・お知らせなどの記事部分は2カラム
☆写真や図や比率のルール
・4カラムの部分は縦長
・その他写真は横長というか黄金比っぽいサイズ(?!)
・写真の比率が同じくらいのものが多いので、整列していてクリーンな印象
☆レスポンシブの変化のセオリー
・4、3カラムは2カラムに
・2カラムの部分は1カラムに
・spのみ一番上に店舗検索が出てくる!
→スマホでの利用目的がきちんと考慮されている
☆配色のルール
・白ベース
・黒文字:#333
・リンク要素についてる矢印が赤、あとリンクボタンも赤:#d0121b
☆読みやすい文字量
・新着記事は20文字程度で納めてる
・商品部分の説明は最高40文字
コーポレートサイトは信頼できそうと思ってもらえるのが大事だと思うので、その場合、
・写真の大きさをだいたい同じにすること
・整列させること
などが大事だと思いました。
この2つをしない場合結構ランダム感が出て、シャレ感が出るなーと思うので。
あと丸亀製麺の「らしさ」について。
麺へのこだわりをとにかくアピールしていると思います。
麺を作っているというこだわり→職人→男らしさ
という感じで、
・習字っぽいフォントを使ったり、
・麺が美味しそうな写真を載せたり
しているのではと思いました!
(多分もっと要素ありそう…汗)
今日も勉強になりました!
最後までお読みいただきありがとうございました!