kintone（キントーン）ポータルのカスタマイズ方法を徹底解説！使いやすくするアイデアをご紹介

kintoneを活用している方で、以下のようなお悩みはありませんか？

「kintoneのトップ画面（ポータル）のカスタマイズ方法は？」

「自社用にデザインを変えたいけど、何から手をつければいいかわからない」

「ポータルを使いやすくカスタマイズして、業務効率を上げたい」

本記事では、kintoneポータルをカスタマイズする方法や機能、見方・注意点などを詳しく解説します。

kintoneを活用している方、ポータルのデザインを変えたい方はぜひ最後までご覧ください。

なお、kintoneの関連レコード一覧機能に関する個別の相談をご希望なら、ペパコミ株式会社へお任せください。

貴社の状況に合わせた最適な活用法をご提案します。まずはお気軽にご相談ください。

kintone（キントーン）ポータルとは「トップ画面」のこと

kintoneではじめに表示される画面をポータルと呼びます。ポータルには情報が集約されており、社内の情報共有を手軽に行えるのが特徴です。

しかし、初期設定デザインでは、該当のアプリを探すのが大変だったり、必要な情報にたどり着くのが難しい場合もあるでしょう。

そこで、ポータルをカスタマイズすれば問題を解決できます。用途に合わせてカスタマイズをすると、kintoneポータルの利便性向上につなげられます。

参考：ポータル | kintone ヘルプ

kintoneポータルの機能・見方

ここでは、kintoneポータルの主な機能と見方を紹介します。

• アイコン機能
• メニュー機能
• お知らせ掲示板
• 未処理一覧
• 通知一覧
• スペース一覧
• アプリ一覧

ポータルの構成要素を理解できれば効果的なカスタマイズにつながるので、ぜひ参考にしてみてください。

参考：ポータルの見かた | kintone ヘルプ

アイコン機能

kintoneポータルのアイコン機能には、以下のようなものがあります。

サイドメニュー／ポータル／通知／ブックマーク

• サイドメニューでスペース、アプリ、ピープルなどに移動可能
• ポータルを表示するリンクを含む
• 通知一覧へのリンクあり
• 登録済みのページブックマークを表示できる

初心者アイコン

• 初心者ガイドへのリンクが表示される
• 試用期間中（30日以内）のユーザーに表示
• 言語が日本語に設定されている必要あり
• アプリ作成権限が付与されていることが条件
• 「スペースに所属しないアプリの作成を許可する」が有効になっている必要あり

設定アイコン

• 個人設定やkintone全体の設定にアクセス可能
• kintoneシステム管理画面に移動可能（管理者権限が必要）
• cybozu.com共通管理にもアクセス可能（共通管理者権限が必要）

ヘルプアイコン

• 製品ガイドやヘルプページへのアクセスができる

上記のアイコンを使いこなせると、kintoneをより便利に活用できるでしょう。アイコンの役割を理解し、業務効率化に役立ててみてください。

参考：初心者アイコンの消し方を知りたい | kintone ヘルプ

参考：初心者アイコンが表示されません | kintone ヘルプ

メニュー機能

kintoneポータルのメニュー機能には、以下のようなものがあります。

ピープル

• 自分のピープルページを表示する

アカウント設定／ログアウト

• アカウント設定を変更できる
• ログアウト操作ができる

検索

• kintone内のデータを検索できる

オプションメニュー

• アプリやスペースを作成できる
• ポータルを設定できる（管理者権限が必要）

メニュー機能を活用すると、kintoneの各種設定や操作がスムーズに行えます。目的に応じて適切なメニューを選択し、業務を円滑に進めましょう。

お知らせ掲示板

お知らせ掲示板は、メンバーに共有したい情報を集約するエリアです。グラフやリンク集の掲載が可能で、ダッシュボードでも活用できます。

内容の編集は管理者と共通管理者のみ可能で、全ユーザーのトップページに表示されます。重要なお知らせや、部署間の情報共有に役立てられるでしょう。

お知らせ掲示板を有効活用すると、社内コミュニケーションの活性化と業務効率の向上が期待できます。

未処理一覧

未処理一覧は、自分が作業者に指定されているレコードの件数を表示する機能です。アプリごとに件数が表示され、タスクがない場合は表示されません。

未処理のタスクを一目で確認でき、優先順位を判断する際に役立ちます。処理漏れを防ぎ、スムーズな業務遂行につなげられるでしょう。

通知一覧

