認定NPO法人発達わんぱく会｜発達障害のある子どもを療育支援

リンク

総じての所感

全体的に大きな丸み、波線を活かしたデザイン
アイコン付きサブタイトル＋デカ文字見出しという今っぽい組み合わせ
画像を大きく使ったデザイン、これも丸みを持ったトリミング
ここの理念は『すべての子どもたちがその子らしく生きられる社会を目指して』
ということで支援色強め、扱ってる要素は少し親しみ深いけど全体として固めなトーン
キーカラーとしてはロゴで使っている色を元ネタに出してるっぽいけど、TOPページでコンテンツに使ってるのはオレンジと青で、ちょっとだけシュッとした感じに見えてる
この牛の模様みたいなマークはどういうモチーフなんだろうか
具体的なモチーフの元ネタが掴めない、おそらく感覚で入れてるかな？
→多分「しみ」がモチーフなのかもしれない、発達障害の人が社会に溶け込むとか浸透していくとか、融和するとか、そういうニュアンスのモチーフなんだと思う。
おそらく背景の波線は、この「しみ」を拡大解釈したものなんだと思う。
白地でスッキリした印象、これも理念が固めだからすっきりとみせる的なイメージなのかな？
フォントはZen 丸ゴ、googlefontsは偉大
文字間は「letter-spacing: 0.1em;」で若干あけ気味、丁寧な暮らし感が演出される
本文の行間は「line-height: 2;」下層ページも2だった。
ボタンは角丸でパディング広めにデカい、ベタヌキこれも流行りか、リンクアイコンは若干角を丸めた▲
コンテンツごとにキーカラーを変えることでコンテンツの区分けを表現、背景色だけじゃなくてこういうやり方もあるのか。
見出しのアイコンはマップのピンみたいに見えるんだけど、何か意味があるんだろうか…？
全体的に文字間・行間をしっかりと取った印象
黒字は「#1A1A1A」若干グレー
全体的にフラット、影や立体感を使わないデザイン

各セクションについて

Header

これも今のはやり、メニューをしっかりきっちり出すんじゃなくって、スッキリと見せたい意図の白地文字小さめレイアウト
一番目立たせたい「寄付」ボタンはきっちり大きくだす。
太字細字で優先順位をつけて整理
ドロップダウンする項目だけ下向き角丸三角アイコンで表現、色を付けてるのはグレーだとちょっと寂しいからかな？

MV

大きく角丸にトリミングした領域内でフェードイン／アウトで画像を切り替える、施設の雰囲気ややっている事を具体的に示す事が狙い。
右下に領域を空けて、コピー「その子らしく育つ場所」を配置、写真の上にテキストを置くにあたりテキストに影を入れることを忌避した配置、まあ今ダサいもんね
画面の左下にボタンで各ターゲットに沿ったボタンを配置、見る人の属性で見たい情報が違うサイトであるというのがここから分かる。

ABOUT～PROGRAM

キーカラーごとに背景色、アイコン、ボタンの色を分けるデザイン、Aboutの所はMV部分から続く薄い青背景がここの途中で終わる
これ、デザインカンプだとABOUTの下まで入ってたんじゃないかなぁ…
画像はグニャグニャトリミング、印象としては柔らかく大胆に見える
基本的にコピーでニュアンス、本文で概要だけを説明して、下層ページに流す作り。あんまり語りすぎない所が潔い。逆に淡白な印象もある
ただ、しっかり波線の背景や写真のトリミングでレイアウトを作っているので案外淡白すぎる感じに見えないのもすごい

お知らせ

ここでオレンジ・ブルーをまとめているけど何か意味あるのかなぁ。
まあまとめだしって感じなのかな？何も無しだと寂しかったから置いた説もある。
グレーのborderで区切って太字で日にちと項目を出すだけのレイアウト
ちょっとコンテンツとして毛色を若干変えたい意図で見出しを中央揃えにしている

FOOTER

最後に背景オレンジで強めにコンバージョン、青でコンテンツマップを掲載
寄付、コンテンツマップエリアは、ベタヌキで大きく角丸にして柔らかさを維持
おそらく一番強く出したい所が寄付エリアなので、そこを最強にしてる説
最後の住所など諸々は淡白に白地で
コンテンツマップのリンク部分、二階層目へのリンクは三角、三回層目へのリンクはダッシュ「ー」をアイコンとしてますな。