【Shopify】縦書き・明朝体の和風ストアを既製テーマなしで作った話（デモ「鳴々酒造」）

Shopify で、架空の老舗酒蔵のデモストア「鳴々酒造（なりなりしゅぞう）」を作りました。明朝体の縦書きの見出し、白く広い余白、ゆっくり現れる文字。既製テーマのカスタマイズではなく、見た目を一から作っています。この記事では、何を考えてこのデザインにしたのか、どう作ったのかを書きます。

目指したのは「おぉ、和だ」の一瞬

このデモは、僕の Shopify 制作の営業用に作りました。ねらいは、見た人が最初の画面を見た瞬間に「おぉ……和だ……」と感じることです。そのために、使いやすさを少しだけ犠牲にしてでも、縦書きの見せ方を積極的に使うと決めました。デザインの自由度の高さそのものを見てもらいたかったからです。

土台には、以前作った「見た目を持たない Shopify テーマの土台」を使っています。カートやバリエーション選択などの機能は土台の部品をそのまま使い、見た目だけをこのお店のために作りました。土台の部品のファイルは1行も変えていません。

店名の「鳴々」は、僕の呼び名の「ナリ」からとっています。ちょっとした署名のつもりです。

テーマは「耳を、澄ます。」

世界観は、ひとことで「耳を、澄ます。」です。水の湧く音、米を洗う音、もろみの泡の音、しずくの落ちる音。静かな蔵に響く小さな音が、画面から聞こえてくるような酒蔵を目指しました。商品名も、音や音の言葉からとっています（純米大吟醸「澄音（すみね）」、純米吟醸「水鳴（みずなり）」など）。

色は墨と朱だけ

名前	値	使うところ
墨	#24211f	文字、墨色の段の背景、フッター
薄墨	#8a847e	補足の文字、細い線、波紋
朱	#c8402a	ハンコ、擬音、ホバーの波紋。ごく少しだけ
卯の花色	#f7f9fb	ページ全体の背景。わずかに青みのある、涼しい白
生成り	#f6f3ec	一部の段だけに使う、温かみのある背景

和風というと、温かみのある生成りの背景を思い浮かべる人も多いと思います。最初はそうしていたのですが、ページ全体に敷くと、どこかで見た「和風のテンプレート」っぽさが出てしまいました。そこで、ページ全体は青みのある白（卯の花色）にして、生成りは一部の段だけにしています。背景には、和紙や蔵の土壁のような質感をうっすら敷いています。

縦書きを積極的に使う

書体は、Google Fonts の Shippori Mincho（明朝体）です。見出し、キャッチコピー、商品名、記事の題、擬音などを縦書きにしています。一方で、読む・入力する・比べるところは横書きのままです。

縦書きにしたもの	横書きのままにしたもの
見出し・キャッチコピー	商品説明・記事本文などの長い文章
トップの最初の画面のメニュー	価格・数量
商品名・記事の題	カート・配送日時・のし・お問い合わせなどのフォーム
擬音（「こぽ、こぽ。」など）	パンくず・絞り込み

縦書きは、共通のクラスを1つ用意して、必要なところに付けています。

// 縦書きの共通。見出し・商品名・記事の題・擬音・短い文に使う。長い文章・価格・フォームは横書きのまま。
.tate {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-feature-settings: 'vpal';
  line-break: strict;
}

// 縦書きの中の2〜3桁の数字を横に寝かせずに立てる（例：二〇二六ではなく 12 月）
.tate__num {
  text-combine-upright: all;
}

「音が聞こえる」動きは、すべてゆっくり

動きはすべて「ゆっくり、静かに」です。速さの目安は、一文字0.4秒、波紋1回に数秒にしました。

動き	内容
しずくのように現れる文字	見出しが一文字ずつ、ぼかしから浮かび上がる
落ちるしずくと波紋	最初の画面で、ときどき墨色のしずくが落ち、波紋がゆっくり広がって消える
押されるハンコ	見出しが出きったところで、ハンコが静かに押される
触れると波紋	ボタンにマウスを乗せる（キーボードで選ぶ）と、朱色の細い波紋が1回広がる
パララクス	写真を敷いた段で、写真が文字よりゆっくり動く

パソコンやスマホで「視差効果を減らす（動きを減らす）」設定にしている人には、すべての動きを止めて、最初から表示しきった状態にしています（prefers-reduced-motion: reduce）。

文字がちらつかないように、最初の描画の前に印を付ける

文字が「ふわっと現れる」演出は、最初に文字を隠しておき、画面に入ったら見せる、という仕組みです。最初は、JS が読み込まれてから「隠す」ための印を html に付けていました。ところが、これだと文字が一瞬見えてから消え、そのあとでアニメーションが始まる、というちらつきが出ました。JS が読み込まれる前に、ブラウザが一度、文字を描いてしまうためです。

