Navy Deep
ヒーロー・濃色面
#071B31
--re-navy-deep
DESIGN TEMPLATE LIBRARY
デザインテンプレート一覧
raftel REAL ESTATEの固定ページ制作で再利用できる、基本スタイルとコンポーネントの見本をまとめています。
- GLOBAL SCALE
- 120%
- CONTENT WIDTH
- MAX 1200px
- STYLE
- NAVY / GOLD
20 EDITABLE PAGE DESIGNS
Gutenbergで編集できる、20のページ。
それぞれ独立した固定ページです。見出し・写真・カラム・表・FAQなど、WordPress標準ブロックで構成しています。
各ページはデザインの見本です。掲載写真はイメージであり、販売物件や取引実績を示すものではありません。
DESIGN 01 / コーポレート
余白と写真のスプリット
ネイビーの導入、写真との二分割、三つの方針で構成。
DESIGN 02 / ブランド
街を望むフルスクリーン
カバーブロックと横長の写真で、世界観を大きく伝える。
DESIGN 03 / ストーリー
想いを読むエディトリアル
細い左カラムと読み物の本文。文章を主役にした構成。
DESIGN 04 / 事業一覧
サービスの非対称グリッド
大小のパネルを組み合わせ、事業への入口を一覧化。
DESIGN 05 / サービス詳細
写真を交互に置く事業紹介
写真と説明を左右交互に配置。縦の流れで理解を促す。
DESIGN 06 / 収益不動産
指標で整理する投資ガイド
大きな数字、四つの検討項目、比較表で情報を明快に。
DESIGN 07 / 売却相談
売却の道筋を示すタイムライン
見出しを左に固定した構図と、縦に連なる工程。
DESIGN 08 / 購入相談
暮らしを描くフォトギャラリー
横長写真と三枚のイメージ。生活の視点から条件を整理。
DESIGN 09 / オーナー向け
管理業務を整理するマトリクス
写真付き導入と、日常・定期・将来の業務表を組み合わせ。
DESIGN 10 / 法人相談
法人の課題から選ぶソリューション
強い文字組みと二列の課題カード、整理用テーブル。
DESIGN 11 / 資産活用
価値をつなぐリユースストーリー
大きな景観写真と、余白のある三つのストーリー。
DESIGN 12 / 資産承継
継承に寄り添うソフトトーン
生成りの背景と落ち着いた写真、段階的な案内とFAQ。
DESIGN 13 / エリア検討
エリアを読むローカルガイド
街の写真と周辺環境チェックリスト。物件紹介とは分離。
DESIGN 14 / ご利用案内
相談の流れを可視化するステップ
中央揃えの導入と、読み順の明確な工程・準備情報。
DESIGN 15 / よくある質問
探しやすいカテゴリー別FAQ
目次と開閉式の詳細ブロック。キーボードで操作可能。
DESIGN 16 / 意思決定
選択肢を並べる比較ガイド
売却・保有・活用を表とカードで比較する情報型。
DESIGN 17 / 会社案内
企業情報のミニマルプロフィール
企業名を大きく扱い、会社概要を読みやすい表に整理。
DESIGN 18 / 理念
言葉で伝えるブランドマニフェスト
大きな日本語と罫線を軸にした、写真に頼らない構成。
DESIGN 19 / 情報発信
読み物を束ねるナレッジハブ
特集風の大きな導線と、テーマごとの読み物カード。
DESIGN 20 / お問い合わせ
対話へつなぐコンタクト
余白のある一文と、公式窓口への明確なアクション。
FOUNDATION
基本スタイル
濃紺を土台に、ゴールドを限定的なアクセントとして使用します。余白と細い罫線で情報を整理し、上質さと読みやすさを両立します。
Primary
見出し・主要ボタン
#22364F
--re-primary
Secondary
補助的な濃色表現
#445A73
--re-secondary
Accent Gold
英字・アイコン・強調
#C8A86B
--re-gold
Gold Text
明色面の小見出し
#8A6A32
--re-gold-text
Background
ページ背景
#F8F9FB
--re-background
Surface
カード・明色面
#FFFFFF
--re-surface
Main Text
本文
#333333
--re-text
Sub Text
補足・説明
#666666
--re-subtext
Border
罫線・区切り
#E6E8EC
--re-border
Muted Surface
交互のセクション背景
#F7F6F3
--re-muted
Strong Border
フォームの入力境界
#D7DBE1
--re-border-strong
Danger
必須表示・エラー
#9B3F3F
--re-danger
ENGLISH / BRAND
raftel Real Estate
Cormorant Garamondに近いセリフ体で、英字見出しやブランド表現に使用します。
JAPANESE / HEADING
価値を未来へつなぐ。
明朝系の書体と広めの字間で、落ち着きと信頼感を表現します。
JAPANESE / BODY & UI
資産価値の向上を支援します。
本文や操作要素には、視認性の高いゴシック系の書体を使用します。
HEADINGS & ACTIONS
見出し・ボタン
英字の小見出し、日本語の主見出し、簡潔な本文を一組として使用します。操作要素は役割を絞り、優先度を色と枠線で示します。
CARDS
カード
用途に応じて情報量と背景色を切り替えます。写真は比率を揃えて切り抜き、タイトル・説明文・価格はHTMLテキストで表示します。
特徴・強み
アイコンと短い説明で、サービスの価値を端的に伝えるパターンです。
安心のサポート
要点を3件程度に絞り、同じ情報密度で横並びに配置します。
将来を見据えた提案
ゴールドのアイコンと細い罫線で、落ち着いた強調を加えます。
SERVICE CARD
収益不動産事業
投資用不動産の売買から運用まで、資産価値を見据えて支援します。
売買・仲介事業
居住用・事業用不動産の売買と仲介を丁寧にサポートします。
PROPERTY CARD
12,800万円
35,000万円
CONTENT LAYOUTS
レイアウト
写真と文章を組み合わせる基本パターンです。PCでは左右に配置し、モバイルでは画像、見出し、本文、導線の順に縦積みします。
TEXT / IMAGE
情報の流れに合わせて左右を入れ替える
同一ページで交互に配置する場合も、画像比率と文章の開始位置を揃えます。装飾を増やさず、余白と罫線でセクションを区切ります。
- 画像を引き伸ばさない
- 見出し階層を維持する
- モバイルでは自然な読み順にする
INFORMATION & FORM
情報・フォーム
会社概要や物件概要などの定型情報、補足案内、入力フォームを同じ文字組みと罫線で整理します。
INFORMATION TABLE
| 会社名 | raftel REAL ESTATE株式会社 |
|---|---|
| 所在地 | 〒110-0005 東京都台東区上野5-15-14 |
| 事業内容 | 不動産売買・仲介・管理・コンサルティング |
| 営業時間 | 平日 9:00 - 18:00 |
FORM ELEMENTS
CONTACT
不動産に関するご相談はこちら
売却・購入・管理・資産活用について、専門スタッフが丁寧にお伺いします。