終活サポートオフィスつくしの

縦書きキャッチと桜色の余白で
終活の不安をやわらげる相談サイト

終活サポートオフィスつくしののWebサイトは、彩度を抑えた桜色を主役にした配色と、たっぷり取られた余白によって、終活という切り出しにくい話題を穏やかに伝えているサイトです。強い言葉や派手な装飾に頼らず、写真とイラスト、文字の組み方だけで安心できる空気を作っている点に、このサイトらしさがあります。

ここでは、福井県福井市に事務所を置く終活サポートオフィスつくしののサイトを、Webデザインの見本という視点で読み解きます。ファーストビューの見せ方から、サービス紹介のレイアウト、ページ下部の導線まで、キャプチャで確認できる範囲の作りを順番に取り上げます。

桜色を主役にした配色が全体の印象を決めています

このサイトの第一印象を決めているのは、彩度を落とした桜色です。背景、見出しの文字、カードの枠線、フッターのパネルまでを同じ系統のピンクでそろえ、使う色を絞ることで、ページのどこを見ても同じ空気が続くように整えられています。読み手にとっては、途中で雰囲気が変わらないことがそのまま安心感につながります。

ピンクのグラデーションでページ全体をつないでいます

ヘッダーの白い帯から下は、白に近いピンクからやや濃いピンクへとゆるやかに移り変わる背景が敷かれています。境目をはっきり塗り分けるのではなく階調で変化させているため、スクロールしても色が切り替わったという印象が生まれにくく、縦に長いページでも視覚的な負担が出にくい作りです。

押せる場所だけを淡いグリーンにしています

ページの中でピンク以外の色が使われているのは、角を丸めた横長のボタンだけです。淡いグリーンで塗られたボタンが各セクションの終わりに中央ぞろえで置かれ、代表の想いや事業内容、ブログといった下層ページへの入口になっています。押せる場所の色をひとつに限定しているので、読者はボタンを探し回らずに見つけられます。

背景の切り替えでセクションを区切っています

サービスを四枚のカードで紹介するセクションでは、背景がわずかにグレーがかったオフホワイトへ切り替わります。区切り線や見出しの帯を足すのではなく、面の色そのものを変える方法なので、装飾を増やさずに話題の切れ目が伝わります。ピンクと無彩色に近い色が交互に現れることで、長いページにリズムも生まれています。

ファーストビューは写真と縦書きの言葉で構成されています

トップページを開いて最初に目に入るのは、角を丸めた大きな写真と、その上に重ねられた縦書きの言葉です。文字を横に流さず縦に組んだことで、和の落ち着いた印象を出しながら、写真を大きく見せることも両立できています。

三枚の半透明パネルを階段状に配置しています

ファーストビューの言葉は一枚の帯にまとめず、白い半透明のパネル三枚に分けて置かれています。縦書きの読み順に合わせて右のパネルがいちばん高く、左へ進むほど少しずつ下がる階段状の並びになっており、視線が右上から左下へ自然に流れます。文字はピンク、書体は明朝体で、字間を広く取った組み方です。

背景の写真は、椅子に腰かけた方の手を両手で包み込む場面で、黄色いニットと窓から差し込む明るい光がやわらかい調子を作っています。写真自体の明度が高く写り込む要素も少ないため、細い明朝体を重ねても文字が背景に埋もれません。人物の顔ではなく手元だけを写している点も、押しつけがましさを避ける選択になっています。

ヘッダーは名称とメニューアイコンだけに絞っています

画面上部のヘッダーは白い帯で、中央にピンクの明朝体で事業所の名称、右端に三本線のアイコンが置かれています。ナビゲーションの項目を横に並べない分だけヘッダーが軽くなり、ファーストビューの主役が写真と言葉になるよう整理されています。

文字組みと余白が読み手の負担を減らしています

終活や介護の情報は、当事者本人だけでなく、離れて暮らす家族も読みます。このサイトは、そうした幅広い読み手を想定した文字の大きさと行間で組まれており、読み進めるための体力を求めない作りになっています。

見出しは明朝体、本文はゴシック体で役割を分けています

見出しは字間を広めに取った明朝体、本文は素直なゴシック体という組み合わせで最後まで統一されています。書体の違いがそのまま見出しと本文の区別になっているため、文字の大きさや色を大きく変えなくても情報の階層が伝わります。明朝体の細い線は桜色とも相性がよく、全体の柔らかさを支えています。

見出しの下に白い帯を重ねて浮かび上がらせています

ピンクの背景に置かれる見出しには、文字の下半分に白いマーカーのような帯が重ねられています。ページ上部の見出しにも、ブログのセクションの見出しにも同じ処理が使われていて、装飾のルールが途中で崩れません。淡い背景に淡い文字色という組み合わせでありながら、この帯があることで見出しが背景から離れて見えます。

