昨今、アパレル企業は”デジタルトランスフォーメーション”という大きな課題に取り組んでいる。特に、店舗を抱えるアパレル事業者は、オフラインである店頭での接客力をどのようにオンラインに生かすかを模索している。また、ミレニアル世代/ミニマリストという従来とは違った思考を持つユーザの出現により、パラダイムシフトが生じ、所有という概念を越えた新たな消費活動のあり方が問われている。これらの”変化”に適応するため、百貨店最大手の三越伊勢丹と、SI最大手の富士通と、UX最先端のARCHECOがタッグを組み事業共創に取り組みました。

アパレルシェアリングパッケージ 戦略・企画・UX/UIデザイン・開発

富士通様よりアパレルのシェアリングサービスを立ち上げたいという命題をいただき、商材となる洋服を富士通アセットとして保有していないため、アパレル事業者を巻き込むB2B2Cのビジネスモデルを構想しどのようにアパレル事業者と協業するかビジネス戦略を検討した。そして、アパレル事業者自体ではなく、アパレル事業者に対して高い影響力を持つ百貨店を中心にビジネス開発を実行した。

事業戦略

レンタルという方式は、新品の在庫を中古にし、商品の資産価値を大幅に低減するリスクが内存している。そのリスクに対し、サービス１サイクルでどのような収益を産み、数回のレンタルを通じてどのように黒字化するかサービスの循環性を検討した。また、”所有するより借りた方が良い”　というユーザの意思決定の必然性を探り、その機会が自然なコンテクストでユーザに提供されるようサービスを設計した。

サービス企画

将来的に、複数社のアパレル事業者を開拓して事業を展開できるようなスケーラビリティを持ったシステムをアーキテクトし、システム要件・仕様を定義した。また、デザイン要件定義に関しては、モックアップを作成し、三越伊勢丹様と3社でモックアップを用いてロールプレイングを行い、接客の観点・実装の観点・デザインの観点・ビジネスの観点など様々な観点から改善案を抽出し仕様へと落とし込んだ。

要件・仕様定義

シードモックに基づき、表現したいブランドイメージをそのまま製品版のUIデザインへ搭載した。また、シードモックに反映されている仕様をそのまま再現できるシステムの構築を目指し開発に取り組んだ。また、限られた在庫をいかに効率的にレンタルさせるかを定義し、100分岐以上のロジックを予約システムに搭載し自動的に在庫管理ができる仕組みを開発した。さらに、富士通様の品質基準と開発スピードのギャップを埋めるための意識合わせを行いアジャイルとウォーターホールのハイブリッドな開発プロセスを確立した。また、富士通様の品質基準を満たすためにテストケースを洗い出しテストフローを確立した。

開発・テスト

CARITE SERVICE INTRODUCTION

てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと

てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと

富士通×三越伊勢丹×ARCHECO 事業共創 

アルコインは、スマートフォンを利用してウォーキングすることでコイン(ポイント)がたまるアプリです。本プロジェクトでは、UXデザイン(ターゲット選定・コンセプト立案・機能選定) と、UIデザインのリニューアルを行いました。
2019年2月にリリースして以降、機能追加などの実施によってユーザー体験に課題を感じている状況に対し、今回の改修では、UXプロセスを通じてターゲットに合った機能の検討および情報設計を行い、より使いやすく、直感的に操作感を実現しました。また、3Dを用いたデザインを使用することにより、楽しく利用できる世界観を生み出しました。

「アルコイン」アプリのUX/UI改修

このフェーズでは、KGI/KPIや広告の形式、集客方法、現在の課題感などを漏れなくヒアリングをすることにより、「デザイン」や「ユーザビリティ」のみの課題だけではなく、ビジネスの観点から、将来の方向性を明確にしました。

QAシート

アクティブQA

