株式会社Ap.9のウェブサイトは、不動産や相続という身構えやすい話題を、水色と白を軸にした軽やかな画面で受け止めているコーポレートサイトです。虹の架かる街並みを描いた水彩調のファーストビュー、悩みを一覧にしたチェックリスト、どのセクションでも同じ形で現れる角丸のボタンが、読み手の緊張をほどきながら次の行動へつないでいます。
運営するのは、愛知県名古屋市東区に事務所を構える会社で、サイトのタイトルには愛知県での不動産や相続税に関する相談という主題が掲げられています。名古屋で不動産の売却や空き家の扱いを考え始めた方が、最初に開く1ページとして組み立てられている点が特徴です。
この記事では、配色とファーストビューの作り、悩みから入る情報設計、写真とカードの配置、そして問い合わせ導線の置き方という順に、キャプチャから読み取れるデザインの判断を整理します。
水色と白でそろえた配色が相談しやすい空気をつくっています
このサイトの印象を決めているのは、彩度を抑えた水色と白の組み合わせです。強い色で視線を奪うのではなく、画面全体を明るく保ったうえで、伝えたい一点だけに濃いブルーを差す方針が最後まで守られています。ここでは、その配色がもっとも効いているファーストビューと、見出しまわりの色の使い分けを見ていきます。
虹の架かる街並みのイラストが重い話題の入口をやわらげています
ファーストビューには実写ではなく、水彩調のイラストが敷かれています。淡い空に虹が弧を描き、遠くにビル群、手前には屋根の連なる住宅と樹木が広がり、右上からは緑の葉が垂れ下がる構図です。空の色がそのまま画面全体の基調色になっているため、下へスクロールしても世界観が途切れません。
不動産や相続の相談は、当事者にとって切り出しにくい話題になりがちです。オフィスや物件の写真ではなく街の風景を絵で描くことで、業種の固さを避けながら、住まいと街という主題を静かに示せています。中央に置かれた見出しは文字間を広くとった3行組みで、背景の淡い部分に重ねられているため、イラストに埋もれずに読み取れます。相談したあとの実感を表す「よかった」という一語だけを淡いブルーに変え、色で強弱を付けている点も細やかです。
濃いブルーは要点だけに使われています
画面の大半は白と淡い水色ですが、英字のセクション名、ボタンの枠線と文字、リストのチェックマークには、はっきりとしたブルーが置かれています。使いどころを絞っているからこそ、視線はまず英字の見出しへ向かい、続いて説明文、最後にボタンへと自然に落ちていきます。
本文の文字色は黒ではなく、やや青みを含んだ濃いグレーでそろえられています。白地とのコントラストが強すぎないため、説明が長くなる場面でも目が疲れにくくなっています。文字そのものは控えめな大きさですが、行間をゆったり取ることで読みやすさを確保しています。
悩みを先に見せる情報設計になっています
会社の紹介よりも先に、来訪者が抱えている状況を並べているのが、このサイトの構成上の特徴です。自分の悩みが書かれているかどうかで読み進めるかを判断できるため、読み手を迷わせずに本題へ運べます。ここでは、その導入部分と、各セクションに共通する見出しの体裁を取り上げます。
チェックマーク付きの帯が悩みを一覧にしています
ファーストビューの下には、お知らせを一行で示す横長の帯が挟まれ、その先に問いかけの形をした見出しが置かれています。見出しの下には英字の小さなラベルが短い横線を左右に従えて添えられ、日本語と英字を組にする体裁がここから始まります。
悩みのリストは、左端に濃いブルーのチェックマークを収めた水色の四角、その右に淡いブルーの細長い面を置いた横長の帯で、同じ形が縦に4つ並びます。空き家や空き地の行き先、売るか運用するかの迷い、相続した不動産の扱い、ほかで対応が難しいと言われた物件、相続の相談先といった内容が、いずれも短い一文で書かれています。補足は括弧に入れて二行目へ落としてあるので、ひと目で読み取れる情報量に抑えられています。
英字ラベルと日本語の小見出しを組にして現在地を示しています
ABOUT US、MENU、VOICE、STAFF、FAQ、ACCESSという英字の見出しは、字間を広げたブルーの文字で大きく置かれ、その下に小さなグレーの日本語が添えられています。英字が目印、日本語が意味の説明という役割分担が明確なので、拾い読みをしても現在地を見失いません。
MENU、VOICE、STAFF、FAQでは、英字の見出しの左右から画面の端まで細い横罫が伸びていて、話題の切り替わりが線で示されます。一方でABOUT USとACCESSは左揃えで置かれており、中央揃えのセクションと交互に現れる並びが、縦に長いページの単調さを抑えています。
写真と余白の配置が縦に長いページにリズムを生んでいます
トップページは相応の縦の長さがありますが、要素の並べ方に変化を付けることで、読み進める負担が抑えられています。写真の逃がし方、カードの作り、ボタンの繰り返しという三つの点から見ていきます。
画面の端まで写真を逃がして非対称に置いています
悩みのリストの下には、大きな写真が2枚続きます。1枚目は木製の家の模型を両手で囲む場面で、画面の左端まで届き、右側に余白を残しています。2枚目は打ち合わせの場面で、今度は右端まで抜けて左側に余白ができています。
中央揃えの要素が続くページの中で、写真だけが左右にずれて配置されているため、スクロールに緩急が生まれます。写真そのものも、人物の表情や手元に寄った柔らかい光のものが選ばれていて、イラストの色調と衝突していません。
3枚のカードは同じ作りでそろえられています
サポートメニューを案内するセクションでは、写真を使ったカードが3枚横に並びます。どのカードも、写真の上に半透明のブルーを重ね、内側に細い白線の枠を回し、中央へ白抜きの文字を載せるという同じ作りで統一されています。
作りをそろえたうえで写真だけを変えているため、並んだ選択肢が対等に見えます。カードの中の文字は見出しと短い説明の二段構成にとどめられ、詳しい内容は個別のページに預けられているので、トップページ側は全体像の把握に徹しています。
角丸のボタンが各セクションの出口をそろえています
セクションの終わりには、白地に細いブルーの枠線を回し、ブルーの太字を入れた角丸のボタンが一つずつ中央に置かれます。当社について、サポートメニューを見る、お客様の声、スタッフ、よくある質問と、いずれも同じ形、同じ位置で現れます。
形と位置を固定すると、読み手は区切りまで来たら中央にボタンがあるという規則を早い段階で覚えます。ボタンの前後には広い余白が確保されていて、押す対象が一つだけであることが視覚的にも伝わります。文字リンクを本文中に散らさず、次の一歩を一か所へ集約した判断が、ページ全体の回遊しやすさにつながっています。
問い合わせの入口をページの上下に置いています
相談を受け付けるサイトとして、連絡手段の見せ方には特に手が入っています。ページの先頭と末尾の両方に入口を用意しているため、途中で読むのをやめた方も、最後まで読んだ方も、同じように問い合わせへ進めます。ここでは、ヘッダー、フッター手前の枠、所在地の示し方を順に見ていきます。
ヘッダーはメニューより連絡手段を前に出しています
画面の上部は白い帯で、左端には建物と樹木を線で描いたイラストに手書き風の文字を合わせたロゴが置かれています。右側にはLINEとメールの二つのブロックが色を変えて並び、その右端に三本線のメニューアイコンがあります。
ページ名を文字で横に並べる一般的なグローバルナビゲーションではなく、連絡手段を先に見せる構成です。閲覧中は常に上部が視野に入るため、読み終える前に相談したくなった方でも、探し回らずに窓口へたどり着けます。
フッターの手前で3つの手段を横一列に並べています
ページの終わりには、電話、メール、LINEの枠が同じ幅で横に並びます。中央のメールの枠だけ濃いめのブルーで塗られ、両側は淡いブルーなので、三つを並列に見せながらも視線の起点がはっきりします。
それぞれの枠には円形のアイコンと大きめの文字が入り、電話番号は数字の間隔を広げて読み取りやすく組まれています。その下には、淡いブルーの帯にページ名を並べたテキストのメニューが続き、さらに下へLINEのアイコンとプライバシーポリシーへのリンク、著作権の表示がまとめられています。
所在地は文字情報を絞って示しています
ACCESSのセクションは左揃えで、住所と最寄り駅からの所要時間が短い行で並べられています。事務所があるのは愛知県名古屋市東区矢田4-23-42 アークレジデンス大曽根101で、大曽根駅から徒歩10分、矢田駅から徒歩4分という目安が添えられています。
地図を大きく埋め込む代わりに、地図のアイコンを添えた小ぶりな角丸のボタンで地図サービスへ促す作りです。必要な方だけが地図を開ける形にしてあり、縦に長いページの末尾を軽く保つ効果も生まれています。
名古屋で不動産や相続の相談先を探す人に向けた情報の並べ方を読み解きます
デザインの良し悪しは、掲載されている情報の並べ方と切り離せません。ここでは、サイトから確認できる取り扱いの広さと、初めて訪れた方が疑問を解消していく順序について触れます。
扱う対象の広さがメニューのページで示されています
サイトには、空き家や空き地、相続した不動産、再建築ができない土地や事故物件といった、扱いの難しい不動産にも向き合う姿勢が書かれています。サポートメニューのページを開くと、一棟の収益物件やオーナーチェンジ、リースバック、区分マンション、戸建て、土地といった対象が挙げられていて、想定している物件の幅が読み取れます。
あわせて、弁護士や税理士、司法書士、建築士などと連携しながら案件に当たる体制についても説明されています。権利関係が複雑な相談では窓口が分かれがちですが、こうした連携の記述が会社紹介の中に置かれていることで、どこまで相談してよいのかを判断しやすくなっています。
疑問が生まれる順にセクションが並んでいます
ページは、悩みの提示から始まり、会社の考え方、サポートの種類、利用した方の声、対応する担当者、よくある質問、所在地という順に進みます。相談先を探している方の関心は、自分の状況に対応してもらえるのか、どういう会社なのか、誰が話を聞いてくれるのか、という順に移っていくため、この並びは素直に読めます。
不動産の売却や空き家の扱いを考え始めた段階では、何をどこから相談すればよいのか分からないまま情報を集める方も少なくありません。だからこそ、扱う対象、相談の進み方、事務所の場所、連絡手段といった基本の情報を一つのページで順に確認できるかどうかが、サイトの使い勝手を左右します。トップページで全体像をつかみ、詳細は個別ページで読む形に整理したこの構成は、同じ課題を抱えるサイトを設計するときの手本になります。
配色と導線で相談のしやすさを伝えている不動産会社のサイトです
株式会社Ap.9のサイトは、水色と白でそろえた配色、虹の架かる街並みのイラスト、悩みを一覧にしたチェックリスト、そして同じ形で繰り返される角丸のボタンによって、専門的な相談の入口を軽くしているコーポレートサイトです。装飾を足すのではなく、色と余白と反復で読みやすさを組み立てている点に見どころがあります。
英字ラベルと日本語を組にした見出し、左揃えと中央揃えを交互に使う並び、画面の端まで逃がした写真といった手法は、情報量が多くなりがちな会社紹介のサイトにも応用できます。連絡手段をページの上下へ置き、途中で読むのをやめた方にも入口を残している設計も、相談を受け付けるサイトとして参考になります。
色の重なりや余白の取り方、スクロールに合わせた見え方は、実際の画面で確かめるといっそう分かりやすくなります。名古屋で不動産のリースバックを含む相談に向き合う株式会社Ap.9の公式サイトもあわせてご覧ください。