中央ぞろえの導入文は一文ごとに改行されています

ファーストビューの下に続く導入文は中央ぞろえで、一文ごとに改行されています。一行の長さが抑えられているので視線の折り返しが少なく、行間も広めに取られているため、ある程度の分量があっても圧迫感が出にくくなっています。文章の左右にはゆとりが残されており、囲み枠を使わずに読む範囲が示されています。

サービス紹介はイラストとカードで整理されています

取り扱う内容の紹介は、写真ではなく線画のイラストとカードの組み合わせで見せています。介護や看取りに関わる話題を扱いながらも生々しさを避け、要点だけを落ち着いて伝えるための選択だと読み取れます。

イラストと説明を上下に分けた四枚のカードが並んでいます

二列二段に並ぶカードは、上にイラスト、下に説明という構成でそろえられています。説明側は白地に細いピンクの枠線と丸みのある角を持つ箱で、見出しはピンクの明朝体、説明文は二行から三行のゴシック体です。イラストを収めた枠は外側の上の角だけが大きく丸められた左右対称の形になっており、四枚の中央に視線が集まります。

ここで取り上げられているのは、老人ホームや介護施設の紹介、身元保証と後見人の受託、保険の見直しや老後の備えについての相談、生前整理と遺品整理という四つの内容です。カードごとに扱う範囲が一目で分かるため、自分の悩みに近い項目から読み始められます。

トップページは概要にとどめ、詳しい説明を下層ページへ渡しています

トップページのカードは短い説明にとどめられ、続きはグリーンのボタンから下層ページへ移る流れです。事業内容のページでは、施設の紹介と終活の相談、見守りと身元保証、財産管理、任意後見人の受託、葬式と死後の手続き、保険の見直しと生前整理や遺品整理、セミナーやエンディングノートの案内、外部との連携という項目に分けて説明されています。

下層ページでは、日本語の見出しに小さな英字の見出しを組み合わせる書き方が共通して使われています。事業所概要や代表の想い、よくある質問でも同じ形が繰り返されるため、ページを移動しても構成の勝手が変わらず、読み手が迷いにくくなっています。

身元保証や死後事務の話題をやさしい順番で伝えています

身元保証や任意後見、死後事務といった言葉は、日常ではあまり使われません。このサイトは、そうした用語をいきなり並べるのではなく、読者が抱えている状況の側から書き起こす順番を選んでいます。

不安を先に置いてから対応できる範囲を示しています

導入文は、相談先が分からないという迷いに触れるところから始まります。そのうえで、福井と石川、富山を中心に対応していることや、ファイナンシャルプランナーとしての知見を手続きの代行だけで終わらせない姿勢が続きます。サービスの一覧から入る書き方ではなく、読者の状況に近い言葉から入る組み立てです。

よくある質問は読者の状況別に整理されています

よくある質問のページでは、お客様から預かった資産を事務所の運営資金と切り離して専用の口座で管理していること、県外に住む家族が福井の親について相談できること、身寄りがなく保証人を頼めない場合の対応、将来の判断能力の低下に備える任意後見の考え方が取り上げられています。質問の切り口が読者の立場ごとに分かれているため、自分に当てはまる項目へたどり着きやすい構成です。

ブログとページ下部に回遊の導線が用意されています

ページの後半は、記事の一覧と主要ページへの入口が続きます。読み終えた人が次にどこへ進めるのかを、文字だけでなく画像で示す作りになっています。

ブログは横並びのカードで見せています

ブログのセクションでは、記事が三枚のカードで横に並びます。角を丸めた写真の下に、ピンクの枠で囲んだ分類のラベル、二行までのタイトル、時計のアイコンを添えた公開日という順で情報が積まれ、カードの高さがそろえられています。カード列の右側には、白い円に矢印を収めたボタンが重ねて置かれています。

四分割の画像タイルとフッターで連絡先まで導いています

ブログの下には、写真を敷いた四分割のタイルが横一列に並び、相談の流れ、よくある質問、事業所概要、お問い合わせという主要ページの入口になっています。写真と短いラベルの組み合わせなので、文字だけのメニューよりも行き先を直感的に選べます。

最下部のフッターは、街並みを写した写真の上にピンクの半透明パネルを重ね、事業所の名称と所在地、電話番号、不在のときは折り返す旨の案内が置かれています。電話番号はほかの文字より大きく組まれ、白い文字がピンクの面ではっきり読めます。写真をそのまま背景に使いながら文字の読みやすさを保つ、扱いやすい手法です。