なないろグループ|大阪府茨木市の児童発達支援・放課後等デイサービス
リンク
総じての所感
- まず、こども向けも意識してカラフル!使用している色味は赤、青緑、黄色、ピンク、紫、黄緑、オレンジ、「7色」から虹の7色を連想しての配色のようだ。
- 色については若干彩度を落とした、くすみめの色を使っている感じ
- 白地に手書きっぽい形で写真や要素をくり抜いた形でかわいい
- 使っているイラストも手書きっぽいもの、ロゴの色を元にして色味で統一している感じ
- 文字色は全体として濃いめの紺色「rgb(7, 18, 52)」、パッと見分かりにくいけど、印象としてちょっと色味を意識させる効果。色んな色を使ったデザインであれば、本文を紺色にしてもいいのかもしれない。
- フォントサイズはリード文が16px、いわゆる本文が14px、大体こんなもんなのかなぁ?
- 児童発達支援・放課後等デイサービスのサイト
親が見て「楽しそうだしちゃんとやってくれそうな所だな」という感じで安心させるのが狙いかなと思われる。
→だから白地をつかってるっていうのもあるのかしら?流行りだからかしら?
- 格子模様はノート(意識高い系のやつ)的な感じとか方眼紙とかを意識したものなんじゃないかしら?
後は簡単なイラストで描かれた色んなオブジェクト
→子供が描いたような要素を画面に配置することで、このサイトが子供向けだという事を認知させている
- 要するに子供に関するサイトで、何らかの学習の様な事をさせて、それは簡単で楽しいものです、という印象を伝えるイメージ
- 画面端にスクロール追従する「お問い合わせ」・「採用情報」はしっかりと目立たせたいのでロゴで使っているピンクと水色。
しかもアニメで収縮をしている。
サイトのコンバージョンがこの2つであることがわかる
こういった要素にもロゴのキャラクターの目を使ってつまらなく見えないようにしてる。使える所にはガンガン使っていこうという精神と、目立たせるに当たって、動かす→ならキャラクターにしようという連想も見られる
- 途中まで見てきて、このサイトで使ってる要素のキーワードとしてもう一つ、「木」の存在が大きい事がわかった、なぜ木?
成長するイメージ、皆が遊ぶ場所としてのイメージ?
各セクションについて
Header
- スクロールすると上端から表示される、
- 白地に本文と同じ文字とかなりシンプル目、一昔まえはグローバルナビゲーションを目立たせるデザインもあったけど、最近はコンテンツに集中して欲しいという意図なんだろうなぁ。
- アイコンも大本の目がついて、テキストがついてっていうデザインから目とテキストを消えたものに、確かにこれだけで分かるけど思い切った事をするなぁという印象。
- 下にborderもshadowもない、ものすごいシンプル、コンテンツに集中してくれってことなんだろう!うん!
- hoverすると色の丸アイコンが下に出てきてテキストが上に上がる、ちょっと面白い動き。
MV
- 色んな要素がふわふわと動いてて、子供が見てて楽しそうなデザイン
- メインの写真の所はドーム形にクリッピングされてて、その中で画像がスライド式に切り替わっていく
- 画像の上に可愛いイラストも被っていて、これもまた楽しそうに見えるね。
- 手でハサミで切ったみたいなトリミングが印象的
NEWS
- 写真の部分はグレー地を引いた上に写真を載せている
→白地にそのまま乗せるんだと微妙につまらない印象になるのを回避、あとは背景のオブジェクトに重なるのも回避する目的もありそう。
- 画像自体にも背景自体にも角丸を使ってない、サイトとして角を出すビジュアルだから角丸で柔らかくしないということなんでしょうな、多分。
猫も杓子も角丸で考えてた所は正直ある。
- 画像にロゴの形の何らかの可愛げな生き物が乗っていて、hoverするとうごく、これもかわいいね
→なぜかわいい印象にする?ターゲットは男性というより女性なのかもしれない。
- ラベル部分も手書きっぽいデザインを乗せてる
- テキストは若干文字間を空けてる、これも丁寧というか上質感を出すためのやつ
- 要素の間もそこまでつめずにゆったりと空けてある、余裕がありますよ、という印象
- お知らせ一覧は手書きの→に下線。案外色は#000で真っ黒、アイコンも同色だけど手書きなのでそこまでカチカチに見えない
→なぜ#000をここで?背景で使ってるイラスト等や施設のロゴでは#000を使っているので、本文の領域とは若干違うよという意味合いと、アクセントカラーとしての黒っていう意味合いもありそう?
- リンクはhoverするとピンク色になる。
- 背景の方眼模様のオブジェクトは、余白回避、若干右上に強めに配置してあるのも、MV部分の右下が空いてるからかなぁとか、
子どもの個性を伸ばしたい~~~
- コンテンツ区切りはグレーで、案外clipとかじゃなく、before+backgroundっていう昔ながらな実装がしてある。
- ただ区切るんじゃなくって、区切った所を地面として、木のイラストで地面感を強調、広場の様に演出し、そこでロゴのキャラクターたちが遊んでいるように見せてる。
- この電話線みたいなマークはなんなんだろうか?
流石に感性の線なんじゃないかなぁ…、これは…。
- 見出しも本文もそこまでフォントサイズは大きくしない、小さく、行間はしっかり取ってしっかり読ませようとする印象。
- noto sansが本文なのは、丸ゴシックとかにするよりも信頼感をある程度示しておきたいというのと、サイト全体として丸ゴシックは合わないカクカクっとしたデザインだから、という点が見える。
施設一覧の部分
- ここも地の白色部分や写真はカクっと行ってる
- 写真自体は綺麗でこういったデザイン性のあるサイトに耐えうる写真
- 木のアイコンは緑色のバリエーション、なないろのロゴから取ってきたのが2つ、取ってきてないのが2つ、平然とこういうルール破りしちゃってるけど、決めたルールを厳密に守りすぎるのも良くないか、優先されるべきは表現するもので若干のルール破りはいいものとすべきだなと
- 木のイラストの大きく面が取れそうな場所を大きくしてアイコンにしちゃうやり方は覚えておきましょうな
- 背景色のグレーは「#f7f7f7」、ディスプレイによっては見えない可能性も考えられる。
- スタッフ紹介のボタンは大きく、おそらく木の葉っぱの部分をモチーフにしつつ大胆に拡大解釈したもの?ここで使ってる写真は、要素に合わないという判断で丸抜きしてある。
- リンクを示す矢印のアイコンは共通ルールとして同じ物を白抜きにして使ってる。
子どもたちに「できた!」「たのしい!」~~~以下の部分
それ以下、特に気になった所
- フッター近くのなないろグループの所、電話番号の所は軽く目立たせたいので、グレー地を引いて文字サイズ大きく、軽く目立たせてる