イメージを形にする自由なデザイン設計

WEB DESIGN SERVICE

デザイン・
アクセシビリティ

事業所の違いが伝わるデザイン。読みやすさと操作のしやすさまで仕上げます。

ウェブの画面構成や写真と配色を机上で検討するイメージ
DESIGN FOR CAREどこも同じ、を終わらせる。
イメージ
DESIGN PRINCIPLES

どこも同じに見えるサイトを、変える。

写真と文章、情報の順番、相談ボタンの位置まで設計します。事業所の違いを、画面で伝えます。

最初に伝えることを絞る対応地域やサービスの特徴など、訪問者が判断するために必要な情報を見つけやすい位置へ。

写真に役割を持たせる建物や設備に加え、活動・職員・支援の姿を。掲載許諾と個人情報を確認して選びます。

文字に強弱をつける見出しと本文の大きさ・太さ・行間を整理。流し読みでも要点をつかめる構成にします。

スマートフォンから考える文章の行幅、ボタンの大きさ、電話や見学の入口を確認。画面が小さくても迷わない設計へ。

ACCESSIBILITY

読める。探せる。操作できる。

文字と背景のコントラスト、見出しの順番、画像の説明、キーボード操作を点検します。見る人や使う機器が変わっても、情報を届けるためです。

規格への適合は、対象ページと試験結果を明記します。

DESIGN REVIEW

デザインには、理由を添える。

この写真を選ぶ理由、この位置に採用情報を置く理由。画面案と一緒に説明します。好みと使いやすさの両方を見ながら仕上げます。

設備だけでは、介護の良さは伝わらない。

訪問介護や訪問看護の強みは、建物の写真だけでは伝わりません。支援の姿勢、職員同士の連携、家族への説明。日々の仕事を、写真と言葉で見せます。

活気を伝えたいのか、落ち着いて相談できる印象を伝えたいのか。事業所に合わせて配色と写真を選びます。文字の読みやすさと相談ボタンの見つけやすさも、同時に整えます。

設計例同じ「リハビリを重視」という説明でも、設備の写真だけでなく、どんな目標を持ち、どのように活動へつなげているかを示すと、読み手は支援の姿を想像できます。実際に提供している内容を確認し、写真の見栄えに引きずられて過大な印象を与えないようにします。

色を変えるだけでは、オリジナルにならない。

事業所名と写真を入れ替えただけでは、強みは伝わりません。利用相談を増やすのか、採用に力を入れるのか。目的から構成とレイアウトを決めます。

伝える内容に合わせて画面を組み、見出しやボタンのルールは揃えます。ページが変わっても操作に迷わず、事業所ごとの違いが伝わるデザインに仕上げます。

設計するもの 確認する問い
配色・書体 目指す印象に合うか。文字が十分に読めるか。
写真 誰に何を伝える写真か。実際の支援と一致するか。
ページの順序 最初に知りたい内容から読めるか。
導線 相談・見学・応募の入口が、それぞれわかるか。

参考サイトは、どこが気に入ったのかを伺います。色なのか、写真なのか、探しやすさなのか。理由を聞いたうえで、必要な要素をデザインに取り入れます。

写真で見せる。図でほどく。言葉で伝える。

雰囲気は写真で、手順は図で、条件の違いは表で。情報に合わせて見せ方を変えます。何でも同じカードに押し込まず、内容に合った表現を選びます。

見出しで要点がつかめ、本文で詳しくわかる構成にします。価格や条件、注意点は画像に閉じ込めず、HTMLの文字で掲載。小さな画面や読み上げでも伝えます。

伝えたいこと 向いている見せ方 注意すること
職場・活動の雰囲気 実際の写真と具体的な説明 掲載同意、個人情報、撮影した時期
利用・応募の手順 順序のある図と短い説明 例外や事前準備も本文で補足
料金・条件の違い 比較表 税込・対象・追加費用の条件を明記
考え方・支援の姿勢 文章と具体例 抽象的な理念だけで終わらせない

生成画像はイメージとして使います。実際の職員や施設、制作実績の証拠にはしません。事業所の紹介には、掲載許諾を得た現場写真を優先します。

VISUAL GUIDE

内容に合わせて、伝え方を選ぶ

現場の雰囲気は写真と説明、利用や応募の流れは手順の図、料金と条件の違いは比較表、支援の考え方は文章と具体例で伝える。

現場の雰囲気は写真と説明、利用や応募の流れは手順の図、料金と条件の違いは比較表、支援の考え方は文章と具体例で伝える。

クリックで拡大

スマートフォンでも、迷わせない。

スマートフォンでは、文字の大きさと指で押せる範囲が重要です。電話・相談・採用の入口を絞り、画面を覆う表示を増やしません。長い比較表も、項目の関係を見失わない形にします。

コントラスト、見出し、代替テキスト、入力欄のラベル、キーボード操作を点検します。必須項目やエラーは色だけで示さず、文章も添えます。拡大表示と読み上げでの順序も確認します。

規格への適合を表記する場合は、対象ページと試験条件を決めて検証します。試験の対象と結果を明らかにし、確認していない適合をうたいません。

内容を決めてから、画面をつくる。

最初に、誰に何を伝えるかを決めます。次に掲載内容と配置を固め、写真・配色・文字・ボタンを仕上げます。見た目を完成させてから情報を足す進め方はしません。

「採用情報が目立たない」「送迎地域が見つからない」。画面案は、使う人の視点で確かめます。修正する箇所と理由を共有し、仕上がりを詰めます。画面数と修正回数は見積時に明記します。

希望する色や参考サイトを伝えられますか?

ロゴ、パンフレット、参考サイトなどがあれば共有してください。残したい印象と変えたい点を伺い、読みやすさや利用目的も踏まえて提案します。

写真が少ない場合はどうしますか?

今ある素材で伝えられることを確認し、必要な写真を整理します。撮影手配や素材購入が必要な場合は、対応の可否と費用を別途確認します。

デザインを変えるとき、内容も見直せますか?

情報の順序や説明不足も確認します。事業所の実態、読む人、掲載目的を整理したうえで、画面と本文を合わせて見直します。

LET’S TALK

ホームページの悩みを、お聞かせください。

新規制作も、リニューアルも。現在のサイトのURLと、お困りのことをお知らせください。

公式サイトで相談する ↗

公式サイトのお問い合わせページへ移動します。