kintoneポータル(トップ画面)のデザインカスタマイズ方法6選!テンプレートやプラグインで変更する方法を解説

トヨクモ編集部のサムネイルアイコン トヨクモ編集部

kintoneは、誰もが簡単にアプリを作成できる便利さから、人気のあるツールです。しかし、日々の業務で使用するなかで、以下のような悩みを抱く方もいらっしゃるかもしれません。

  • 「トップページが見にくい」
  • 「必要なアプリがすぐに見つからない」
  • 「情報量が多すぎて使いにくい」

せっかくの便利なツールでも、使い方を工夫しないと逆に作業が非効率になるケースもあります。

そこで本記事では、kintoneの使い勝手を向上させ、作業効率をアップするためのkintoneポータルのデザインをカスタマイズする方法を解説します。

初期設定の見直しをはじめ、プラグインを利用した簡単な方法から、JavaScriptを用いた専門的なカスタマイズまで幅広く紹介するので、作業効率化を目指しkintoneポータルのカスタマイズを検討している方は、ぜひ参考にしてください。

なお、kintoneのトップ画面を見やすくするだけでなく、「kintoneアカウントを持たない社員や社外の人にも必要な情報を見せたい」という場合は、ポータルのカスタマイズとは別の方法が必要です。

kViewerを利用すれば、kintone内の情報をWebページとして公開し、必要な人に見せられます。さらにFormBridgeと連携すれば、Webフォームから申請レコードを追加したり、既存のレコードを編集したりできます。

kintoneを使わない人にも見せる・入力してもらう

→ kintoneアカウントを持たない人にも情報を届けるなら、kViewerを30日間無料で試す

目次

kintoneポータルについて

kintoneポータルは、kintoneのトップページにあたる画面です。使用するアプリやスペースへの移動、通知の確認など、kintoneを利用する際の入り口として使えます。

初期設定では、以下の項目が表示されています。

  • お知らせ
  • 通知
  • 未処理
  • スペース
  • アプリ

初期設定でも、さまざまな情報を一箇所で確認できます。

kintoneポータルについては、以下の記事で詳しく解説しているので参考にしてください。

関連記事:kintoneの「ポータル」とは?画面の見方・ダッシュボードの作り方

kintoneポータルのデフォルトデザインには限界がある

kintoneポータルのデフォルトデザインは、シンプルさと使いやすさを兼ね備えています。しかし、アプリの数が増えてくると、次のような課題が生じることがあります。

  • 探しているアプリを見つけるのに時間がかかる
  • 似たようなアイコンで識別が難しい
  • 目的のアプリを探すために多くのスクロールが必要
  • 画面がごちゃごちゃしており、必要な情報を見つけにくい
  • あまり使用しない項目が画面上部に表示されてしまう

また、使用感に不満はないものの、「もっと自社に合ったデザインが欲しい」と考えることもあるでしょう。

このようなとき、kintoneポータルのデザインをカスタマイズすることで、自社の業務に合わせた操作しやすい画面を作れます。

kintoneポータルのカスタマイズのよくある悩みと解決策

kintoneポータルのカスタマイズのよくある悩みと解決策は、以下のとおりです。同様の課題を抱える企業は多いでしょう。

  • よくある悩み:デフォルトのポータルだと業務が非効率になりがち
  • 解決策:ポータルを利用者の業務内容に合わせてカスタマイズする

kintoneポータルのよくある悩みと解決策について、それぞれ具体的な内容を見ていきましょう。

よくある悩み:デフォルトのポータルだと業務が非効率になりがち

kintoneの1枚目のポータルでは、表示するコンテンツの設定がドメイン単位で保存され、ユーザーごとに表示・非表示を設定することはできません。そのため、アプリ数や情報量が増えると、利用者によっては目的のアプリを探すのに手間取り、作業効率が低下する可能性があります。

たとえば、営業業務を進めているにもかかわらず、トップ画面に自分が普段使わないアプリや情報が多く並んでいると、必要なアプリを見つけにくくなるでしょう。

一方、現在のkintoneでは、スタンダードコース以上で2枚目以降のポータルを追加し、部署や目的に合わせて表示内容を分ける方法も用意されています。組織ごとに、ログイン後に最初に表示するポータルを指定することも可能です。

