建築家ポートフォリオのWebサイトテンプレート
良い建築家ポートフォリオのWebサイトテンプレートは、スタジオの実績をわかりやすく見せ、プロセスを伝え、適切な顧客が簡単に連絡できるようにするべきです。多くの事務所にとって、サイトに必要なのは1つの主要なアクションです。それは、プロジェクト、相談、またはスタジオ見学に関する本気の問い合わせです。以下のテンプレートは、Moremadeで1クリックで実際に編集可能なサイトを構築し、プレビュー、チャットによる文章やレイアウトの変更、必要ならコードの書き出しまで行えます。
建築スタジオのサイトで訪問者が知りたいこと
多くの訪問者は、いくつかの実務的な疑問にすばやく答えを出したいと考えています。
- このスタジオはどのようなプロジェクトを手がけているのか
- 自分の予算、規模、建物用途に合う仕事なのか
- 誰が事務所を率いていて、どのような進め方なのか
- どう連絡すればよく、その後はどうなるのか
そのため、サイトでは完成済みプロジェクトを早い段階で見せ、仕事の内容を十分に判断できる情報を載せる必要があります。抽象的な説明ばかりのトップページよりも、プロジェクトの種類、所在地、範囲、そして強いビジュアルが並ぶ明確な一覧のほうが役立ちます。
建築分野では特に、信頼感は抑制と明快さから生まれます。すっきりしたナビゲーション、読みやすいプロジェクトページ、簡潔な説明のほうが、情報を詰め込みすぎたマーケティング文よりも効果的です。
含めるべきページとセクション
しっかりした建築スタジオのサイトには、通常、少数のページがあり、それぞれが特定の役割を担います。
- ホーム: 短いポジショニング、選定プロジェクト、事務所の概要、問い合わせCTA
- プロジェクト: 住宅、商業、インテリア、宿泊、公共建築などで絞り込める、または分類されたポートフォリオ
- 個別プロジェクトページ: 写真、必要に応じて図面、所在地、面積、竣工年、提供サービス、短いデザイン要約
- About: スタジオのストーリー、代表者やチーム紹介、アプローチ、協力者、受賞歴や掲載実績があれば記載
- Process / Services: 実現可能性調査、基本設計、計画、インテリア、施工支援、相談
- Contact: 問い合わせフォーム、メール、電話、事務所住所、地図、返信目安
スタジオに明確な専門分野があるなら、それに特化したランディングセクションを追加しましょう。たとえば、町家リノベーション、オフィス改修、海辺の住宅などです。そうすると、適切な顧客に対してわかりやすさが高まります。
この業種に合うコピーと写真のコツ
建築サイトは、画像の質とプロジェクトの見せ方で成否が決まります。近い写真を大量に並べるより、少数でも良質な写真を使いましょう。
各プロジェクトには、顧客や協力者が実際に確認する情報を載せます。
- プロジェクト種別
- 所在地
- 延床面積または規模
- ステータスまたは竣工年
- 提供したサービス
- 設計上の課題と対応を説明する短い段落
コピーは具体的にしましょう。大きな主張ではなく、制約、要望、素材、計画条件、採光、動線、サステナビリティへの配慮、既存建物をどう再生したかを説明します。
写真は、トーンとサイズを揃えることが重要です。引きの写真、主要な内観、1〜2枚のディテール写真を入れましょう。図面、平面、模型が仕事の理解に役立つなら、選択的に掲載します。すべての画像には、アクセシビリティと検索のために有用なaltテキストを付けてください。
追加すると役立つ機能
適切な機能はスタジオの働き方によって異なりますが、よく使われるものがいくつかあります。
- 問い合わせフォーム: プロジェクト種別、所在地、スケジュール、予算感、簡単な要望を取得
- 地図: スタジオ訪問や地域での信頼感を重視する場合に便利
- メール連携: Resend または SendGrid で問い合わせを送信
- 決済: 有料相談、初回相談、前金制サービスを提供する場合は、設定した価格で Stripe チェックアウトを追加可能
- データベースとファイル管理: Supabase でサインイン、保存済み問い合わせ、顧客資料のアップロードをサポート可能
初期段階の相談サービスを提供しているなら、シンプルな相談フローがうまく機能します。つまり、サービス説明、固定料金、支払い、その後に問い合わせ詳細、という流れです。そうでない場合は、無理にオンライン予約へ誘導せず、主なアクションを連絡に絞るほうがよいでしょう。
Moremade で公開する方法
Moremade では、まず自然な言葉でサイト内容を説明します。AIエージェントが実際の React と Tailwind のコードとしてWebサイトを生成し、ライブプレビューで確認できます。
その後は、チャットでサイトを変更できます。ビジュアルインスペクターで要素をクリックして編集したり、コードビューを開いてより直接的に作業することも可能です。バージョン履歴は有料プランで利用できます。
準備ができたら、yourname.moremade.ai の無料サブドメインに1クリックで公開できます。有料プランではカスタムドメインを接続でき、ドメインを Moremade 内で購入することもできます。いつでも、完全なソースをZIPとして書き出すか、GitHubへプッシュできます。
公開前のチェックリスト
公開前に、基本を確認しましょう。
- すべての仮のプロジェクト名、日付、所在地を置き換える
- すべてのページで連絡先が正しいか確認する
- 問い合わせフォームとメール送信をテストする
- 画像を圧縮して、プロジェクトページの表示速度を適切に保つ
- ホーム、プロジェクト、連絡先ページのページタイトルとメタディスクリプションを書く
- プロジェクト画像にaltテキストを追加する
- モバイルでの余白、画像の切り抜き、ナビゲーションを確認する
- カスタムドメインを使う場合は設定を見直す
- 支払いを受ける場合は、Stripe の価格とチェックアウトリンクを確認する
SEOの基本として、各プロジェクトページには明確なタイトル、短い説明文、読みやすいURLが必要です。重要なプロジェクト情報を画像の中だけに入れないようにしましょう。
よくある質問
Moremade でこのサイトを構築・運用すると、費用はいくらですか？
Moremade には無料プランがあり、$0 で30日ごとに10 Build Units、moremade.ai サブドメインへの公開、ZIP書き出しが含まれます。利用量は Build Units で計測され、最初のサイト構築は約8 units、ちょっとした編集は約1 unit です。有料プランは Standard: $17/月（年払い）、または月額 $20 からで、30日ごとに100 Build Units、カスタムドメイン対応、非公開プロジェクトのホスティング、バージョン履歴が利用できます。
建築スタジオのサイトで自分のドメインは使えますか？
はい。まずは無料の `yourname.moremade.ai` サブドメインで1クリック公開できます。有料プランではカスタムドメインを接続できます。ドメインは Moremade 内で購入することもできます。
あとから自分でサイトを編集できますか？
はい。チャットで変更したり、ビジュアルインスペクターで要素を指定して編集したり、コードビューで直接作業したりできます。サイトは実際の React + Tailwind コードとして生成され、完全なソースをZIPとして書き出すか、GitHub にプッシュできます。
基本的なSEOにも適していますか？
はい。コンテンツを適切に構成すれば可能です。建築スタジオの場合は、明確なプロジェクトページ、説明的なページタイトル、簡潔なメタデータ、読みやすい見出し、画像のaltテキスト、見つけやすい連絡先情報が重要です。Moremade では編集可能なサイトを作れるので、最初の構築後に文章やページ構成をさらに整えられます。
相談サービスを追加したり、サイトで決済を受けたりできますか？
はい、スタジオの販売方法に合うなら可能です。Moremade には、設定した価格でチェックアウトできる Stripe 連携機能があります。これは有料相談、初回セッション、前金の受け取りに向いています。一般的なプロジェクト問い合わせには、問い合わせフォームを主なアクションにするほうが適しています。