このフェーズでは、QAの結果を元にまずSTP分析やコンセプト立案を行い、どのようなターゲット層に対してどのような価値を提供したいかを明確にしました。また、コンセプトを元に、AS-ISとTO-BEのカスタマージャーニーマップを作成し、コンセプトを実現する為の具体的な機能の洗い出しを行いました。次に、クライアント様とのワークショップを通じて機能を選定し、プロジェクトのスコープを定義しました。最後に、機能が増減してもユーザーが簡単に分かりやすく利用できるよう、ユースケースを元に機能リストを作成し、情報設計を行いました。

STP分析

カスタマージャーニーマップ

機能リスト

UXデザイン

このフェーズでは、コンセプトを元にユーザーの興味を引く世界観の検討及び、それらをGUIデザインやアプリアイコンに反映しました。今回は、「健康（生活習慣病の予防）に興味があるが運動に対するモチベーションは高くない（自分で運動の目標設定をして定期的に実行することができない）層」を主にターゲットとし、気軽に楽しくアプリを利用できる世界観を作り出しました。具体的には、カラフルな色合いと3Dデザインを使用し、ユーザーにとって没入感や手軽さを演出しました。また、今後の機能開発やデザイン改修を考慮し、長期的にクライアント様がデザイン改修を自走して進められる為のサポートとして、デザインガイドラインの納品や、OJTによるUX工程のレクチャーを行いました。

グランドデザイン

GUIデザイン

ガイドライン

アプリアイコン

UIデザイン

ウォーキングで健康促進とポイント獲得ができるアプリ「アルコイン」のUI/UX改修

株式会社Flatの新規事業となる女性専用のセルフボディーメイクスタジオ「PORT」のUIデザイン・フロントエンド・バックエンド開発を担当させていただきました。サービスの利用に応じて支払い金額が変化するタイムチャージ制（時間制料金）を採用。会員登録から入館・退館まで完全非接触での利用をユーザーに提供しています。会員QRで入退館から決済まで一括管理し、館内での物品購入も可能。コロナ禍における、完全非接触の運営システムを実現しました。

女性専用のセルフボディーメイクスタジオ「PORT」のUX/UI改修と開発

既存ユーザーの年齢層、サービスの利用フローを考慮した上で、今回の機能追加に伴い、発生する新規画面の洗い出しと各画面に必要な機能を定義しました。完全非接触の顧客体験を実現することにフォーカスして情報設計を行いました。

機能リストと機能要件定義により抽出された画面を元に、新たな画面遷移を定義しワイヤーフレームを作成しました。ワイヤーフレーム作成後、早い段階で開発者へ受け渡しを行うことでUIデザイン制作と並行し、開発までの期間を短縮化できるプロセス設計を行いました。 グランドデザインでは、PORT施設の世界観をApp内でも表現するため施設内のキーカラー（水色）をメインにデザインしました。QR部分は視認性を担保するために白を使用し、入退館時にQRをかざす際にノイズにならないデザインを意識しています。

ワイヤーフレーム

本開発では機能追加が多かったためフェーズを分けて段階的に機能追加を行い、Web APPとして実装しました。プロジェクト初期段階からプロジェクトメンバー（UX/UIデザイナー、開発者）と要件定義を実施し、認識の統一を図ることで限られた開発期間の中でも、開発者へのスムーズなデザインのインプット、実店舗での入念な検証を実施し、3ヶ月と短期間の中でも高品質のアウトプットを実現しました。

ソースコード

フロントエンド、バックエンド開発

好きなときに、好きなだけ利用できる女性専用のセルフボディメイクスタジオ「PORT」

アンケートに基づいたペルソナの可視化・分析システムの新規サービスの立ち上げのUX/UIデザインを行いました。
このシステムは、近年世界的に重要なテーマとなっている「食」「健康」「環境」についての世の中の動向や、時代と共に移り変わる興味・関心を正しく可視化し、その分析結果が企業の新商品や新サービスの開発に役立てられることで、暮らしに還元されるような循環型アンケートサービスです。
多くの方がこれまで以上にアンケートに参加しやすく、回答していて楽しく、日常的にサービスを利用してもらうというものをコンセプトに、要件定義からUIデザイン作成を行いました。
本プロジェクトでは、細部までユーザビリティを追求したデザインに仕上げ、一貫性のある体験を提供できるようにしました。
最終的に、ロゴとLPの作成を通じて、システム全体のブランドイメージを統一し、より魅力的なビジュアル表現を追求しました。