利用しているコースや目的に応じて、1枚目のポータルを整理するのか、複数ポータルを使い分けるのかを検討するとよいでしょう。

解決策:ポータルを利用者の業務内容に合わせてカスタマイズする

業務を効率化するためには、ポータルを利用者の業務内容に合わせてカスタマイズすることが重要です。

たとえば、特定の部署やプロジェクトごとに必要なアプリやリンクを整理し、視覚的に分かりやすく配置することで、目的の情報へアクセスするまでの手間を減らせます。トヨクモが実際に運用しているkintoneポータル(※一部モザイク加工)を例にご覧ください。

トヨクモのポータル画面

ポータルには、必要な情報だけを掲載しており、視覚的に分かりやすい配置にしています。スタンダードコース以上であれば、2枚目以降のポータルにウィジェットを配置し、営業部向け・管理部向けといった目的別のポータルを作る方法もあります。

さらに細かな表示や動作を実現したい場合は、JavaScriptやCSS、プラグインを活用する方法も選択肢です。

kintoneのポータルデザインをカスタマイズする7つの方法

kintoneのポータルデザインをカスタマイズするには、以下の7つの方法があります。

  • 設定画面からカスタマイズする
  • ポータルの名前やカバー画像、表示させたいコンテンツを変更する
  • アイコンデザインを変更する
  • JavaScriptを用いてAPIを呼び出す
  • プラグインを利用する
  • Wordを使ってkintoneポータルをカスタマイズする
  • ポータル画面を広く使う・フルサイズに近づける

小さな変更を加えたい場合や、まだkintoneに慣れていない場合は、まず設定画面を利用する方法がおすすめです。より詳細なカスタマイズが必要な場合は、JavaScriptやプラグインの利用を検討しましょう。

これらの方法について詳しく説明していきます。

設定画面からカスタマイズする

kintoneのポータルデザインを変更するもっとも簡単な方法は、kintoneの設定画面から変更することです。ポータルの設定を変更できるのは、kintoneシステム管理権限を持つユーザーまたはcybozu.com共通管理者です。

プログラミングの知識を必要とせず、標準機能の範囲で設定できます。ポータル名やカバー画像、表示するコンテンツを変更するだけでも、画面上の情報量を整理できます。

また、スタンダードコース以上では、2枚目以降のポータルにウィジェットを配置し、用途別の画面を作ることも可能です。

一方、1枚目のポータルで独自のレイアウトや動作を実現したい場合などは、標準設定だけでは対応できないケースがあります。その場合はJavaScriptやプラグインの利用を検討しましょう。

ポータルの名前やカバー画像、表示させたいコンテンツを変更する

ポータルの名前やカバー画像、表示させるコンテンツの設定が可能です。設定手順は以下のとおりです。

  1. ポータル画面右上にある「オプションボタン(3点リーダー)」をクリックし、「表示中のポータルの設定」を選択します。「ポータルの設定」をクリック
  2. 変更したい内容を選び、最後に「保存」ボタンをクリックして完了です。「保存」ボタンをクリック

1枚目のポータルでは、「お知らせ」「通知」「未処理」「スペース」「アプリ」の中から、不要なコンテンツを非表示にできます。たとえば「お知らせ」と「アプリ」を中心に使いたい場合は、それ以外を非表示にすることで、トップ画面をすっきりさせられます。

アイコンデザインを変更する

kintoneポータルのアプリアイコンなどのデザインを、より分かりやすく見やすいものに変更することで、必要な情報を見つけやすくなります。また、類似機能を持つアプリ間での差別化も、アイコンの変更によって実現できます。

アイコンを変更する手順は以下のとおりです。

  1. アプリを開いてレコードの一覧を表示します。画面右上にある歯車マークからアプリの設定画面を開きます。レコード一覧画面の「一般設定」>「アイコンと説明」の画像
  2. 「設定」からアイコンに関する項目を開き、デフォルトのアイコンを選択するか、任意のアイコン画像をアップロードします。「アイコンと説明」画面の画像
  3. 設定を保存したうえで「アプリを更新」をクリックします。「アプリを更新」ボタンの画像

似た名前のアプリが多い場合は、アイコンの色やデザインにルールを設けると、ポータル上で目的のアプリを判別しやすくなります。

JavaScriptを用いてAPIを呼び出す

