せっかく作ったシステムが現場で使われない——システム投資で最ももったいない失敗です。原因の多くは機能不足ではなく、画面が分かりにくい・操作が面倒という単純なことだったりします。

当社は画面（フロントエンド）の開発にVue.js（ビュージェイエス）とTailwind CSS（テイルウィンドシーエスエス）を標準採用しています。この記事では、この組み合わせが「使われるシステム」にどうつながるのかをご説明します。

Vue.js——画面を「サクサク動く道具」にする

Vue.jsは、世界中で広く使われているJavaScriptフレームワークです。これを使うと、画面の一部だけをその場で書き換える、動きの軽い画面が作れます。

• 待たされない——ボタンを押すたびに画面全体が読み込み直される昔ながらの作りと違い、必要な部分だけが瞬時に更新されます
• 入力ミスにその場で気づける——入力欄を埋めた瞬間に「この値は正しくありません」と表示するような、即時のチェックが作れます。送信してからエラーで差し戻される苛立ちを減らします
• 現場の道具になる——毎日使う画面は、0.5秒の待ち時間の差が積み重なって作業効率に響きます。業務システムの画面は「サクサク」であるべきです

実例として、月面探査車の疑似運転体験システムでは、iPadの画面操作が遅延なく実機に伝わり、探査車のカメラ映像がリアルタイムで手元に表示される操作画面を作りました（開発事例はこちら）。子供でも直感的に使える画面は、Vue.jsの得意分野です。

Tailwind CSS——デザインに「統一ルール」を持ち込む

Tailwind CSSは、画面の見た目を整えるための仕組みです。あらかじめ用意された部品（余白・色・文字サイズなどの決まった段階）を組み合わせてデザインする方式のため、ページごとにボタンの色や余白が微妙に違う、といったちぐはぐさが起きにくいのが特長です。

• 統一感のある画面——どのページも同じルールで作られるため、システム全体の見た目が揃い、操作の予測がつきやすくなります
• スマートフォン対応がしやすい——パソコン・タブレット・スマートフォンそれぞれの画面幅に合わせた表示調整が効率よく作れます。現場がスマホで使う業務システムでは必須の要件です
• 修正が速い——見た目の調整が短時間で済むため、「もう少しボタンを大きく」といったご要望に素早く応えられます

「非ITの現場で使われる」ための画面づくり

当社のお客様の多くは、IT専任者のいない中小企業・小さな組織です。だからこそ画面づくりでは、技術より先に次を考えます。

• 迷わせない——1画面ですることは1つに絞る
• 間違えさせない——押してよいボタンだけを目立たせ、危険な操作には確認を挟む
• 覚えさせない——マニュアルを読まなくても、画面を見れば操作が分かる状態を目指す

Vue.jsとTailwind CSSは、こうした画面を効率よく実現するための道具立てです。

まとめ

システムの価値は、現場で使われて初めて生まれます。サクサク動く画面（Vue.js）と統一感のあるデザイン（Tailwind CSS）は、「使われるシステム」のための当社の標準装備です。

当社の技術選定の全体像は「Webシステム開発の標準構成」でご紹介しています。