長谷川ポートフォリオ

UIUX+漫画のポートフォリオ

デザイン意図―ラクスル

 

ラクスル

印刷のことなら格安・激安の印刷通販【ラクスル】

 

こちらがラクスルのホーム画面ですが「見せたいものが沢山並べられていて、

初見さんに与える情報が過多になっています。

 

ラクスルでは他社と何が違うのか?

・何が特なのか?

 

といった部分をもっとまとめて初見さんに伝える必要性があります。

 

そこで情報整理を行い、このホーム画面からスクロールなしですべての画面に

行けるように大カテゴリボタンだけを画面下部に並べました。

 

参考↓

xd.adobe.com

何故画面下部なのかにつきましては

初見ユーザーの思考をスキャンしますと、

 

人は物を上から下に向けて見ますので

画面上部で

「サイトのメリット認知」+「サイトの種別認知」をすっきり紹介し、

 

画面中段では

このサイトだけが持つ特別なもの「Aiデザインシステム」を

表示し、(クリックでその画面がさらに下に現れます。)

この機能は「体験を無料で売る」という購買テクニックが使われています。

 

デパートの試食コーナーもそうですし、

ヤマハ音楽教室の無料レッスン、

そしてキャンバスというオンラインデザインツール

https://www.canva.com/ja_jp/create/canvas/

フィグマもそれに当たります。

 

体験が先に来ることで良さを理解し、購買につながるという

理論です。

 

画面下部には画像付きで分かりやすいボタンを並べてその中に

分化した商品を並べています。

 

ラクスルの場合はほとんどが「印刷して購入」する商品が多く、

そのボタンが左端に置いてあります。

クリックでチラシなど多くの商品が表示されます。

 

「印刷+購入」を押すことでログイン中の画面を表示してありますが、

配送中、配送準備中の件数を第一層に表示することでクリックしなくても

すぐにわかるようにしてあります。

 

視線誘導色は赤で注目してほしい箇所に使っています。

 

ログイン後に使うメールボックス、通知などは「見る系」であり、

良く押すボタンでは無いので

画面上部に小型のボタンで配置してあります。

 

 

 

 

 

 

 


デザイン意図―note

この設計では視線誘導を意識してデザインしてあります。

赤系の色が使われていないので「ここを見てほしい」という時に

その箇所に赤色のボタンなどを使う予定です。

 

そして記事と背景色の明暗差を使い、記事の認知度を上げて、

ユーザーには認識しやすくしてあります。

 

記事も複数の種類を混ぜたりせず統一して分かりやすく改善しました。

 

詳細↓

xd.adobe.com

 

 

デザイン意図―indeed

こちらは初めてUIデザインをしたものです。

YouTubeで2時間ほど勉強して始めています。

 

物覚えが良いのでどのようなツールもすぐに使えるようになります。

 

仕事を探す側として整理されていないと非常にみづらく感じますので

探す側にとって見たいものを選んでピックアップし、

縦スクロールで見ていくイメージです。

 

第一層(何もタップしていない状態の画面)には

「リモート率」=グリーンが全面的に塗られるとフルリモート

 

「応募条件」=これを満たしていないと応募不可であり、先に見たいので

第一層にあるべきと感じます。

文章を見たあげくに「応募できない、、」となるのは時間の浪費になり、

沢山ん記事を見る妨げになります。

 

募集記事をタップすると募集内容が詳細に記載されていますが

項目ごとに分かり安く分けて表示しました。

そしてみたい順番に並べています。

 

「見たい項目」「並べる順番」はユーザーが好きにカスタマイズできるようにします。

 

「ブロック」のボタンは募集する企業の記事を表示しない機能で

求人は毎日見るもので、何度も応募できない企業が表示されるのは

苦痛でしてブロック機能で非表示にしたくなります。

 

求人検索では

働く側のスキルでフィルターをかけられるようにしてあります。

 

 

 

 

 

 

 

 

 

 

 

 

デザイン意図ーONEアプリ

新規機能を5つほど追加して、情報整理をして設計しています。

 

レシートを記録してお金がもらえるアプリでしたので

同時に家計簿機能を付け、レシートの記録する意味を増やしました。

 

家計簿機能は見やすく円グラフにしました。