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