通知一覧は、アプリ、スペース、ピープルの更新通知を表示する機能で、表示内容はユーザーごとに異なります。

自分に関連する情報をリアルタイムで把握でき、タイムリーな対応が可能です。通知を見逃さず、業務の効率化を図りましょう。

スペース一覧

スペース一覧は、以下のような機能を持っています。

• スペースをカテゴリ別に一覧表示
• お気に入りのスペースを並び替え可能
• 最近開いたスペースを最大50件まで表示
• 作成済みのスペースや参加中のスペースも表示
• ゲストスペースの表示にも対応

必要なスペースにすばやくアクセスできるため、業務の効率化に役立ちます。スペースの整理整頓を心がけ、使いやすい環境を維持しましょう。

アプリ一覧

アプリ一覧は、以下のような機能を持っています。

• アプリをカテゴリ別に一覧表示
• お気に入りアプリを並び替え可能
• 最近開いたアプリを最大50件まで表示
• 作成したアプリの一覧表示（ゲストユーザーは非表示）
• 最近公開されたアプリやすべてのアプリを表示可能（参加していないスペースのアプリは除外）

目的のアプリを見つけやすくなるため、業務の効率化につながります。アプリの整理整頓を行い、使いやすさを高めていきましょう。

kintone（キントーン）ポータル（トップ画面）をカスタマイズする4つの方法

kintoneポータルをカスタマイズする方法は下記の4つです。

• kintoneのポータル設定画面からカスタマイズ
• Kintone Portal Designerを使ってカスタマイズ
• JavaScript×APIでカスタマイズ
• kintoneポータルのプラグインを利用してカスタマイズ

上記を参考に、目的に合わせて最適なカスタマイズ方法を選んでみましょう。

なお、kintoneのカスタマイズ方法に関してより詳しく知りたい方は、以下の記事もぜひご覧ください。

kintone（キントーン）をカスタマイズする方法を初心者向けに解説！注意点や事例もあわせて紹介 | ペパコミ株式会社

kintoneのポータル設定画面からカスタマイズ

kintoneのポータル設定画面からカスタマイズする方法はkintoneに慣れていない人でも簡単に行えます。kintoneの管理者であれば設定の変更が可能で、プログラミングの知識が無くても設定できます。

しかし、初心者の方が自由度の高い設定で操作するのは難しく、デフォルトに用意されていないカスタマイズを行うには、より専門的な知識が必要な場合があります。

kintoneのデザインテンプレート「Kintone Portal Designer」を使ってカスタマイズ

「Kintone Portal Designer」はkintoneポータルをカスタマイズするために使用するCromeの拡張ツールです。プログラミングの知識がなくても、kintoneポータルの利便性を高められます。

また、多くのデザインテンプレートが準備されているため、簡単にカスタマイズできます。

アプリが多く、探すのに時間がかかってしまう人におすすめの方法です。

kintoneポータルをJavaScript×APIでカスタマイズ

JavaScriptを利用し、APIを呼び出してカスタマイズする方法もあります。ポータル画面全体を自由度高くカスタマイズでき、利便性も高められるので効率的に業務を進められます。

初期デザインからの設定では自社の業務に対応できない人におすすめです。

しかし、高度なプログラミングの知識が必要であるため、簡単にカスタマイズできる方法ではありません。そのため、専門知識を持った人材がいない場合、kintoneの活用に強い企業に委託を考える必要があります。

kintoneポータルのプラグインを利用してカスタマイズ

サードパーティー製の「ポータル内アプリ表示プラグイン」を使用すれば、ユーザーに合わせて表示するアプリを設定できたり、ポータルにアラートを表示できます。

この方法ではコードを書く必要がないため、プログラミングの知識が無くても設定変更できます。アプリを整理したい場合や、通知のポップアップのデザインを変更したい場合などの用途に合わせたカスタマイズが可能です。

しかし、プラグインには相性があり、手順を間違えるとkintoneが不具合を起こすリスクもあるため、注意して作業しましょう。

ポータル設定画面でkintoneポータルをカスタマイズする方法

ここでは、実際にkintoneポータルをカスタマイズする方法をご紹介します。

• デフォルトデザインをカスタマイズする方法【3STEP】
• お知らせ掲示板に「よく使うアプリ一覧」をカスタマイズする方法【7STEP】
• カバー画像・アイコンデザインをカスタマイズする方法【3STEP】

kintoneポータルをカスタマイズすれば情報が整理できるので、設定したい項目に合わせて参照してみてください。

デフォルトデザインをカスタマイズする方法【3STEP】