「食」「健康」「環境」についてのアンケートやその分野に取り組んでいる企業のアンケートを配信し、生活者データを分析するサービスのUX/UIデザイン作成

ここでは、プロジェクトの背景や目的、課題点を明確にします。 まずはクライアントや関連ステークホルダーとのミーティングを重ね、ビジネスの背景、目的、現在の課題、期待する結果などの詳細を理解します。 そして、受け取った情報をもとに、現在のサービスやプロダクトの特性、ユーザーの属性やニーズ、環境などを分析します。 次に、CJM（カスタマージャーニマップ）では、ユーザーの行動や思考・感情などを時系列で可視化し、デザインやサービスの改善ポイントを発見します。 ユーザーの代表的な属性やニーズ、課題を元に、具体的なペルソナを設定します。 次に、ユーザーがサービスやプロダクトと接触する点（ウェブサイト、アプリ、実店舗など）を特定し、ペルソナがサービスやプロダクトを利用する過程を時系列でマッピングします。各タッチポイントでのユーザーの感情や痛み点を加え、感情の変動を可視化し、CJMをもとに、改善の余地や新たなサービスの可能性を探るための方法を導き出しました。

現状理解

ブレインストーミングやワークショップを実施してアイデアを広げていきます。 自由にアイディアを出し合い、可能性を探求します。この初期の段階での発散は、具体的なソリューションの方向性を見つけるための土台となります。 アイデアの発散が終わったら、次はそのアイデアを具体的な機能に落とし込むための要件定義フェーズに移ります。ミーティングやワークショップを通じて、必要な機能やその範囲を共有・確認します。 前段階でのソリューションアイデアと、現状理解やCJMの結果を参照し、プロダクトが持つべき機能を明確に定義します。

ソリューションアイデア発散/機能要件定義

ソリューションアイデアの発散・機能要件のすり合わせ

要件やイメージのすり合わせを行うために、文章ではイメージが伝わりづらいということもあり、可視化をするために、ポンチ絵の作成を行いました。機能の内容を可視化しながら要素の見せ方を検討し、各機能がどのように配置されるべきかを具体化しました。

ポンチ絵作成

ワイヤーフレームをもとに、UIデザインを作成しました。 デザインテイストについて、本サービスは「食」「健康」「環境」がテーマということから上記3点を考慮したカラーリングでデザインを作成しました。 人々との繋がりを大切に、日々楽しんでサービスを使用してもらうことを軸に毎日開いても秋のこない普遍的なデザイン要素と、直感的な操作感を演出するためのデザインテイストを表現し、形は一般的で、各所のカラーリングでバランスの良いデザインに仕上げました。 サイトの見た目と操作感を具体化し、本サービスを見てわかるようなブランディングと、ユーザが使いやすいと感じるよう直感的に操作ができるをコンセプトに、デザインの作成を行いました。

UIデザイン作成

生活者データを分析するサービスのUX/UIデザイン作成