kintoneポータルのデザインをより自由にカスタマイズしたい場合、JavaScriptを使用してAPIを呼び出す方法があります。JavaScriptを利用すれば、ポータルの上部に独自のコンテンツやボタンを追加するなど、標準設定より自由度の高いカスタマイズが可能です。

kintone全体にJavaScriptやCSSを適用する基本的な手順は以下のとおりです。

  1. kintoneシステム管理画面を開きます。ポータル画面内の「kintoneシステム管理画面」の画像
  2. 「JavaScript / CSSでカスタマイズ」をクリックします。画面下部の「JavaScript / CSSでカスタマイズ」の画像
  3. カスタマイズの適用範囲を選択します。すべてのユーザーへ適用する前に、kintoneのシステム管理者だけに適用し、正しく動作するか確認しましょう。「カスタマイズの適用範囲」の画像
  4. 「URL指定で追加」または「アップロードして追加」をクリックし、取り込むファイルを選択します。JavaScriptファイル・CSSファイルはそれぞれ30個まで取り込めます。取り込むファイルの選択画面の画像
  5. 最後に「保存」をクリックして完了です。「保存」ボタンの画像

なお、ライトコースではJavaScriptやCSSを使用したkintone全体のカスタマイズは利用できません。

JavaScriptを利用したカスタマイズは自由度が高い一方、HTMLやCSS、JavaScriptに関する知識が必要です。社内に対応できる人材がいない場合は、外部の専門会社へ依頼する方法もあります。

ポータル画面を広く使いたい・フルサイズに近づけたい場合

「ポータル画面の大きさを変えたい」「トップ画面をフルサイズにしたい」という場合、まず不要な標準コンテンツを非表示にし、利用できる表示領域を広げる方法を検討しましょう。

kintoneには、1枚目のポータルそのものを任意のサイズへ変更する設定項目や、既存のポータル全体をブラウザーいっぱいに拡張する専用APIは用意されていません。

一方、公式のJavaScript API「kintone.portal.getContentSpaceElement()」を使うと、ポータルのヘッダーと標準コンテンツの間にある領域を取得できます。その領域に独自のコンテンツを追加し、追加した要素を横幅100%で表示することは可能です。

たとえば、以下のようなJavaScriptを利用します。

(() => {
‘use strict’;

kintone.events.on(‘portal.show’, () => {
const space = kintone.portal.getContentSpaceElement();
if (!space || document.getElementById(‘custom-portal-wide’)) {
return;
}

const wrapper = document.createElement(‘div’);
wrapper.id = ‘custom-portal-wide’;
wrapper.innerHTML = `
<div class=”custom-portal-wide__inner”>
ここに表示したいリンクや情報を配置します
</div>
`;

space.appendChild(wrapper);
});
})();

CSSでは、追加した領域を以下のように設定します。

#custom-portal-wide,
#custom-portal-wide .custom-portal-wide__inner {
width: 100%;
box-sizing: border-box;

この例は、kintoneがAPIとして提供している領域の中で、追加したコンテンツを横幅いっぱいに表示する方法です。既存の「お知らせ」「通知」「アプリ」などを強制的にブラウザー全幅へ広げるコードではありません。

kintone内部のHTML構造や非公開のCSSクラスを直接指定して既存画面を無理にフルスクリーン化すると、kintoneのアップデートによって表示が崩れる可能性があります。公式APIで取得できる領域を使い、検証環境で動作確認してから適用しましょう。

また、「kintone.portal.getContentSpaceElement()」は、次のいずれかに当てはまる場合、要素を取得できずnullが返ります。

  • ゲストユーザーが実行したとき
  • 2枚目以降のポータル画面
  • ポータル画面以外の画面で実行したとき

そのため、ゲストユーザーにも同じ内容を見せたい場合や、2枚目以降のポータルを使っている場合は、このAPIを前提にしたカスタマイズでは目的を達成できません。標準のウィジェット機能でレイアウトを組む方法を検討してください。

なお、上記のサンプルコードは要素を取得できなかった時点で処理を中断するため、ゲストユーザーの画面でエラーが発生することはありませんが、追加したコンテンツも表示されない点にご注意ください。

参考:ポータルの上側の要素を取得する|cybozu developer network

プラグインを利用する

