プラグイン

kViewer

メーカー

トヨクモ株式会社

【kViewer】テンプレートと色調設定でセンス良く！サイト公開・情報共有を効率化する方法

2025.11.24

kintoneのデータを外部公開できる連携サービスkViewerはドメイン単位の契約で無制限にビューを作成できるため、社内外での情報共有やウェブサイトへの掲載に最適です。

本記事では、リストビューやカードビュー、Myページビューなど多彩なビューの種類と、それぞれの活用シーンを詳しく解説しています。さらに、テンプレートギャラリーやデザインテンプレートを活用した効率的なビュー作成方法、ウェブサイトへの埋め込み手順、配色ツールを使ったデザインのコツまで、実践的なノウハウをご紹介します。

HTMLやCSSの知識がなくても、テンプレートと色調設定の工夫で魅力的なページが作れます。

なお、ペパコミ株式会社では、「kintone」を活用した業務支援を行っています。業務効率化にお悩みの方は、ぜひ以下からお気軽にご相談ください。

ペパコミ株式会社へ無料で相談する

kintoneお役立ち資料
2冊を無料配布中！

＼ kintoneを効率良く、コスパ良く活用する／

今なら
無料

LINE登録でまとめて入手！

kintoneドメイン単位だからこそ使い倒せるkViewerの使い方
1.テンプレートに応用する前に知っておきたい「kViewerのビューの種類」
2.kViewerのテンプレートを活用する方法
- テンプレートギャラリー
- デザインテンプレート
3.ウェブサイトなどにkViewerを埋め込むときの<iframe>タグの使い方
4.センスいい色の組み合わせでkViewerをもっと便利に使う
5.kViewerの活用に役立つHTMLCSSの基礎知識
「kViewerの使い方の習得」や「情報発信方法の改善」を希望する方はペパコミ株式会社へご相談ください。

kintoneドメイン単位だからこそ使い倒せるkViewerの使い方

kViewerはkintoneのデータを外部公開できる連携サービスです。kintoneドメイン単位で契約でき、無制限にビューを作成できるため、社内外での情報共有やウェブ掲載に最適です。

当記事では、次の内容をご紹介します。

kViewerのビューの種類
kViewerのテンプレートを活用する方法
ウェブサイトなどにkViewerを埋め込むときの<iframe>タグの使い方
センスいい色調でkViewerをもっと便利に使う
kViewerの活用に役立つHTMLCSSの基礎知識

なお、ペパコミ株式会社では、kintoneやプラグインを活用した伴走支援を行っています。ぜひご相談ください。

1.テンプレートに応用する前に知っておきたい「kViewerのビューの種類」

kViewerは、kintoneの連携サービスの一つで、kintone内の情報を外部公開することができます。kintoneのドメイン単位の契約で、無制限に使用できます。

ここでは、「テンプレートの前提として、必要なビュー」「デザインの工夫に活用しやすいビュー」を抜粋してご紹介します。

例1：リストビュー・テンプレートギャラリーの活用例
例2：カードビュー・デザインテンプレートの活用例
例3：Myページビュー・テンプレートギャラリーの活用例
例4：グラフビュー・ダッシュボードビュー・高度なダッシュボードビュー・単一データビュー

例1：リストビュー・テンプレートギャラリーの活用例

【特徴】

見た目	レコード一覧をリスト形式で表示。
ポイントや活用例	役員名簿、一覧、施設リスト、会員企業、シンプルなお知らせkintoneアプリの一覧画面と同じようなレイアウトです。

【テンプレートのビフォー・アフター例】

※テンプレートギャラリーにリストビューを中心としたテンプレートが数種類あります。

例2：カードビュー・デザインテンプレートの活用例

【特徴】

見た目	レコード一覧をカード形式で確認できるデザイン。
利用のポイント	一目で情報を理解できる。・画像付きの社員名簿・商品案内ページ大きな画像で情報を伝えたいときに便利です。