kintoneポータルのデフォルトデザインを変更するときに最もシンプルかつ簡単な方法は標準機能の中で設定画面からデザインを編集する方法です。

「kintoneのシステム管理権限を持つユーザー」か、「cybozu.com共通管理者」であれば、ポータルのデザインを変更できます。

kinotoneポータルの設定からデフォルトデザインをカスタマイズする手順

1. ポータル画面右上のオプションボタンを開き、ポータルの設定をクリック
2. ポータル画面に表示させたいコンテンツ（お知らせ掲示板、通知、未処理、スペース、アプリ）にチェックを入れる
3. 保存をクリック

上記の手順を参考に、デフォルトデザインをカスタマイズしてみてください。

お知らせ掲示板に「よく使うアプリ一覧」をカスタマイズする方法【7STEP】

お知らせ掲示板はkintoneに搭載されている、標準機能内でカスタマイズできます。お知らせ掲示板によく使うアプリ一覧を表示させることで、すぐにアプリへアクセス可能です。

また、Wordで作成した表を挿入すれば、アプリへのリンクをアイコン付きで表示でき、直感的にポータルが使用できるようになります。

kintoneポータルのお知らせ掲示板に「よく使うアプリ一覧」をカスタマイズする手順は、以下の通りです。

1. Wordを開き、挿入タブから表をクリック
2. 行×列を必要な数選択する
3. kintoneポータルのお知らせ掲示板の編集画面を開く
4. Wordで作成し表をコピーしてお知らせ掲示板の編集画面にペースト
5. クリックアイコン（添付ファイル）から、アプリのアイコンにしたい画像を選択
6. アイコンにカーソルを合わせサイズを調節する
7. リンクアイコンをクリックして、表示させたいアプリのリンクを設定する

なお、kintoneのお知らせ掲示板をカスタマイズする方法に関して詳しく知りたい方は、以下の記事もおすすめです。

kintone（キントーン）お知らせ掲示板をカスタマイズする方法を解説！おすすめツールも紹介 | ペパコミ株式会社

カバー画像・アイコンデザインをカスタマイズする方法【3STEP】

kintoneのポータル画像・アイコンデザインはkintoneポータルに標準搭載されている設定画面から設定できます。似た機能を持つアプリもアイコンデザインを変更しておくと、間違えて開いてしまうのを防げます。

kintoneポータルのカバー画像カスタマイズする手順は、以下の通りです。

1. ポータルの右上にあるオプションボタン（3点リーダー）をクリックし、ポータルの設定を選択
2. カバー画像の項目から設定したい画像を選択する
3. 保存をクリックする

kintoneポータルのアイコンデザインをカスタマイズする手順は、以下の通りです。

1. レコード一覧画面の歯車マークの横にあるＶをクリックし、一般設定からアイコンと設定を選択する
2. デフォルトのアイコンを選択する、もしくは任意の画像をアップロードする
3. 設定が完了したら、右下の保存ボタンをクリックする

デザインテンプレートでkintoneポータルをカスタマイズする方法【8STEP】

Kintone Portal Designerを使用したカスタマイズ方法は、JavaScriptに関する知識が無くても、ポータルをカスタマイズできます。

「Kintone Portal Designer」を使用したカスタマイズの手順は、以下の通りです。

1. Kintone Portal DesignerをChromeの拡張機能に追加
2. kintoneのポータル画面を表示し、GoogleChrome右上拡張機能のKintone Portal Designerを起動
3. kintone内のツールバーから（</>）のボタンをクリック
4. 設定画面のImportからImport Sample Templateをクリック
5. 適用したいデザインを選び、「Import」ボタンをクリック
6. Kintone Portal Designerの左上にあるトグルボタンをクリックし、表示をDesign Portalに変更
7. 右上のメニューにある「Save」ボタンをクリックしてHTML・CSSをkintoneに反映
8. 後にkintoneのポータル画面を再読み込みして、レイアウトの反映を確認

上記の手順を参考に、Kintone Portal Designerを使用してみてください。

JavaScript×APIでkintoneポータルをカスタマイズする方法【6STEP】

JavaScriptを使用してAPIを呼び出すことで、より自由度の高いカスタマイズが可能です。

kintoneポータルのデザインをJavaScript×APIを使ってカスタマイズする手順

