【今回のリリース内容】

 

CAREECON 施工管理のアプリ版のデザインを全面リニューアルしました。

以前のデザインよりも統一されたデザインに一新して使いやすさを向上させました。

 

 

【開発背景】

 

現状のアプリにおいて「複数のデザイン」が反映されており、見た目や操作性において統一性がなく使いやすさに欠けるデザインとなっておりました。

 

下記のスクリーンショットのようにタップできる箇所が上や下に合ったりと統一されていませんでした。

 

🔸変更前・変更後の比較

全画面のデザインのリニューアルを行いました。

以下が実際のプレビューです。

 

案件一覧(アプリ起動時)

　　Before　　　　　　　　　　　　　　　After

 

案件詳細

Before　　　　　　　　　　　　　　　　After

 

ファイル一覧

Before　　　　　　　　　　　　　　　　After

 

工程表

Before　　　　　　　　　　　　　　　　After (マス目の境界線の色が濃いのは修正中です)

 

掲示板詳細

Before　　　　　　　　　　　　　　　After

 

 

🔸改善ポイント

改善した箇所を実際のアプリの流れに沿って説明します。

ポイント① 押せるボタンという認識をしやすく変更

例として掲示板詳細画面の変更を比較します。

 

①の掲示板詳細画面では、

• 写真をタップすれば②のファイル詳細画面に遷移
• 「1人が既読」をタップすれば③の既読/未読者リストが表示される

しかし、①の「了解！ボタン」が小さく見えづらい為、ぱっと見では「タップ可能かどうか」が判断しづらい状態です。

 

そこで以下の改善を行いました。

 

 

写真は画面両端に余白を設けて大きめの角丸にし、既読は画面下部に設置しました。

タップ可能な写真は角丸に変更。直感的に「タップ可能」だと判断しやすくなります。

 

ポイント② 新規作成ボタンの位置の統一

現状のデザインでは同じような機能でもページによって見た目やパーツ(ボタンやアイコンなど)が違う部分が多いため、改善しました。

例として新規作成ボタンが画面ごとに場所が違う点を改善しました。

• ①の案件作成と③の掲示板作成は画面上部に
• ②の大工程、小工程、予定作成と④のファイル追加は画面右下に

と画面によって新規作成の導線が異なっている為、どこをタップしたらよいかが伝わりません。

 

そこで新規作成ボタンを右下に配置するデザインに統一しました。

こちらに変更することにより「新規作成ボタンは右下だな」という予測がつけられるようになり、他の画面でも迷うことなく機能を使うことができるようになるかと思います。

 

ポイント③ 案件・ファイルなどの検索結果の画面表記

現状のCAREECON 施工管理では登録している情報が探しづらい部分があるため、今回のデザインリニューアルで改善しました。

• 例１：案件とファイルの一覧の検索結果が0件の場合

①の案件の検索結果が0件の時には何も表示されていません。これでは「検索が何もヒットしなかった」のか「検索ができなかった」のかが把握しにくいです。

②のファイルの検索結果が0件の場合とファイルが入っていない空のフォルダを開いた時の画面とで表示内容が同じなので混乱を招いてしまいます。

 

そこで以下のような改善を行いました。

 

①案件検索、②ファイル検索にて検索がヒットしなかった時に「〇〇が見つかりません」と表示を見せることで「検索結果が0件」という状態が分かりやすくなりました。

③フォルダ内が空の場合はファイルが存在していないことをテキストで表示するようにしました。

 

• 例２：指定している検索条件の表示

案件の絞り込み検索にて、絞り込んでいる条件のカテゴリは表示されますが、「具体的に何で絞り込みをかけているか」はタップしないと確認できません。

①が案件検索画面、②が案件検索の条件指定の画面になります。

そこで、検索キーワードと絞り込み条件を常に確認できるデザインに変更しました。

 

これにより「どんな条件で絞り込みをしているのか？」が常に確認できるので、検索がしやすくなると思います。

 

 

うまく作動しない等ございましたら、お気軽に担当スタッフまでお知らせください。