--- title: "Makro HORECA Academy Eラーニングプラットフォーム" description: "Makro HORECA AcademyのEラーニング体験をどのように改善したか。Ruby on Railsによる再構築、カスタムCMS、レスポンシブデザイン、英語・タイ語ローカライゼーションの事例です。" canonical: https://oozou.com/ja/case-studies/makro-horeca-academy-elearning locale: ja date: 2021-06-17 client: "Siam Makro" industry: "Education & E-Learning" --- # Makro HORECA Academy Eラーニングプラットフォーム > Siam MakroがHoReCaプロフェッショナルのデジタル時代における競争力向上を支援するために立ち上げたオンライン・ツー・オフラインのナレッジセンター、Makro HORECA AcademyのEラーニング体験を私たちがどのように改善したかをご紹介します。 - Client: Siam Makro - Industry: Education & E-Learning - Services: Design, Development - Published: 2021-06-17 ## Challenge Makro HORECA Academyは、レガシーなWordPressサイトの再構築を必要としていました。コンテンツの構造と見せ方の改善、ユーザビリティの向上、機能のシンプル化により、より使いやすいプラットフォームにすることが求められていました。 ## Solution Ruby on RailsとJavaScriptでプラットフォームを再設計・再構築し、専用CMS、モバイルデバイスから利用する70%のユーザーに対応するレスポンシブデザイン、英語とタイ語のネイティブローカライゼーションを実装しました。新サイトは2021年にローンチされ、レガシーなWebプラットフォームを置き換えました。 ## ブランドストーリー Siam Makro Public Company Limitedは、HoReCaプロフェッショナルのデジタル時代における競争力向上を支援するために、オンライン・ツー・オフラインのナレッジセンターであるMakro HORECA Academy（通称「MHA」）を立ち上げました。 ユーザーは登録することで、最新のビジネストレンド、無料オンラインコース、魅力的なワークショップの情報を受け取ることができます。特定分野のより深い知識を必要とする方のために、Makro HORECA Academy Clinicも用意されています。 ## 業務範囲 MHAの要件に基づき、レガシーなWebサイトを再構築しました。コンテンツの構造と見せ方を強化し、ユーザビリティを改善し、機能をシンプルにして、より使いやすいサイトにしました。新プラットフォームは2021年にローンチされ、レガシーなWebプラットフォームを置き換えました。 ![各種デバイスで表示されたMakro HORECA AcademyのWebサイト](https://oozou.com/images/case-study/makro-horeca-scope-of-work.webp) ## インフラストラクチャ MHAのWebアプリケーションはRuby on RailsとJavaScriptで開発され、レガシーなWordPressのコードとプラグインを置き換えました。 専用のCMSシステムはすべてRailsで開発されています。コンテナ化されたアプリケーションのすべてのコンポーネントは、AWS上で安全にホスティングされています。 ## デザインシステム ### カラー MHAのオリジナルブランドからプライマリカラースウォッチを開発しました。CTAにはライトカラーとソリッドカラーを選定しました。 ### タイポグラフィ 英語とタイ語の両方でブランドを尊重できるフォントをリサーチしました。 ### イラストレーション フォントとカラーに加えて、言語をまたいで効果的かつ容易にコミュニケーションするためにイラストレーションが不可欠でした。アイコンセットの形状と色を活かしてコンポーネントを生き生きと目立たせ、ユーザーがUIの状態をすばやく理解できるようにしました。 ## ユーザーインターフェース ### ようこそ セクションコンテンツを明確に区分けし、ホームページをより使いやすく改善しました。新サイトのバナーコンテンツはすべて、権限を持つコンテンツ管理者がCMSから直接管理できるようになりました。 ![デスクトップで表示された新しいMakro HORECA Academyのホームページ](https://oozou.com/images/case-study/makro-horeca-home-desktop.webp) ### モバイルフレンドリー Makro HORECA AcademyのWebサイトはユーザーの70%がモバイルデバイスからアクセスしているため、レスポンシブWebに対応したデザインとしました。 ![モバイルデバイスで表示されたMakro HORECA Academyのレスポンシブデザイン](https://oozou.com/images/case-study/makro-horeca-mobile-friendly.webp) ### いつでもどこでも学べる ナレッジセンターは、HoReCa起業家が業界のインサイトやビジネスアドバイスを簡単に見つけられる場所です。ユーザーは学習しながら自分の進捗を確認できます。 ![Makro HORECA Academyナレッジセンターのコースページ](https://oozou.com/images/case-study/makro-horeca-learning-anytime.webp) ### スキルアップ ユーザーは各コースの認定試験を受けて、自分のスキルに挑戦できます。試験に合格するたびに、証明書をダウンロードできます。この機能はデスクトップとモバイルの両方に対応しており、外出先のユーザーにも非常に便利です。 ### 証明書 コースと試験を修了したユーザーは、証明書を受け取ることができます。証明書はアカウントのMy Certificatesページから簡単にダウンロード・取得できます。 ![モバイルでコース証明書をダウンロードする画面](https://oozou.com/images/case-study/makro-horeca-certificate.webp) ### イベント情報を常にチェック オンライン・オフライン両方の今後のさまざまなアクティビティを閲覧できます。Makro会員はWebサイトから無料でイベントに登録できます。 ### タイ市場向けローカライゼーション タイ国内のHoReCa市場にしっかりと対応するためには、英語とタイ語のサイトローカライゼーションが不可欠です。プラットフォームに組み込まれたネイティブローカライゼーションにより、将来的に他の言語話者への展開も容易になります。 ### かんたんサインイン ユーザーはMakroカードのIDまたはMakroに登録した携帯電話番号で簡単にサインインできます。 ### 無料トライアルアカウント 現在Makro会員でないユーザーでも、携帯電話番号を使ってトライアルアカウントを作成でき、レシピ、Eマガジン、記事など、MHA Webサイト上のすべての無料オンラインコンテンツに7日間アクセスできます。 --- 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"