発達支援ルームにこっと TOPページリニューアル提案

■ 依頼概要
東京都杉並・中野にて、児童発達支援/放課後等ディサービスを手掛ける一般社団法人　子ども発達・子育て支援センターSmile-ingのHPリニューアルをします。
まずはトップページ（PC版＋スマホ版）のデザイン案をコンペ形式で募集します。
採用者には、下層ページデザイン＋WordPress構築を追加33万円で継続依頼します。
現在のサイト：https://nicotto-smile-ing.org/

■主なリニューアルの目的
１）採用ページの強化
　現在主に外部サイト（ジョブメドレー）から月に１~３名の問い合わせを得ているものの自社サイトからの流入を増やしたい
https://job-medley.com/cw/1545231/?utm_campaign=google_jobs_apply&utm_source=google_jobs_apply&utm_medium=organic

２）デザイン性の向上
　2019年に現在のデザインで制作。親しみやすいロゴやイラスト風のデザインとしたが、事業所拡大等踏まえ写真メインでデザイン性を向上させたい

■ コンペで制作いただく内容
１）トップページデザイン案（PC版・スマホ版）
２）ポートフォリオ提出
※デザイン案で採用を決定します。

■ 採用後に依頼する内容（別契約：33万円）
・下層ページのデザイン（10ページ程度を想定）：現在のページを踏襲予定
・WordPressコーディング（レスポンシブ対応）

■ スケジュール（目安）
・採用決定：12月前半
・採用したデザインを元に打ち合わせを行い、修正要望を反映（~1月上旬）
・下層ページデザイン＋デザイン確定：2月上旬
・WordPressコーディング完了・公開：2月中

■ 予算
・コンペ報酬：７万円
・採用後の追加作業：33万円・総額：40万円（税込）

■ デザイン要件/先方要望イメージ
・ブランドカラー：緑（ロゴの色）
・パステルカラーを基調とした色味
・スタッフの雰囲気が伝わる写真
・保護者への分かりやすさに加えて、求職者のためのページをより魅力的に充実させる
参考サイト
https://www.wanpaku.org/kokko
https://recruit.baigie.me/

■ 応募条件・
・オンライン（対面も可ならさらに良）で打ち合わせ可能
・WordPress構築経験

■ 注意事項
・著作権侵害素材禁止・著作権は当社に譲渡・守秘義務遵守
・納得するデザインを頂けた場合、早期に締め切る場合があります。

引用元：https://crowdworks.jp/public/jobs/12695387

リニューアルのポイント

採用強化の為、自社サイトからの流入を踏まえたい
採用コンテンツの明示と導線強化
写真をメインにしたデザイン
サイトの画像(もしくはレンポジ)を用いて派手に写真を使う
事業所の拡大を踏まえてのリニューアル
各事業所があるよっていうことを明示したいのかも？どうだろ。
スタッフの雰囲気が伝わるように
サイトに掲載してある写真をつかって雰囲気を伝えたい
保護者への分かりやすさ
保護者(20代～30代の女性)へ向けたデザイン
求職者のためのページをより魅力的に充実
これはお問合せフォーム付きのワイヤーフレームか何かを添付してあげるとわかりやすくなるだろうか…？

そもそも発達支援ってなんだべ

障害のある子供や発達に心配がある子供の日常生活の困難さを軽減・改善して将来の自立や社会参加を目指した支援を行う事

ポイントに則った改修案まとめ

採用強化の為、自社サイトからの流入を踏まえたい

  • MVにリンクボタン追加
  • ページにコンテンツとして『発達支援員（保育士）(保育士)』募集中のコンテンツ追加

写真をメインにしたデザイン

  • まずはメインビジュアルでか写真訴求で何枚かスライドで見せる
  • 他の項目でも写真をバンバン使う。

事業所の拡大を踏まえてのリニューアル

  • 各施設への導線を追加してあげる、MVの直下かなぁ

スタッフの雰囲気が伝わるように

  • これは上の「写真をメインにしたデザイン」で考えたらそうなると思う

保護者への分かりやすさ

写真を使う、情報をもっとわかりやすく整理して伝える

求職者のためのページをより魅力的に充実

これはワイヤー添付しかないよね、あとはSEO的にっていう話もすればいいかなと。

デザインのテイスト・ポイント

上記から発展して考えられるイメージ

  • 手で下から支える
  • 積み木、折り紙、幼稚園世代が遊ぶもの
  • 話す事、コミュニケーション
  • 嬉しいこと、楽しいこと
  • 笑顔
  • 教室
  • 子どもたち
  • 遊ぶこと
  • 成長

クライアントの参考デザインについて

支援色強めで、扱ってる雰囲気・デザインは柔らかめなものの、訴求してくる情報は結構固め、あしらい方も固め。
本件に関しては全体的にもう少し柔らかめなトーンがいいのではないだろうか。
ただ、写真のあつかい方は参考にしたい。

メインビジュアル部分で訴求したい属性別に入口を作ってくれてるのはいいかもね

メモ

  • こういう発達支援とかの施設のデザインってざっくり見る感じ白地が多い、おそらく施設としての信頼感みたいな所を訴求したいんだと思う。
  • ただ、こういうちょっと柔らかめの施設でやるんなら背景を黄色にしちゃってもいいかも？暖色的な感じにする的な
  • サイトのコンバージョンとしては、電話によるお問合せ・採用応募者からの連絡
  • メインコピーは「一緒に歩こう」