【テンプレートのビフォー・アフター例】

※デザインテンプレートのページに、テンプレートの種類が多くあります。

例3：Myページビュー・テンプレートギャラリーの活用例

【特徴】

見た目	マイページ
利用のポイント	社員や会員、申込者のメールアドレスや電話番号などの情報をまとめたMyページを作成することができます。

【テンプレートのビフォー・アフター例】

テンプレートギャラリーのテンプレートには、jSやcssのテンプレートがあります。

例4：グラフビュー・ダッシュボードビュー・高度なダッシュボードビュー・単一データビュー

【特徴】

グラフビュー	kintoneで作成したグラフを公開できます。
ダッシュボードビュー	複数のビューを組み合わせ、独自のダッシュボードがつくれます。
高度なグラフビュー	線グラフ・棒グラフ・円グラフなどを組み合わせたり、２軸の設定により、より高度なグラフ化できます。
単一データビュー	レコード内のフィールド値を1件のみ表示します。KPIなどの指標を見やすく共有できます。

【活用例】

グラフビュー・ダッシュボードビューは、Garoon上などにデータを載せる場合に有効です。例えば、Garoonのユーザーではあるが、kintoneユーザーでない社員も閲覧できます。

2.kViewerのテンプレートを活用する方法

KViewerのテンプレートが紹介されているサイトが２つあります。ここでは、それぞれ、操作方法をご紹介します。

・テンプレートギャラリー（参照：テンプレートギャラリーサイト）

　トヨクモ製品に活用できるテンプレートが紹介されています。

・デザインテンプレート（参照：デザインテンプレートのサイト）

　トヨクモ製品のなかでも、kViewerをサイト埋め込みする際に役立つテンプレートが紹介されています。

テンプレートギャラリー

（1）　テンプレートギャラリーサイトへアクセスし、活用したいデザインのテンプレートを選択する。

（2）CSSファイルをダウンロードする。

（3）kViewerを開き、「ビューを作成」をクリックする

（4）「リストビューから作成」を選択する

※一部のテンプレートは、「テンプレートから作成」も可能です。

（5）　必要事項を入力し、ビューを作成する。

（6）掲載するフィールドを選ぶなど、通常の設定を行う。

（7）「詳しい設定」タブを選択し、「JavaScript/CSSでカスタマイズ」をクリックし、「有効にする」を選ぶ。「ファイル選択で追加」をクリックする。

（8）ダウンロードしたファイルを選択し、「開く」をクリックして、追加する。

（9）「公開」をクリックする

【表示イメージ】

ウェブサイトのイメージに適したデザインがすぐに実現します。

※　cssファイルとJavaScriptファイルが必要なテンプレートの場合

cssファイルだけでなく、cssファイルとJavaScriptファイルの2種類のファイルが必要なテンプレートの場合は、ダウンロードしたあと、フォルダから、それぞれのファイルを取り出して、それぞれアップしましょう。

kViewer上でファイルが2種類アップされている状態になります。

なお、テンプレートの内容を書き換える必要があるときは、メモ帳やテキストエディタで書き換えられます。

デザインテンプレート

（1）　デザインテンプレートのサイトから、使用したいデザインをクリックする

（2）　kViewerのテンプレートファイルと、kintoneアプリのテンプレートファイルをダウンロードする。

（3）　kintone上で、ダウンロードしたアプリのテンプレートでアプリを作成する。

（4）「テンプレートファイルを読み込んで作成」をクリック

（5）「参照」をクリックし、ダウンロードしてある「アプリテンプレート」を選択し、「アプリを作成」をクリックする。

（6）アプリを開き、設定のアイコンから、APIトークンを生成する。

※テンプレートを初めて活用する方は、この段階で、サンプルとして、データを数件入れておくことをおすすめします。

（7）kViewerを開き、「ビューを作成」をクリックする

