kintoneのテーブルは便利ですが、行数が多くなると少し見づらいと感じるようなことはありませんか？
例えば、次のようなことです。
この誰もが経験する「うっかりミス」の原因は、kintone標準テーブルのシンプルなデザインに一部起因しているものと考えられます。シンプルな単色表示だからこそ、場合によっては逆にちょっと見づらい、という具合です。
この記事では、kintoneのテーブルと関連レコードを見やすくするテーブル行縞々表示CSSについて、どのような変化が見込めるのか、実例を交えてご紹介します。このCSSをアプリに適用することで、もうデータ行を指で追いかける必要はなくなります。視認性が向上し、ストレスフリーなデータ確認が実現できるようになります。
目次
「縞々」だとテーブルの見た目はどう変わる？
kintone標準の場合のテーブル・関連レコードの表示と、縞々表示した場合とで比較を行ってみると、次のような見た目の変化があります。
kintone標準の場合のテーブルの見た目
詳細画面に表示されるテーブルと関連レコードについては、上記のように、画面の背景色がテーブル内の各行に適用され、単一色で表現されます。デザインとしての一体感がありますね。
テーブルを縞々表示した場合のテーブルの見た目
こちらは、テーブル内の行を1行おきに縞々で色付け表示したものです。
一覧表示と同じような色使いとなるように表現をしてみましたが、こちらの場合も特に違和感はないのではないかと思います。
テーブルの視認性を上げるなら縞模様表示がよい
視認性を比べると、テーブル形式のデータは1行おきに縞々表示されているほうが見やすいのではないかと感じます。これは、色の境界線が目の動きをガイドしてくれるため、脳の負担が減るためです。特に、似たようなデータが連続している場合や、多くの列がある場合に効果を発揮します。
ただし、縞模様はあくまで補助的な機能であり、データの種類や量によっては、縞模様で表示しないほうが良いケースもあります。そのため一概に縞模様が優位とは言えませんが、kintone利用者としての目線でいうと、やはり縞模様での表現したほうが見やすく感じるのではないかと思います。
テーブル行縞々表示CSSのアプリ適用方法とTips
テーブルを縞模様に表示するには、CSSファイルをアプリに設定すれば完了です。ほんの数ステップで反映させることができます。
テーブル行縞々表示CSSのアプリへの適用までの流れ
プラグインをアプリに設定する場合とほぼ同じ手順で行うことができます。
- テーブル行縞々表示CSSの試用申込を行う。
- 返信メール内のURLから、ダウンロードページに遷移する。（ZIPファイルで提供しています）
- ZPIファイルをダウンロード後、ファイルを展開する。
- 展開後のフォルダにCSSファイルが入っているので、アプリ設定画面内の「JavaScript / CSSでカスタマイズ」から設定する。
アプリへの反映の詳しい手順についてはこちらのページに記載してあります。
CSSファイルを編集すればオリジナル色にも変更可能
アプリのデザインテーマに合わせて5パターンのCSSファイルはを用意していますが、独自の色を設定したい場合、ファイル内のカラーコード部分を編集することで対応が可能です。
例えば「table-shima-style-default.css」の場合、ファイル内に「#f5f5f5」という部分があります。ここを別のカラーコードに変更することで、オリジナルの色にすることができます。
カラーコードについては、WEB色見本原色大辞典などのサイトなどを参考にしてみてください。
なぜ私たちはこのCSSを無料で提供するのか？
私たちは、サービスを通じて自由な発想を刺激し、アイデアを実現へと導くことで、ビジネスが持つ可能性を大きく広げることに貢献したいと考えています。そのためには、日々の業務で感じる小さなストレスを解消することも、必要なことの1つと捉えています。
視認性については、見やすければよいものではありますが、標準の形でも特に困りはしないでしょう。
しかし、私たち自身もkintoneユーザーであり、利用者目線で考えた場合、やはりあったほうが見やすくなると感じていました。それならやったほうがいいよねということで思い立ち、このシンプルな解決策を共有することにしました。
まとめ：小さな改善から大きな快適さを
たった数行のCSSが、毎日のデータ確認作業のストレスを減らし、入力ミスを防ぎます。
この『小さな改善』がもたらす『大きな快適さ』を、ぜひあなたのkintoneで体感してください。
コアノーツでは、このようなかゆい所に手が届くものとして、他にはポータル用PDFプレビューJSも無料で提供しています。テーブル行縞々表示CSSと合わせて試してみてはいかがでしょうか。
コアノーツ株式会社 代表取締役。
2016年よりkintoneの導入支援・アプリ構築等の数多くのプロジェクトに従事。
現在は現場の「あと一歩」の課題に応えるためのプラグインを開発・販売。パートナー企業の皆様が持つ高い技術力とAPIを掛け合わせることで、お客様の利益を最大化するソリューション創出を目指す。「発想をカタチに、可能性をもっと先へ」がモットー。