メモ

色味の参考はこんな感じで暖かく見せてもいいかも？社会福祉法人 慈楽福祉会

現行コンテンツマップ

とりあえずワイヤー引いてみた

大体こんなもんじゃなかろうか

MVデザイン案ブレインストーミングメモ

発達支援とは、障害のある子供や、その可能性がある子に対する

ブレストから拾い上げるキーワード

作ってみたけど、パンチが弱い、ださい

パンチって何？

  • 色のメリハリが効いてる事によるもの
  • アクセントの強い色を使ってると出るもの
  • ガチッとしたデザインの骨組みによって出るもの
  • 写真の質によって出るもの
  • 文字、写真等の要素の大きさによって出るもの

他のサイトを見て、1stビューのパンチというものはどうやって作られているのかを調査する。

カラフル、アクセントの強い色をパーっと見せていく感じ
画面の密度も高いから、そういう意味でもインパクトがある
→今回のデザインだと、装飾の仕方次第では作れるかも？

これは画像力でゴリ押してる感じがある、使ってる画像もアクセントが強い色だ。
後はフォントのレイアウト、大きさ的な部分でもドン！と配置してある。
→画像的の配置的には今作りたいレイアウトと似ている印象、
ただ、罫線を使ったレイアウトとかは出来ないのでちょっとなぁ。
テキストの置き方は参考に出来るかも。

決めきったバナーみたいなカチっとした画面１枚の構成でデザイン性を出していてインパクトがある。
→こういう決まり切った構成で画面を作るのもアリっちゃアリなのかなぁ、とは思うけどこのサイトだと結構厳しい
文字も模様の様に大きく配置したり、色のメリハリもしっかりついてて楽しそう

これもデザインの骨組みが強い、深い青、濃い水色の背景がアクセントになっている。
文字色のアクセントも強い
背景色の同系色重ねは僕がやっていたものよりもメリハリがあって、かつ黄色みの背景色をコンテンツに使ったり、色んな色の円を散らしていてつまらなさ、のっぺりとした質感をかなり軽減している
→今回のサイトについては、ロゴで色んな色を使っている部分があるので、色んな色の要素を散らすことでのっぺりさを回避できる可能性はありそう。

ある程度骨組み強めの写真の並べ方と、アクセントの強い色でコピーを装飾してて、パッと目に入ってくる。
写真に被ってるイラストや画面左下のグラデーションの要素でつまらなさ・固すぎる感じをギリギリで回避していく。

いろいろガジャガジャやった結果提案したもの

やれることはやったと思うけど、トップページは最終的に妥協した形ではある…、なんというか、TOPページのビジュアルを上手く構成するのが下手だ。
というか、基本的にある素材を使おう使おうとするから良くない説はちょっとあって、
振り切ってレンポジ使っちゃった方が楽説ある。

提案文もここに書いておこう

株式会社 いちから
嶋津様

初めまして、熊谷と申します。

フリーランスとして10年以上Webサイトの製作に携わってきまして、
WEB制作会社にて3年勤務の後、広告代理店に出向しての業務を3年。
対企業向け・対個人向けにWebサイトの制作、運用業務を行ってきました。
ディレクションからコーディング、デザインまで一通りの対応が可能です。

応募させて頂くデザインをお送りいたします。
以下の内容とあわせてご確認を頂けますと幸いでございます。

==========

【コンセプト】
全体的なトーンとしましては緑をメインに、
柔らか印象を与えつつ、信頼感が伝わるよう、
すっきりとコンテンツが閲覧できるように制作をいたしました。
ポイントでロゴに使っているパステルカラーを各所に配置して
彩りをつけています。

また、写真を随所に配置しましたので、
施設、スタッフの様子ができる限り伝わるようになっているかと思います。


【お問い合わせ・採用情報】
また、サイトの目的である所のお問い合わせ、
本リニューアルの目的の一つである『採用ページの強化』というところで、
ヘッダー、フッターの領域で目立たせるようにリンクボタンを配置、
ページ下部にも強めに誘導するコンテンツを追加いたしました。
ページ左側のボタンは、スクロールに追従する形で表示されます。


【メインビジュアル】
画像がフェードイン・アウトで切り替わる想定です。


【ポートフォリオ】
ポートフォリオにつきましては下記のサイトになります。
https://anchovy.jp/

こちらのポートフォリオのサイトですが、
私自身これまでに会社員、出向社員として様々なサイトの制作に携わってきてはいたのですが、
契約上それらの案件の掲載をする事ができない為、
掲載実績がかなり限られてしまっております。
この位の動きのWebサイトを0から製作可能、というように見て頂けますと幸いです。

WordPressを利用した製作実績は、
下記Youtuberのサイトは私がWordPressで制作、運営をしているサイトになります。
お知らせ、コラム、制作実績など各種コンテンツをWordpressを用いて動的に実装しております。
https://tacute.com/

==========

以上です、
長文になりましたが、ご確認、ご検討を頂けますと幸いでございます。
どうぞよろしくお願いいたします。

一応、前に負けた人の提案文の書き方を踏襲して修正してはみた、効果あるかどうかはわからないけれど…。

ただ、前よりはレビューとトレースやってるから成長してる感じはある、感じだけね…。
レビュトレ(今考えた造語)は引き続きやっていきたいなぁ…、習慣化したいよね…。できるかな…。

多分落ちた