ホーム
ごあいさつ、定期便の3つの特徴、いま届くもの、畑のこと（土・育てる・届ける）、お客様の声、お試しセットのご案内、畑だより。
<< デモ一覧に戻る
農家の産直のデモ（野菜の定期便）
- このページでは、Frames CMS の製品版で実際に作った、農家の産直サイトをご紹介します。家族で野菜と果物を育て、定期便でお届けしている小さな農園を想定した5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ12種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- 大きなキャッチコピーの下を、縦長の写真が横にゆっくり流れ続けるフレームを使っています。一品一品を写真で見せたいお店に向いた形です。
実際に動くサイトです。コースと料金・お届けの流れ・お申し込みフォームまでご覧いただけます。
まずは全体像から
このデモの構成
5つのページで構成しています。小さな産直・通販なら、これで足ります。
01
02
コースと料金
3つのコースをカードで。地域ごとの送料も表にしています。
03
わたしたちの畑
畑の写真、園主の紹介、育て方のこだわり、収穫体験。「誰が作っているか」を見せるページです。
04
お届けの流れ
お申し込みからお届けまでのタイムラインと、よくあるご質問。
05
定期便のお申し込み
コースとお届けの間隔を選べる申し込みフォームです。触ってみてください。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「lp2（流れる画像の帯＋大きなキャッチ）」 です。
lp2 は、大きなキャッチコピーが主役で、その下を縦長の写真が横に流れ続けるフレームです。メニューは画面の広さにかかわらず、右上のボタンで開く形。伝えたいひと言がはっきりしているお店と相性がよいレイアウトです。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像は、写真が横に流れ続けます
管理画面の「メイン画像」に入れた写真が、横一列につながって、ゆっくり流れ続けます。このデモでは6枚を入れています。写真の縦横の比率がバラバラでも、同じ縦長の大きさにそろえて並びます。マウスを乗せると止まります。
キャッチコピーと英語の一行は、全部の写真で共通です。写真を何枚入れても、文字は1か所に入れるだけ。写真が少なくても帯がつながるように、自動で繰り返して並びます。
メニューの「ボタン」が、ヘッダー右上にも出ます
管理画面の「メニュー」で「ボタンにする」を選んだ項目が、ヘッダーの右上にも表示されます。このデモでは「定期便のお申し込み」をボタンにしているので、どのページを見ていても、申し込みへの入り口が目に入ります。
トップの背景に、飾りの絵
トップページの背景には、キッチン道具の線画がうっすら入っています。管理画面の「デザイン」で、自分で用意した画像に差し替えたり、使わない設定にしたりできます。
背景の飾りは、画面の横幅いっぱいに上から敷く1枚の画像です。左側はキャッチコピーと重なるので空けておき、右側に絵を置いた透明な画像（PNG・WebP）を作ると、そのまま使えます。
色は、フレームの初期状態のままです
lp2 の標準の配色は、新鮮な緑のメインカラーに、オレンジのアクセント。野菜の写真とよく合うので、このデモでは色を1つも変えていません。管理画面から色を変えれば、酒蔵や焼き菓子のお店など、別の業種の雰囲気にもなります。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「lp2」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
子ども英会話教室
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ごあいさつ | 基本セット（見出し＋本文＋画像） | |
| 定期便の3つの特徴 | 特徴・サービス（アイコン3列） | |
| いま届くもの | 枠がゆらゆら動く写真のカード | |
| 畑のこと | 見出しが追いかけてくるブロック | |
| お客様の声 | お客様の声（星評価） | |
| お試しセットのご案内 | CTA（大きなアイコン＋テキスト＋ボタン） | |
| 畑だより | 手入力の簡易版お知らせ |
コースと料金／わたしたちの畑／お届けの流れ
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| コース3つ・園主とこだわり | カラムリスト（画像・見出し・本文） | |
| 送料 | 多列テーブル（自由な列数） | |
| 畑の写真 | 画像（1枚） | |
| お申し込みからお届けまで | 沿革・年表（タイムライン） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） |
全12種類のパーツのうち、10種類は製品版でのみ使えるものです。パーツの数を絞っても、写真とキャッチが主役のフレームなら、十分に見ごたえのあるサイトになります。製品版では70種類以上のパーツが使えます。
「畑だより」は、ラベル付きのお知らせです
トップの「畑だより」は、手入力の簡易版お知らせのデザインを「ラベル付き」にしたものです。日付の横に「収穫」「体験」などの色付きラベルが出るので、何のお知らせかがひと目で分かります。
記事をためて一覧ページや記事ごとのページも作りたい場合は、お知らせ機能（お知らせ一覧のパーツ）を使います。数件だけをトップに載せておくなら、こちらの手入力のパーツで十分です。
パーツの小ワザ
① 「カラムリスト」を、コースと園主の紹介に使っています。
どちらも写真＋見出し＋短い説明の形です。「列の並べ方」を3列にそろえているので、ページが変わってもサイト全体がまとまって見えます。
② コースのカードに「申し込む」ボタンを付けています。
カラムリストは、カードごとにボタンを付けられます。読んだその場で申し込みへ進めるので、迷わせません。
③ トップの「畑のこと」は、左の見出しが画面に残るブロックです。
「見出しが追いかけてくるブロック」は、右の「土・育てる・届ける」を読み進めるあいだ、そのブロックが終わるまで左の見出しが画面に残ります（画面幅900px以上）。狭い画面では見出しが上・本文が下の縦並びになります。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
産直・通販のサイトで迷いやすいところ
- ネットショップの機能は付いていますか
- カート機能はありません。このデモでは、フォームでコースとお届けの間隔を伺い、お支払い方法はメールでご案内する形にしています。少量の定期便なら、この形で十分に回ります。
すでに BASE や STORES などのネットショップをお持ちなら、メニューのボタンをそのお店へのリンクにすることもできます。 - 写真は何枚用意すればいいですか
- メイン画像は4枚以上あると、帯がきれいに流れます。縦長の写真がいちばん合いますが、横長の写真でも自動で縦長に切り抜いて並びます。
野菜だけでなく、畑の景色や、収穫している手元の写真を混ぜると、「誰がどこで作っているか」が伝わります。 - 送料は書いたほうがいいですか
- 書いたほうがいいです。通販でいちばん多い質問が「送料はいくら？」です。
このデモのように地域ごとの表にしておくと、問い合わせが減ります。 - 季節で中身が変わる場合は？
- トップの「いま届くもの」を、季節ごとに写真と説明だけ差し替えてください。パーツはそのままで大丈夫です。
「畑だより」で収穫の様子を知らせておくと、次の箱を楽しみにしてもらえます。 - スマホでの見え方が心配
- すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。3列のカードは1列に、送料の表は横スクロールに切り替わります。
ヘッダー右上の申し込みボタンは、スマホでも出たままです。
この構成で作れるサイト
農家の産直以外にも
このデモは野菜の定期便を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
果樹園／小さな酒蔵・ワイナリー／焼き菓子やパンの通販／コーヒーの焙煎所／陶芸・ハンドメイド作家／花の生産者 など、「作っている人の顔と、商品の写真で選ばれる」お店であれば、そのまま当てはまります。
業種によって変えたほうがよいのは、色と「わたしたちの畑」の中身くらいです。色は管理画面から変えられるので、商品に合う色にしてみてください。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る