--- title: "Mediumsを通じたクリエイティブ業界の再発明" description: "OOZOUがiOSとAndroid向けのMediums画材ショッピングアプリをどのように設計・開発したかをご紹介します。200画面を超えるMVPデザインから、SwiftとKotlinによるネイティブアプリ、NodeJSプロキシバックエンドまで。" canonical: https://oozou.com/ja/case-studies/mediums-art-supply-app locale: ja date: 2022-10-07 client: Mediums industry: "Retail & E-Commerce" --- # Mediumsを通じたクリエイティブ業界の再発明 > Mediumsは、あらゆる人のクリエイティブなニーズを支える多彩な商品を販売する、新しい24時間営業のクリエイティブランドマークです。私たちはiOSとAndroid向けのMediumsショッピングアプリを、UX、UIデザインから開発まで担当しました。 - Client: Mediums - Industry: Retail & E-Commerce - Services: UX/UI Design, Mobile Development - Published: 2022-10-07 ## Challenge MVP版のアプリだけでも200以上の画面があり、プロジェクト期間も非常に短いものでした。品質やパフォーマンスを犠牲にすることなく、必要な機能を盛り込み、選定したMVP機能で価値を届けるためには、リスク低減策、フォールバックプラン、複数のチェックポイントが不可欠でした。 ## Solution ワイヤーフレームから完全なデザインシステムまでを設計し、iOS向けSwift、Android向けKotlinのネイティブモバイルアプリを、Microsoft Azureや複数のセキュアな社内システムと連携するNodeJSベースのAPIプロキシサービスとともに構築しました。 ## Mediumsを知る Mediumsは、あらゆる人のクリエイティブなニーズを支える多彩な商品を販売する、新しい24時間営業のクリエイティブランドマークです。Mediumsは、アーティスト、クリエイター、そして夢見るすべての人にとっての定番の場所になることを目指しています。 ブランドとして、クリエイティブ業界と画材・文房具のシーンを再構築し、誰もがアクセスできるものにすることを掲げています。 ![Mediumsのブランドとストア体験](https://oozou.com/images/case-study/mediums-project-background.webp) ## 課題、問題、そして私たちの解決策 多くの複雑なプロジェクトと同様に、Mediumsアプリにも独自の課題や障害がありました。 MVP版のアプリだけでも200以上の画面があったため、UXとUIの作業量は相当なものでした。さらに非常に短期間のプロジェクトだったこともあり、品質やパフォーマンスを犠牲にすることなく、必要な機能を盛り込み、選定したMVP機能で価値を届けるためには、リスク低減策やフォールバックプラン、複数のチェックポイントが不可欠でした。 > リスクを抑えるためには、チーム同士、そしてクライアントとの緊密な連携を保ち続けることが不可欠でした。 ADB2CとMSELのドキュメントやコード例が不足していたため、モバイルアプリの環境構築は予想以上に困難でした。問題を解決するために、Microsoft Azureのサポートとの週次の電話会議も行いました。一部の問題は残ったものの、それらを補い、有効な一時的回避策を構築することができました。 その他の問題は、クライアントのバックエンドシステムの連携ポイントが完全には開発・提供されていなかったことに起因していました。しかし、所定のUAT期間を通じて作業を進めてカスタムプロキシサービスを完成させ、テストを成功させることができ、UATをローンチ予定日のわずか数日前まで進めることができました。 ## 作業範囲とタイムライン Mediumsのプロジェクトゴールは、人々がよりサステナブルなライフスタイルを送れるようにすることでした。丁寧に作り込まれたモバイルアプリケーションによって、アートとデザインを可能な限りオープンなものにし、顧客がモバイルデバイスから直接、最も摩擦のない体験を得られるようにします。Mediumsはこれらのオンライン要素を活用し、買い物ではなく創作に時間を使えるよう買い物客を支援します。 Mediumsは、コンセプト実証としての初期プロダクトに向けて、いくつかの重要な領域を構想していました。 ## デザインシステム デザインシステムとは、チームがプロダクトをデザインし、実現し、開発するためのすべての要素をまとめた、唯一の信頼できる情報源です。デザインシステムは単一の成果物ではなく、成果物の集合体です。 ![Mediumsのデザインシステムのコンポーネントとスタイル](https://oozou.com/images/case-study/mediums-design-system.webp) ### アイコノグラフィ Mediumsのアイコンは、シンプルでモダン、そしてフレンドリーであるようにデザインされています。各アイコンは最小限の形へと還元され、その本質的な特徴を表現しています。 ## 開発 プロジェクトのMVPフェーズでは、iOS向けにSwift、Android向けにKotlinでネイティブモバイルアプリを構築し、Microsoft Azureおよび複数のセキュアな社内システムと連携するNodeJSベースのバックエンドAPIプロキシサービスを組み込みました。 当初は、モバイルアプリが既存の各種バックオフィスシステムとネイティブAPI経由で直接やり取りする想定でした。しかし、ディスカバリーの過程で、プロキシ方式のほうがはるかにクリーンであり、認可、認証、セッション管理を社内外の多様なシステム全体でより一貫させられる抽象化レイヤーを追加できることがすぐに分かりました。また、処理の大部分をNodeJSバックエンドプロキシに移したことで、モバイルアプリを再ビルド・再デプロイすることなく変更を加えられるようになり、チームは変更管理においてはるかに大きな柔軟性を得ました。 ## ワイヤーフレーム 私たちはまずワイヤーフレームに注力しました。ワイヤーフレームとは、シンプルな線と図形でユーザーインターフェースの骨格を表現し、コア機能に焦点を当てるための図、または図の集合です。 ![Mediumsモバイルアプリのローファイワイヤーフレーム](https://oozou.com/images/case-study/mediums-wireframes.webp) ## 新しいユーザー体験とインターフェース あなたの指先で、創造性を再想像する。 最終デザインは、UXとUIのフェーズを通じた複数のイテレーションに基づいています。現行ユーザーのペインポイントと、当初設定したゴールや目標を活用することで、この最終形にたどり着きました。 ### 検索とブラウジング 初心者からエキスパートまで、2つの異なる行動パターンがあるため、目的の商品を探す検索と、カテゴリーをたどるブラウジングの両方を軸にデザインしました。 検索は、すでに欲しい商品が決まっているユーザーを助けます。カテゴリーブラウジングは、特に決まったものがないユーザーが、カテゴリーを通じて商品に出会えるように助けます。 ![検索とカテゴリーブラウジングを備えたMediumsのショップ画面](https://oozou.com/images/case-study/mediums-search.webp) ### 商品詳細ページの最適化 商品ページのコンテンツは、ユーザーが購入するかどうかを大きく左右します。私たちは、ユーザーを圧倒することなく必要な情報をすべて提供し、商品が何であるか、どのような見た目か、どのように機能するかをより深く理解できるようにしました。 商品バリエーションの選択も、商品詳細ページにシームレスに組み込まれています。 ### カートとレコメンデーション ショッピングカートのレコメンデーション最適化は、クロスセルの戦術です。カートページにクロスセルを導入した結果として、バスケットサイズが拡大します。さらに、顧客は商品ページを経由することなくその場で商品をカートに追加できるため、離脱のリスクを最小限に抑えられます。 ### リアルタイムの注文追跡 注文が今どこにあるのかを、正確な情報とともにリアルタイムで表示します。 ![処理中から配達完了までを追跡できるMediumsのリアルタイム注文追跡](https://oozou.com/images/case-study/mediums-order-tracking.webp) --- Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/ja/contact More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"