業務系Webアプリケーションシステムの画面設計のしかた

More than 1 year has passed since last update.

どのシステム開発でも画面設計は非常に大切です。
画面設計時に良し悪しが決まってしまうことが多々あります。何故かというと画面というのは視覚的に見ることが可能なため、目に見えないプログラム実装に比べて人は評価しやすいのです。

今回は私なりの画面設計のしかたをまとめたいと思います。タイトルには「業務系Webアプリケーションシステム」と記述しましたが、仕事上こちらの開発が多いためこのように記述しました。

また業務系システムの画面設計関連の記事をあまり見かけたことがないため、今後、業務系システムの画面設計を行う方にとっての参考になればと思います。

1. 様々な業務システムのレイアウトを知る

まず、作り始める前に業務システムのデザインをストックします。業務システムを調べてみるとたくさんの画面デザインを見ることができるため、こんな画面にしたいというイメージを膨らませます。

また検索時にヒットする画面たちは万人受けされるデザインが多いので見て損はありません。

参考になるかもしれないギャラリーサイト

  • Calltoidea
    パーツ別に探せるUIのギャラリーサイトです。よく見る項目は「Login」「Calendar」「Nav」「Dashboard」など。
  • Collect UI
    世界中のUIを一覧表示しているギャラリーサイト。トップページに表示されたものをパラパラ流し見しています

上記のサイトは英語圏なため、パーツごとに参考にするのがベターです。

2.画面のラフを書く

大体のイメージが決まったらまずは画面デザインのラフ(下書き)をします。書かずにコーディングしてしまうと、最中に「ここは別の方がいいかも。」「メニューのレイアウトは垂直表示と並行表示どちらにしようかな。」など色々なことを考えてしまうため、私は最初に必ずラフを書きます。

rough1.jpg

上図は実際に私が書いた画面デザイン案になります。(紙に書いたものをスキャニングしました。)全体図2案にヘッダーメニュー3案です。今回はメニューの位置をどうするべきかという考えを主として設計しました。

最終的に考えたメニューの位置は左固定に決定。
ヘッダーやメニューの位置などの枠を決めた後はメイン部分となる中身を考えていきます。業務システムとなるとやはりデータの一覧表示であったり入力/表示項目は必須となってくるため、リストやテーブルを配置していきます。

上記を踏まえた最終案がこちらになります。

rough2.jpg

青枠で囲まれた画面デザイン図が今回の最終案です。

3. ラフを元にイメージ図を作っていく

本来であれば次の工程として、ラフを元にグラフィックソフトを使ってデザインモックを作ると思うのですが、残念なことに私はソフトを扱うことが出来ないためこのままコーディング作業に移ります。

今回はWebブラウザ(メインブラウザ:Google Chrome)で起動するシステムを想定していますので、使用言語は「HTML」「CSS」「JavaScript」です。

※画面設計のしかたということなので、コーディング内容については割愛します。ということで、画面イメージ図を元に出来上がった画面がこちらになります。

system.jpg

メインメニューはヘッダー直下に配置し、今後の実装としてはヘッダー内のメニューボタンにて表示/非表示するイメージです。サブメニューは左サイドバーを採用しています。

色合いやレイアウトについて

・色合い

クライアントから指定がない時に悩んでしまう色合いですが、青基調の画面にすると失敗が少ないです。青の心理的作用として「冷静」「安定」「知性」などといった色のイメージがあるのでおすすめです。(無難な色なので、平凡な画面になってしまいがちですが…)

また、クライアントのイメージカラーを使うのも良いでしょう。ただし、あまりにもドギツい「真っ黄色」「真っ赤」といった目に優しくない場合はアクセントカラーとして使うことをおすすめします。また、背景色は白に近い灰色の方が目に優しいです。真っ白だと目が疲れる場合があります。

色合いが決められないときによく使うサイト

・レイアウト

業務系システム然り、Webサイトの画面然り、適度な余白を心がけ要素を整列させましょう。1つの画面にたくさんの項目を表示したいばかりにぎっしりコンポーネントを詰め込んでしまうと、返って見難くなってしまいます。ほんの気持ちパディングを設定することをおすすめします。

4. 画面レビューを行って微調整をする

作った画面は必ず人に見せましょう。自分で完璧に作れたと思っても他の人に見せてみると意外なところに見落としがあったりします。人の意見は非常に重要ですので、ゆずれないところはきちんとアピールして、指摘された箇所は修正しましょう。


ということで、私なりの業務系Webアプリケーションシステムの画面設計のしかたを書いてみました。少しでも皆さんのお力になれたら幸いです!

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.