【葬祭業DX】専門知識がなくても「あと少し」が叶う!NotebookLM×公式ヘルプで実現したティアのカスタマイズ術

まるチャンのサムネイルアイコン まるチャン

トヨクモkintoneフェス2026「ライトニングトーク」登壇の様子をレポート!

FormBridgekViewerで画面を作っていると、「この辺だけちょっと変更したいな」「もう少し見た目を良くしたいな」と思うことはありませんか。

しかし、そこに手を入れるにはJavaScriptやCSSの知識が必要になります。株式会社ティアの田代誠さんは、その「あと少し」を、NotebookLMに公式ヘルプを読み込ませるという方法で叶えました。

この記事は、2026年7月に開催した「トヨクモkintoneフェス 2026」のライトニングトークでの登壇レポートです。

今回は「トヨクモ製品を自分たちでカスタマイズする NotebookLMで実現するJavaScript・CSSカスタマイズ」でご登壇いただきました!

登壇者情報|田代誠さん(株式会社ティア)

M&A・DX推進室に所属し、社内のDX推進を担当。トヨクモ製品のカスタマイズにも自ら取り組んでいる。

愛知県を拠点に、全国200店舗超の葬儀会館を運営

株式会社ティアは、葬祭事業を中心に展開している会社です。愛知県を拠点に、全国で200店舗を超える葬儀会館を運営しています。

現在は、代表の半生を描いたショートドラマ「最期の、ありがとう。」をYouTube・TikTokで公開中です。

「ここだけ少し変えたい」を阻む、JavaScript・CSSのハードル

さて、本題です。

FormBridgeやkViewerを活用している中で「ここを少し変えたい」と思うことがあると思います。

しかし、見た目や機能を変更するには、JavaScriptやCSSをちゃんと知っていないといけません。するとなかなか難易度が高いな、と思われている方も多いのではないでしょうか。

実際、会場で「FormBridgeやkViewerでJavaScript・CSSのカスタマイズを使っている方はいますか」と質問してみたところ、手が挙がったのは10名ほどでした。

▲ 見た目を変えるには、JavaScript・CSSが必要になる

【重要】カスタマイズはトヨクモのサポート対象外

解決策の前に一つ、大事なポイントがあります。JavaScriptの作成やカスタマイズについて、トヨクモではサポートができません。また、カスタマイズを行っている場合は、製品の動作保証もできないとのことです。

つまり、コードは自分で作って、自分で責任をもってその環境を管理しなければならない。ここが、ハードルをさらに高くしている部分でもあります。

AIが公式情報を「翻訳」する。NotebookLMを選んだ理由

JavaScriptやCSSのコードを書く際に、最近はAIを使われている方も多いと思います。私の場合はNotebookLMを使っています。

理由は、NotebookLMはURLでドキュメントを読み込ませることができるからです。

トヨクモではJavaScriptカスタマイズの説明資料がURLで公開されています*。これをNotebookLMに読み込ませて、学習ソースにしています。

*FormBridge、kViewerのJavaScriptカスタマイズに関する説明、リファレンス、注意事項はそれぞれ下記のURLをご参照ください。
FormBridge
kViewer

 

▲ 公式情報をAIがコードに「翻訳」する

やっていることは、公式情報をコードに翻訳してもらう作業です。回答の根拠が公式情報である、というのがポイントですね。

日本語で指示するだけで、CSSができあがる

準備:公式ヘルプのURLをソースに登録する

準備といっても、NotebookLMにカスタマイズヘルプのURLをソースとして登録するだけです。

私が使っているのは、FormBridgeとkViewerそれぞれのカスタマイズヘルプのページ。これだけで、学習の準備は整います。

▲ FormBridge・kViewerのカスタマイズヘルプのURLをソースに登録する

実行:日本語で指示を伝える

準備ができれば、あとは簡単です。

たとえば「タイトルのフォントサイズを2倍にして中央に寄せて」。この指示を日本語で出すだけです。

結果:出てきたCSSを保存して追加する

指示を出すと、CSSが出来上がってきます。

あとは、それをCSSファイルとして保存してアップロードするだけ。フォームのタイトルが2倍のサイズになり、中央に寄りました。

▲ 生成されたCSSを保存して追加すると、タイトルが2倍・中央寄せに

コメントを多く残せば、修正は「組織の共通資産」になる

NotebookLMが技術の架け橋になってくれるので、CSSやJavaScriptの書き方の知識がない方でも、簡単にカスタマイズができるようになると思います。書き方を覚えるための学習時間も削減できます。

そしてもう一つ、コードにはコメントを多く残すことをおすすめします。次に触る人を迷わせないことが、システムの共通化につながっていくと考えています。

▲ 学習時間の削減と、修正コメントによる「組織の共通資産」化

ぜひこの方法を活用して、皆さんの「あと少し」を叶えてください。

ご登壇ありがとうございました!

JavaScriptやCSSと聞くと、自分にはハードルの高い話だと感じてしまう方は多いのではないでしょうか。今回のお話は、その手前にある「あとちょっとだけ見た目を変えたい」という気持ちを起点にしていました。全てを自作するのではなく、既存の画面に少しだけ手を加える。その範囲であれば、AIを味方にすれば十分に手が届きます。

特に印象的だったのは、一般的な生成AIではなくNotebookLMを選び、公式ヘルプをソースに指定されている点です。回答の根拠を公式情報に限定することは、失敗を減らすための工夫でもあります。

なお、JavaScript・CSSによるカスタマイズはトヨクモのサポート対象外となりますので、その点はご留意のうえでお試しください。

そして、コードにコメントを多く残してシステムの共通化につなげるという視点も大事です。単なる時短テクニックではなく、組織として属人化させない仕組みづくりの話でもありました。修正した本人以外が触れる状態にしておく。この考え方は、業種を問わず応用できそうです!

今回お話しの中でご紹介いただいたFormBridgekViewerは30日間のお試しを何度でもご利用いただけます。

「一人で悩まない」が、DX成功の第一歩

業務改善を進める中で、壁にぶつかったり、孤独を感じたりすることはありませんか?

ユーザーコミュニティ「トヨクモPark」には、試行錯誤しながら楽しく改善を続ける「仲間」がたくさん集まっています。ちょっとした相談から、マニアックな活用の自慢まで。

トヨクモ製品をもっと身近に、もっと楽しく使いこなすための場所で、あなたをお待ちしています。

詳細・参加はこちら

まるチャンのサムネイルアイコン

執筆者まるチャン


トヨクモのユーザー会の主催やオンラインコミュニティ【トヨクモPark】の運営を担当しています! SNSのフォローもお待ちしてます〜!

その他のお役立ち情報 Other Useful Information

サービスカタログや過去のセミナー動画、FormBridgeを応用したもっと便利な活用方法などを紹介しています。


私たち、トヨクモのサービス Our Services

kintoneをより使いやすくするためのkintone連携サービスです。30日間の無料お試しへぜひお申し込みください。

すべての機能を30日間無料体験