#040 爽やかな力強さを感じるwebサイト
こんにちは、webデザイナーのKIRIKOです。今日も張り切って研究していきます！
今年の2月から始めたサイト研究（今や月1の行事のような感じに…）ですが、今日で40回目！50回を目指してゆるく続けていきます(^^)
今日もこちらの記事を参考に研究していきます。
今日は「MUUUUU.ORG」さんからです。
「Chatwork」Recruiting Site
社員さんかな？真面目な表情の写真が出てきて、力強い印象ですね。
オフィス内や周辺の外の写真など、自然な雰囲気の写真も多いので、暑苦しすぎず爽やかさがあるなと感じました！
（↑キャプチャ一部うまくいかなかった汗）
では研究していきます〜！
1. リンク要素の共通ルールをつかむ
・pc/sp共にハンバーガーメニュー、マウスオーバーで下線が出る
・more系も下層へのリンクも、マウスオーバーで矢印が出る
→コンテンツエリアのリンクは矢印のみ！
2. UI要素の王道サイズ・形のセオリーをつかむ
・長文のテキストは16px
・セクションタイトルは30~50
強調したい文字は100px
3. 薄い色は何種類あるかをつかむ
・制度のセクションで#f0f3f7 #dadfe4
・あしらいのような感じで透明度の違う黒色の数字（意味のある数字だけど）
4. コンテンツの横幅やグリッドのルールをつかむ
・最大4カラム
・下層リンクへのセクションはテキストと写真の2カラム
・下層リンクセクション間の余白は80px
・KV下の余白や、下層リンクの下の余白は90~100px
→まとまりごとに余白にも差をつけると、細かい違いでも情報理解がしやすくなる気がする！
5. 写真や図の比率のルールをつかむ
・横長写真
→スマホで横幅いっぱいに写真にできる
・4:3や3:2くらいの写真が、ブロークングリッド風にレイアウトされている
→ランダム感が出る
6. レスポンシブ時の変化のセオリーをつかむ
・4カラムは1カラムに
・ランダムな写真は、サイズを変えて1カラムに
→サイズの違い＋右寄せ/左寄せ/全面が違うとランダム感少し出る気がする！
・フォントサイズの最小は12px
7. 配色ルールの適用方法をつかむ
・背景白、文字黒、アクセントカラーがコーポレートカラー（？）の赤色
・あしらいには薄いグレーや透明度の高い黒（グレーに見える）が使われている
8. 読みやすい文字量をつかむ
・長文テキストは150文字程度
・セクションタイトルは15文字以内くらい
研究してみて、レイアウトが特に勉強になりました！
pcでもspでもかっこいいレイアウト、難しいなあと思っているので上手になれるようがんばっていきたいと思います！
今日も最後までお読みいただきありがとうございました！