ホーム
〇〇県のシステム開発会社。中小企業の業務システム、Webアプリ、保守・運用。
<< デモ一覧に戻る
IT企業のデモ
- このページでは、Frames CMS の製品版で実際に作ったIT企業のサイトをご紹介します。中小企業の業務システムを開発する、システム開発会社を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ14種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、フレームの標準の赤から、メインカラーだけを青に変えています。ロゴの箱やボタンのグラデーションが、まとめて青になります。
まずは全体像から
このデモの構成
6つのページで構成しています。「何ができる会社か」「どう進めるか」「どんな会社か」「採用」の4つが、会社のサイトの基本の型です。
01
02
サービス
業務システムの開発、Webアプリ、保守・運用。開発の進め方。
03
会社概要
会社の情報とアクセス。
04
採用情報
募集している職種と、働き方。
05
お知らせ
SAMPLE TECH からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「biz59（箱型ロゴ・帯ヘッダー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
上部に細い帯のヘッダー、左上にメインカラーのグラデーションの箱でロゴが入るフレームです。見出しは、下線が左から伸びる演出つきです。
メインカラーを1色変えただけ
管理画面の「デザイン → テーマカラー」で、メインカラーだけを青にしています。ロゴの箱・ボタン・アイコンの色が、まとめて変わります。1色変えるだけで、業種に合った印象になります。
導入前と導入後は「吹き出し」で
お客さまの困りごとと、導入後の変化を、吹き出しのビフォーアフターで並べています。数字を入れると、説得力が増します。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴは青い箱の中に入るので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「biz59」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
運送会社
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 「いつもの仕事」を、システムに。 | 基本セット（見出し＋本文＋画像） | |
| 選ばれる理由 | 選ばれる理由（左に見出し＋アイコンのカード） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| 導入前と導入後 | ビフォーアフター（吹き出し） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お知らせ | お知らせ一覧（自動） |
サービス／会社概要
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| サービス | 汎用レイアウト（画像＋テキスト・配置選択） | |
| 開発の進め方 | ステップ（手順） | |
| 会社概要 | 表（項目と内容） | |
| 画像（1枚） | 画像（1枚） | |
| 区切り線 | 区切り線・余白 | |
| アクセス | 埋め込み（YouTube・地図・iframe） |
採用情報
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 採用情報 | コース・メニュー一覧 | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| お問い合わせへの誘導 | CTA（誘導ボックス） |
全14種類のパーツのうち、8種類は製品版でのみ使えるものです。選ばれる理由や吹き出しのビフォーアフター、パララックス背景は製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
会社のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- お客さまの社名を出してもいいですか
- 必ず許可を取ってからにします。出せない場合は「〇〇業・従業員80名」のように、業種と規模だけでも十分に伝わります。
- 採用ページは、別のサイトにしたほうがいいですか
- 募集が数件なら、同じサイトに1ページで十分です。このデモでは、職種を「コース・メニュー一覧」で並べ、給与も載せました。
- 料金は載せたほうがいいですか
- 受託開発は案件ごとに変わるので、「無料相談から」と書いておくのが一般的です。
この構成で作れるサイト
IT企業以外にも
このデモはIT企業を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
一般企業／製造業／建設会社／コンサルティング会社／士業の事務所／人材会社 など、「信頼感のある、会社らしいサイト」であれば、そのまま当てはまります。
メインカラーを変えるだけで、業種に合わせた印象に変えられます。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る