DESIGN CONCEPT PREVIEW
A・B・Cの3方向を、実際のホームページの形で比較します
掲載する内容とページ構成は3案とも共通です。異なるのは色・書体・余白・写真の扱い・カードやボタンの形だけで、デザインの方向性そのものを比べていただけます。各案にはトップページに加えて、今後50ページへ展開する下層ページ（施設詳細ページ）の共通UIサンプルを添えています。
これは完成デザインではありません。 方向性確認用のプロトタイプです。文章・写真・施設情報はサンプルを含みます。
CONCEPT A
やさしさ継承型
いまのやさしさを残したまま、見やすさだけを作り直す
やさしい
親しみやすい
安心
継承
明るい
このデザインを見る →
CONCEPT B
信頼・整理型
探しやすさと情報の正確さで、信頼を伝える
清潔
整然
信頼
上質
比較しやすい
このデザインを見る →
CONCEPT C
人重視・採用型
働く人の顔から始めて、採用とご相談を同時に受け止める
人
温かさ
現場
採用
表情
このデザインを見る →
A案｜やさしさ継承型
いまのやさしさを残したまま、見やすさだけを作り直す
白とアイボリーを地色に、ロゴの6色をセクションの目印として使います。角に丸みをもたせ、余白と文字サイズを現行より一段大きくします。
PROTOTYPE
MOBILE PREVIEW
LOWER PAGE ／ 下層ページ共通UIサンプル
施設詳細ページ｜A案のルールで展開した場合
丸みのあるカードとやわらかい書体のまま、本文と表の文字サイズを上げて読みやすさを確保します。 PCは左に本文・右にサイドメニューの2カラム、スマートフォンは本文1カラムで、メニューは右上のハンバーガーに収納します（MENUを押すと開きます）。掲載内容・セクション順・メニュー項目は3案とも共通です。
PC ／ 2カラム
MOBILE ／ 1カラム＋ハンバーガー
B案｜信頼・整理型 （当社推奨）
探しやすさと情報の正確さで、信頼を伝える
白を主役に、深い青緑を1色だけブランドカラーとして使います。施設情報は条件が並ぶ一覧に整理し、実景写真を大きく扱います。
PROTOTYPE
MOBILE PREVIEW
LOWER PAGE ／ 下層ページ共通UIサンプル
施設詳細ページ｜B案のルールで展開した場合
直線的なグリッドと整理された表で、所在地・居室数・医療対応を最も探しやすい形にします。 PCは左に本文・右にサイドメニューの2カラム、スマートフォンは本文1カラムで、メニューは右上のハンバーガーに収納します（MENUを押すと開きます）。掲載内容・セクション順・メニュー項目は3案とも共通です。
PC ／ 2カラム
MOBILE ／ 1カラム＋ハンバーガー
C案｜人重視・採用型
働く人の顔から始めて、採用とご相談を同時に受け止める
アイボリーの地にオレンジを主アクセントとして使い、スタッフの写真を大きく扱います。採用と職場見学の導線を最上段から強く打ち出します。
PROTOTYPE
MOBILE PREVIEW
LOWER PAGE ／ 下層ページ共通UIサンプル
施設詳細ページ｜C案のルールで展開した場合
太い見出しと大きな写真枠でC案らしさを出しつつ、表とメニューは読みやすさを優先します。 PCは左に本文・右にサイドメニューの2カラム、スマートフォンは本文1カラムで、メニューは右上のハンバーガーに収納します（MENUを押すと開きます）。掲載内容・セクション順・メニュー項目は3案とも共通です。
PC ／ 2カラム
MOBILE ／ 1カラム＋ハンバーガー
CHECK POINTS
このページでは、ここをご確認ください
好みだけでなく、下層ページ50ページに同じルールを適用したときに困らないかという観点でご覧ください。
01
見出しの印象
ページタイトルとH2が、法人として伝えたい雰囲気に合っているか。
02
文字の読みやすさ
ご高齢のご家族がスマートフォンで読んだときに、無理なく追えるか。
03
写真の見せ方
この扱い方に必要な写真を、16施設ぶん用意できるか。
04
カード・表の情報整理
施設情報・設備・医療対応が、比較できる形で並んでいるか。
05
ボタンの分かりやすさ
主要な操作と補助的な操作の区別が、ひと目でつくか。
06
CTAの印象
見学予約・お問い合わせが、押しつけがましくなく目に入るか。
この2カラム構成と共通デザインルールを、今後の下層ページ50ページへ展開して問題ないか。この一点をご確認ください。
ご承認いただければ、同じルールで採用ページ、サービスページ、施設16ページを制作していきます。
本プレビューは方向性確認を目的としたプロトタイプです。掲載している写真枠はすべてプレースホルダー、施設情報・お知らせはサンプルを含みます。実際の制作では、決定した方向性をもとにトップページを1案に作り込み、あらためてご確認いただきます。
株式会社ディーエスブランド