美容業界において様々なビジネスの起点になりうるエンドユーザチャネルの構築を目的にクライアントと共同事業として推進しているフリーランス美容師向けサービスです。このプロジェクトでは、インキュベーションに関係する全てのプロセス、構想具体化、戦略策定、サービス企画、デザイン制作、システム開発、グロース企画/運営にコミットしました。まず、クライアントの思いや社内外のアセットを明確にし、ワークショップや合宿、インタビューをともに行い伴走型で構想を具体化しました。次に、構造化シナリオ等のUXデザインの基本手法を使いながら、過去のプロジェクトで蓄積した独自のインキュベーションの手法をカスタマイズし、サービスやデザインを固めていきました。さらにLeanDXの手法を用い、「高速プロトタイピング→アクティブQA→ターゲットフィードバック→企画修正」の積み重ねによりニーズにあった実現性の高いサービスが可能に。戦略策定やサービス企画は定期的に上がってきたプロトタイプを使ったフィードバック結果を反映し、より実験性の高いものに柔軟に変更していきました。また、開発については、アジャイル開発を前提に予算とリソースを管理しながら日々アップデートを行い開発を推進しました。さらに、リリースして終わりというわけでなく共同事業として成功するため、PMO（プロジェクト・マネジメント・オフィス）/サービスWG（ワーキンググループ）/グロースWG/マーケティングWG/開発WGを企画当初から立ち上げ、クライアントと部門横断組織を組成。リリース後も継続して週次でPMOと各WGを運営し、運営を通じ得た情報やノウハウに基づいて新たな仮説や戦略の修正を行い、サービスのグロース/運営を行なっています。

フリーランス美容師向けHP作成/予約/ECアプリ　戦略策定・サービス企画・デザイン・開発・マーケティング/グロース企画/運用

元々はクライアントの「美容領域でいままでにないDX事業を行う」というミッションから始まりました。時々、アルチェコではこのような抽象的なミッションから入るケースがあります。そして、このような抽象的なミッションを具体化し魅力的でクライアントにフィットした構想を具体化するのがアルチェコのメンバーは好きで得意です笑。今回のケースではクライアントが持っている巨大な社内外のビジネスネットワークや影響力のある既存ビジネスを活用し、今までにない美容業界に属する個人に焦点を当て、エンパワーメントし、繋がりを持つことで「美容領域で新たなビジネスが生まれる」チャネルを確立することになりました。

Want/Should/Canビジョンシート

アセット分析シート

SWOT・VRIO分析シート

構想ピッチ資料

構想詳細化

弊社の主要フレームワークのストーリー戦略策定を行いました。この手法は簡単にいうと「わらしべ長者」と同じ考え方です。手元にある強みや資産を活用し、最終的になりたい姿をどう実現するかのストーリーを描きます。まず、最終的に実現したい理想状態を長期戦略として、バックキャスト（逆算思考）で中期戦略、短期戦略を検討し、短期戦略上、現状持っているアセットをターゲットにとって活用できるレベルまで詳細化/言語化します。そして、反対に、この短期戦略を元にフォアキャスト（先読み思考）で中期戦略、長期戦略を検討します。このようにバックキャストとフォアキャストの両方から検討した後、両者の矛盾や不整合を確認し、サービスビジョンや社内におけるミッションを総合的に踏まえて、最終的な戦略のストーリーが完成します。その後、事業計画書の作成に入り、短期・中期・長期の戦略ストーリーに従ったPLを作成しました。我々の事業計画は、机上の数値作成にならないように、戦略ストーリーとその背景にある仮説、仮説から生まれるKPIを元にストーリーと仮説と整合的なロジックベースのPLを作成します。そして、KPIに関しても、ロジックやフィージビリティの観点から対象となるターゲットやパートナーからのモックや具体的な企画書を使ったアクティブQAとインタビューを行うことで、現実に即したKPIに修正し、事業計画が完成しました。

ストーリー戦略シート

ポジショニング分析シート

KPIシート

事業計画書

戦略策定

サービス企画とデザイン制作のフェーズでは、ごくごくオーソドックスなやり方を実行しています。構造化シナリオ法に代表されるUXデザインの手法でターゲットユーザの体験シナリオと必要な機能の洗い出しを行いました。通常の戦略コンサルやUXデザインファームと違うとしたら、LeanDXの高速プロトタイピングです。フィードバックを受けるターゲットにリアルなサービスと認識してもらわないと適切なフィードバックは得られません。適切なフィードバックはサービス企画/デザイン制作の生命線です。そのため、よりリアルな動きやデザインを表現するプロトタイプを作成することが重要なのですが、我々はこれを高速で行います。今回のプロジェクトでは、高速で作成したプロトタイプをフィードバックを受けて何度も修正をし、サービス企画/デザイン制作のFIXまでもっていきました。

