見出し画像

#036 親しみやすさ、安心感を感じる保育園のwebサイト(全体キャプチャ有)

ご無沙汰していますwebサイト研究!前回の記事から2ヶ月以上経っていました…汗
また週に1回は書けるよう習慣づけたいなと思っています…苦笑
(前回の記事でも同じようなこと言ってたような…)


今日も、こちらのnote記事を参考にして研究していきたいと思います!

そして今日は「SANKOU!」さんから選びました〜!


「すかわ保育園」

すかわ保育園


親しみやすそうな雰囲気や、安心感を感じられる保育園のサイトだと思いました。
親の立場からしたら、我が子を預ける保育園は慎重に選ぶのかな?と思いますので、安心感を感じられるサイト空間というのは大事なところですね。
(いや〜それがむずかし〜〜😵)


では早速研究していきたいと思います!

☆リンク要素のルール
・ホバーで少し明るい色合いになる
・ボタンリンクは、ホバーで矢印が出てくる
・リンクアイコンが上、文字が下

☆王道サイズ、形のセオリー
・ヘッダーの縦幅は90px程度
・ヘッダーのフォントは13px
・h2は24px程度、h2の説明テキストは13px

☆コンテンツの横幅、グリッドのルール
・下層リンクごとのmarginは80〜150px程度
・最大4カラム

☆写真や図や比率のルール
・下層リンク用の横長写真
・セクション背景用の横長写真
・更新系(お知らせ?)用の横長の小さい写真
 →写真はリンク先と同じ

☆レスポンシブの変化のセオリー
・3カラムは2カラムになる
・h2が20px程度、その他は大きく変わらなそう

☆配色のルール
・背景色は白or薄いピンク
・文字色は茶色
・使用されてる写真には、自然の緑色や空の青色、子供服の黄色やピンク色などが使われていてポップな色合い。
・写真のテイストは統一されている。

☆読みやすい文字量
・h2は30文字以内くらい。
・漢字少なめ。
・フォントは丸っこくて柔らかい雰囲気の書体。


サイト研究ガシガシやってた時の方がやはり細かく見れていたなと。。
視点粗めですが今日はこの辺で。。。汗

今日研究したサイトは、ページ遷移時やスムーススクロールなどもふわっとしていて、雰囲気を助長していました。
webならではの表現や動きをもっともっと研究していって、そこも含めてサイト空間をうまく演出できるようになりたいと思いました!!

週1を目標にサイト研究を再開していきたいと思います!
最後までお読みいただきありがとうございました。