ホーム
〇〇県の運送会社。一般貨物・倉庫・引越し。
<< デモ一覧に戻る
運送会社のデモ
- このページでは、Frames CMS の製品版で実際に作った運送会社のサイトをご紹介します。一般貨物・倉庫・引越しを手がけ、ドライバーを募集している運送会社を想定した、6ページ構成です。
- 使っているフレーム（デザインの枠）1種類とパーツ22種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
- このデモは、上部の黒い帯のヘッダーと、左上の赤い箱のロゴが特徴のフレームを、見本と同じ赤と黒の配色で使っています。
まずは全体像から
このデモの構成
6つのページで構成しています。「何ができる会社か」「どんな会社か」「採用」の3つに、ページを分けています。
01
02
サービス
一般貨物・倉庫・引越し。
03
会社案内
会社概要と、安全への取り組み。
04
採用情報
ドライバー・倉庫スタッフの募集。
05
お知らせ
さんぷる運輸からのお知らせ一覧です。
06
お問い合わせ
入力項目を自由に作れるフォーム。
デザインの土台
使っているフレーム
このデモで使っているフレームは 「biz59（箱型ロゴ・帯ヘッダー）」 です。
フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。
上部に細い黒い帯のヘッダー、左上にメインカラーのグラデーションの箱でロゴが入るフレームです。メイン画像は全幅のスライドショーで、見出しは下線が左から伸びる演出つきです。
トップで「会社の顔」と「仕事」を両方見せる
「ようこそ」の文章で会社の考えを伝えたあと、サービスを左に見出し＋アイコンのカードで、トラックの台数や無事故の日数を数字が動いて増えていく実績カウンターで見せています。カウンターは「列の並べ方」を「4列」、「スマホでの列数」を「2列」にしました。
写真を大きく使うブロックで、安全と歴史を伝える
毎朝の点検と倉庫は、横幅いっぱいの写真に文字とボタンを重ねるオーバーレイで、左右を入れ替えて2段に。創業のころの写真は横幅いっぱいレイアウト（テキスト＋写真）で、50年の歩みを短い文章で添えました。
採用への入口を、トップに置く
ドライバー募集は、テキストと写真の横長レイアウトでトップから採用情報のページへつなぎます。採用情報のページでは、スケジュールで1日の流れを、コース・メニュー一覧で3つの職種と給与を、お客様の声のパーツで先輩の声を並べています。
ロゴは「画像」で入れています
このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴは赤い箱の中に入るので、白いロゴを使っています。
ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。
ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。
同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります
Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「biz59」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。
IT企業
このデモの作り方
使用したパーツ
セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。
ホーム
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| 荷物の向こうに、待っている人がいる。 | 基本セット（見出し＋本文＋画像） | |
| 無料相談への誘導 | パララックス背景（写真／動画） | |
| サービス | 選ばれる理由（左に見出し＋アイコンのカード） | |
| 数字で見る さんぷる運輸 | 実績カウンター（数字） | |
| 安全への取り組み・倉庫 | オーバーレイ（写真＋テキスト＋ボタン） | |
| 会社のあゆみ | 横幅いっぱいレイアウト（テキスト＋写真） | |
| 今週の花 | 横長レイアウト（テキスト＋写真） | |
| サムネイル横スライド（写真の流れ） | サムネイル横スライド（写真の流れ） | |
| お問い合わせへの誘導 | CTAセクション（背景写真） | |
| お知らせ | お知らせ一覧（自動） |
サービス／会社案内
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| サービス | 横並び（写真＋文章） | |
| 料金の目安（税込） | 表（項目と内容） | |
| よくあるご質問 | FAQ（Q&Aマーク付き・カード型） | |
| 会社概要 | 表（項目と内容） | |
| 画像（1枚） | 画像（1枚） | |
| 安全への取り組み | 写真に文章が回り込む横長ブロック | |
| 沿革 | 沿革・年表（タイムライン） | |
| アクセス | アクセス（案内＋地図） |
採用情報
| セクション | 使ったパーツ | Free版 |
|---|---|---|
| ドライバーの1日 | スケジュール・1日の流れ | |
| 横スクロールギャラリー（スクロール連動） | 横スクロールギャラリー（スクロール連動） | |
| 募集職種 | コース・メニュー一覧 | |
| 先輩の声 | お客様の声（星評価） | |
| 職場見学のご案内 | CTA（誘導ボックス） |
全22種類のパーツのうち、19種類は製品版でのみ使えるものです。実績カウンターやオーバーレイ（写真＋テキスト＋ボタン）、スケジュールは製品版のパーツです。製品版では70種類以上のパーツが使えます。
ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です
製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。
このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。
作るときの参考に
運送会社のサイトで迷いやすいところ
このデモを作るときに考えたことを、いくつか書いておきます。
- 採用ページには、何を載せればいいですか
- 1日の流れ・職種と給与・先輩の声・見学の申し込みがあれば十分です。働く姿が思い浮かぶと、応募のハードルが下がります。
- 安全への取り組みは、載せたほうがいいですか
- 載せたほうが信頼につながります。このデモでは、トップの大きな写真のブロックと、会社案内の写真に文章が回り込むブロックの2か所で紹介しました。
- 料金は載せたほうがいいですか
- 荷物や距離で変わる場合は、「〇〇円〜」の目安だけで構いません。このデモでは、サービスのページに目安の表を置き、「見積もりは無料」とよくあるご質問に書きました。
この構成で作れるサイト
運送会社以外にも
このデモは運送会社を想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。
倉庫業／引越し業者／建設会社／製造業／設備工事会社／警備会社 など、「仕事の内容と数字を見せて、人も募集したい」会社であれば、そのまま当てはまります。
メインカラーを変えると、ロゴの箱やボタン・アイコンの色がまとめて変わります。
まずは無料で試せます
Free（無料版）のご案内
Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。
無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。
<< デモ一覧に戻る