企業サイトのデモ（製造業）｜使用フレーム・パーツをすべて公開

<< デモ一覧に戻る

企業サイトのデモ

このページでは、Frames CMS の製品版で実際に作った企業サイトをご紹介します。製造業（精密部品メーカー）を想定した、6ページ構成のコーポレートサイトです。
使っているフレーム（デザインの枠）1種類とパーツ13種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かるので、ご自身でサイトを作るときの参考にしていただけます。
このデモは、管理画面の操作だけで作っています。HTMLもCSSも1行も書いていません。パーツを選んで、文章と写真を入れただけです。

このデモを見る（別ウィンドウ）

まずは全体像から
このデモの構成

6つのページで構成しています。すべて管理画面から作れるもので、HTMLを書いた箇所はひとつもありません。

ホーム

会社の第一印象を決めるページ。実績の数字、事業内容、選ばれる理由、加工実績の写真、依頼の流れ、お知らせ、問い合わせへの誘導までを1ページにまとめています。

事業内容

3つの事業を、写真を左右交互に配置しながら紹介。保有設備の一覧表と、よくあるご質問（開閉式）も置いています。

選ばれる理由

強みを3つ、番号付きの縦型ステップで見せるページ。最後に問い合わせへのボタンを2つ並べています。

会社概要

会社情報の表、創業から現在までの沿革（タイムライン）、地図の埋め込み。企業サイトに必要なものが一通り入っています。

お知らせ

記事を追加すると、一覧ページと詳細ページが自動で作られます。トップページには最新3件が自動で表示されます。

お問い合わせ

入力項目を自由に作れるフォーム。送信内容はメール通知と管理画面の受信箱の両方で受け取れます。

デザインの土台
使っているフレーム

このデモで使っているフレームは 「biz64-red（斜めカット1枚ビジュアル）」 です。

フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では20種類以上から選べます。

ここがFrames CMSの一番の特徴なのですが、フレームを切り替えても、ページの中身は一切変わりません。会社概要も、沿革も、お知らせも、そのまま残ります。変わるのは見た目の枠だけです。

「和風にしたい」「もっと落ち着いた雰囲気に」と思ったとき、作り直す必要がありません。管理画面でフレームを選び直すだけで、同じ内容のまま印象が変わります。

このデモでは、色を1つだけ変えています

biz64-red の標準のアクセント色は紫ですが、製造業のサイトに合わせて濃紺に変更しました。変更したのは管理画面の「デザイン → テーマカラー」で、カラーピッカーから色を選んだだけです。

変えられるのは、メインカラー・アクセントカラー・薄い色（差し色）・背景色・文字色の5つ。フレームを選んだあとで、御社のコーポレートカラーに寄せることができます。

なお、その下にはテーマCSSを直接編集できる欄もあります。余白や角の丸み、フォントサイズなど、色以外も細かく調整したい方向けです（CSSの知識がある方向けの機能なので、通常はカラーピッカーだけで十分です）。

なお、変えた色だけが保存される仕組みになっています。あとから別のフレームに切り替えても、変更していない色はそのフレーム本来の配色が生きます。前のフレームの色を引きずって雰囲気が壊れる、ということが起きません。

色を変えた場合は、飾りも入れ替えると統一感が出ます

biz64-red には、トップページの左上にうっすら大きく出る飾りが入っています。標準では、フレーム本来の赤を10%の薄さで塗った六角形です。

アクセントカラーを濃紺に変えたので、この飾りだけが赤いまま残って浮いてしまいました。そこで、同じ薄さ（10%）の濃紺で、歯車の絵に差し替えています。

フレームごとに固有の設定を持っているものがあり、それも管理画面から差し替えられます。「このフレームだけの飾り」を、自分の素材に置き換えられるということです。「使わない」にすることもできます（工務店のデモは、その方法で飾りを消しています）。

差し替える画像を作るときのコツ。この飾りは、CSSの側で薄くしているわけではありません。画像そのものを薄く作る必要があります。ふつうの不透明なイラストをそのまま入れると、色が濃く出すぎて本文が読みにくくなります。背景を透明にした上で、絵の部分も10%程度まで薄くしたPNGを用意してください。
もう1点。この飾りは画面の左と上にはみ出す形で置かれます。絵の中心に主役を置くと切れてしまうので、左上が切れても成立する絵を選んでください。