構造化シナリオ分析シート

プロトタイプ（ラピッド）

プロトタイプ（オーセンティック）

インタビューシート

UX/UI/サービス改善シート

デザイン（Figma）

サービス企画/デザイン制作

よりよいサービス企画やデザイン制作を行なっても、結局はユーザが体験するのはシステムから吐き出されたデータです。触った時のなめらかな挙動、レスポンス時間、セキュリティ等の観点で満足されなければ、いくらよい企画やデザインができても意味がありません。このサービスとデザインの思いや意図を繋ぐのがシステムPM（プロジェクトマネージャー）です。システムPMはサービス企画やデザイン制作の段階でディレクションに深く関与し、各WGの議論に参加します。その際、企画者やデザイナーの意図を把握し、システムとの整合性、実現可能性について、それぞれの立場で外から見たら「ほぼ喧嘩」の状態で徹底的にフィードバックしあい、議論し、意思決定します。「企画から開発まで一気通貫まで行う」DX会社は数多くありますが、ここまでそれぞれの立場の人間が徹底的にやり合う会社は珍しいのではないかと思っています。

システム要件定義書

セキュリティ要件定義書

アプリ

開発

事業の成功は、リリース後で決まります。共同事業の場合は、リリース後も主体的に関与できるのでここが我々の腕の見せ所です。過去に行われた数多くのインフルエンサーとの連携事業やSNS戦略企画/運用経験から得られた蓄積をプロジェクトに最適化し、また、新たなノウハウ獲得のためインフルエンサーにヒアリングを行い実行力のあるマーケティング企画と運用体制を構築しました。2020年からYoutube一強時代からショート動画/レコメンドシステム最適化で勝負が決まる時代に変化しているため、レコメンド最適化されたコンテンツを一定のペースで一定量投稿しなければグロースは困難です。そのような背景のもと、一定のペースの投稿を続ける運用のため、投稿企画/フォーマット検討、投稿体制を構築しました。さらに、今回のプロジェクトでは、最適なインフルエンサーを調査し、100人程度ピックアップしました。愚直に手足を使ってアプローチし、賛同してくれる10人ほどのインフルエンサーをリリースまでに開拓。サービス改善のためのヒアリングやオンラインとオフラインの交流を通じてインフルエンサーの方々の心情において、このサービスは「自分たちとの共同事業」であるという状態を醸成し、最終的には「このサービスをこうしたい」と言ってくれるまでコミットメントを高めていただきました。

マーケティング戦略シート

インスタグラム/TikTok企画

SNS運用オペレーション企画/構築

コンテンツ投稿指示書

ショート動画コンテンツ

マーケティング/グロース

「美容業界の"Shopify"」の共同事業企画/運営　

SalesforceのApp Exchangeサービス「Blue Sheep」の開発に携わりました。機器の販売・保守サービス事業者向けのサービスマネジメントツールの新規開発プロジェクトとして、要件定義からUX/UIデザイン、開発、保守まで、全工程を担当しました。「Blue Sheep」の開発では、設置機器の変更管理・構成管理の強化を通じて、顧客体験の改善とサービス管理の効率化を実現しました。直感的な操作性を実現するための洗練されたUIデザインと、それをSalesforce上で具現化することに焦点を当て、ユーザーが無駄なく業務を進められる体験を提供することに成功しました。

Salesforce App Exchangeアプリの要件定義・UX/UIデザイン・開発・保守・運用