サードパーティ製の「ポータル内アプリ表示プラグイン」を使えば、コードを自分で書かなくても、ユーザーによって表示するアプリを切り替えたり、アプリのレコード状況によってアラートを表示したりできます。

また、ポータル画面上でアプリの一覧をポップアップ表示し、レコードを編集することも可能です。

ここでは「ポータル内アプリ表示プラグイン」を活用する手順を紹介します。

  1. TIS社の公式サイトからプラグインファイルをダウンロードします。Zipファイルは解凍不要です。TIS社公式サイトの画像
  2. ダウンロードしたZipファイルをkintoneにインストールします。プラグインファイルインストール画面の画像
  3. 空のアプリを作成し、「アプリの設定」>「プラグイン」より、先ほどインストールした「ポータル内アプリ表示プラグイン」を追加します。「プラグインの追加」の画面の画像
  4. プラグイン追加後、「設定(歯車アイコン)」をクリックしてください。「歯車」アイコンの画像
  5. それぞれのフィールドを設定します。「プラグインの設定」画面の画像
  6. 設定が終わったら、画面下部の「ファイル書き出しボタン」をクリックしましょう。ポータル画面用のJavaScriptファイルがダウンロードされます。画面下部「ファイル書き出しボタン」の画像
  7. ダウンロードしたZipファイルを展開し、kintoneシステム管理の「JavaScript / CSSでカスタマイズ」よりファイルをアップロードします。最後に左上の「保存」ボタンをクリックしてください。JavaScriptファイルアップロード画面の画像
  8. ポータル画面にボタンが表示されていたら設定は完了です。ポータル画面左上「ファイル管理」ボタンの画像

生成されたJavaScriptファイルをkintone全体へ適用する仕組みのため、本番環境へ反映する前に動作確認を行いましょう。

Wordを使ってkintoneポータルをカスタマイズする

kintoneのポータル画面にある「お知らせ」をカスタマイズすることで、頻繁に使用するアプリへアクセスしやすくして、業務効率を向上させることが可能です。今回は、Wordの表作成機能を使って、kintoneポータルにリンク集を作る方法を解説します。手順は以下のとおりです。

  1. Microsoft Wordで「挿入」タブから必要な行と列の表を作成します。Microsoft Wordの画面の画像
  2. kintoneの「お知らせ」の編集画面を開き、Wordで作成した表をコピー&ペーストで貼り付けます。kintoneの「お知らせ掲示板の編集画面」の画像
  3. ツールバーの「添付ファイル」から、表の中に入れたいアイコン画像を添付します。アイコン添付の画像
  4. アイコンを選択した状態で「リンク」をクリックし、アプリのリンク先を設定します。アイコンリンク先設定の画像

上記の方法を活用すれば、プログラミングの知識がなくても、利用頻度の高いアプリを分かりやすくまとめたポータルを作成できます。

kintoneポータルのカスタマイズにおすすめのプラグイン・連携サービス

ここではkintoneポータルのカスタマイズに役立つ、以下のようなプラグイン・連携サービスを紹介します。

  • こだわりkintoneプラグイン
  • ポータル内アプリ表示プラグイン
  • ソトバコポータル

自社で実現したいレイアウトや運用方法に合わせて選びましょう。

kintoneのおすすめ無料プラグインは、以下の記事でも紹介しています。

関連記事:【2026年最新】kintoneの無料プラグイン一覧|用途別のおすすめを紹介

こだわりkintoneプラグイン

「こだわりkintoneプラグイン」は、ポータルやスペースのレイアウトをノーコードでカスタマイズできるプラグインです。

ウィジェットをドラッグ&ドロップして配置でき、グラフやテーブル、アイコンなど、業務に必要な情報を整理して表示できます。最大10種類の画面を作成して切り替えられるほか、それぞれの画面にユーザー・組織単位でアクセス権を設定することも可能です。

たとえば、営業部向けの画面には営業関連のアプリやグラフを配置し、経営層向けの画面には全社の数値を表示するといった使い分けができます。プログラミングを行わず、標準機能より自由度の高いポータルを作りたい場合に検討しやすいプラグインです。

ポータル内アプリ表示プラグイン

「ポータル内アプリ表示プラグイン」は、ポータル画面にアプリ表示用のボタンを追加するJavaScriptを生成できるプラグインです。ユーザーによって表示するアプリを切り替えたり、アプリのレコード状況に応じてアラートを表示したりできます。

