ホーム
〇〇県のWeb制作会社。ホームページ制作・運用・更新代行。
<< デモ一覧に戻る
Web制作会社のデモ
- このページでは、Frames CMS の製品版で実際に作ったWeb制作会社のサイトをご紹介します。ホームページの制作と、公開後の運用・更新代行をしている、小さなWeb制作会社を想定した、5ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ16種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、画面いっぱいの写真がゆっくり拡大するスライドに、文字を載せず、白いロゴだけを重ねています。トップページは、選ばれる理由・サービス・制作実績・チーム・制作の流れ・お客さまの声と、相談の前に知りたいことを順に並べました。
まずは全体像から
このデモの構成
5つのページで構成しています。「何を頼めるか」「いくらかかるか」の2つを、それぞれ1ページにしています。トップページでは、どんな人が作るのかまで伝わるようにしました。
01
02
サービス
ホームページ制作・運用・更新代行。
03
料金
制作の料金と、制作の流れ。
04
お知らせ
SAMPLE WEB WORKS からのお知らせ一覧です。
05
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「frame4-slide（ファーストビュー全体がズーム演出スライド。）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
メイン画像が画面いっぱいのスライドショーで、写真がゆっくり拡大する演出つきのフレームです。キャッチやボタンは表示せず、ロゴだけが写真の上に乗ります。メニューは、広い画面でも右上のボタンで開く形です。
サービスは「オーバーレイ」
写真の上に、見出し・小見出し・説明文・ボタンを重ねるパーツです。2つ目のブロックは「テキストの位置」を右寄せにして、左右を交互にしています。写真だけのトップの少し下で、何の会社かが大きく伝わります。
チームは「テキスト＋写真2枚（角丸と丸）」
事務所の写真に、打ち合わせの丸い写真を重ねるパーツで、「顔の見える、5人のチーム」を紹介しています。制作実績は、カードが自動で横に流れるパーツで5件を並べました。
制作の流れは、枠つきのステップを「4列」で
ヒアリングから公開までの4つのステップを、アイコンと番号の入った枠つきのステップで並べ、「列の並べ方」を「4列」にして1行に収めています。背景に色を付けているのは、「選ばれる理由」と「制作の流れ」の2つだけです。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。トップの写真の上と、濃い色のフッターでは白いロゴを使いたいので、「メイン画像の上に重ねるロゴ（任意）」と「フッター用ロゴ（任意）」に白いロゴを入れ、ほかのページのヘッダーは色つきのロゴ、と使い分けています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 作って、育てる。 | 基本セット（見出し＋本文＋画像） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 選ばれる理由 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| サービスへの入口 | オーバーレイ（写真＋テキスト＋ボタン） | |
| 制作実績 | 自動スライド（写真の横流れ） | |
| チームのこと | テキスト＋写真2枚（角丸と丸） | |
| 制作の流れ | 特徴・ステップ（アイコン＋番号・枠つき） | |
| お客さまの声 | お客様の声（星評価） | |
| 画像（1枚） | 画像（1枚） | |
| 無料相談への誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
サービス／料金
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| サービス | 写真に文章が回り込む横長ブロック | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） | |
| 料金 | 料金表（プラン比較） | |
| オプション | 表（項目と内容） |
全16種類のパーツのうち、13種類は製品版でのみ使えるものです。オーバーレイや自動スライド、特徴・ステップ（アイコン＋番号・枠つき）は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
制作会社のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 制作実績に、お客さまのサイト名を出してもいいですか
- 必ず許可を取ってからにします。このデモでは「〇〇クリニック」「〇〇工務店」のように、名前と業種のラベルだけを自動スライドで並べました。出せない場合は、業種だけでも十分に伝わります。
- 料金は載せたほうがいいですか
- 「〇〇円〜」の目安だけでも、載せたほうが相談につながります。このデモでは、制作の2プランと月額の運用をプラン比較表にまとめ、その下にオプションの料金を表で添えました。
- スタッフの写真は、載せたほうがいいですか
- 小さな制作会社ほど、「誰が作るのか」が依頼の決め手になります。このデモでは、事務所と打ち合わせの写真に、チームの人数と担当の分け方を添えました。
この構成で作れるサイト
Web制作会社以外にも
このデモはWeb制作会社を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
デザイン事務所／広告制作会社／映像制作／印刷会社／システム開発／コンサルティング会社 など、「サービスが2〜3つあって、料金と実績を見せたい」会社であれば、そのまま当てはまります。
メイン画像の写真は、3枚以上入れると、ゆっくり拡大しながら切り替わります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る