Dilli
アパレルブランドのオンラインショップ
日本生まれで、今ではオーストラリアでも着られているアパレルブランドDilliのオンラインショップです。場所やシンボルから生まれたオーバーサイズのグラフィックTシャツを、英語と日本語で、かんたんに注文できるサイトで販売しています。
サイトを見る
Dilliに必要だったのは、ブランドらしいショップでした。ロゴと同じ白と黒、実際にシャツを着た写真、英語と日本語、そして1分以内で終わる注文。
主な特長
シャツが主役のトップページ
写真を読み込むあいだ、DLのマークが分かれてDilliのロゴになり、その下に5枚のシャツが扇のように広がります。写真はすべて実際にシャツを着たもので、モックアップやAI画像は使っていません。
ショップアシスタント「Dilliに質問」
シャツ、サイズ、ブランド、注文方法についての質問に、訪問者の言語で短く答えます。送料や在庫、返品について作り話をしないよう設定しているため、わからないときはお問い合わせページへ案内します。
サイズを選んで、注文を送るだけ
シャツごとのページに、写真、円での価格、サイズ、素材、お手入れ方法をまとめました。注文に必要なのは名前、電話番号、メールアドレスだけ。今はカード決済がないため、Dilliのチームがメールでサイズ、配送、支払いを確認します。
英語と日本語
初めての訪問では、スマホやパソコンの言語設定に合わせて表示します。上のバーのボタンで切り替えられ、選んだ言語は次回も記憶されます。
プリントに込めた物語
Dilliのプリントは、ヒマラヤ、トリシューラ、古美術、オームなど、場所やシンボルから生まれています。「ストーリー」のページでは、ロゴに合わせた白と黒のデザインでその物語を伝えます。
チームのための裏側の仕組み
注文と在庫をひとつの場所で
すべての注文とメッセージが管理画面に届きます。在庫はサイズごとに管理し、支払い済みにしたときに減り、キャンセルすると戻ります。
Cookieなしのアクセス解析
Cookieを使わず、IPアドレスも保存せずに訪問数や人気ページを表示するため、同意バナーは必要ありません。
レポート・経費・請求書
週次・月次のメールレポートに加え、経費、請求書、割引コード、サイトのお知らせも同じ管理画面で扱えます。
プロジェクト概要
- クライアント
- 日本生まれで、オーストラリアでも着られているアパレルブランドDilli。綿とライクラのオーバーサイズのグラフィックTシャツを作っています。
- 担当
- オンラインショップ、ショップアシスタント、管理画面のデザインと開発を担当しました。
- 納品したもの
- トップ、5つの商品ページ、カート、注文、ストーリー、お問い合わせ、プライバシーのページ
- 全ページ英語と日本語に対応
- AIショップアシスタント「Dilliに質問」
- ロゴから作ったローディングアニメーション
- メール確認による注文（あとからカード決済を追加可能）
- 注文、在庫、顧客、割引コード、アクセス解析、経費、レポートを備えた管理画面
- 状況
- dilli.jpで公開中。
開発者向けの技術情報
使用技術・アーキテクチャ・作り方について。
スタック
アーキテクチャ
静的サイトと小さなWorker
ショップはNext.jsの静的エクスポートで、Cloudflareから配信しています。/apiへのリクエストだけがWorkerに届き、注文、お問い合わせ、アシスタント、管理画面を処理して、データをD1（SQLite）に保存します。
Dilliに質問
チャットはWorkerを通してOpenRouterのClaude Haiku 5.5に送られ、返答を届いた順にストリーミングで返します。指示文はショップと同じ商品ファイルから作るため、実在するシャツのことしか知りません。IPごとに1分12回まで、送るのは直近12件のメッセージだけで、会話は保存しません。
注文と在庫
注文はシャツ、サイズ、合計とともに保存され、フォームはIPごとに1分3回までに制限しています。サイズごとの在庫はD1にあり、チームが注文を支払い済みかキャンセルにしたときだけ変わります。
ハイライト
Cookieなしのアクセス解析
ページの閲覧は、Cookieを使わず、IPアドレスも保存せずに記録します。週次・月次のレポートはcronで自動送信します。
堅牢な管理画面
管理画面のパスワードはハッシュとしてWorkerのシークレットにだけ保存し、サインインの試行はIPごとに制限しています。
このようなサイトをお考えですか？
ブランドの世界観に合い、かんたんに注文できるオンラインショップを制作しています。