また、ポータル上のボタンから指定したアプリの一覧をポップアップ表示し、その画面から編集することも可能です。アプリを開く前に状況を確認したい場合や、よく使うアプリへアクセスする手間を減らしたい場合に活用できます。

ソトバコポータル

「ソトバコポータル」は、kintoneのポータルをノーコードで整理・カスタマイズできる連携サービスです。

主な機能は、タブによるアプリの整理やグループ化です。たとえば、部署別に必要なアプリをタブで分けたり、営業管理・顧客管理などの業務ごとにアプリをまとめたりできます。

そのほか、通知や未処理一覧、全体アナウンス、外部リンク、kintoneのグラフなどをポータル上に配置できます。タブ単位の閲覧権限にも対応しています。

2026年8月時点では、期間制限のないフリープランのほか、ライトプランは月額3,800円または年額36,000円、スタンダードプランは月額9,800円または年額108,000円です。価格はいずれも税抜で、初期費用はかかりません。

【目的別】kintoneポータルカスタマイズのおすすめ設定

kintoneポータルのカスタマイズのおすすめ設定を、以下のような目的別に紹介します。

  • ポータルのデザインをおしゃれにしたい
  • 業務効率を向上させるポータルにしたい
  • チームごとに異なる情報を表示したい

それぞれ具体的な内容を確認しましょう。

ポータルのデザインをおしゃれにしたい

kintoneポータルのデザインをおしゃれにするためには、見た目だけでなく、直感的に操作できるレイアウトを意識することが重要です。

たとえば、会社のブランドカラーに合わせて画像やアイコンのデザインを統一すると、画面全体にまとまりが出ます。よく使うアプリを画像付きのリンクとして「お知らせ」に配置するのも方法の1つです。利用者が文字だけの一覧からアプリを探す必要がなくなり、目的のアプリを判別しやすくなります。

プラグインを利用する場合は、ウィジェットやタブを活用し、情報の重要度に応じて配置を整理するとよいでしょう。

業務効率を向上させるポータルにしたい

業務効率を向上させるためには、ポータルから必要な情報へすぐにアクセスできるようにすることが大切です。

たとえば、よく使うアプリへのリンクや、業務上確認する機会の多いデータをポータルへ配置します。スタンダードコース以上で利用できる2枚目以降のポータルでは、アプリやグラフなどのウィジェットを組み合わせて、業務に合わせた画面を作ることも可能です。

より細かな表示条件や操作を加えたい場合は、「ポータル内アプリ表示プラグイン」などの利用も検討できます。ポータルを単なるアプリ一覧ではなく、業務を開始するときの入口として整理することがポイントです。

チームごとに異なる情報を表示したい

チームごとに異なる情報を表示したい場合は、まずkintoneの標準機能で対応できるか確認しましょう。スタンダードコース以上では、2枚目以降のポータルを部署や目的ごとに作成できます。

さらに、組織ごとにログイン後に最初に表示するポータルを設定できるため、たとえば営業部には「営業ポータル」、管理部には「管理部ポータル」を最初に表示するといった運用が可能です。

より自由なレイアウトや、ユーザー・組織ごとの細かな表示制御が必要であれば、「こだわりkintoneプラグイン」などを利用する方法もあります。

たとえば、営業チームには顧客情報や営業関連アプリ、開発チームには進行中のプロジェクトに関する情報を優先的に表示するといった使い分けが考えられます。

ただし、ここで紹介した方法は、基本的にkintoneへログインできるユーザー向けです。kintoneライセンスを持たない社員や取引先などにも情報を見せたい場合は、kintoneポータルを作り分けるだけでは対応できません。

その場合は、kViewerでkintone内の情報をWebページとして公開する方法があります。ユーザー管理(旧Toyokumo kintoneApp認証)を利用すれば、登録したユーザーだけに閲覧を許可し、ログインしたユーザーに応じて表示するレコードを絞り込むことも可能です。

→ kintoneアカウントを持たない人にも情報を見せるなら、kViewerを30日間無料で試す

kintoneポータルをより活用するためのテクニック

kintoneポータルをより活用するためのテクニックは、以下の3つです。

  • ポータルの情報を整理する
  • スマホ版のポータルを最適化する
  • ポータルのパフォーマンスを向上させる

