なないろグループ｜大阪府茨木市の児童発達支援・放課後等デイサービス

Header

• スクロールすると上端から表示される、
• 白地に本文と同じ文字とかなりシンプル目、一昔まえはグローバルナビゲーションを目立たせるデザインもあったけど、最近はコンテンツに集中して欲しいという意図なんだろうなぁ。
• アイコンも大本の目がついて、テキストがついてっていうデザインから目とテキストを消えたものに、確かにこれだけで分かるけど思い切った事をするなぁという印象。
• 下にborderもshadowもない、ものすごいシンプル、コンテンツに集中してくれってことなんだろう！うん！
• hoverすると色の丸アイコンが下に出てきてテキストが上に上がる、ちょっと面白い動き。

MV

• 色んな要素がふわふわと動いてて、子供が見てて楽しそうなデザイン
• メインの写真の所はドーム形にクリッピングされてて、その中で画像がスライド式に切り替わっていく
• 画像の上に可愛いイラストも被っていて、これもまた楽しそうに見えるね。
• 手でハサミで切ったみたいなトリミングが印象的

NEWS

• 写真の部分はグレー地を引いた上に写真を載せている
  →白地にそのまま乗せるんだと微妙につまらない印象になるのを回避、あとは背景のオブジェクトに重なるのも回避する目的もありそう。
• 画像自体にも背景自体にも角丸を使ってない、サイトとして角を出すビジュアルだから角丸で柔らかくしないということなんでしょうな、多分。
  猫も杓子も角丸で考えてた所は正直ある。
• 画像にロゴの形の何らかの可愛げな生き物が乗っていて、hoverするとうごく、これもかわいいね
  →なぜかわいい印象にする？ターゲットは男性というより女性なのかもしれない。
• ラベル部分も手書きっぽいデザインを乗せてる
• テキストは若干文字間を空けてる、これも丁寧というか上質感を出すためのやつ
• 要素の間もそこまでつめずにゆったりと空けてある、余裕がありますよ、という印象
• お知らせ一覧は手書きの→に下線。案外色は#000で真っ黒、アイコンも同色だけど手書きなのでそこまでカチカチに見えない
  →なぜ#000をここで？背景で使ってるイラスト等や施設のロゴでは#000を使っているので、本文の領域とは若干違うよという意味合いと、アクセントカラーとしての黒っていう意味合いもありそう？
• リンクはhoverするとピンク色になる。
• 背景の方眼模様のオブジェクトは、余白回避、若干右上に強めに配置してあるのも、MV部分の右下が空いてるからかなぁとか、

子どもの個性を伸ばしたい～～～

• コンテンツ区切りはグレーで、案外clipとかじゃなく、before＋backgroundっていう昔ながらな実装がしてある。
• ただ区切るんじゃなくって、区切った所を地面として、木のイラストで地面感を強調、広場の様に演出し、そこでロゴのキャラクターたちが遊んでいるように見せてる。
• この電話線みたいなマークはなんなんだろうか？
  流石に感性の線なんじゃないかなぁ…、これは…。
• 見出しも本文もそこまでフォントサイズは大きくしない、小さく、行間はしっかり取ってしっかり読ませようとする印象。
• noto sansが本文なのは、丸ゴシックとかにするよりも信頼感をある程度示しておきたいというのと、サイト全体として丸ゴシックは合わないカクカクっとしたデザインだから、という点が見える。

施設一覧の部分

• ここも地の白色部分や写真はカクっと行ってる
• 写真自体は綺麗でこういったデザイン性のあるサイトに耐えうる写真
• 木のアイコンは緑色のバリエーション、なないろのロゴから取ってきたのが２つ、取ってきてないのが２つ、平然とこういうルール破りしちゃってるけど、決めたルールを厳密に守りすぎるのも良くないか、優先されるべきは表現するもので若干のルール破りはいいものとすべきだなと
• 木のイラストの大きく面が取れそうな場所を大きくしてアイコンにしちゃうやり方は覚えておきましょうな
• 背景色のグレーは「#f7f7f7」、ディスプレイによっては見えない可能性も考えられる。
• スタッフ紹介のボタンは大きく、おそらく木の葉っぱの部分をモチーフにしつつ大胆に拡大解釈したもの？ここで使ってる写真は、要素に合わないという判断で丸抜きしてある。
• リンクを示す矢印のアイコンは共通ルールとして同じ物を白抜きにして使ってる。

子どもたちに「できた！」「たのしい！」～～～以下の部分

それ以下、特に気になった所

• フッター近くのなないろグループの所、電話番号の所は軽く目立たせたいので、グレー地を引いて文字サイズ大きく、軽く目立たせてる