コラボプラザ画面テンプレート ご紹介～ ページサンプル集 ～有限会社 トコシエ
V20200202

目次◆ ホームページ 適用事例一覧◆ ベーシックコース◆ セレクションコース ページテンプレート◆ デザインパターン集（豊富なバリエーション）◆ ページ本文 編集事例

All Rights Reserved Copyright, © 有限会社トコシエ 2019

コラボプラザ適用事例3コラボプラザ ホームページの適用事例です。
左記URLから、サイトにリンクできます。 https://collaboplaza.com/?eid=1319（スマホの場合は、ＱＲコードからＵＲＬジャンプできます）

All Rights Reserved Copyright, © 有限会社トコシエ 2019

適用事例

All Rights Reserved Copyright, © 有限会社トコシエ 2019

ベーシックコース

ベーシックコース
コラボプラザ・ベージックコースとは、名前の通り、最も基本的・シンプルなページ構成のホームページです。

➢ シンプル・見やすい➢ 基本的な会社情報を公開➢ スマホ対応済➢ ＳＥＯ対策済➢ 管理画面での記事情報登録

管理画面
事業内容

代表挨拶

会社概要

お問い合わせ記事情報登録

All Rights Reserved Copyright, © 有限会社トコシエ 2019

ベーシックコース

Cm_top①トップページ
会社名

メインメニュー

メイン画像

ホームページ
概要

新着情報

All Rights Reserved Copyright, © 有限会社トコシエ 2019

ベーシックコース

ED

②事業内容
事業の説明をテキストで書きます。
【ＳＥＯ対策について】検索されるページにするためのコツ

ポイント１
検索してほしい方の立場に立って
ポイント２
検索キーワードを書きだし
ポイント３
キーワードを説明文の中に何回も使う

ベーシックコース

ED

③代表挨拶
あいさつ文をテキストで書きます。
【ＳＥＯ対策について】検索されるページにするためのコツは、どのページでも同じです。
検索されるキーワードを繰り返し使うことです。
・氏名でも検索される・専門用語は、業界の方に効果的・一般の方対象の場合は、検索キーワードを工夫する・所属団体・関係団体名も、有効ベーシックコース

Cm_outline④会社概要
会社の基本情報ページです。

住所から、マップが自動表示されます。
スマホで表示すると、ナビアプリへも連携されます。

ベーシックコース

ED⑤お問い合わせお問い合わせページは、ベーシックコースでは、お問い合わせの連絡先を表示します。

セレクションコース
ページテンプレート
ベーシックコースをベースに、追加できる各種ページサンプルです。

✓ お問い合わせ
✓ 記事一覧＋記事ページ✓ チラシ情報（予約登録）✓ カレンダー／スケジュール表✓ 採用案内～履歴書エントリ✓ 会員一覧・会員紹介✓ クイズ✓ マイページ✓ オンライン試験✓ 空き照会・駐車場一覧
✓ 会報誌

QA

お問い合わせお問い合わせ画面は、（１）ベーシックコースのように、連絡先電話番号等を載せるだけの形式（２）問い合わせしたい情報を入力してもらい、メール連絡する形式があります。

お問い合わせ入力すると、企業側管理者に、メールが届く。
本人にも確認メールが届く。

ベーシックコース

メール

EL
ED

記事一覧＋記事ページ「活動報告」や「セミナー情報」などの情報を公開する場合、１つづつの記事ページに加えて、一覧表があると、全体が把握しやすいページ構成となる。コラボプラザでは、各「記事」を管理画面から登録すると、一覧表ペー
ジは、自動的に生成される。
記事ページ
記事一覧

一覧表は、日付の新しい記事順に表示され、１０明細づつページングされる。

Tirashi_el

チラシ情報（予約登録）

新聞折り込みチラシをPDFにしてアップ（予約）する。
指定した日付になると、チラシ情報が入れ替わる（拡張）All Rights Reserved Copyright, © 有限会社トコシエ 2019

EC

カレンダー／スケジュール表
１ヶ月カレンダー

クリックすると詳細ページへ

All Rights Reserved Copyright, © 有限会社トコシエ 2019

RS

採用案内～履歴書エントリ
履歴書エントリホームページから、採用申し込みとして、履歴書情報をエントリする。
送信すると、本人に確認メールが届く。

メール

企業側管理者に、メールが届く。
管理画面から、照会して、ＰＤＦとして印刷できる。

All Rights Reserved Copyright, © 有限会社トコシエ 2019

会員一覧・会員紹介
会員一覧

CKCom_tkbn1

会員紹介ページ
１社／１ページ

トップページに、会員１社をランダムに１社紹介

All Rights Reserved Copyright, © 有限会社トコシエ 2019

KT

クイズ

クイズ・検定問題等を、ホームページから、実施できる。
【設問 → 回答・解説】
× ｎ問
回答・解説ページ

設問ページ

All Rights Reserved Copyright, © 有限会社トコシエ 2012

mypage

マイページ

マイページ
ログイン画面

マイページ
メニュー画面All Rights Reserved Copyright, © 有限会社トコシエ 2019

kentei

オンライン試験
オンライン試験とは、試験会場での試験でなく、どこからでも、Ｗｅｂ試験ができるシステムです。受験の受け付け後、試験開始すると、１問づつ[設問]→[回答]を繰り返します。

設問画面例

回答画面例
All Rights Reserved Copyright, © 有限会社トコシエ 2019

PK

空き照会・駐車場一覧
近くの駐車場一覧

駐車場の管理番号を入力する

