Coisa de Motos

チャンネルにはファンがいる。ストアには、お金を預けてもらえるほど信頼されるブランドが必要だ。

Coisa de Motosは、何かを買える場所になる前から、名前であり、声であり、コミュニティでした。ストアにするということは、その声を保つこと。にぎやかで、おもしろくて、どこまでも路上の匂いがする声です。そのうえで、R$2,000のジャケットを買ってもらえるくらい信頼できる見た目にする必要がありました。

しかも幅広く使える必要がありました。同じアイデンティティが、グッズにも、ブレーキディスクやバイザーが並ぶサイトにも、毎週のストーリーズやサムネイルにも乗ります。速くつくれて、いつでもひと目でわかるように。

Shopifyでつくる

ストアはすべてShopifyでつくり、まわりに何かを自作するのではなく、プラットフォームをできるだけ使い倒しました。ブランドに合わせてカスタマイズしたテーマ、コレクションとバリエーションのあるカタログ、検索とフィルター、チェックアウトと決済、MOTONAUTAのような割引コード、ブログ、そして残りはアプリで。

プラットフォームに頼ったおかげで、2人のチームでもサーバーを運用せずに何百ものパーツを売ることができ、ストアを特別にするもの、つまり見た目、整理の仕方、伝える言葉に時間を使えました。

ストアではライディングギア、アパレル、何百ものパーツを売っているので、デザインの仕事はほとんどが「見つけやすくすること」でした。ヘッダーには大きな検索バーがあり、メガメニューがパーツを系統ごとに分けています。機械系、ブレーキ、電装、そのほか。

ChatGPTでコーディング

Shopifyのテーマをカスタマイズするには、Shopify独自のテンプレート言語Liquidを、HTML、CSS、JavaScriptと混ぜて書く必要があります。私はChatGPTと一緒に書きました。やりたい変更を説明して、返ってきたコードをShopifyのテーマエディターに貼り、どうなるかを見る。何かが壊れたら、Shopifyからコードをコピーし直してバグと一緒にChatGPTに送り、動くまでそれを繰り返しました。

AIコーディングはまだ初期の段階で、私が作業していたテーマエディターには何も組み込まれていませんでした。2つのタブのあいだのコピー&ペーストでしたが、それがすでに、私がものをつくるやり方でした。

ChatGPT

初めて購入する人がMOTONAUTAで5%オフになるバーを上部に追加して

{% if customer == blank %}
  <div class="promo-bar">
    5% off your first order:
    MOTONAUTA
  </div>
{% endif %}

Copy the code

バグを貼りつけて返す

Shopify · コードを編集

header.liquidtheme.liquid

1{% if customer == blank %}
2  <div class="promo-bar">
3    5% off your first order:
4    MOTONAUTA
5  </div>
6{% endif %}

売れるストアフロント

ホームページは今週のセールから始まり、ライダーがいちばんよく買うカテゴリーが続きます。ヘルメット、ジャケット、グローブ、ブーツ、パーツ。上部の細いバーでは、初めて買う人全員にクーポンMOTONAUTAで5%オフを。コミュニティ自身の言葉です。アカウントでは「Salve, motonauta!」と迎えます。

パーツは系統ごとに

カテゴリーを開くと、整備士の考え方に沿ってまとめたメガメニューが出てきます。だからブレーキパッドを探している人が、マフラーの中をスクロールすることはありません。

Coisa de Motos

スマホのためにつくる

ライダーはInstagramやYouTubeからスマホでストアにたどり着くので、どの画面もデスクトップと同じくらいスマホのためにデザインしました。さらに、ギアをネットで買ったことがない人のために、ホームページからチェックアウトまでの流れを6ステップの購入ガイドにしました。

1. 

   1 · サイトを開く

2. 

   2 · カテゴリーを選ぶ

3. 

   3 · 並べ替える

4. 

   4 · 商品を開く

5. 

   5 · 詳細を確認する

6. 

   6 · 購入する

ブランドの声で伝えるプロモーション

サイトのキャンペーンにはそれぞれ、同じシステムで専用のバナーをつくります。全品送料無料、ヘルメット5モデルのTexx 25周年、4Ride MotorcycleとのFestival Interlagos 2025チケットプレゼント、クーポンコード、レディースアパレルのライン、返品ポリシー。

人を呼び込むコンテンツ

ブログはチャンネルの動画を記事にします。たとえば「ヘルメットに寿命はある?」。だから検索からもYouTubeからも、ストアに戻ってきます。

Coisa de Motos

シンボル

シンボルは横から見たヘルメット。バイザーを3本のストロークで切り込み、スピード感と、走るライダーの「E」の字に見えるようにしています。小さなサイズやスタンプには塗り、大きくて余白のある場所には線で。色はオレンジ、ブラック、ホワイト。