このフェーズでは、クライアントの要望を深く理解し、それに基づきITIL4のフレームワークに準拠した業務フローを具現化するためのサービスフローを設計しました。また、ラピッドプロトタイピングの手法を用いて、実際のSalesforce環境上での操作感をクライアントと共有しながらデザイン工程を進行。これにより、早期段階からユーザビリティの向上に繋がるフィードバックを取り入れ、直感的なUIデザインを追求しました。

サービスフロー

各画面デザイン

プロトタイプ

要件定義・UX/UIデザインフェーズ

開発フェーズでは、プロトタイピングで設計したUIを忠実に再現することに専念しました。開発チームは、ラピッドプロトタイピングで得られたフィードバックを元に、ユーザビリティを最大化するための精緻なコーディングを行いました。また、各導入先企業の独自の要件に対応するため、一部の機能を最適化したり、新たに追加したりといった柔軟な対応を実施。これにより、全てのユーザーが最大限に「Blue Sheep」を活用できるようにしました。

アプリケーション

テスト結果報告書

ユーザマニュアル

開発フェーズ

保守・運用フェーズでは、アプリケーションの維持管理とともに、導入企業の具体的な要件に応じたカスタマイズ作業を行いました。さらに、サービスの魅力を最大限に伝えるためのランディングページ（LP）デザインや、視覚的にサービスの特長を伝えるプロモーション動画の作成も実施。これらの活動を通じて、「Blue Sheep」の導入企業がサービスを最大限に活用できる環境を提供しました。

保守稼働報告書

HTML/CSS

動画ファイル

保守・運用フェーズ

設置機器の構成管理を実現するクラウドサービス（SaaS）の開発

TEPRA LINK 2は、iOS/Android端末で利用できるテプラPRO本体と連携し、優れたラベル編集機能を提供しています。本プロジェクトでは、既存のAPP画面をもとにワイヤーフレームによる情報設計とUIデザインの改修を担当させていただきました。

TEPRA LINKはリリースから大幅な仕様変更はなく、モバイルでの業務利用を想定した仕様には対応しておらず、PC向けの機能に比べて機能が簡易的になっているという課題がありました。

上記の課題を踏まえた上でTEPRA LINK 2では、現代のニーズに合わせた使い勝手を実現するために基本的な画面設計を見直しました。業務用APPの特性上、どうしても画面内の要素が多くごちゃついた印象になりがちです。

既存ユーザーをもとにモバイルでの業務利用を想定し、ユーザーがスムーズかつ効率的に操作できるような情報設計を行いました。また機能追加を行うことでユーザーのさらなるラベル編集体験を向上させました。


「TEPRA LINK 2」APPのUX/UI改修

このフェーズでは、既存の簡易的なワイヤーフレームをもとにワイヤーフレームに対するQAと画面要件の定義を行いました。 まず、QAでは既存のワイヤーフレームを理解し、画面遷移の流れや各画面の役割を把握しました。その後、ユーザビリティや機能性に関する課題や不明瞭な点を洗い出し、要件定義のための改善点を特定しました。  機能要件やデザイン要件、データ入力や出力の要件など、必要な機能や制約を明確に定義しました。また、非機能要件（パフォーマンス、セキュリティ、互換性など）も考慮しました。  これにより画面遷移と画面要件が明確になり、開発方針と目標がより具体化されました。次フェーズでのUIデザインや開発作業において、ユーザーの期待に応える機能性と品質を確保するための基盤を整えました。

QA、画面要件定義

このフェーズでは、既存のワイヤーフレームに対するQA結果をもとに画面内の情報設計を見直し、ワイヤーフレームの作成を行いました。  QA結果を分析し、ユーザーが求めるラベル編集機能や操作フローを把握しました。その後、ユーザビリティを向上させるために各機能の配置やワークフローを検討しました。  情報設計では、画面上の情報の配置や階層構造の見直しを行い、ユーザーが直感的に操作できるような情報の組み合わせやグループ化を行いました。  ワイヤーフレーム作成では、情報設計の結果をもとに画面上の要素やコンポーネントの配置を定義。これにより、次フェーズのUIデザインや実装の方針を明確化し、ユーザーにとって操作しやすいAPPの開発に向けた基盤を構築しました。