それぞれ詳しい方法を解説するので、自社の運用に取り入れてみてください。

ポータルの情報を整理する

kintoneポータルを効果的に活用するためには、表示する情報を整理することが重要です。情報が多すぎると、ユーザーが必要なデータを見つけにくくなります。

たとえば、重要なお知らせやよく使うアプリへのリンクを目立つ位置へ配置し、使用頻度が低いコンテンツは非表示にするなど、視覚的に分かりやすく整理するのがおすすめです。

2枚目以降のポータルを利用できる環境では、部署や目的ごとに必要なウィジェットを分ける方法もあります。「すべての情報をトップ画面へ置く」のではなく、「この画面を開いた人が最初に何を確認し、次にどこへ移動するのか」を基準に整理すると、使いやすいポータルを設計しやすくなります。

スマホ版のポータルを最適化する

スマホ版のkintoneポータルを最適化することは、外出先や移動中でも業務を円滑に進めるために重要です。スマートフォンはPCより画面が狭いため、情報を詰め込みすぎず、重要なお知らせや利用頻度の高いリンクを優先して配置しましょう。

また、JavaScriptやCSSで独自のコンテンツを追加する場合は、PCだけでなくスマートフォンでの表示も確認する必要があります。

なお、kintoneの2枚目以降のポータルはPC版でのみ表示されます。スマートフォンからの利用が多い場合は、1枚目のポータルやスペースの使い方も含めて設計しましょう。

モバイル版kintoneの効果的な活用方法については、以下の記事を参考にしてください。

関連記事:モバイルでkintoneを利用するには?モバイルでできることや活用方法を紹介

ポータルのパフォーマンスを向上させる

ポータルに表示する情報やカスタマイズが増えるほど、画面の表示や操作に影響する可能性があります。

まずは、利用していないコンテンツや不要な画像、JavaScriptによる処理がないかを確認しましょう。独自のJavaScriptを利用して複数のアプリからデータを取得している場合は、不要なAPI呼び出しが発生していないかを確認することも大切です。

また、大きな画像を掲載する場合は、必要以上にファイルサイズが大きくならないよう調整します。新しいカスタマイズを追加するときは、一度にすべてのユーザーへ反映するのではなく、管理者だけに適用して表示や動作を確認してから公開すると安全です。

kintoneでポータルのデザインをカスタマイズする際の注意点

kintoneでポータルのデザインをカスタマイズする際に、確認しておきたいポイントは以下の5つです。

  • 複数ポータルはコース・表示環境に制約がある
  • kintoneライセンスを持たない社員・社外ユーザーへの情報共有には別の手段が必要
  • 既存プラグインとの相性を事前に検証する
  • JavaScriptカスタマイズは他の方法よりもリスクが高い
  • 「Kintone Portal Designer」はセキュリティサポートが終了している

それぞれについて詳しく説明します。

複数ポータルはコース・表示環境に制約がある

以前のkintoneではポータルを複数作成できませんでしたが、現在はスタンダードコース以上で2枚目以降のポータルを追加できます。

2枚目以降のポータルではウィジェットを使って表示内容やレイアウトを設定できるため、「全社向け」「営業部向け」「管理部向け」など、部署や目的に応じた画面を作成できます。

スタンダードコースでは2枚目以降のポータルを3枚まで追加できます。ワイドコースでは、2026年8月の定期アップデートで上限を10枚まで拡張できる新機能が提供されています。新機能を無効化できる期間中は環境によって上限が異なる場合があるため、利用中の環境と公式ヘルプを確認してください。

また、以下の制約があります。

  • ライトコースでは2枚目以降のポータルを作成できない
  • 2枚目以降のポータルはPC版でのみ表示される
  • ゲストユーザーには2枚目以降のポータルが表示されない

部署ごとにポータルを分ける場合は、組織ごとに最初に表示するポータルを設定することもできます。

参考:2枚目以降のポータルを追加する|kintone ヘルプ

kintoneライセンスを持たない社員・社外ユーザーへの情報共有は別の手段が必要

kintoneポータルを見やすく整えたり、部署ごとにポータルを作り分けたりしても、kintoneアカウントを持たない人は通常のkintoneポータルへログインして利用できません。

