kintoneは、誰もが簡単にアプリを作成できる便利さから、人気のあるツールです。しかし使用を続ける中で「トップページが見づらい」「必要なアプリがすぐに見つからない」といった問題を抱えるユーザーも少なくないでしょう。
そこで本記事では、kintoneポータルのデザインをカスタマイズすることにより、使い勝手を向上させ、作業効率をアップする方法をわかりやすく解説します。
初期設定の見直しからテンプレートを利用したカスタマイズ方法に至るまで、kintoneユーザーに向けて実践的な情報をお届けします。
kintoneポータルについて
kintoneポータルは、お知らせや通知、アプリなどをまとめて確認できる便利なページです。初期設定では、以下の項目が設定されています。
- お知らせ掲示板
- 通知
- スペース
- アプリ
- 未処理（プロセス管理を設定している場合のみ）
初期設定でも、さまざまな情報を一箇所で管理できます。
kintoneポータルのデフォルトデザインには限界がある
kintoneポータルのデフォルトデザインは、シンプルさと使いやすさを兼ね備えています。しかし、アプリの数が増えてくると、次のような課題が生じることがあります。
- 探しているアプリを見つけるのに時間がかかる
- 似たようなアイコンで識別が難しい
- 目的のアプリを探すために多くのスクロールが必要
- 画面がごちゃごちゃしており、必要な情報を見つけにくい
- あまり使用しない項目が画面上部に表示されてしまう
また、使用感に不満はないものの、「もっと自社に合ったデザインが欲しい」と考えることもあるでしょう。
このような時、kintoneポータルのデザインをカスタマイズすることで、自社に合った操作感とデザインを実現できます。
kintoneのポータルデザインをカスタマイズする4つの方法
kintoneのポータルデザインをカスタマイズするには、以下の4つの方法があります。
- 設定画面からカスタマイズする
- 「Kintone Portal Designer」のテンプレートを使用する
- JavaScriptを用いてAPIを呼び出す
- プラグインを利用する
小さな変更を加えたい場合や、まだkintoneに慣れていない場合は、設定画面やテンプレートの使用をおすすめします。より詳細なカスタマイズが必要な場合は、JavaScriptやプラグインを導入してみましょう。
これらの方法について詳しく説明していきます。
設定画面からカスタマイズする
kintoneのポータルデザインを変更する最も簡単な方法は、kintoneのポータル設定画面から設定を行うことです。kintoneの管理者であれば誰でも設定の変更が可能であり、プログラミング知識も必要ありません。外部への委託なしで設定できるため、経済的な点もメリットです。
ただし、特定のアプリの情報を表示したり、独自のレイアウトを作成したりするなど、高度な設定はこの方法では実現が難しいため注意が必要です。
設定画面から可能なデザイン編集は以下のとおりです。
- ポータルの名前やカバー画像、表示させたいコンテンツを変更する
- アイコンデザインを変更する
ポータルの名前やカバー画像、表示させたいコンテンツを変更する
ポータルの名前やカバー画像、表示させるコンテンツの設定が可能です。設定手順は以下のとおりです。
- ポータルの右上にある「オプションボタン（3点リーダー）」をクリックして、「ポータルの設定」をクリックします。
- 変更したい内容を選び、最後に「保存」ボタンをクリックして完了です。
アイコンデザインを変更する
kintoneポータルのアプリアイコンなどのデザインを、よりわかりやすく見やすいものに変更することで、必要な情報を見つけやすくなります。また、類似機能を持つアプリ間での差別化も、アイコンの変更によって実現できます。アイコンを変更する手順は以下のとおりです。
- アプリを開いてレコードの一覧を表示します。画面右上の歯車マークの横にある「V（アプリの設定を変更する）」をクリックして、「一般設定」＞「アイコンと設定」を選択してください。
- デフォルトのアイコンを選択、または任意のアイコン画像をアップロードします。設定が完了したら、右下にある「保存」ボタンをクリックします。
- アイコンが変更されているのを確認し、画面右上にある「アプリを更新」ボタンをクリックして完了です。
「Kintone Portal Designer」のテンプレートを使う
kintoneポータルのデザインをカスタマイズするには、「Kintone Portal Designer」のテンプレートを利用する方法も一つです。
Kintone Portal Designerは、kintoneポータルをカスタマイズするために用いるエディタです。プログラミング知識がなくても、誰でも簡単にオリジナルのポータルをデザインできます。
豊富なデザインテンプレートと50種類以上のアイコンが用意されており、アプリをセクションごとに整理できるため、必要なアプリを探す時間の短縮にもつながります。
kintoneポータルを「Kintone Portal Designer」のテンプレートでデザイン変更する方法は以下のとおりです。
- Kintone Portal Designer（Chromeウェブストア）にアクセスして「Chromeに追加」＞「拡張機能を追加」をクリックします。
- kintoneのポータル画面を開き、Google Chrome（ブラウザ）右上の拡張機能から、「Kintone Portal Designer」＞「Design Portal」を有効化してください。
- ツールバーに表示された「Kintone Portal Designer のボタン（</>）」をクリックします。
- 設定画面の「Import」から「Import Sample Template」を選択してください。
- 表示されるテンプレートから好みのデザインを選び、「Import」ボタンをクリックします。
- 右上のメニューにある「Save」ボタンをクリックしてHTML・CSSをkintoneに読み込ませます。
- 最後にkintoneのポータル画面を再読み込みして、レイアウトの反映を確認したら完了です。
テンプレートをカスタマイズする場合には、HTMLやCSSなどのコードの知識が必要です。社内にデザイナーやエンジニアがいなければ、自由にデザインをカスタマイズすることは難しいかもしれません。
JavaScriptを用いてAPIを呼び出す
kintoneポータルのデザインをより自由にカスタマイズしたい場合、JavaScriptを使用してAPIを呼び出す方法があります。
この方法を利用すると、kintoneポータルをより使いやすく、機能的かつ効率的なワークスペースに変更でき、自社に合ったデザインを実現できます。JavaScriptを使ってkintoneポータルをデザイン変更する方法は以下のとおりです。
- ポータル画面からkintoneシステム管理画面を開きます。
- 「JavaScript / CSSでカスタマイズ」をクリックします。
- カスタマイズの適用範囲を選択します。すべてのユーザーにカスタマイズを適用する前に、システム管理者だけに適用して、正しくカスタマイズされていることを確認しましょう。
- 「URL指定で追加」または「アップロードして追加」をクリックし、取り込むファイルを選択します。ファイルはそれぞれ30個まで取り込めます。
- 最後に「保存」ボタンをクリックして完了です。
この方法は高度なプログラミング知識が求められるため、専門的な人材を確保する必要があります。
外部に編集作業を委託することも可能ですが、その場合は費用が発生しますので、予算との兼ね合いを考慮する必要があります。
プラグインを利用する
サードパーティ製の「ポータル内アプリ表示プラグイン」を使えば、コードを書かずとも、ユーザーごとに表示するアプリを切り替えたり、ポータルにアラートを表示したりすることが可能です。
直感的にデザインを編集できるため、プログラミングに慣れていない人にとっても便利な方法だと言えるでしょう。また「アプリの一覧を表示したい」「通知のポップアップのデザインを変えたい」など、必要に応じて自由にカスタマイズしやすい点も魅力です。
ここでは「ポータル内アプリ表示プラグイン」を活用し、お知らせ掲示板に任意のアプリを貼り付ける手順を紹介します。
- TIS社の公式サイトからプラグインファイルをダウンロードします。Zipファイルは解凍不要です。
- ダウンロードしたZipファイルをkintoneにインストールします。
- 空のアプリを作成し、「アプリの設定」＞「プラグイン」より、先ほどインストールした「ポータル内アプリ表示プラグイン」を追加します。
- プラグイン追加後、「設定（歯車アイコン）」をクリックしてください。
- それぞれのフィールドを設定します。
- 設定が終わったら、画面下部の「ファイル書き出しボタン」をクリックします。ポータル画面用のJavaScriptファイルがダウンロードされます。
- ダウンロードしたzipファイルを展開し、kintoneシステム管理の「JavaScript / CSSでカスタマイズ」よりファイルをアップロードします。最後に左上の「保存」ボタンをクリックしてください。
- ポータル画面にボタンが表示されていたら設定は完了です。
操作の手順を間違えると誤ったファイルがダウンロードされてしまい、不具合を起こす可能性がありますので、作業は慎重に行う必要があります。
kintoneでポータルのデザインをカスタマイズする際の注意点
kintoneでポータルのデザインをカスタマイズする際に、より安全かつ効果的な方法を採用するための重要なポイントは以下の3つです。
- 複数のポータルは作成できない
- 既存プラグインとの相性を事前に検証する
- JavaScriptカスタマイズは他の方法よりもリスクが高い
それぞれについて詳しく説明します。
複数のポータルは作成できない
kintoneでは、複数ポータルを作成することや、ユーザーごとに異なるポータルを設定することはできません。
部署ごとやプロジェクトごとに複数のポータルを利用したい場合は、「複数のスペースを作成し、それぞれのスペースのポータルを利用する」という方法を用いる必要があります。
既存プラグインとの相性を事前に検証する
サードパーティ製のプラグインを追加する際は、既存プラグインとの相性を事前に検証する必要があります。複数のプラグインを組み合わせると、予期せぬ動作を引き起こす可能性があるためです。トラブルを回避するために、次の項目をチェックしましょう。
- プラグインの試用期間を活用する
- 導入前に公式サイトや説明書で互換性情報を確認する
- 初回の適用範囲はシステム管理者に留める
- 開発元の評判を確認する
開発が中止されたプラグインは、将来的に問題が発生した際にサポートを受けることが難しくなります。信頼できる開発元のプラグインを選びましょう。
JavaScriptカスタマイズは他の方法よりもリスクが高い
JavaScriptを使用したカスタマイズは、他の方法に比べて自由度が高い反面、影響範囲やセキュリティリスクを十分に考慮し、慎重に進める必要があります。特に以下の点に注意してください。
- 信頼できる情報源からコードを取得する
- コードを適用する前に、必ずテスト環境で動作を確認する
- コードを適用した後も、定期的に動作確認を行う
カスタマイズを行う前に、その影響を理解し、バックアップを取っておくなどの準備が必要です。
kintoneポータルのデザインをカスタマイズして、便利なワークスペースを作ろう！
kintoneポータルのデザインをカスタマイズすることで、業務効率を大幅に向上できます。
ポータルのデザインはkintoneの設定画面から簡単に変えることができます。もし一歩踏み込んだ形にしたい場合には、テンプレートやプラグインを使うことで手軽にデザインを変更可能です。細かくデザインを設定する場合には、JavaScriptを使ってカスタマイズするといいでしょう。
この記事で紹介した方法を比較検討し、自社のニーズに合わせて理想のワークスペースを構築しましょう。
