こんにちは！ 夏野菜の成長が著しい季節、草むしりの無限ループに陥っているHarashoです！
今回はこれまでデザインについて深く考えてこなかった私（バックエンドエンジニア）が、ページ構成やデザインについて考えるきっかけになったシステム改修について記事にしようと思います。
背景・経緯
普段私は社内システムの開発・運用を行なっていまして、もうすぐ1年が経とうとしています。
これまで機能改修や追加の依頼があった際、基本的には既存のページ構成を踏襲する形で開発を行ってきましたが、 ある時から特定のページにおいて機能追加が行いづらいと感じるようになりました。
そう思うようになったフロント起因の理由は、以下です。
- ページ内で行えるアクションが多い
- 類似性はあるが、内容の異なるA, B, C, Dのそれぞれに対して、登録・編集・削除が行える
- ページ内に表示項目が多い
- かつ、登録有無やステータスに応じた表示・非表示の切り分けがない
- ページ内で使用しているカラー色が多い
など
一言でいうと、ページが『ごちゃごちゃしている』状態でした。
そのような中でさらに機能追加の依頼があり、これはいい機会だと思いデザイナーの方にフォローいただきながら整理をしました。
対応したこと
以下を実施しました。
- ページ分割
- 登録状況やステータスに応じた表示切り替え
- 意図のない配色を除去
- 余白を調整して要素を整列
ページ分割
ページ内でA, B, C, Dの登録・編集が行えていたのを、それぞれ個々のページに分解しました。
個々の登録・編集は独立していたので別ページに移動することへの仕様的制約はなく、今後新規要素が増えてもページの肥大化を防ぐことができました。
この時点でざっくりと元々のページから情報量が4分の1に減って見通しがよくなりました。
登録状況やステータスに応じた表示切り替え
修正前は初期表示されている要素が多々ありましたが、登録状況やステータスに応じて表示切り替えを行うようにしました。
具体的には、設定数を表示している箇所は登録のあるもののみ表示するようにし、 ボタンは各ステータスで押下可能なボタンのみ表示することで、次に行うアクションへの誘導を明示できるようになりました。
意図のない配色を除去
ボタンやセパレータに固有の配色を用いていましたが、極力使用する色を制限し、注意を引きつけたい箇所を目立たせるための配色に変更にしました。
余白を調整して要素を整列
項目間の余白、テーブルやinputタグのwidthを調整し、ガタガタとしていた個々の要素を整列することですっきりとした配置としました。
やってみて思ったこと
これまでデザインについて深く考えてこなかった私ですが、今回の対応でデザインはユーザーにどう行動してもらいたいか、何を見せたいかといった 意図を伝えるための手法であり、論理的に考えるものだと理解しました。
細かいテクニックは多々あるかと思いますが、基本的な考え方に少しでも触れることができ専門外と捉えていたデザインが面白いと思えるようになったことが個人的な収穫でした。
綺麗な絵は描けませんが、デザインについて少しでも語れるように日々精進していこうかと思います！
インゲージでは各種職種で募集を行なっています！ ご興味あればぜひご覧くださいませ〜。 ingage.co.jp