そのため、「全社員にkintoneライセンスを付与するのではなく、必要な情報だけ見せたい」「取引先や顧客にもkintone内の情報を確認してもらいたい」「kintoneを使っていない人からも申請を受け付けたい」といった場合は、ポータルのデザインカスタマイズとは別の仕組みを検討する必要があります。

このようなケースでは、kViewerとFormBridge、ユーザー管理を組み合わせる方法があります。

【課題別に見るkintone連携サービスの役割】
課題 使うサービス・機能 役割
kintoneアカウントを持たない人に情報を見せたい kViewer kintone内のデータをWebページとして公開する
申請や問い合わせを受け付けたい FormBridge Webフォームから入力された内容をkintoneへ登録する
見せる相手を限定したい ユーザー管理
※FormBridge・kViewerで利用可能
登録ユーザーを認証し、アクセスできるフォーム・ビューを制御する
閲覧ページや申請フォームの入口をまとめたい kViewerのユーザーページ 許可されたkViewerのビューやFormBridgeのフォームを1つのURLにまとめる

たとえば、社内申請の入口を作る場合は、FormBridgeで「各種申請フォーム」を作り、kViewerで「自分の申請内容を確認するビュー」を用意します。ユーザー管理で利用者を認証すれば、必要なユーザーだけがフォームやビューへアクセスできる構成にできます。

kintoneを使わない人にも見せる・入力してもらう

kViewerのユーザーページでは、ユーザー管理(旧Toyokumo kintoneApp認証)によってアクセスを許可したユーザーごとに個別のポータルページが自動作成されます。許可されたkViewerのビューに加え、FormBridgeで作成したフォームなど、アクセスを許可されたURLも同じユーザーページへ反映できます。

そのため、kintoneのポータルを「kintoneユーザー向けの業務入口」、kViewerのユーザーページを「kintoneライセンスを持たない人向けの業務入口」として使い分けることも可能です。

ユーザー管理は、FormBridgeまたはkViewerのプレミアムコース以上で利用でき、追加料金はかかりません。1フォームまたは1ビューあたりの登録上限は、プレミアムコースが50件、プロフェッショナルコース・エンタープライズコースが1,000件です。1,000件を超える場合はオプションも用意されています。

なお、kViewerには、レコード詳細画面のデザインをAIへ指示して作成・修正できる機能もあります。「フィールドを見やすく並べたい」「背景色や文字色を変更したい」といった要望を入力すると、AIからデザインの提案を受けられます。

2026年8月20日時点で、レコード詳細画面のAI機能を利用できるのはリストビューとカレンダービューです。マイページビューを除くその他のビューについては、今後の対応が予定されています。

関連記事:【kViewer】AIでレコード詳細画面のデザインを瞬時に変更!

kViewerなら、kintoneの情報を外部向けWebページとして公開できます。
→30日間無料で試す

申請フォームも一緒に作りたい場合は、FormBridgeも並行してお試しいただけます。
→30日間無料で試す。

既存プラグインとの相性を事前に検証する

サードパーティ製のプラグインを追加する際は、既存プラグインやJavaScriptカスタマイズとの組み合わせを事前に検証しましょう。複数のプラグインや独自JavaScriptを同じ画面で利用すると、それぞれの処理が影響し合う可能性があります。

トラブルを避けるため、次の項目を確認することが大切です。

  • プラグインに試用期間があれば活用する
  • 導入前に公式サイトやマニュアルで動作環境を確認する
  • 本番運用前にテストする
  • アップデートやサポートが継続している製品を選ぶ

導入後もkintoneやプラグイン側のアップデート情報を確認し、定期的に動作をチェックしましょう。

JavaScriptカスタマイズは他の方法よりもリスクが高い

JavaScriptを使用したカスタマイズは、他の方法に比べて自由度が高い反面、影響範囲を十分に考慮し、慎重に進める必要があります。

とくに以下の点に注意してください。

  • kintoneの公式APIを優先して利用する
  • 信頼できる情報源のコードを利用する
  • 本番適用前に動作を確認する
  • kintoneのアップデート後も定期的に動作を確認する
  • kintone内部のHTML構造や非公開のCSSクラスへの依存をできるだけ避ける

独自のJavaScriptやCSSで標準画面の内部構造を直接変更すると、kintone側の画面変更によってカスタマイズが動かなくなる可能性があります。公式のJavaScript APIで取得できる要素やイベントを利用し、変更範囲を明確にしたうえで実装しましょう。

