アートボード_1_のコピー

社内備品管理アプリをデザインしました

デザインのきっかけ

このプロジェクトは、同じ会社で勤めているサーバーサイドエンジニア兼今回のプロジェクトリーダーであるナムさんの呼び掛けで始まりました。

アートボード 1 のコピー 3

アートボード 1 のコピー 3−0

社内での備品管理は現在、エクセルシートで行われており、管理番号確認と写真登録をするのにとても不便とのことでした。このような部分を改善するために、簡単に備品を登録・閲覧出来るアプリが企画されました。

スクリーンショット 2019-09-23 4.35.59

「備品管理」という言葉を耳にすると、どこか複雑そうで、堅いイメージを思い浮かべる方が多いかと思います。

みんなに優しい備品管理ツールを作りたい!そんな思いで、BIHINGのデザインは誕生しました。

社内備品管理アプリ(ver.1.0.0)の機能

【全社員 / 管理者共通】
・全備品リスト表示
・備品詳細表示
【管理者】
・ログイン
・備品登録(写真/管理番号/種類/品名/メーカー/備考)・編集・削除

デザインフロー

1. 画面構成・設計
最初に渡された画面設計図だけでは、画面遷移を把握しずらかったので、UXを考慮した上で、初期画面、ログイン方式、管理者用の画面を新たに設計しました。

2. デザイン調査
Pinterest・Behance・dribbbleなどのサイトを利用し、リスト画面のUI、カラーとテイスト、ロゴ作りに参考出来るようなビジュアルをインプットしていきました。良いデザインを作り出すためには、良いデザインにたくさん触れる必要があると常に思っているので、インプットにたくさんの時間を割きました。

3. スタイルガイドの作成
スタイルガイド作成するにあたり、集めたデザイン資料を活用し、頭の中で描いている全体的なイメージをチームメンバーに共有しました。そうやって大まかなルックアンドフィールを決定した後は素早く画面作りに突入しました。

アートボード 1 のコピー 2

アートボード 1 のコピー 2dd

スタイルガイド
すっきりさわやかをコンセプトに、カラーは、爽やかなミントとグリーンをメインカラーに、サブカラーはグリーン系のグレーを使い分け、全体的なトーンを合わせていきました。そのほか、アイコンは、やや重みのあるロゴのテイストに合わせ、ラインを全体的に太めに設定し描きました。

4. ラフデザイン
必要な画面数自体そもそも、少なかったため、 2時間程時間を使い、プロジェクトリーダー・アプリエンジニアの隣でコミュニケーションを取りながらその場で全体的な画面を製作していきました。リアルタイムでフィードバックをもらいつつデザインを進めていくことができたので、効率的に作業ができたと思います。

画像5

5. ロゴ制作
アプリ名が決まり、いくつかのロゴ案を製作しました。まずは、手書きのラフ案をばっと描いた後、その中からいくつかを絞り、カラーを着せ替えた後、メンバーの皆に共有しました。投票を行った結果、箱の形をした、ロゴ(2番)が一番多くの票をいただいたので、「BIHING」の正式ロゴとなりました。

レイヤー 21

ちなみに、このロゴは、備品を綺麗に管理できる、魔法のサービスになりたいという意味が込められています。

6. 画面のブラッシュアップ・修正
最後に、全体的な画面のデザインを整え、アプリ内で必要な細かなパーツ製作、その他、修正・追加作業を行いました。

今後、バーションアップするに連れ、貸し出し機能など、新しい機能が増えるかも?と思われますが、一旦、今回はこのような工程を経て、プロジェクトを終わらせることができました。

画像7


デザインピックアップ

いくつかの画面をピックアップして紹介いたします!

画像9

メイン画面
(左) スプラッシュ画面  / (右) 備品リスト
最初にアプリを起動させると、全社員閲覧できる備品リストが表示されます。管理番号を右に寄せ、番号確認しやすいよう工夫しました。ここのページでは、閲覧だけが可能で、管理者(総務の方)が備品の登録・修正・削除を行いたい場合、別途ログインが必要となります。


画像11

管理者リスト
(左) 備品リスト  / (中) ログイン画面 / (右) 管理者用備品リスト
リスト画面の上、緑のバナーをタッブすると、ログイン画面が表示されます。初期画面である、備品リストのページですぐログイできるよう、デザインを工夫し、ユーザビリティを高めました。ログイン後は、管理者画面に移ります。備品リストと、UI的にあまり変わりはないのですが、上には、管理者用というテキストボックスが追加、下には新たに登録ボタンが現れ、備品の登録・編集・削除ができるようになります。


画像11

備品登録と詳細確認
(1) 管理者用リスト  / (2) 登録画面 / (3) 写真追加 / (4) 備品詳細
管理者用備品リストの項目を左にスワイプすると、編集と削除作業を行うことができます。登録した備品を閲覧できる詳細画面は、備品リストでも同じく管理番号を大きくし、見やすいよう工夫しました。また、切り取られたチケットのようなジグザク要素を装飾として取り入れ、ちょっとしたポイントを与えました。


今後の課題及び反省点

bihing_発表資料.013


このプロジェクトを通し、今、自分に何が足りないのか、デザイナーとして、今後何を勉強していくべきかについて考える機会になりました。また、改めてサービスづくり・デザインの楽しさに気づくことができました。まだまだ、始まりの段階ですが、これからも頑張っていきたいと思います。

Special thanks to Namu~!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
スキありがとうございます!🐈
10
UX/UI, Visual Designer