このフェーズでは、ユーザーが業務で本APPを長時間使用する際に目の負担を軽減するデザインを追求しました。ユーザーが長時間作業しても目が疲れにくく、快適なラベル編集体験を実現するためのUIデザインの改修を行いました。  目の負担を軽減するデザインを実現するために、視認性や色の使い方に重点を置きました。適切なフォントサイズとカラーパレットを選定し、コントラストを調整してテキストや要素が鮮明に表示されるようにしました。また、視覚的な疲労を軽減するために、適切なスペーシングやレイアウトを採用し、情報の密集感を回避しました。  またシンプルで直感的なナビゲーションやメニュー構造を導入しました。よく使用される機能には優先的なアクセスを与え、頻繁に使用される操作は素早く実行できるような設計を行いました。さらに、機能やオプションの整理やカテゴリ分けを行い、ユーザーが必要な機能を迷わず、直感的に操作できるようにしています。快適な操作体験を提供するために、UIデザインの最適化に取り組みました。

シームレスなラベル作成体験。TEPRA LINK 2で簡単にプロ仕様のラベル作成が可能に。

国内最大級のフリーランスコミュニティ。フリーランスの方々が運営を行っています。5周年を迎えるにあたり、サイトの改修を行いました。元々のサイトは、活動内容のスナップショット画像や丁寧な説明が多いサイトでしたが、機能やコンテンツの充実した増築を繰り返したサイトを一度バラバラに分解し、ユーザに適した動線の設計を行いました。また、サービスイメージの刷新も同時に進め、図やイメージ画像を用いて、特定の職種や世代に偏らない、より中立的な立場を体現するためのデザインを作成しました。

ユーザ動線の見直しと情報設計とブランドイメージの刷新

GAのユーザトラッキングデータを元にアクセス履歴を分析し、利用者の行動をパターン化していき、コンテンツをグルーピングしました。ただし、GAだけでは判断がつかない時もあり、サイト運営メンバーの意見を交えながら、利用者タイプ、コンテンツカテゴリー、ユーザ利用フローのパターン化を固めました。同時に、簡易的なヒューリスティック評価も実施し、GAとヒューリスティックを睨めっこしながら、5年というサイト運営期間と利用者の成長度合いを考慮し、全ての利用者のアクセスシビリティを上げるよりも、利用者カテゴリを大きく分けて、利用者毎に最適なコンテンツを提供できる設計にしました。

GA分析結果まとめ

ユーザタイプとユーザタイプごとの動線説明資料

ユーザの行動把握とコンテンツのグルーピング

情報設計を行いながら、不要なコンテンツや改修すべきコンテンツを分けていき、ページ毎の内容の見直しを実施しました。ページ構成のドラフトができた段階で、内容をプロジェクトメンバーに作成していただき、会員特典の利用率を上げるためのメリット訴求や導線設計、法人向けサービスの理解度アップと問い合わせ増加のためにコンテンツとレイアウトを細かく調整しました。利用者のサイト訪問目的達成に最適な動線と最適なタイミングでのコンテンツ提供、法人様や新規利用者のサービス理解度の向上を図りました。

UIデザインでは、大幅なブランドイメージ変更を行いました。キーカラーを使用しつつ、幾何学模様をアクセントに、会員の画像ではなく、イメージ画像としてモデルを使った画像を使用し、一般化されたサイトの見え方に変更を行いました。また、プロフェッショナル&パラレルキャリア・フリーランス協会様を説明する図の作成に力を入れ、ポジショニングや活動範囲など、誤解を発生させない図を作成しました。開発は、スリランカの開発チームと行い、アルチェコはBSEの立場をとりながら開発を進めましたが、スリランカが経済危機に直面し、停電が頻繁に発生してしまったため、急遽国内のエンジニアとフリーランス協会様のエンジニア様に協力してもらい、なんとか完成にいたりました。

