kintoneアプリをもっと便利にするデザインの工夫

目次

はじめに

kintoneを導入したのになかなか社内で使ってもらえない場合、原因はアプリの使いにくさにあるかもしれません。
ユーザーに使いやすいと感じてもらうには、システムが次のようなポイントを満たしている必要があります。

  • 視認性の高さ
  • 統一感
  • 業務に最適化されていること

これらのポイントをkintoneで満たすため、本記事では基本機能でできるデザインの工夫を紹介します。

想定読者

  • kintoneアプリを作成する人

アプリ設定でできる工夫

ここではアプリ設定でできる代表的なデザインの工夫を6つ紹介します。

その1:ユーザーがわかりやすく見つけやすいアプリ名をつける

用途が一目で分かるアプリ名をつける

誰が何の業務で使うためのものかが一目で分かる名前をつけるようにすると、ユーザーが都度アプリを開いて中身を確認する手間を減らせます。

例)営業管理アプリ △ → 【営業部】案件管理アプリ ◎

アプリ名にプレフィックスを付与する

スペース内でアプリが使いやすい順番に並ぶような名付けをすると、よりユーザーの使いやすさが向上します。
スペースに所属するアプリは名前順でソートされるため、その仕様を前提に命名規則を検討します。

たとえば業務アプリは「1」「2」という連番、ルックアップなどで利用するマスター系アプリは「M」、プラグイン設定用アプリは「P」といったイニシャルをアプリ名の先頭につけるといった方法です。
この命名規則を利用すると、普段よく利用する業務アプリが連番順に表示されます。
一方で、あまり利用することのないマスター系アプリやプラグイン設定用アプリは、下に表示されるといった並び順となります。

tips
補足

💡お気に入りのアプリ

重要なアプリやよく使うアプリは、レコード一覧画面右上のピンの形をした「お気に入り」アイコンをクリックすることで、お気に入りに登録できます。
アプリをお気に入りに登録する/解除する (External link)
これらは、ログイン直後に表示される「アプリ」エリアのサイドメニュー「お気に入りのアプリ」から確認できます。
さらに「お気に入りのアプリ」はドラッグアンドドロップで自由に並び替えられます。
ただしこれはユーザー個人の設定のため、管理者が一括で設定できないことに注意してください。
同様に「お気に入りのスペース」も並び替え可能です。
[お気に入りのアプリ]を並び替える (External link)

その2:用途が一目で分かるアイコンを選ぶ

アイコンについても、アプリの用途が一目でユーザーに伝わりやすいものを選定すると、ユーザーの使いやすさが向上します。
アイコンはあらかじめkintoneで用意されているものだけでなく、任意の画像をアップロードできます。
アイコンの無料ダウンロードや作成ができるWebサービスもあるため、それらの活用もご検討ください。

その3:アプリの説明を活用する

アプリの説明は、レコード一覧画面・レコード詳細画面・レコード追加画面のいずれにも表示されます。
そのため、アプリの使い方や申請ルール、管理者への問い合わせ先などの重要な情報を記載しておくと、ユーザーに周知できます。
また、アプリの説明には文字装飾やリンクを設定できます。
関連する業務アプリへのリンクを埋め込むと、ユーザーが迷わずアプリを移動できる動線を作成できます。

その4:レコードタイトルを設定する

レコードタイトルは、検索結果や通知の見出し、レコード詳細画面のページタイトルに表示される文字列です。
レコードタイトルを設定する (External link)
レコードタイトルは、ユーザーが一番初めに知りたいと思うレコードの最も主要な情報のフィールドを設定します。
これによりユーザーはレコードの情報を一目で特定できます。

その5:デザインテーマを設定する

アプリごとにフォームやレコード一覧画面の配色を変更できます。
アプリのデザインテーマを変更する (External link)
デザインテーマはレコード一覧画面・レコード詳細画面にも適用されるため、ユーザーは今自分がどのアプリを開いているのか視覚的に分かりやすくなります。
たとえば同じタイミングで開くことの多い出張申請アプリと旅費精算申請アプリですが、異なるデザインテーマを設定することで、ユーザーの混乱や記入ミスを回避できます。

その6:利用用途に合わせたレコードの一覧を作成する

適切な絞り込み・フィールドを設定する

アプリの「(すべて)」というデフォルトの一覧は、絞り込みが設定されておらず、アプリ作成時のフィールドがすべて一覧に表示されます。
用途に応じた絞り込みと表示フィールドを設定した一覧を作成すると、利便性が上がります。

用途が一目で分かる名前をつける

一覧の名前について、誰が何の業務で使うためのものか一目で分かる名前をつけるようにすると、ユーザーが適切な一覧へ速やかにアクセスできます。
これは特に複数の組織や業務で使われるアプリに有効な工夫です。

例)一覧1 △ → 受注前ステータス案件 ◎

フォーム設定でできる工夫

フォーム設定でできるデザインの工夫を4つ紹介します。

その1:フィールド幅をそろえる

フィールドの幅はできるだけそろえると視認性の高いアプリになります。
しかしフィールド幅をそろえることにとらわれ、入力する値より狭い幅にしてしまうと、実運用時ではフィールド内で入力値が2行になってしまい、一転して見づらいアプリになってしまうことが懸念されます。
そこで、フォームの横幅を均等に分割し、その横幅の単位(ここでは「カラム」と呼びます)でフィールド幅を設定するという方法があります。
普段ユーザーが使うディスプレイ幅を意識しつつ、フィールドを設置するのは最大4〜5カラムまでとすると、フォームが横に伸びすぎて使いづらい、といった状況も避けられます。

