じゃじゃん。
本日、ODIN リアルタイム配送システムの管理画面のデザインをリニューアルしました。
どんなふうになったかというと、
<リニューアル前>
<リニューアル後>
「え?どこが変わったの??」
と言われそうですが、地味ではありますが小さいPCで見たときや、スマホ・タブレットで見たときの画面が見やすくなったのと、上部のメニューがシンプルになったのです。
今までも、画面は
「使いやすい」
と評判を頂いていましたので、既存のお客様の使い勝手をなるべく損なわないデザインになっております!!
ログイン画面はだいぶ変わりました。
<リニューアル前>
<リニューアル後>
ちょっとこれは、お客様を驚かせてしまうかもしれませんね。しかし、いらない要素をだいぶ省いたので、シンプルで使い勝手の良いものになったと自負しております。( ˊᵕˋ )
このログイン画面が今までと違いすぎて、私がこの画面を作っている間、弊社の社員さんが
「なんかよくわからないシステムのログイン画面を後藤さんがずっと見ている。
きっとパスワードを忘れてログインできないんだろうなぁ…。」
と思っていたらしいです。(笑)
デザインに関しては私が担当しており、デザインの絵を作っただけでなく、今回CSSとかもだいぶ私自身が編集しました…。
モバイルファーストということで、スマホでこの画面を見る方に使いやすく、というのが今回のテーマの一つでして、Bootstrap3からBootstrap4になりました。
それに伴いjQueryもバージョンアップしましたので、裏はかなり変わったわけです。
なので、全ページを目視で確認したりしました…。全部で146個もお客様が入力したり見たりするページがありまして、大変でした。(´ω`)
今回のデザインのポイントとしては、画面右上の
「ここ!」(ゴー☆ジャス様みたいに再生してください。)
に注目してください。
PCでないと出てこないです。
ODIN リアルタイム配送システムのシリーズのロゴも槍がモチーフですが、ここにも槍を入れました。( ˊᵕˋ )
最初これはなかったんですが、ないデザインをS課長に見せたときに
「なんか堅苦しいデザイン~。ほかのシステムと変わりない~。遊び心がない~。」
と言われましたので、つけました(笑)。
ODINという製品名は、北欧神話の神、「オーディーン」からとりました。この槍は、オーディーンの持っている槍の「グングニル」という槍のイメージです。
決して的を外さないそうです。⊂(^-^)⊃
配送業の皆様に、「決して的を外さない」お仕事をしていただきたい!というイメージです。
ここをクリックすると、リアルタイムマップに飛べます。リアルタイムマップというのは、ドライバーさんの位置情報が地図上でリアルタイムに更新される画面です。
やはり皆さんが一番アクセスする画面なんですよね。なので、ここに配置することで、アクセスもしやすくなるわけです!
これからも、ODIN リアルタイム配送システムをよろしくお願いいたします。