デザインデータ（Figma)

ソースコード一式

UIデザイン、開発

国内最大級のフリーランスコミュニティコーポレートサイトの改修

To C向けのオンライン英会話サービスのシェア拡大を目指すweblio社の依頼を受け、サービスのUX/UIを一新しました。離脱率の高さやユーザーの意図しないページランディングが課題となっていた既存のオンライン英会話サイトを、ユーザビリティとデザイン性を重視した形に全面改修しました。
現状理解を行い、As isのカスタマージャーニーマップを作成し、問題点の洗い出しを行いました。次にソリューションアイデアの発散を行い、To beのカスタマージャーニーマップを作成。画面遷移図と機能リストを作成し、ワイヤーフレームの作成に移りました。その後、UIデザインを作成し、フロントエンド開発を行いました。これらの一連の流れを通じて、ユーザ体験の向上を実現しました。


オンライン英会話サービスのUX/UI改善・フロントエンド開発

現状を理解するため、As isのカスタマージャーニーマップを作成しました。これにより、PV数が多いにも関わらず高い離脱率が発生している原因や、意図しないページへのユーザーのランディングが目立つ理由を明らかにしました。

As is CJM

現状理解・As is CJM作成

ソリューションアイデアを発散し、To beのカスタマージャーニーマップを作成しました。これにより、改善すべきポイントと、それに向けた解決策を明確にしました。

To be CJM

ソリューションアイデアの発散・To be CJM作成

To beのカスタマージャーニーマップに基づき、新たな画面遷移図と機能リストを作成しました。これにより、新しいユーザ体験を具現化するための具体的な機能とそのフローを定義しました。

画面遷移図

画面遷移図/機能リスト作成

画面遷移図と機能リストを基に、ワイヤーフレームを作成しました。これにより、新しいUIのレイアウトと、各機能がどのように配置されるべきかを具体化しました。

ワイヤーフレーム作成

ワイヤーフレームをもとに、UIデザインを作成しました。これにより、新しいサイトの見た目と操作感を具体化し、ユーザが使いやすいと感じるデザインを追求しました。

フェーズの説明：最後に、作成したUIデザインを基に、フロントエンド開発を行いました。これにより、デザインを実際のサイトに反映させ、ユーザ体験の向上を実現しました。

フロントエンド開発（コーディングデータ）

フロントエンド開発

weblioオンライン英会話のUX/UIデザイン改修

ARCHECOの実績は3つに分類されます。すべてに共通するのは、PoCで終わらず事業として存続している点です。美しいポートフォリオではなく、事業指標で私たちの仕事を判断してください。

クライアント様との共創事例

ARCHECOのスタートアップ事例

ARCHECOの個人作品（UIやプロダクトの品質をご確認ください）

受託開発からプロフィットシェア、ジョイントベンチャーまで、様々な契約形態で共創し、事業として成立させた実績です。AI戦略策定から生成AI導入、AIエージェント開発、UX/UIデザイン、市場投入まで一貫して関わり、事業の存続と成長にコミットしています。ビジネス戦略・サービス企画などの上流工程だけではなく、最終的なアプリ/WEBのUIデザインにも妥協せず、美しさと使いやすさを両立することに強いこだわりを持ってものづくりに取り組んでおります。

ゼロから企画し、戦略を立て、自ら設計・運用している事業です。コンサルとして助言するだけでなく、自ら事業を営むことで得たAI業務自動化やRAG構築の知見を、すべてのクライアントワークに還元しています。世の中に大きなインパクトを与えるため、インパクトを追求したUIをデザインし、自社でサービスを手がけることで幅広い知見と実用的なスキルを磨いております。

ARCHECOメンバーが有名アプリを独自にリ・デザインする「App Redesign」の取り組みや、個人制作のプロダクトデザイン・アイコンを掲載しています。デザイナーとしての最終アウトプットの品質をご確認ください。

Client Works