ブログ · 制作事例 ·

JOYPACK:展開図から箱へ

平面の展開図から3種類の箱へ。一続きの動きで製品を伝える、包装資材メーカーの英語・韓国語サイトです。

段ボール箱、格子状の仕切り、カスタムインサートの3種類を示すJOYPACKの3Dモデル

製品を通じて仕事を伝える

JOYPACKはオーバーン近郊のアラバマ州オペライカにある包装資材メーカーです。アラバマ州とジョージア州の企業に製品を供給しています。製品と製造設備を理解し、包装の相談へ進めるサイトを制作しました。

製品
3種類の包装構造
言語
英語・韓国語
担当範囲
サイト・3Dモーション・地域検索の基盤整備
結果
サイト公開済み

joypackinc.comで公開。Search ConsoleとGA4を接続し、計測を開始しました。

会社紹介資料から始める

出発点は会社紹介資料にある製品写真、設備、製造工程でした。資料を段ボール箱、仕切り、カスタムボックスとインサートの3つの製品群に整理しました。

3つの案から、一続きの流れへ

A案は工程を一つずつ見せ、B案は落ち着いた誌面のように構成しました。最終のB2案では、スクロールに合わせて移動する一つの箱が製品と工程をつなぎます。

青い箱の展開図とEvery product starts with a boxの見出しがあるJOYPACKのトップ画面
最終案のトップ画面は、メッセージと平面の展開図から始まります。

展開図が製品になる

スクロールすると展開図が仕切り付きの箱に折り上がり、製品一覧の中央へ移動します。左右には別の2種類の構造が現れます。製品を選ぶと中央で展開し、再度押すと折り上がります。自動再生でも各構造を順に確認できます。

サイトの実際の箱レンダラーで収録した15秒の動画です。展開図が製品一覧になり、続いて段ボール箱が開いて折り上がる様子を確認できます。

モデルは包装構造を説明するためのものです。寸法が確定した製造図面や、認定された荷重試験の結果ではありません。

設備の姿を保つ

設備写真は背景と機械の細部を残し、控えめに鮮明さを調整しました。接着・ステッチ機が横につぶれて見えないよう、紹介資料の表示比率を基準に修正しました。

小さな画面でも伝わる構成

製品の動きは一時停止でき、名前付きのボタンでも操作できます。端末の視差効果を減らす設定に対応し、描画できない環境では静止した製品一覧を表示します。アニメーションなしでも説明と問い合わせ先を確認できます。

地域から見つけてもらうために

英語と韓国語のページにそれぞれURL、タイトル、説明、言語切り替えリンクを用意しました。オペライカの住所、月〜金の午前9時〜午後5時という営業時間、アラバマ州とジョージア州の対応地域を掲載し、事業者情報の構造化データも追加しました。

joypackinc.comでサイトを公開し、GA4とSearch Consoleを接続しました。現時点で確認できる成果はサイトの公開と計測基盤の整備です。検索露出や具体的な相談の変化は、より長い期間で確認していきます。

ほかの制作事例.

  1. 日中に手に持ったCafe Mallowのアイスドリンク2杯。ビスケットを添えた抹茶とクリーム入りのアイスコーヒー

    · 制作事例

    Cafe Mallow:公開7日で材料が品切れ、最初の7日間の検索結果

    公開後7日間で検索表示3,998回、クリック337回。平均掲載順位は初回記録の5.7位から公開後7日間の平均3.2位へ、2.5位上がりました。

    読む
  2. 黒い大理石の上の白い皿に盛られた大きなとんかつに、ソースをかけるKing Katsuの写真

    · 制作事例

    King Katsu Land:3つのデザインと初回の検索データ

    2店舗のために3つのデザイン方向をコードで制作し、店舗ごとに注文リンクを付けました。9月25–27日に62人が注文ボタンを押しました。Daly Cityが34人、Newarkが28人です。

    読む
  3. 障子のある明るい和風の食事空間で、テーブルに置かれた弁当と緑茶

    · 制作事例

    Midori Sushi:オースティンの本格寿司、27年目の新装

    1999年創業のオースティンの寿司店と、検索できる210品のメニュー。3日間ごとに比べると検索表示は65%増え、平均掲載順位は10.4位から8.5位に上がりました。

    読む
  4. 深い赤色のテーブルに並ぶヤンニョムチキン、トッポッキ、小皿料理

    · 制作事例

    Cocobang:サンフランシスコの夜に楽しむソウルの味

    2026年9月22日に登録したドメインで公開した、深夜営業の韓国料理店のウェブサイト。9月26日にはGoogleでの表示が1日830回になり、直近3日間で40の検索語で1位でした。

    読む
  5. ニュースフィード、投資カレンダー、プロフィールを表示したSAVEリリース時のモバイルデザイン

    · 制作事例

    SAVE:リリースに向けたウェブサイトとアプリのデザイン

    投資ニュースプラットフォームのローンチデザイン。2026年9月時点でGoogle Play 10万+ダウンロード、韓国App Store評価4.8、ファイナンス77位です。

    読む
  6. 2026年9月12日に撮影したGSDAQウェブアプリ。ニュースフィード、市場ダッシュボード、経済カレンダー

    · 制作事例

    GSDAQ:AI株式リサーチのデザイン・開発・リリース

    GSDAQのWebサイト、Webアプリ、iOSアプリのデザインと開発を担当しました。コンテンツ制作とApp Storeでのリリースも担当しています。

    読む
制作を相談する

いま必要な取り組みを、
一緒に整理します.

ロゴや名刺ひとつから、ブランドとウェブサイト全体までご相談いただけます。事業名、必要な作業、いまお困りのことをお知らせください。無料の初回相談で状況を伺い、範囲と進め方をご提案します。必要なサービスが決まっていれば直接ご依頼いただけます。何から始めるか迷う場合は、スタート診断を選べます。

213-222-3086
Mik.制作のご相談
相談する言語は?

話しやすい言語をお選びください。

事業について教えてください。

事業名とサービス提供エリアだけで十分です。

住所、市区町村、サービス提供エリアのいずれかで十分です。
どんなお手伝いが必要ですか?

短い文章で構いません。詳しいことは一緒に整理していきましょう。

ご連絡先を教えてください。

ご相談への返信に使います。

この内容でよろしいですか?

送信前に、どの回答も確認・修正できます。

ご入力の情報は、ご相談内容の確認とメールでの返信に使用します。

Privacy & session analytics

We use Google Analytics to measure website visits and interactions. With your permission, we also use Microsoft Clarity to collect clicks, scrolling and masked session replays to improve this website. Clarity sends this usage data to Microsoft. Microsoft may use the data under its Privacy Statement, including to improve its products and provide Microsoft Advertising. Our integration requests analytics consent and denies advertising storage. Clarity cookies are disabled in this project. We do not send custom visitor identifiers or form values to Clarity.

You can decline session analytics or turn it off at any time. Browser Global Privacy Control and Do Not Track preferences are respected. This choice controls Clarity; it does not change the site's existing Google Analytics setup. Query-bearing visits and private pages are excluded from Clarity.

Microsoft Privacy Statement · Google Privacy Policy