ホーム
ポートレート写真家。プロフィール写真・家族写真・ブランド写真の出張撮影。
<< デモ一覧に戻る
フォトグラファーのデモ
- このページでは、Frames CMS の製品版で実際に作ったフォトグラファーのサイトをご紹介します。プロフィール写真・家族写真・ブランド写真の出張撮影をしている、ポートレート写真家を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ18種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、白い背景の真ん中に写真を1枚だけ置き、左下に小さなキャッチを重ねるフレームを使っています。余白が多いので、写真がいちばん目立ちます。
まずは全体像から
このデモの構成
6つのページで構成しています。「作品」「撮影プラン」「プロフィール」の3つがあれば、撮影の依頼までの流れが作れます。
01
02
作品
これまでに撮影したポートレート。
03
撮影プラン
撮影プランと料金、撮影の流れ。
04
プロフィール
写真家のプロフィール。
05
お知らせ
SAMPLE PHOTO からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「portfolio1（中央配置1枚ビジュアル・左下テキスト）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
ロゴとメニューがヘッダーの真ん中に並び、その下に余白をとって写真1枚を置くフレームです。キャッチは、写真の左下の小さな箱に入ります。メイン画像にボタンは出ません。スマホでは、キャッチは写真の下に並びます。
トップは、写真をたっぷり見せる流れに
「ようこそ」の文章のあとに、大きな写真1枚と小さな写真2枚を組み合わせるピックアップギャラリー、段違いに並んだ写真がゆっくり横に流れるパーツ、画面の左右いっぱいに広がる写真の「撮影で大切にしていること」と、写真の大きいセクションを続けました。文章は短くして、写真を主役にしています。
撮影の種類と、お客さまの声は横スクロール
プロフィール・長寿のお祝い・ブランド写真などは手で動かす横スクロールのカード、お客さまの声は文字だけの横スクロールにしています。数が増えても、縦に長くなりません。そのあいだに、撮影の流れをアイコン付きの横4列のステップで入れました。
作品のページから、撮影プランへ
作品のページはギャラリーで一覧にし、その下に「人物」「家族」「お店」の写真に文字を重ねたリンクを並べました。気に入った写真を見た人が、そのまま撮影プランへ進めます。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。背景が白いので、色つきのロゴを使っています。ロゴは、ヘッダーの真ん中に出ます。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「portfolio1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
カフェ
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| うまく笑えなくても、大丈夫です。 | 基本セット（見出し＋本文＋画像） | |
| 作品 | ピックアップギャラリー（大1枚＋小2枚） | |
| 作品（流れる写真） | サムネイル横スライド（写真の流れ） | |
| 撮影で大切にしていること | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 撮影の種類 | 横スクロールのカード（手で動かす） | |
| 撮影の流れ | ステップ案内（横4列・アイコン） | |
| お客さまの声 | お客様の声（横スクロール・文字だけ） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| ご予約への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
作品／撮影プラン
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 作品 | ギャラリー（複数画像） | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 撮影のご相談 | オーバーレイ（画像リンク・横並び） | |
| 撮影プラン | メニュー名と価格（2列） | |
| よくあるご質問 | FAQ（クリックで開閉）（デザイン：枠つき・開くとアイコンが×に） |
プロフィール／お知らせ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| プロフィール | コラージュ（写真2枚＋テキスト） | |
| 画像（1枚） | 画像（1枚） | |
| 経歴 | 表（項目と内容） | |
| お知らせ | お知らせ一覧（自動） |
全18種類のパーツのうち、14種類は製品版でのみ使えるものです。ピックアップギャラリーやサムネイル横スライド、横スクロールのカードは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
写真家のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 作品は、何枚くらい載せればいいですか
- 6〜12枚くらいが見やすいです。たくさん載せるより、「こういう写真が撮れます」と伝わる写真を選びます。季節ごとに入れ替えると、サイトが新しく見えます。
- モデルさんやお客さまの写真を載せてもいいですか
- 必ずご本人の許可を取ったものだけにします。このデモの作品のページにも、「掲載は、ご本人の許可をいただいた写真だけです。」と一文を入れました。
- 出張費や追加料金は、どう書けばいいですか
- このデモのように、撮影プランと同じ「メニュー名と価格」の中に、ヘアメイクや市外の出張費も並べておくと、合計の目安が分かりやすくなります。雨の日の扱いなどは、よくある質問にまとめました。
この構成で作れるサイト
フォトグラファー以外にも
このデモはフォトグラファーを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
イラストレーター／デザイナー／建築家／陶芸家／アトリエ／ヘアメイクアーティスト など、「作品を、余白をとって静かに見せたい」人であれば、そのまま当てはまります。
メイン画像は、白い背景によくなじむ、明るい写真がおすすめです。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る