「Kintone Portal Designer」はセキュリティサポートが終了している

ポータルのカスタマイズ方法として、複数のテンプレートが用意されているChrome拡張機能「Kintone Portal Designer」が利用されてきました。しかし、Kintone Portal Designerは2025年5月12日をもって、セキュリティアップデートを含むすべての開発が終了しています。

現在もダウンロードできる場合がありますが、今後不具合やセキュリティ上の脆弱性が見つかっても修正対応は行われず、動作も保証されていません。

そのため、新たにポータルをカスタマイズする際は、kintoneの現行の標準機能や、継続してサポートされているプラグイン・連携サービス、公式APIなどを検討しましょう。また、ほかの拡張機能を利用する際にも、利用時点でのサポート状況を確認してから利用しましょう。

参考:kintoneポータルをデザインしよう〜Kintone Portal Designerの使い方〜|cybozu developer network

kintoneポータルにプラグインでアプリを表示する方法

kintoneのポータル画面は「ポータル内アプリ表示プラグイン」を使用することで、ポータル上から指定したアプリの一覧を確認できるボタンを追加できます。また、ユーザーによって表示するアプリを切り替えたり、レコードの状態に応じてボタンをアラート表示したりすることも可能です。

具体的な手順は以下のとおりです。

  • プラグインをダウンロードしてkintoneにインストールする
  • 空のアプリを作成し、そこにプラグインを適用する
  • プラグイン設定画面で表示したいアプリなどを設定し、ポータル用JavaScriptファイルを書き出す
  • 書き出したファイルを展開し、kintoneシステム管理の「JavaScript / CSSでカスタマイズ」からアップロードする
  • 設定を保存し、ポータル画面で動作を確認する

コードを一から書かずにポータルとアプリの導線を追加したい場合に活用できる方法です。

関連記事:【2026年最新】kintoneの無料プラグイン一覧|用途別のおすすめを紹介

kintoneポータルのデザインをカスタマイズして、便利なワークスペースを作ろう!

kintoneポータルをカスタマイズすると、利用者が必要なアプリや情報へアクセスしやすい業務の入口を作れます。まずは、ポータルの設定から不要なコンテンツを整理したり、お知らせにリンクを配置したりする方法を試してみましょう。

スタンダードコース以上であれば、2枚目以降のポータルを作成し、部署や目的ごとにウィジェットを配置する方法もあります。より細かなデザインや動作が必要な場合にはプラグインやJavaScriptを検討し、実装前後の動作確認も忘れずに行いましょう。

この記事で紹介した方法を比較し、自社の利用者や業務内容に合ったポータルを作ることが大切です。なお、kintoneポータルで整理できるのは、基本的にkintoneへログインして利用する人の業務画面です。

「kintoneアカウントを持たない社員や社外の人にもkintone内の情報を見せたい」という場合は、kViewerを利用することで、必要なデータをWebページとして公開できます。

さらに、申請や問い合わせなどの入力も受け付けたい場合はFormBridgeを組み合わせられます。ユーザー管理(旧Toyokumo kintoneApp認証)を利用すれば、登録ユーザーだけにアクセスを許可し、閲覧用ページと入力フォームをつないだ運用も可能です。

ポータルのカスタマイズだけでは届かないユーザーまでkintoneの活用範囲を広げたい場合は、まずkViewerで実際の画面を作って確認してみてください。

→ kViewerを30日間無料で試す

→ kViewerの機能を詳しく見る

申請受付まで必要な場合は、FormBridgeの30日間無料お試しも利用できます。

トヨクモ編集部のサムネイルアイコン

監修者トヨクモ編集部


メンバー全員がkintone認定資格保有者。 累計15,000件以上のkintone連携サービス導入を支援した実績をもとに 、kintoneを活用した業務効率化や現場で役立つ最新情報を発信中。

その他のお役立ち情報 Other Useful Information

サービスカタログや過去のセミナー動画、FormBridgeを応用したもっと便利な活用方法などを紹介しています。


私たち、トヨクモのサービス Our Services

kintoneをより使いやすくするためのkintone連携サービスです。30日間の無料お試しへぜひお申し込みください。

すべての機能を30日間無料体験