• HOME
  • >
  • blog
  • >
  • 【操作性の高いレイアウトとは?】UX改善とデザイン基本4原則を解説!「coconala編」

【操作性の高いレイアウトとは?】UX改善とデザイン基本4原則を解説!「coconala編」

投稿日:

はじめに

サイトを利用した時、ちょっとこれは使いにくい…と思ったことありませんか。

ここでは色々なシステムやサイトのUX改修を勝手におこない、より良いユーザービリティを目指し、提案します。

今回はスキルを売り買いできるサービス「ココナラ」WEBアプリについて考えてみました。その中でも本記事では出品者(スキルを売る側)にフォーカスして「ダッシュボード(マイページ)」画面を改修します。

対象サービスの企業情報

商号
株式会社ココナラ(coconala Inc.)
資本金
1,148,107,500円
従業員数
93人(2020年8月31日時点)
業界
情報・通信業
サービス紹介
ココナラWEBサイト

現状の課題/改修の方向性

ココナラは「知識・スキル・経験」といった得意を売り買いできるスキルマーケットとして、事業初心者が資本金0円から始められる事が大きな特徴となり重宝されているサービスです。

一方で利用者(ここでは出品者)の利便性を考えると改善できる箇所も多少感じられ、今回の改善提案ページである「ダッシュボード」では大きく以下2点の改善が考えられます。

  • 利用者を利用シーンを考慮した情報設計の見直し
  • デザイン4原則(近接、整列、対比、反復)を意識したUIデザイン

出品者のスキルは千差万別で、自身の得意分野だけではなく、商売に関する知識や自身を一つの商品として見せるブランディング力に悩んでいる人が少なくないのではと思います。

ココナラを利用する出品者のデータが分かるのであればコア層を把握しビジネス戦略をもとに立案できますが、この記事では ①副業で始める人でビジネス初心者が多い ②そういう出品者を支援できる仕組みを意識したダッシュボードに改修し、「より魅力的な出品者を増やす事で買い手の需要も増える循環」が作られるのではないかの仮設をもとに提案します。

まずは以下の画面案をご覧ください。

UXUI改善後のココナラWebアプリ版の画像

改修案

利用者を利用シーンを考慮した情報設計の見直し

既存の3段フレームから2段フレームにする事でメニュー要素の重要度をより明確にしました。左側は出品に関して深く関わりのあるメニューのサマリー機能を、右側はその他役に立つ情報や関連メニューを集めて利便性を高めました。

また、ダッシュボードの内容として関連性が低いと感じられる要素を削除して「何ができて何をすれば良いか迷わない」情報だけを残したり追加しています。

デザイン4原則(近接、整列、対比、反復)を意識したUIデザイン

情報設計の見直し後は、それらを認識・操作しやすいようにレイアウトしました。使用頻度・重要度・関連性を考えてグルーピング・配置し、直感的に操作できるようなコンポネントを選びデザインしました。

新しい機能

もう一つ、今回の仮ターゲットであるビジネス初心者への便利機能として盛り込んでいるのが「データ分析によるアドバイス機能」です。「見積もり依頼数が少ない」「売上が伸びない」といった悩みに対して、他の出品者のデータ(例えばポートフォリオの掲載数や自己紹介の作文傾向など)を分析して、初心者に行動をアドバイスする事で自然に出品者の価値を上げる仕組みは面白そうです。

まとめ

B to B to Cサービスは多方面の利用者を考慮しないといけないため、改善に優先順位をつける事は難しいと思います。

「全てのユーザーを満足させようとするサービスは、誰も満足できない」という言葉があるように、まずは片方の利用者をある水準まで満足できるサービスにすると連鎖的に他の利用者も満足するより良いサービスに成長できるのではと思います。

【今すぐにでもデザイン思考を重視したプロジェクトを推進したい場合は】

UXデザインコンサル会社 / Webコンサル会社へ業務を委託するというやり方が考えられます。

幅広い業種・規模での経験があるUXDoctorでは、経験に基づきUI/UXデザインコンサル会社の選び方を無料公開しております。

UI/UXデザインコンサル会社の選び方を無料公開してます。

どんな基準で、何を見ればいいか分からない方におすすめです。

資料をダウンロード

error: Content is protected !!