軽さ🎈によって、人と社会に光💨を届ける /
東京のデザインスタジオ🌏

Contact 📝 Contact 🤝🏻 Contact 📝 Contact 🤝🏻 Contact 📝 Contact 🤝🏻 Contact 📝 Contact 🤝🏻
大阪トヨペット株式会社

Web Design

ゲームをクリアするように、プログラミングを学ぶ。

Client:
大阪トヨペット株式会社
Role:
Campaign site Copywriting
Date:
2026.4~
https://www.osaka-toyopet.jp/special/toyolab/Programming2026/

大阪トヨペット株式会社が運営する体験型教育プログラム「大阪トヨペットラボ」のプログラミングコース、2026年版のWebサイト制作を担当。車型ロボット「TJ3B」を使い、ミッション形式でプログラミングを学ぶ年4回の体験教室のサイトです。昨年に引き続き、「学習」ではなく「冒険」として体験できる世界観の設計に取り組みました。

課題・背景

  • 「プログラミング=難しい」という先入観を取り除き、画面を開いた瞬間に「やってみたい」が先に来るデザインをどう実現するか
  • 昨年からの継続プログラムとして、世界観の一貫性を保ちながら2026年版としての新鮮さをどう出すか

アプローチ

  • ゲームの世界観をデザイン言語として継承しながら、2026年の新コンテンツ「車型ロボット×ミッション形式」に合わせてビジュアルとUXを再設計
  • 「楽しさ」を前面に出しつつ、コーディング的なUI表現を随所に取り入れることでプログラミングの本質も同時に伝える構成を設計した

クライアントについて

大阪トヨペット株式会社が展開する地域共育プラットフォーム「大阪トヨペットラボ」のプログラミングコース。2025年にスタートし、2026年で2年目を迎えます。サイエンスコースと並ぶ2本柱として、小学1年生から中学生を対象に、論理力・創造力・発信力を楽しみながら育てる場を提供しています。

Point 1|「楽しい」が先に来るデザイン

「プログラミング」という言葉には、子どもにとっての心理的なハードルが存在します。難しそう、自分には無理かもしれない。その先入観を崩すために、今年も「学習サイト」ではなく「ゲームの世界に入り込む感覚」をデザインの出発点に置きました。

タイトルを「PROGRAMMING QUEST」と命名し、ミッションをクリアしていくゲーム的な構造をビジュアルで体現しています。雲・ポインター・キャラクターといったポップな要素を画面全体に散りばめ、スクロールするたびに冒険が続いていくような演出を設計しました。「楽しそう」という感情が「やってみたい」に変わる瞬間をデザインで引き出すことが、このサイトの核心です。

Point 2|プログラミング感を、デザインに忍ばせる

ゲームの世界観で包みながらも、プログラミングの本質的な感覚も伝えることにこだわりました。コーディング画面で使われるようなUI表現、コマンドライン的なテキスト、グリッド感のあるレイアウト、タイプライター的なアニメーションを随所に取り入れることで、遊びの中に「本物のプログラミングに近いものに触れている」という感覚を作っています。

楽しさだけに寄りすぎず、知的な手応えも同時に届ける。そ

大阪トヨペット株式会社 desktop screen 1
大阪トヨペット株式会社 desktop screen 2
大阪トヨペット株式会社 mobile screen 1
大阪トヨペット株式会社 mobile screen 2
大阪トヨペット株式会社 mobile screen 3
大阪トヨペット株式会社 mobile screen 4
大阪トヨペット株式会社 mobile screen 5
大阪トヨペット株式会社 mobile screen 6
大阪トヨペット株式会社 mobile screen 7
大阪トヨペット株式会社 mobile screen 8

Team

Website

Agency
IDEI inc.
Art Direction
奥村匠真(tsukuru inc.)
Planning / Copy Writing
岡本大和(tsukuru inc.)
Illustration / Design
北川日和(tsukuru inc.)
Front-end Developer
増田 日吉