（8）「テンプレートから作成する」をクリックする。

（9）「ファイルを選択」し、ダウンロードしてある、kViewerのほうの「template」のファイルを選び、「基本情報の登録に進む」をクリックする。

（9）「タイトル」「アプリのURL」「APIトークン」を入力し、「ビューを作成」をクリックする。

※APIトークンは、（6）を参照。

（10)「公開」をクリックする。

※ここでは一部htmlを修正しております。

3.ウェブサイトなどにkViewerを埋め込むときの<iframe>タグの使い方

ウェブサイトなどにkViewerを埋め込む場合、html上に記述する<iframe>タグが必要です。

さっそく、埋め込みたいビューから、<iframe>タグをコピーします。

（1）埋め込みたいビューをクリックする。

（2）「ビューの概要」をクリックする。iframe用の埋め込みコードを「クリップボードにコピーする」をクリックする。

続いて、埋め込みたいウェブサイトのhtml上に貼り付けます。なお、htmlは、ウェブサイトでなくともGaroonのhtml上でも可能ですので、ここでは、Garoonのポータルに貼り付けます。

（3）ポータルの入力画面を開き、（2）でコピーした<iframe>タグを貼り付ける。

【イメージ】

4.センスいい色の組み合わせでkViewerをもっと便利に使う

kViewerには、色調を変更できる箇所がいくつかあります。

【例1】背景色

「背景色」をクリックすると、ヘッダー部分・コンテンツ部分・フッター部分の背景色が表示されます。

【例2】テーブルの背景色

「レコード一覧」をクリックし、スクロールバーを一番下に下げると、「テーブルの背景色」がでてきます。

背景はなるべく白がスタンダードですが、色の組み合わせは、ランダムに選ぶのではなく、ウェブ上の配色ツールで選んでみましょう。「配色ツール」などで検索してみてください。

なお、使いたい色の組み合わせが決まったら、カラーコード（「#」に続く6桁の英数字）をコピーして、そのまま貼り付けて使うことができます。

【イメージ】

カラーコードで色を正確に指定し、適した色の組み合わせを選定できます。

5.kViewerの活用に役立つHTMLCSSの基礎知識

上述したデザインをするうえで役立つhtmlやcssについてもご紹介します。

まず、ウェブサイトは次の言語で成り立っています。

言語の種類	役割
HTML	文章の構造のための言語
CSS	レイアウトや装飾を指定する言語

なお、テンプレートギャラリーのテンプレートでは、ヘッダーコンテンツなどには、予めHTMLも記述されています。

また、HTMLは、タグと呼ばれるものがあります。書きたい文章などを挟むことで構造ができあがります。

メジャーなものですと、次のようなものがあります。

タグ	機能や例
title	タイトル<title>ペパコミ</title>
h1～h5タグ	見出し
p	段落<p>パートナー企業です。</p>
img	画像
a	リンク<a href =”https://pepacomi.com/pluginmedia/”>プラグインメディア</a>

「kViewerの使い方の習得」や「情報発信方法の改善」を希望する方はペパコミ株式会社へご相談ください。

「自分たちだけでHTMLやCSSを調整するのは不安」という方も、テンプレート選択と色調設定の工夫で大きく印象を変えられます。

ペパコミ株式会社では、kintoneやプラグインの研修や、プラグインの知識の広さに定評があるパートナー企業です。今回、ご紹介したkViewerをはじめとした各種kintoneプラグインや連携サービスの情報を的確に収集しています。さらに、当記事の内容のように、ウェブ上の情報発信も想定しながらの伴走支援が可能です。貴社に沿ったご提案をいたしますので、お気軽にご連絡ください。

なお、ペパコミ株式会社では、「kintone」を活用した業務支援を行っています。業務効率化にお悩みの方は、ぜひ以下からお気軽にご相談ください。

ペパコミ株式会社へ無料で相談する

Contents