そこで、印を付ける小さなスクリプトを head の中、CSS より前に置きました。

<script>
  (function (html) {
    if (!('IntersectionObserver' in window) || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    html.setAttribute('data-kura-motion', 'on');
    setTimeout(function () {
      if (html.hasAttribute('data-kura-ready')) return;
      html.removeAttribute('data-kura-motion');
      html.setAttribute('data-kura-fallback', '');
    }, 4000);
  })(document.documentElement);
</script>

ポイントは、4秒たっても演出の JS の準備ができていなければ、印を外して全部見せる「安全装置」です。JS の読み込みに失敗したときに、文字が隠れたままにならないようにしています。動きを減らす設定のときや、古いブラウザで印を付けないのも、同じ理由です。

「蔵の音を聴く」ボタン

最初の画面の右下に「蔵の音を聴く」ボタンがあり、押した人にだけ水の音を小さく流します。音はフリー素材の水の効果音を、40秒のループにしたものです。勝手に音が鳴るサイトは嫌なので、最初は必ず無音にしています。

  async toggle() {
    if (this.playing) {
      this.audio.pause();
      this.button.setAttribute('aria-pressed', 'false');
      return;
    }
    this.audio.volume = VOLUME;
    try {
      await this.audio.play();
      this.button.setAttribute('aria-pressed', 'true');
    } catch {
      this.button.setAttribute('aria-pressed', 'false');
    }
  }

audio.play() は、ブラウザが再生を許さなかったときに失敗することがあります。そのときは例外を出さずに、ボタンをオフのまま戻しています。

ロゴとハンコも、スクリプトで作った

ロゴとハンコは、フォントを並べただけ・色の付いた四角に文字を置いただけのものにはしたくありませんでした。どちらも、作り方をスクリプトに残して、何度でも作り直せるようにしています。

ロゴ

筆文字のフォント（Yuji Boku など。Google Fonts・OFL）の字形を一文字ずつ取り出し、大きさ・傾き・重なりを変えて組みます。「鳥」の四つの点を、落ちるしずくのように縦に伸ばす崩しも入れました。墨のにじみとかすれを SVG のフィルタで加えて大きく描き、墨一色の SVG に戻しています。

ハンコ

20×20 マスに組んだ印篆風の「鳴」を元に、彫りの線の揺れ、縁の欠け、朱肉のムラとかすれ、紙へのわずかなにじみ、1〜3度の傾きを加えて、本物の押印らしく見せています。

商品画像は Blender で「同じ撮影条件」にそろえた

商品は13点すべて架空なので、商品画像もありません。そこで、無料の 3DCG ソフト Blender を Python から動かして、瓶を「撮影」するスクリプトを作りました。

• カメラの位置・画角、照明（左の窓から入るやわらかい光）、背景（卯の花色に近い白い和紙）を、スクリプトの1か所にまとめる
• 商品ごとの違い（瓶の形・瓶の色・ラベル）は、設定ファイルに1商品1行で書く
• ラベルは、サイトと同じ明朝体で、商品名・分類を正確な文字で作って瓶に貼る
• 瓶の形は、実際の四合瓶のカタログの輪郭を高さごとに測った比率で作る

商品を足すときは、設定に1行足して実行するだけです。全部の写真が同じ日に同じスタジオで撮ったように見えるのが、この方法のいちばんの良さだと思います。最初は瓶1本だけ試しに作って雰囲気を確かめ、そのあとで残りを書き出しました。

機能も、この世界観の中で見せる

このデモでは、土台の機能のうち、お酒のお店らしいものを前に出しています。

機能	このデモでの見せ方
3階層のカテゴリ	日本酒・焼酎・その他の大分類から、純米・季節の酒などの中分類、純米大吟醸などの小分類へ。カテゴリページには子カテゴリの一覧を出す
配送希望日時	カートで日付と時間帯を選ぶ（必須）。2営業日後から30日先まで、正午を過ぎた注文は翌日から数える、日曜は定休
のし・ギフト包装	商品ページで「御祝」「御礼」「内祝」などを選ぶ。カートの行に指定内容が出る
年齢確認	最初に「二十歳以上ですか」を、和紙の小さな紙のようなダイアログで聞く
売り切れの表示	季節限定の生原酒「ぷつぷつ」を、完売の見本にしている
読み物	ブログ。記事の題は縦書き、本文は横書きで読みやすく

よくある疑問

• Shopify のオリジナルテーマを一から作るための「見た目を持たない土台」を自作した話
• 同じ土台で作った、爆音のレコードレーベルのデモストア

おわりに

作っていていちばん楽しかったのは、ハンコと瓶でした。どちらも「それっぽい」と「本物っぽい」の間に大きな差があって、少しずつ近づけていく作業でした。

既製テーマの見た目では、お店の空気が伝わらないと感じている人の参考になればうれしいです。縦書きや和の表現も、Shopify でここまでできます。