1. ポータル画面右上の歯車をクリックし、kintoneシステム管理画面を開く
2. カスタマイズの項目から、「JavaScript / CSSでカスタマイズ」を選択
3. 適用範囲をkintoneシステムの管理者だけに適用に設定
4. パソコン版のJavaScriptファイルの項目からURL指定で追加またはアップロードして追加を選択、取り込むファイルを選ぶ。ファイルは最大30個まで取り込み可能
5. 保存ボタンをクリックし、正しく反映されているか確認します
6. 最後に適用範囲をすべてのユーザーに適用に変更すれば、すべてのユーザーにカスタマイズを共有できます。

なお、kintoneのAPI連携に関してより詳しく知りたい方は、以下の記事もぜひ参考にしてみてください。

kintone（キントーン）のAPI連携でできることとは？設定方法や活用事例を徹底解説！ | ペパコミ株式会社

プラグインでkintoneポータルをカスタマイズする方法【9STEP】

「ポータル内アプリ表示プラグイン」を活用して、ユーザーによって表示するアプリを切り替えたり、ポータルにアラートを表示させることができます。

「ポータル内アプリ表示プラグイン」を使ってアプリを表示させる手順は、以下の通りです。

1. TIS社の公式ホームページからプラグインをダウンロード(Zipファイルの解凍は不要)
2. kintoneにダウンロードしたzipファイルをインストール
3. 空のアプリを作成し、アプリの設定→プラグインの項目から、ポータル内アプリ表示プラグインを追加
4. プラグインの設定画面（歯車アイコン）を開く
5. 表示されたフィールドを設定する
6. ページ下部のファイル書き出しボタンをクリック
7. ダウンロードしたzipファイルを展開し、kintoneシステム管理のJavascript / CSSでカスタマイズよりファイルをアップロードして保存
8. ポータル画面にボタンが表示されたことを確認
9. ボタンをクリックすれば指定したアプリの一覧がポップアップで表示

なお、kintoneのプラグインに関してより詳しく知りたい方は、以下の記事もご覧ください。

kintone全プラグインリストをご紹介(無料・有料・買い切り全て) | ペパコミ株式会社

kintone（キントーン）ポータルのカスタマイズをする際の3つの注意点

これまでkintoneポータルをカスタマイズする方法をご紹介してきましたが、その際に注意するべきことが3つあります。

• 複数のポータルは作成できない
• プラグインを導入する際は既存プラグインとの相性を事前に把握する
• JavaScriptカスタマイズによる影響を検証する

上記の注意点を踏まえながらポータルをカスタマイズすると、トラブルが起きても冷静に対応できるので、ぜひ参考にしてみてください。

複数のポータルは作成できない

kintoneでは、複数のポータルを作成できません。

複数のポータルを利用する場合、複数のスペースを作成し、個別のスペースのポータルを利用する方法があります。

プラグインを導入する際は既存プラグインとの相性を事前に把握する

kintoneのプラグインを導入する際は、既存プラグインとの相性を事前に把握するのが重要です。例えば、複数のプラグインを導入した場合、予期せぬエラーが発生する可能性があります。

そのようなリスクを回避するために、下記の4つの項目をチェックしておきましょう。

• プラグインの試用期間を利用する
• 導入前に公式ホームページや説明書でプラグイン同士の互換性を確認する
• システム管理者のみを適用範囲に設定し、相性を確かめる
• 開発元の評判を参照しておく

JavaScriptカスタマイズによる影響を検証する

プラグインと同様にJavaScriptを導入する際にも既存のシステムとの相性を検証する必要があります。

特に自由度が高いカスタマイズになるため、特に注意が必要です。

具体的にJavaScriptカスタマイズでは下記の3点には注意が必要です。

• 信頼性の高いソースからコードを取得する
• テスト環境で動作を確認してから、コードを適用する
• コード適用後も、定期的にメンテナンスする

JavaScriptカスタマイズではリスクがあることを十分に理解し、事前にバックアップを取っておくことが大切です。

kintoneの活用を検討している方は「ペパコミ株式会社」へご相談ください！

実際にkintoneポータルをカスタマイズする方法を活用すれば、業務効率化と使いやすいポータルに設定できます。

しかし、カスタマイズには注意点も多くあるため、知識が十分になければkintoneを使いこなすのは難しいでしょう。

そこで、kintoneの活用を検討している方は、kintoneの活用に強い企業にサポートしてもらうのも一つの手段です。

なお、ペパコミ株式会社では、kintone導入に関する無料相談を受け付けています。kintone導入から改修内製化までを一気通貫・並走支援でサポートします。

kintoneの導入や操作などでお困りの方は、お気軽にご相談ください。