キョウリツ・デイサービス

概要

デイケアサービスのWebサイト(架空)

URL

キョウリツ・デイサービス

制作目的

利用者の集客

※バナーにて表現：詳細はこちら

従業員・パートの募集

※バナーにて表現：詳細はこちら

制作条件

コーポレートカラー：緑・青（水色）・ピンク

ロゴ：葉っぱをモチーフにしたデザインで新規に作成

※詳細はこちら

デザイン：やさしいイメージ。高齢者に適切な文字サイズを意識する。

２カラムまたは、３カラムデザイン

ターゲット

介護施設に入居する程ではないが足腰が弱り、自力で歩く訓練が必要な70歳以上の高齢者。または、働き盛りで自分の親にデイサービスの利用を検討している、40-50代。
最新の情報通信機器には疎く、主要連絡手段は電話。やむを得ずインターネットで調べ物をする場合は、デスクトップ型パソコンを子供と一緒に利用する。

担当範囲

ディレクション / デザイン / コーディング

レスポンシブ

PC

使用ツール・言語

Photoshop / Dreamweaver / HTML / CSS

制作時間

約500分（TOPページのみ）

① レイアウト

左上のロゴを起点に、アクセントカラー：ピンクが目を引く右端のフリーダイヤル問い合わせボタンと、左下ナビゲーションを終点としたF字型の動線を作り、目線が自然と下に流れるようにしました。

② メイン画像

「我が家」のような施設であることが一目見て伝わる家族の集合写真を選び、家の形に抜きました。優しい雰囲気を出したかったので、本文への切り替え部分は波型にしました。

③ キャッチフレーズ

白文字に濃青色の光彩を敷き、空の色が薄い所でも目立つようにしました。

④ 見出し

• 文字を強調しつつも、優しいイメージを出せるように、メインカラー：黄緑色「●」を見出しの頭に。
• 下線は、サブカラー：水色の丸点線を使用することで、全体との調和を意識しました。

配色

メイン画像の色をAdobe colorで抽出し、使用色を下記の通り決定。

• スマートフォンで閲覧する際、すっきり見やすくなるよう、ナビゲーションの各メニューと本文＋画像を、画面に対して縦並び・各画像を１列に配置。
• メインカラー：安心感・ロゴの葉っぱを連想させる黄緑・緑色、サブカラー：誠実な印象の水色・パステルネイビー
  アクセントカラー：家族の愛情・優しさを連想させるピンク
• 優しい印象と見やすさを両立する為、中明度のパステルトーンに設定。
• 目立たせたい箇所の背景：全体より明度を低く、目が疲れない程度に彩度を少し上げた色を使用。
• 通常文字色：目が疲れにくい黒色(#333)を使用。
• 強調したい箇所（ボタン・キャッチフレーズ・ナビゲーションのロールオーバー）：白色で明度差を大きく付けるよう、意識しました。

フォント

• 強調したい箇所、見出し：中高年以上がターゲットの為、落ち着きと誠実な印象を与える為に、「游明朝体」のデミボールドを採用しました。
• 本文：見やすさ・可読性を最優先して、線幅が一定の「游ゴシック」を採用。

⑥ 各項目のボタン

• 優しい雰囲気に調和しつつ、その中で目立つよう、角丸で立体感のある形状・濃色背景×白文字にしました。
• マウスを当てた際に影を消し、クリック動作をユーザーに強く連想させることで、次階層へのアクセスを促す設計にしました。
• 弱視ユーザーに考慮して、TOPページの文章は最小限に止めて、次階層の大きな画面で詳細確認する設計で、長文読解のストレスを軽減しました。