その2:業務に最適化した配置をする

フィールドは業務手順に沿って配置すると、フォームを入力するユーザーの利便性が高まります。
たとえば同じ案件管理だったとしても、顧客名や案件の概要などは内勤営業が入力する一方、その後の案件の詳細については外勤営業が入力する場合、これらのフィールドはそれぞれ行を分けることで、別の担当者が入力することを分かりやすくできます。

その3:ラベルを活用する

小見出しを作成する

ラベルを使ってフォーム内に小見出しをつけると、フォーム上の情報を整理できます。
ラベル (External link)
小見出しは文字だけでなく、先頭に共通の記号を置くと、統一感を出せます。
たとえば、アプリのデザインテーマと同系色の「❚」記号を小見出しの先頭に置きます。
するとアプリ全体の配色と馴染み、洗練された印象のフォームになります。

フィールド名を装飾する

本来フィールド名は装飾できません。
ただし、ラベルを活用すると、フィールド名を装飾しているような見た目にできます。
装飾したいフィールドの設定画面で「フィールド名を表示しない」をチェックします。
そのフィールドの上にラベルを配置すると、ラベルをフィールド名のように利用できます。

配色ルールを統一化する

アプリの説明やラベルで注意書きをする場合、「赤は強調で青は補足」のように配色ルールを定めておくことで、特にアプリを横断して利用するユーザーの誤認を防げます。
また太字や下線といった他の文字装飾のルールを決めておくと、別の人が作ったアプリでも統一感が出るため、ユーザーが混乱することなくアプリを利用できます。
このルールはラベルだけでなく、アプリの説明やデザインテーマ、アイコンなどでも活用できます。

フィールドを組み合わせフッターのように配置することで、レコードの付随情報を統一感を持たせて配置できます。
フッターには、レコード番号や作成日時など、システム側の自動入力フィールドを選びます。
たとえば、罫線でユーザー入力項目と区切り、その下にレコード番号、作成者、作成日時、更新者、更新日時のフィールドを配置します。

tips
補足

💡誰にとっても見やすいデザインのために

ここまで色を用いたデザインの工夫もご案内してきましたが、必ずしも色に依存した表現がよいというわけではありません。
モノクロ印刷した時、プロジェクタで投影した時など、色が識別しにくい状況もあります。
色数が多すぎると、ユーザーの認知的負荷が高まり、逆効果になることもあります。
また特定の色の組み合わせ、たとえば赤と緑などは、一部のユーザーにとって識別しにくい場合もあります。
したがってアプリの説明やデザインテーマ、アイコン、ラベルといった色を用いて設定できる機能の利用に際しては、以下のような観点も重要になります。

  • 色数を増やしすぎないようにする。
  • 識別しにくい色の組み合わせを避ける。
  • 色だけではなく、形状やテキストを用いても識別可能なデザインにする。

その他の工夫

適切なスレッド名をつける

スペース内では、スレッドを話題ごとに分けることで、コミュニケーションを整理できます。
したがってスレッドは、取り扱っていきたい話題を適切にスレッド名とすることが重要になります。
スレッドを追加する (External link)
また、スペースの初期設定のスレッドは、自動的にスペースと同じ名前になります。
このスレッドの名前も適切なものへ変更すると、すべてのスレッドを有効活用できます。

ポータルやスペースのお知らせ欄にアプリを貼り付ける

周知したい情報の掲示や、スペースの案内によく利用されるお知らせ欄ですが、レコードの一覧やグラフといったアプリの情報を貼り付けられます。
スペースのお知らせやスレッドにアプリを貼り付ける (External link)
この機能の大きな特徴は、アプリの情報がリアルタイムで自動的に反映されるという点です。
たとえば社員全体への大切なお知らせをアプリで管理し、その一覧をポータルのお知らせ掲示板に貼り付ければ、お知らせの度にポータルを変更する手間がなくなります。
また営業スペースのお知らせに案件管理アプリから作成した売り上げグラフを貼り付ければ、常にメンバーに売り上げを周知できます。

部署や目的ごとにポータルを作成する

ポータルは2枚目以降を追加できます。
2枚目以降のポータルを追加する (External link)
2枚目以降のポータルでは、ウィジェットと呼ばれるパーツをドラッグして配置し、表示する情報とレイアウトを設定します。
配置できるウィジェットには、リッチテキスト、指定したアプリ、レコード一覧、グラフなどがあります。
ポータルに配置できるウィジェット (External link)

部署や業務ごとにポータルを分けると、ユーザーは担当業務に必要な情報だけを確認できます。

追加できる枚数は契約コースによって異なります。
ライトコースでは2枚目以降のポータルを作成できないため、利用前に契約コースを確認してください。
2枚目以降のポータルは、PC版でのみ表示されます。
また、ゲストユーザーには表示されません。

ログイン画面やヘッダーのデザインを変更する

kintoneユーザーにとってはお馴染みのログインページとkintoneカラーのヘッダーですが、これらは変更できます。
たとえば社内のチームワークをより強めるため、会社のオフィス写真やイメージカラー、ロゴに変更できます。

おわりに

本記事では基本機能でできるデザインの工夫を案内しました。
kintoneでは視認性や統一感、業務への最適化を意識することで、よりユーザーにとって使いやすいアプリを構築できます。
デザインの工夫については次の記事でも紹介していますので、ぜひ確認してください。

information

このTipsは、2026年9月版kintoneで動作を確認しています。

公式コミュニティ

kintone開発者同士で質問や知見を共有し、学び合うことができます。