20種類以上のフレームを見る

使用したパーツ

セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。

ホーム

セクション	使ったパーツ	Free版
リード文	基本セット（見出し＋本文＋画像）
数字で見る当社	実績カウンター（数字）
事業内容	カラムリスト（画像・見出し・本文）
選ばれる3つの理由	特徴・サービス（アイコン3列）
加工実績	横スクロールギャラリー（スクロール連動）
ご依頼の流れ	ステップ案内（横4列・アイコン）
お知らせ	お知らせ一覧（自動）
お問い合わせへの誘導	CTAセクション（背景写真）

事業内容

セクション	使ったパーツ	Free版
3つの事業の紹介	汎用レイアウト（画像＋テキスト・配置選択）
主な設備	多列テーブル（自由な列数）
よくあるご質問	よくある質問（開閉）
問い合わせボタン	ボタン（単体）

選ばれる理由・会社概要

セクション	使ったパーツ	Free版
3つの強み	ステップ案内（縦型・番号つき）
ボタン2つ並べ	CTAセクション（ボタン横並び）
会社概要の表	表（項目と内容）
沿革	沿革・年表（タイムライン）
地図	埋め込み（地図・YouTubeなど）

全13種類のパーツのうち、9種類は製品版でのみ使えるものです。Free（無料版）でも同じ構成を作ろうとすることはできますが、数字カウンター・アイコン3列・横スクロールギャラリー・ステップ案内・タイムライン・多列テーブル・CTAセクションは入っていないため、見え方はかなり変わります。製品版では約50種類のパーツが使えます。

パーツの一覧を見る

ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、ご購入後にお問い合わせください。

このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。

作るときの参考に
企業サイトで迷いやすいところ

このデモを作るときに考えたことを、いくつか書いておきます。

トップページに何を載せればいいか分からない: 会社サイトを訪れる方は、「何をしている会社か」「信用できるか」「どう問い合わせるか」の3つを知りたくて来ています。
このデモでは、①1行で何の会社か伝える → ②数字で実績を示す → ③事業内容 → ④選ばれる理由 → ⑤実績の写真 → ⑥依頼の流れ → ⑦問い合わせ、という順に並べました。上から読んでいくと、疑問が順番に解けていく並びを意識しています。
写真が用意できない: 企業サイトで一番困るのが写真です。このデモでは、写真がなくても成立するパーツを意図的に混ぜています。数字カウンター・アイコン3列・タイムライン・多列テーブルは、写真を1枚も使いません。
どうしても写真が足りないときは、これらのパーツで組み立てると、スカスカに見えずに済みます。
ページ数はどれくらい必要？: このデモは6ページです。中小企業のコーポレートサイトなら、この6つがあれば足ります。足りないと感じたら「採用情報」「よくあるご質問」を足すくらいで十分です。
ページを増やすより、トップページを充実させる方が効果的なことが多いです。訪問者の多くはトップしか見ないためです。
お知らせを更新し続ける自信がない: 更新が止まったお知らせは、かえって印象が悪くなります。無理に載せる必要はありません。
このデモではトップに最新3件を出していますが、記事を登録しなければ何も表示されないので、お知らせを使わない構成にもできます。その場合はパーツを外すだけです。
スマホでの見え方が心配: すべてのパーツが、画面の幅に合わせて自動的に並び替わります。スマホ用に別のページを作る必要はありません。3列のカードは1列に、横並びのボタンは縦積みに、表は横スクロールに切り替わります。

この構成で作れるサイト
製造業以外にも

このデモは精密部品メーカーを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。

建設・工務店／設備工事／運送・物流／印刷／食品加工／専門商社／士業事務所／人材サービスなど、「事業内容」「強み」「実績」「会社概要」を伝えたい会社であれば、そのまま当てはまります。

業種によって変えたほうがよいのは、「加工実績」のセクションくらいです。施工事例、導入事例、取扱商品など、御社が見せたいものに置き換えてください。パーツはそのまま使えます。

まずは無料で試せます
Free（無料版）のご案内

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。

無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。