ワードマーク

ワードマークとすべての見出しにはEvil Empireを使っています。ガレージの看板のような雰囲気のある、太くて幅の狭いディスプレイ書体で、COISAとMOTOSのあいだに小さな「de」を挟んでいます。どうせライダーたちは名前をその2つの大きな単語に縮めて呼ぶので。ストアのUIはInterで、派手な見出しの下でも価格やサイズが読みやすいままです。

円で組み立てたシール

シールはひとつの中心を囲む円の上に組み立てています。文字は外側の半径Rと0.75Rのあいだの帯に乗り、「desde 2020」はその下の小さな円弧に。ヘルメットはRより少し高く、中心からやや右に置いて、バイザーが前を向くようにしています。ライダーがコーナーで体を傾けるように。

ロックアップ

パーツを組み合わせて4つのロックアップに。ヘッダー用の横組み、正方形のスペース用の縦組みともうひとつの縦組み、そして円弧に「desde 2020」が入った丸いシール。シールはプロフィール画像にも、ステッカーにも、ワッペンにもなります。それぞれにチャンネル用のYouTube版があります。

横組み

縦組み

丸いシール

Colour

One loud colour and a few quiet ones, all saved as styles in the Figma file. Laranja is the brand: it's the symbol, the buttons, the sale bars. Near-black and white carry everything else, so the orange always means something.

マスコットのMotonauta

ブランドには人ではない顔が必要でした。そこで生まれたのがMotonauta。黒いヘルメットにTexxのジャケットを着たライダーで、コミュニティの代わりに立つ存在です。クーポンを持ち、サムズアップをして、ヘルメットのサイズを測るために頭を測ります。ポーズはAI画像ツールで生成し、一貫したひとりのキャラクターになるよう選び抜きました。

セール用の3Dアイコン

セール用には、ブランドのオレンジでつくった3Dオブジェクトのセットがあります。クーポン、パーセント、ギフト、オレンジと黒の風船、はてなマーク、カート、カメラ、星。バナーや広告で商品のまわりに浮かんでいます。押してみたり、ひとつ引っぱって離してみたりしてください。

身につけるブランド

ブランドが最初に機能しなければならなかったのは、人が身につけたときでした。シンボルは胸に小さく、背中に大きく。丸いシールはキャップや、注文品を送る箱にも使っています。

この規模のストアは、安定した投稿のリズムで成り立っています。だからブランドには単発のデザインよりテンプレートが必要でした。シリーズごとにひとつのルック。すぐに埋められて、ほかの誰とも見間違えようがないもの。

ローンチ

ストアはティザーシリーズ「E-commerce Coisa de Motos, lançamento em breve」で幕を開けました。商品、Motonauta、そしてDaniel本人を、サイトが公開されるまで1投稿ずつ。数か月後、同じシステムでInstagramのフォロワー2,000人を祝いました。

Instagram

9:41100%

coisademotos

312posts2.148seguidores186seguindo

Coisa de Motos

Maior e-commerce para motos do Brasil! 🏍️

Encontre tudo o que sua moto precisa.

coisademotos.com.br

SeguirMensagem

Sobre nósMedidasFAQVídeosLojaClientesOfertasCuponsComo comprarMoto criadoresMototripsManutenções

Instagram is the store's shop window, so the profile was designed as a whole, not post by post. The avatar is the round seal, and the highlights work like a menu: twelve covers, an orange icon on asphalt each, for sizes, FAQ, videos, the store, customers, offers, coupons, how to buy, the creators, trips and maintenance, with “Sobre nós” in full orange first.

The feed mixes three kinds of posts, each with its own template: product posts filmed with the gear itself, with a small “watch it on YouTube” tag, offers on the orange or black grounds of the ads, and moments like the 2,000-follower thank-you. Reels get covers in the same type, so the grid reads as one brand from a distance.

• 商品の投稿

  本物の手に本物のギア。フル動画へのタグつき

• セール

  広告と同じ背景にクーポンや新商品

• リールのカバー

  映像の上に大きなEvil Empireの文字

• ハイライト

  カバーのメニュー: アスファルトの上にオレンジのアイコンをひとつずつ

広告

広告とサムネイルでは、ブランドをさらに押し出します。オレンジが背景全体になり、商品が人物のまわりに3Dで浮かび、文字はフレームが許す限り大きくなります。

YouTube

YouTubeでもチャンネルは同じシステムを守っています。シールの入ったバナーと、同じ太い文字とオレンジのバーを使った300枚以上のサムネイル。旅、レビュー、取り付け、コミュニティからの質問まで。