その駐車場の空き状況表示

All Rights Reserved Copyright, © 有限会社トコシエ 2019

pdf

会報誌

ホームページにアップした各種記事情報から、ＰＤＦ定型フォーマットに編集してダウンロードできる。（個別開発）

ホームページ情報から、会報誌PDFを自動生成

All Rights Reserved Copyright, © 有限会社トコシエ 2019

デザインパターン集
ページデザインに関する選択パターン集です。

✓ ページレイアウト（基本構成）✓ スマホ対応✓ カラープラン✓ ヘッダ部✓ トップページデザイン✓ お問い合わせ 拡張✓ サイドメニューデザイン

ページレイアウト（基本構成）
ページレイアウトは、下記の基本構成に準拠します。
ヘッダ部
メインメニュー部

左サイド

メイン部

右サイ
ド

フッタ部
サイドメニューは、左右どちらかになります。
また、ベーシックコースは、サイドメニューは使えません。

All Rights Reserved Copyright, © 有限会社トコシエ 2019

スマホ対応ベーシックコース

ホームページをスマホで表示すると、スマホの横サイズに合わせたレイアウトになります。

All Rights Reserved Copyright, © 有限会社トコシエ 2019

カラープランベーシックコース

セレクションコースでは、カラーデザインできます。

デザイン
拡張

All Rights Reserved Copyright, © 有限会社トコシエ 2019

ヘッダ部

左側（会社名）（１）会社名をテキストで表示

右側（連絡先）ベーシックコース（２）会社名＋アルファ（デザイン）（１）表示なし（ブランク）

ベーシックコース（２）任意のテキストを設定（３）顧客保有のロゴを利用

All Rights Reserved Copyright, © 有限会社トコシエ 2019

トップページ メイン画像（１）ベーシックコース
会社名と画像１枚（顧客提供）を組み合わせたデザイン。
背景画像は、標準４つから選択（２）個別にデザイン
ホームページの目的を視覚的に表現できるようなイメージを新規にデザインする。

All Rights Reserved Copyright, © 有限会社トコシエ 2019

メイン画像のスライダー対応
スライダー対応とは、メイン画像複数枚を、順次入れ替え表示させて、クリックしたとき、該当のページにジャンプできる機能です。

All Rights Reserved Copyright, © 有限会社トコシエ 2019

トップページ 新着情報
トップページに表示させる「新着情報」の表示フォーマットとして、２種類から選択できます。
ベーシックコース
新着情報①：
シンプル（１行タイトル形式）

新着情報②：
画像付き（画像＋日付＋３行）

新着情報①

新着情報②

All Rights Reserved Copyright, © 有限会社トコシエ 2019

トップページ メインバナー
メインバナーとは、トップページに、特に見てほしいページの概要を、【画像＋タイトル＋概要説明】のフォーマットで、１行に３列形式で表示させます。
スマホ表示：１行３列

スマホ拡張：１行１列（見やすい縦スクロール）

All Rights Reserved Copyright, © 有限会社トコシエ 2019

スマホ アイコン常駐
スマホでホームページ表示したとき、次にすぐアクションしてほしいボタンを、アイコンにして、常に画面表示します。
縦スクロールしても、アイコンは画面上移動せず、そのまま表示されます。

例
電話発信画面に遷移「アクセス」ページへ
予約情報入力ページへ
Facebookサイトへ
All Rights Reserved Copyright, © 有限会社トコシエ 2019

お問い合わせ入力 拡張
お問い合わせ入力画面は、下記の拡張ができます。
（１）入力項目の追加（２）ヘッダ部・フッタ部テキストの変更（３）条件によるメール本文変更

ヘッダ部テキスト

これらを組み合わせることで、予約・申込機能として有効です。

入力項目の追加

フッタ部テキスト
All Rights Reserved Copyright, © 有限会社トコシエ 2019

記事一覧レイアウト
記事一覧レイアウト＜標準＞
画像＋タイトル＋「詳しく」ボタン

記事一覧レイアウト＜拡張＞
１記事１行（３列情報）

All Rights Reserved Copyright, © 有限会社トコシエ 2019

サイドメニュー デザイン
（１）バナー画像（デザイン重視）
サイドメニューそれぞれに、バナー画像をデザインする（２）テキスト＋背景色
サイドメニューそれぞれには、テキストでメニュー名称を設定する。
背景色は、通常、全体のカラーデザインした色となる。
（別途、１色選択可能）

All Rights Reserved Copyright, © 有限会社トコシエ 2019

会員限定ページ
会員限定ページとは、通常は公開せず、ログイン「合言葉」を入力したときだけ、表示させることができるページを設定できます。
ログインしたときのサイドメニュー

All Rights Reserved Copyright, © 有限会社トコシエ 2019

ページ本文 編集事例集✓ 画像を imgタグで組み込み✓ 他サイトへのリンク✓ ボタン形状のリンク（コラボdiv）✓ 資料のダウンロード✓ 表形式例：３列一覧表（コラボdiv）✓ サブヘッダ等
記事情報の「本文」エリアにリッチな編集をする場合の事例集です。
資料は、「記事本文 編集事例集」に纏めてあります。

コラボプラザ ホームページ 画面テンプレートご紹介
当資料についてのお問い合わせ先
有限会社トコシエ担当）榎戸重記（えのきどしげのり）
携帯電話 ０９０－３８０２－２６７０

お問い合わせＦＯＲＭは、右記ＱＲコードお気軽にお問い合わせください。

All Rights Reserved Copyright, © 有限会社トコシエ 2019