ホーム
〇〇市の建築設計事務所。住宅・店舗の設計と監理。
<< デモ一覧に戻る
建築設計事務所のデモ
- このページでは、Frames CMS の製品版で実際に作った建築設計事務所のサイトをご紹介します。住宅と店舗の設計・監理をする、建築設計事務所を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、工務店向けのフレームの緑のメインカラーをチャコールに、アクセントを銅色に変えています。メイン画像は、スライドショーから静止画1枚にしました。
まずは全体像から
このデモの構成
5つのページで構成しています。トップで考え方・作品・設計の流れ・所長あいさつまでを見せ、「作品」と「設計の流れ」のページで、依頼する前の不安をなくす構成です。
01
02
作品
これまでの作品。
03
設計の流れ
ご相談から完成まで。
04
お知らせ
さんぷる建築設計事務所からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「komuten1（ヘッダーに電話番号・メニューに英語表記）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ヘッダーの右に電話番号と受付時間が入り、メニューは日本語と英語の2段で並ぶフレームです。メニューで「ボタン風に表示」にした項目は、帯の右端にボタンとして入ります。
フレームの見本から変えたところ
管理画面の「デザイン → テーマカラー」で、メインカラーを緑からチャコールに、アクセントカラーをオレンジから銅色に、薄い色（差し色）を少しグレーがかった生成りにしています。「トップの大きな画像 → メイン画像のタイプ」は「静止画」にして、作品の写真1枚にキャッチを重ねました。色を抑えると、写真の建物が主役になります。
作品は「ピックアップ」と「写真の入口」
トップは大きな写真1枚と小さな写真2枚で最近の作品を1つ紹介し、その下で住宅・店舗・改修の3つを、横幅いっぱいの写真のリンクにしています。作品のページは、サムネイルを押すと大きな写真が切り替わるギャラリーと、作品ごとの概要です。
所長あいさつで、人柄を伝える
横長レイアウト（テキスト＋写真）に、設計で大事にしていることを、所長の言葉で書いています。設計事務所は「誰が設計するか」で選ばれることが多いので、作品と同じくらい大切なセクションです。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。フッターがチャコールの背景なので、「フッター用ロゴ（任意）」に白いロゴを入れ、ヘッダーは色つきのロゴ、と2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「komuten1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
工務店
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 10年後の暮らしまで、一緒に考えます。 | 基本セット（見出し＋本文＋画像） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| 大切にしていること | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 最近の作品 | ピックアップギャラリー（大1枚＋小2枚） | |
| 住宅・店舗・改修 | オーバーレイ（画像リンク・横並び） | |
| 設計の流れ | ステップ案内（横4列・アイコン） | |
| 画像（1枚） | 画像（1枚） | |
| 今週の花 | 横長レイアウト（テキスト＋写真） | |
| 無料相談への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
作品
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 作品 | サムネイルギャラリー（クリックで大画像切替） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 作品の概要 | カラムリスト（画像・見出し・本文） |
設計の流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 設計の流れ | 沿革・年表（タイムライン） | |
| 設計料の目安 | 表（項目と内容） | |
| よくあるご質問 | FAQ（クリックで開閉） |
全16種類のパーツのうち、11種類は製品版でのみ使えるものです。ピックアップギャラリーやオーバーレイ（画像リンク・横並び）、タイムラインは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
設計事務所のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 設計料は載せたほうがいいですか
- 「工事費の〇%」の目安だけでも載せると、相談のハードルが下がります。このデモでは、住宅・店舗・リノベーション・初回のご相談を表にまとめました。
- 作品の写真は、何枚くらい必要ですか
- 1つの作品につき、外観と室内の3枚あれば十分です。このデモのトップでも、外観1枚とリビング・玄関の2枚で、1つの作品を紹介しています。
- お施主さまの家を載せてもいいですか
- 必ず許可を取ってからにします。場所は「〇〇市」くらいまでにして、番地や、外から家が特定できる写真は避けるのが安心です。
この構成で作れるサイト
設計事務所以外にも
このデモは建築設計事務所を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
工務店／リフォーム会社／インテリアデザイン事務所／造園会社／家具の工房／デザイナーのポートフォリオ など、「作品の写真で、仕事を見せたい」ところであれば、そのまま当てはまります。
ヘッダーの電話番号と受付時間は、「サイト基本設定」の「電話番号（任意）」と「受付時間（任意・ヘッダーに表示）」に入れたものが出ます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る