ホーム
〇〇市のモデル事務所。広告・雑誌・ショーのモデル。
<< デモ一覧に戻る
モデル事務所のデモ
- このページでは、Frames CMS の製品版で実際に作ったモデル事務所のサイトをご紹介します。広告・雑誌・ショーのモデルが所属する、モデル事務所を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、カードが重なって流れる3Dのスライドを、所属モデルの紹介に使っています。フレームの見本のグレージュの背景を黒に、メインカラーを白に変えました。
まずは全体像から
このデモの構成
5つのページで構成しています。トップで事務所の考え方・部門・特徴・所属モデルを見せ、「所属モデル」と「オーディション」で、仕事の依頼と応募の両方の入口を作っています。
01
02
所属モデル
所属モデルのプロフィール。
03
オーディション
オーディションのご案内。
04
お知らせ
SAMPLE MODELS からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「3d1-stack（3Dカルーセル・カードスタック）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
写真がカードのように重なり、1枚ずつめくれていくスライドのフレームです（写真3枚以上で回ります）。各写真の見出し・説明・ボタンは写真の下に出ます。上の大きな見出しとキャッチも差し替えられます。
フレームの見本から変えたところ
管理画面の「デザイン → テーマカラー」で、背景色を黒に、文字色とメインカラーを白に近いグレーに、アクセントカラーをダスティピンクからゴールドに、薄い色（差し色）を黒に近いグレーにしています。「デザイン → このフレーム専用の素材」では、上の大きな見出しを「ひとりひとりの、顔がある。」、キャッチを「Faces, not types.」、キャッチの下の小さな一行を「MODELS — 所属モデル」に書き換えました。
スライドのキャッチが、モデルの名前になる
メイン画像の1枚ごとの「キャッチコピー」「サブテキスト」「ボタン」が、写真の下のキャプションになります。このデモでは「AOI／身長 168cm・広告／雑誌」のように、キャッチコピーにモデルの名前、サブテキストに身長と仕事の種類を入れ、5人をめくって見られるようにしました。
部門は「写真の上に文字」のリンクで
WOMEN・MEN・BEAUTY の3つを、オーバーレイ（画像リンク・横並び）で横幅いっぱいに並べています。マウスを乗せると暗い幕が下がって写真がはっきり見えるので、モデル事務所らしい見せ方になります。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ヘッダーは黒い背景なので白いロゴを、フッターはメインカラー（白に近いグレー）の背景になるので、「フッター用ロゴ（任意）」に濃い色のロゴを入れ、2枚を使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 小さな事務所だから、ひとりずつ。 | 基本セット（見出し＋本文＋画像） | |
| 流れる英文字 | 横流れテキスト（マーキー） | |
| WOMEN・MEN・BEAUTY | オーバーレイ（画像リンク・横並び） | |
| 事務所の特徴 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| マネージャーのこと | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 所属モデル | スタッフ紹介 | |
| 数字で見る SAMPLE MODELS | 実績カウンター（数字） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| オーディションへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
所属モデル
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 所属モデル | スタッフ紹介 | |
| お仕事のご依頼への誘導 | CTA（大きなアイコン＋テキスト＋ボタン） |
オーディション
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 今週の花 | 横長レイアウト（テキスト＋写真） | |
| 画像（1枚） | 画像（1枚） | |
| 所属までの流れ | 沿革・年表（タイムライン） | |
| よくあるご質問 | FAQ（クリックで開閉） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。オーバーレイ（画像リンク・横並び）や横流れテキスト（マーキー）、スタッフ紹介は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
モデル事務所のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 所属モデルのプロフィールは、どこまで載せればいいですか
- 名前・身長・得意な仕事の3つで十分です。このデモでは、スタッフ紹介のパーツの「役職」の欄に身長、「名前（英字）」の欄に仕事の種類を入れ、4列で並べました。
- オーディションの応募は、フォームで受けられますか
- 受けられます。お問い合わせフォームは入力項目を自由に作れるので、年齢や身長の欄を足しておくと、選考がスムーズです。送ってほしい写真は、このデモのように流れの1つめで「顔と全身の2枚」と案内しておきます。
- 未成年のモデルの写真を載せてもいいですか
- 必ず保護者の同意を取ってからにします。オーディションの対象年齢も、このデモのように「15歳から30歳まで」とはっきり書いておくと、問い合わせの行き違いが減ります。
この構成で作れるサイト
モデル事務所以外にも
このデモはモデル事務所を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
芸能事務所／俳優・タレントの事務所／ヘアメイク・スタイリストの事務所／写真家のポートフォリオ／ファッションブランド／ダンスチーム など、「人を、写真で1人ずつ見せたい」ところであれば、そのまま当てはまります。
カードスタックのスライドは、写真3枚以上で回ります。このデモでは5枚入れています。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る