kintoneのお知らせ掲示板をカスタマイズして、ポータル画面をより見やすくしよう！

kintoneでは様々な業務を効率化させるアプリが用意されていますが、使用するアプリが増えてくると目的のアプリを探すのに手間がかかってしまい、ストレスを感じることもあるのではないでしょうか。
そんな時は、kintoneのポータル画面にある「お知らせ掲示板」をカスタマイズして、頻繁に使われるアプリのリンクを集約し探す手間を省くことができます。それに加え、重要な情報をお知らせ掲示板に掲載することも可能なため、メンバーへの周知も簡単にできます。

本記事では、kintoneのお知らせ掲示板のカスタマイズ方法について紹介しますので、kintoneのポータル画面をもっと便利にさせたいとお考えの方はぜひご参考ください。

kintoneカスタマイズについて関連記事をご用意しております。
▼kintoneのカスタマイズ｜初心者向けの方法は？

kintoneのトップ画面のことを「ポータル」と呼びます。ポータルとは、kintoneの入り口ページの役割を持つページのことです。

kintoneのポータル画面では、ユーザー同士のコミュニケーションや情報共有ができる場を集約しており、また業務アプリの一覧もポータル画面に掲載されているため目的のアプリにここからアクセス可能です。しかし、kintoneを社内の主力な業務システムとして、様々な業務をたくさんのメンバーで使い続けていると、「少し使い勝手が悪いな・・・」「独自のポータル画面に編集したい」と感じることもあります。

そのような場合は、ポータル画面はカスタマイズしてみましょう。カスタマイズ方法について、以下の4つの方法があります。

ポータルの設定画面から、ポータルの名称・カバー画像の変更、コンテンツ（お知らせ掲示板、通知、未処理、スペース、アプリ）の表示・非表示を設定できます。コンテンツの表示・非表示の設定は、ユーザーごとではなくドメインごとで保存されます。

「Kintone Portal Designer」は、kintoneのポータル画面を自由にデザインできるChromeの拡張ツールです。
HTML／CSSだけでカスタマイズ可能で、テンプレートも用意されているため、一からHTML／CSSを書く必要はありません。

Kintone Portal Designerを使用したデザインカスタマイズについては、こちらをご参考ください。

「classic-app」は、kintoneのポータル画面の内容をアプリで管理するためのポータルテンプレートです。classic-appを使用することで、ポータル画面に表示されるリンクをアプリ上で管理できます。
以下のように、ポータルをセッションごとに分け、リンクを自由に配置可能です。

出典：「ポータル画面の内容をアプリで管理しよう(classic-appの使い方) ~ kintoneのポータルカスタマイズ紹介#3 ~」cybozu developer network
https://cybozudev.zendesk.com/hc/ja/articles/900003334846-ポータル画面の内容をアプリで管理しよう-classic-appの使い方-kintoneのポータルカスタマイズ紹介-3-

JavaScriptを利用して、ポータル画面をカスタマイズすることも可能です。例えば、独自のボタンを設置したりボタンクリック時の動作を加えたりと、JavaScriptで実現できます。

JavaScriptを利用するカスタマイズについて、下記記事で詳細を解説していますので、ぜひご参考ください。
▼kintoneでのJavaScript活用！カスタマイズでさらなる業務改善

kintoneのお知らせ掲示板では、ユーザーに共有したい情報を集約し表示できます。グラフによるデータやリンク集など、ダッシュボードやポータルとしての役割も果たします。

お知らせ掲示板の編集手順については、以下の通りです。編集可能なのは、kintoneシステム管理者、またはcybozu.com共通管理者のみです。

1. お知らせ掲示板の右上にある編集ボタンをクリック
2. 内容を編集後、右下の［保存］ボタンをクリック
   文字の太さやカラーなど、書式設定を付け加えることも可能です。

前章で紹介した通り、お知らせ掲示板は通常では文字の太さやカラー変更くらいしか行えず、それだけではテキストのみの少し見づらい画面になってしまうかもしれません。
そこでMicrosoftのWordを利用しアイコン画像を使用することで、一目でわかりやすいアプリリンクが作成できるのです。

その手順について、次項より解説します。

Wordを開き、「挿入」→「表」を選択します。
追加したいアプリアイコンの数によって行・列数を指定してください。また、表のデザインで背景色を加えるとそのままkintoneのお知らせ掲示板に反映されるので、見やすくなるように色をつけてみるとよいでしょう。

kintoneのお知らせ掲示板を開き、Wordで作成した表をコピー＆ペーストで貼り付けます。
ツールバーの［添付ファイルアイコン］をクリックし、表の中に入れたいアイコン画像を添付します。添付したアイコンにカーソルを合わせるとサイズ変更のメニューが表示され「100px、250px、500px、750px、元のサイズ（○○px）」から選択できるため、希望のサイズに近いものがあれば選択してください。

次は、アイコンを選択した状態で、ツールバーの［リンクアイコン］をクリックし、アプリのリンク先を設定します。
「リンク先のWebサイトのアドレス」にアプリのURLを入力します。アプリのリンク先をポータル画面と別タブで開きたい場合は、その下にある「リンク先を新しいタブで開く」にチェックを入れてください。
アイコンの下に表示されるテキストにもURLを入れたい場合は、この設定画面の「タイトル」に任意のテキストを入力してください。特にテキストリンクが必要なければ、リンクタイトルとして表の中にテキストを入れて表示させることも可能です。

お知らせ掲示板には表やグラフを表示させることも可能です。文字だけの情報ではわかりづらい、ユーザーに注目してもらえない、などの支障がありますが、表やグラフで情報が可視化されていると、より情報共有がスムーズになるでしょう。

次項より、お知らせ掲示板に表やグラフを表示させる手順について、解説します。

アプリの設定画面にある「グラフ」タブから、表やグラフを作成できます。
まず、グラフタブの右上にある［+］ボタンをクリックし、作成を開始します。「グラフ名」を記入し、「グラフの種類」「分類する項目」「集計方法」「条件」「ソート」を表示させたい項目によってプルダウンの中から選択します。

「グラフの種類」で「表」を選択すれば、表も作成できます。

次に、前項で作成したグラフをお知らせ掲示板に貼り付けます。

お知らせ掲示板の編集画面を開くと、上部ツールバーに［アプリの貼り付け］ボタンがあります。このボタンで、指定したアプリのレコードを様々な形式で表示させることが可能です。
［アプリの貼り付け］ボタンをクリックし、対象となるアプリのグラフを選択し、右下の［OK］ボタンをクリックします。

［OK］ボタンをクリックしたら、お知らせ掲示板の編集画面に選択したアプリが表示されます。右下の［保存］ボタンを押すと、お知らせ掲示板の中にグラフが反映され、完了です。

複数のグラフを表示させたい場合は、この手順を繰り返してください。お知らせ掲示板で新たなグラフや表を作成することはできないため、事前にアプリ内での作成が必要となります。

kintoneのポータル画面にあるお知らせ掲示板を有効活用することで、ユーザーがストレスフリーでkintoneを使えるようになったり、重要な情報をグラフや表を用いてわかりやすく共有できるようになったりします。

本記事で紹介したお知らせ掲示板のカスタマイズを参考に、ぜひポータル画面をより便利に作り変えてみてください。手順に沿って行えば、比較的簡単にできるはずです。

より高度なカスタマイズをご希望の場合は、オフィシャルパートナーであるテクバンがサポートいたしますので、お気軽にご相談ください。

※本記事の内容は2023年8月時点のものです。kintoneの仕様や利用環境は変更する場合があります。