昨今DXという言葉をよく見聞きします。日本では今後様々な分野で人材不足が懸念されている中で、業務を効率化するためには積極的にDXを進めていくことがとても重要だと考えています。しかし、DXを実現していくためにはまずデータが蓄積されることが大前提で、そのためには何かしらのシステムを導入することが必要になります。最近は生成AIの技術の発展によってプログラミングのハードルが劇的に下がりました。非エンジニアの方がAIを使って業務改善していくケースも増えていくことでしょう。このような背景から、今後は社内でExcelで行っている業務をアプリケーションとして作成し、システム化を図る場面は増えていくことが予想されます。
今回は、Excel業務のシステムでWebアプリケーションを開発する場合のUIデザインについて深掘りします。
Excelのフォーマットをそのまま移行しないのが吉
まず先に結論を書いておくと、Excel業務をWebアプリケーションでシステム化する場合、ExcelのフォーマットをそのままWebページのレイアウトとして当てはめていくことは避けた方が良いです。
なぜExcelのフォーマットをそのまま移植するのが良くないのか。実際のサンプルを見ながら課題を確認していきます。
ユーザー情報の登録
Excelのよくあるフォーマット
ここでは、Excelフォーマットを作り、紙で印刷して手書きで行う業務について考えます。例としてユーザー情報を入力してもらうようなフォーマットが必要であると仮定し、以下のようなフォーマットを想定します。
Excelは表形式でデータを表現するため、このようなフォーマットにそれほど違和感を感じません。
では、このようなフォーマットWeb上で表現したい場合はどのようなレイアウトにするのが良いのでしょうか。
Webページのレイアウト-パターン1
まずはExcelのフォーマットを真似してみます。
細かいデザインにはこだわらず、最小限のHTMLを使って同じような構造を作ると、以下のようなレイアウトになります。
デザインに対する感じ方は人それぞれかと思いますが、このレイアウトを良いデザインと感じる人は少ないのではないでしょうか。
Webページのレイアウト-パターン2
2つ目はCSSも使い、よりExcelのフォーマットに見た目が近づくように調整してみます。
パターン1のレイアウトと比べると、氏名と住所の入力欄が右側にずれて、入力欄の開始位置がそろうようになりました。どちらのデザインが良いと思うかは人それぞれかもしれませんが、個人的にはこちらの方がパターン1よりは統一感があって良さそうに感じます。
Webページのレイアウト-パターン3
3つ目はExcelのフォーマットと同じにすることにこだわらず、ラベルを入力欄の上に持っていき、ラベルと入力欄が縦に並ぶような配置にします。
サイズ感などは調整の余地はありそうですが、これまで見てきた3つのパターンの中では、このレイアウトが最も整っていると感じます。
では、なぜパターン1とパターン2のレイアウトよりパターン3の方が良いのでしょうか。
その理由を説明できるようにするためには、デザインの原則を知ることが大事です。
デザインの原則を知る
デザイン入門における定番書として知られているノンデザイナーズ・デザインブックでは、デザインの4つの基本原則が紹介されています。その4つとは
- 近接
- 整列
- 反復
- コントラスト
の4つです。この中から、今回は「近接」と「整列」について取り上げ、その2つの観点からパターン1とパターン2のレイアウトの課題を見ていきます。
まず、「近接」とは、関連のあるものは近づけましょう、関連性のないものは遠ざけましょう、という原則です。
次に「整列」とは、規則正しく並べましょう、という原則です。
どちらも当たり前のことのように思いますが、その当たり前が守られていないデザインは多くあります。
パターン1の問題点
ここで改めてパターン1のレイアウトを確認してみると、それぞれの入力欄の開始位置が揃っていないことが分かります。これはつまり、「整列」の原則を満たしていないということです。
パターン2の問題点
続いてパターン2のレイアウトを改めて確認します。こちらは入力欄の開始位置が揃っているため、整列の原則は満たしています。しかし、氏名と住所の項目はラベルと入力欄の位置が離れてしまっています。そのため、「近接」の原則を満たせていないことになります。
パターン3の確認
最後にパターン3のレイアウトを改めて確認すると、開始位置はきれいに揃っていて、関連するラベルと入力欄は近くに配置されています。そのため、「整列」「近接」のどちらの観点で見ても原則を守っています。
このような理由から、パターン3のようなレイアウトが好ましいと考えられます。
ExcelとWebのそもそもの違い
Excelはそもそも表計算ソフトであり、表形式にデータを表現するのが得意です。そのため、データの流れが横方向でも縦方向でも、どちらにも違和感なく対応できます。また、Excelの場合はPCで操作する人の方が多く、PCの画面サイズに合わせたフォーマットでも問題は起きにくいです。
一方Webは基本的に縦方向にデータが流れていく方が自然です。また、Webの場合PC、スマホ、タブレットなどの様々なデバイスから使われるため、横方向に広がるレイアウトはユーザーにとって不便になる可能性が高いです。そのため、ExcelのフォーマットをそのままWebに移植してしまうと、先ほどの例のように微妙なデザインになってしまう可能性が高いです。
Webで表現しにくいデータ構造
Webページを作成する際はデザインの原則を守ることが大事ですが、Webアプリの場合はデータ構造を意識することも大事です。
Excelで以下のような構造の表を見かけることがあります。
何度もお伝えしていますが、Excelは表形式でのデータ表現が得意なので、このような構造にあまり違和感はありません。データが増えたとしても、役職が増えたら行を追加し、3人目の役職者が増えれば列を増やすことで簡単に対応できます。
一方Webの場合、このようなデータを表現するにはどうすればよいでしょうか。
HTMLにもtableタグがあるので、見た目上同じようなテーブル構造を作るのは比較的簡単です。
しかし、データベースなどから動的にデータを取得してこのような見た目を作ろうと思うとプログラムの作りや内部的なデータ構造が複雑になり、実装コストやメンテナンスのコストが増えてしまう可能性があります。
Webの場合、以下のような表形式にすることができれば、プログラムやデータ構造のシンプルになりますし、データが追加されたときの特別な対応を考える必要もあります。
Excelではデータの流れとして横方向と縦方向が混在することは珍しくありませんが、Webで同じことを実現しようとするとプログラムの難易度が一気に高くなってしまいます。プログラムの実装コストやメンテナンスコストを低く抑えるという意味においても、Excelのフォーマットをそのまま使うのではなく、Webに適した形にデザインし直すことが重要になります。
セル結合に注意
Excelではセル結合を駆使することで柔軟性の高いレイアウトを実現することができます。
例えば、以下のようなフォーマットを簡単に作成できます。
一方、Webで同じようなレイアウトを実現しようと思うとなかなか大変です。一応、CSSのgridを駆使すれば同じようなレイアウトを作ることは可能です。
しかしながら、このようなレイアウトを作るコードは保守性が高いとは言えませんし、レスポンシブデザインに対応しようと思うとさらなる工夫が必要になり、より難易度も上がります。また、レイアウトがこのように複雑になるとタブキーによる入力順序も工夫が必要になる可能性があります。
セル結合されたフォーマットの場合、Web上でどのようなデザインにするかはよく検討してWebの構造に合わせた形にする方が良いでしょう。
まとめ
Excelで作られたフォーマットをWebで表現するための注意点について見てきました。当たり前ですが、そもそもExcelとWebは目的や得意なことが全くの別物です。そのため、Excelで表現されているフォーマットをそのままWeb上で表現しようと思うと、多くの課題が出てきます。技術的には似たようなレイアウトにすることは可能ですが、その結果デザインの原則を守れていないレイアウトになってしまったり、プログラムの実装コストが上がってしまう恐れがあります。
既存の業務に対してシステム化を図ろうとすると、少なからず抵抗が生まれることはあります。その際、既存と同じレイアウトにすることで抵抗を少なくできると考える人もいるかと思います。しかし、ExcelとWebはそもそも別物であるため、同じデザインを採用すると技術的な負債がたまりやすくなります。業務の流れが変わらないとしても、Webアプリケーションとして作成するのであれば、Webのデザイン原則に則った形でデザインを最適化することが大事です。
今の時代、Excelで行っている業務をシステム化する場面はきっと多くの場所で必要になってくるかと思います。その際、Webアプリケーションを作ってシステム化することを検討することもあるかもしれません。そのようなとき、この記事の内容が少しでも役に立てば幸いです。
参考
1998年の第1版刊行から 20年以上ずっと読まれ続けている デザイン 基本書の 超定番。
https://book.mynavi.jp/nddb/