ウェブサイト ／ 介護施設紹介・入居相談
そなえびより
何も決まっていない
段階から相談できる。
介護施設探しの相談窓口を運営する架空の会社を題材にしたウェブサイトです。何から手をつけるか決まっていない家族に向けて、相談の範囲・費用の見方・相談員の顔を示し、問い合わせまで導く構成にしました。
作品を開く架空の事業者を題材にした自主制作です。
急いで決めさせない、
という姿勢を先に。
想定したのは、離れて暮らす親の生活に不安が出はじめた子世代です。相談の多い段階、できること、あえてしないこと、費用の仕組みという順に並べ、施設を勧める前に判断材料をそろえる流れにしました。
トップの映像はスクロールに合わせて進み、希望の確認、費用の見比べ、見学の同行と場面が切り替わります。場面ごとに短いコピーが差し替わり、相談の中身が順に伝わる作りです。
吹き出しと付箋で、
相談の中身を見せる。
生成りの地に淡緑と深緑の大きな角丸の面を重ね、見出しは太めのゴシック体で大きく置きました。ヘッダーは大きな文字の角丸ボタンのナビと、常に見える電話相談ボタンを1枚の角丸カードにまとめています。相談と電話のボタンは黄色にして、押す場所を一目で分かるようにしました。
本文はご家族と相談員の吹き出しに手描きの人物アイコンを添え、要点は少し傾いた付箋、一覧は角丸のカードに分けました。見出しの下には黄色の手描き線が引かれ、要点の語句には画面に入ると手描きの丸囲みが描かれます。付箋は上からふわっと貼られます。
送信する前に、
入力内容を見返せる。
問い合わせフォームは、相談の種類・氏名・連絡先・相談内容を入力すると、同じ画面に確認の一覧が開きます。入力に戻ることも、そのまま進むこともでき、どちらも画面内で完結します。
施設の種類は開閉式にまとめ、必要なものだけ広げられます。実際の送信・メール配信・施設への取り次ぎは行わないデモです。
映像を画面いっぱいに、
言葉は下に重ねる。
スマートフォンではヘッダーの下から画面の下端まで映像を敷き、場面ごとに人物が切れない位置へ映像をずらします。見出しと相談ボタンは、下から深緑に暗くなる部分へ白い文字で重ね、本文へ進むリンクを添えました。ヘッダーはロゴ・電話・メニューの3つを1枚のカードに収め、どのページでも電話の入口が見えるようにしています。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン
