Shopify でタイムラインを設置する方法を徹底解説！沿革やブランドストーリーをおしゃれに見せる完全ガイド

はじめに
記事の構成
Shopify でタイムラインを表示できる？
タイムラインを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル年表タイムライン｜お手軽会社概要 & 沿革」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 自動でテーマに追加（1 クリック追加）
- 手動でテーマに追加（任意ページに設置したい場合）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でストアを運営していると、「会社の沿革をきれいに見せたい」「ブランドストーリーをページのなかで語りたい」「商品の製造工程を時系列で紹介したい」と考える場面が必ず出てきます。商品力や価格訴求だけではなく、「誰が・どのような想いで・どんな道のりで」 ブランドを育ててきたかを伝えることは、ファンづくりやリピーター獲得に大きな影響を与えます。

そんなときに役立つのが 「タイムライン」 です。タイムラインは、出来事や工程を時系列に沿って並べて表示するレイアウトで、会社の沿革・ブランドストーリー・商品の製造工程・ステップガイドなどを一目で伝えるのに最適です。

しかし、Shopify のデフォルトのテーマには、縦型タイムライン専用のセクションが標準で備わっていません。「タイムラインを設置したいけれど、どうすればいいかわからない」と悩む運営者は多いはずです。

この記事は以下の記事を参考にしています。

記事の構成

この記事は以下の流れで解説します。

Shopify でタイムラインを表示できるか
タイムラインを表示するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル年表タイムライン｜お手軽会社概要 & 沿革」紹介
アプリのインストール手順
アプリをテーマに追加する手順
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ

Shopify でタイムラインを表示できる？

結論から言うと、Shopify でタイムラインを表示する方法は大きく 2 つ あります。

テーマのコード編集で実装する方法
Liquid・CSS・JavaScript を直接編集して、自前でタイムラインを実装する方法です。自由度は高いものの、運用しながら項目を増減するたびにコードを修正する必要があります。
アプリを導入して実装する方法
Shopify App Store のタイムライン専用アプリをインストールして、テーマエディタから直感的に設置・編集する方法です。コーディングの知識がなくても、最短 5 分で美しいタイムラインを設置できます。

どちらの方法もメリット・デメリットがあるため、ストアの規模や運用体制に合わせて選ぶことが重要です。

タイムラインを表示するメリット・デメリット

メリット

ブランドへの信頼感が高まる
創業からの歴史や受賞歴、メディア掲載などを時系列で並べることで、訪問者に「実績あるブランド」という印象を与えられます。新規顧客にとっては、購入前の安心材料になります。

会社の沿革を年代ごとにわかりやすく整理できる
受賞歴・メディア掲載歴をストーリーとして演出できる
「いつから・どんな歩みで」が一目で伝わる

ブランドストーリーが伝わりやすい
創業の想い・転機・成長の節目を時系列で語ることで、訪問者の感情に訴えかけられます。共感を生むストーリーは、ファン化やリピーター獲得に直結します。

創業エピソードをドラマチックに見せられる
商品開発の苦労や工夫を可視化できる
ブランドの「人間味」を伝えられる

会社概要・アバウトアスページの離脱率が下がる
文字情報だけのページは離脱されやすい一方、画像とタイムラインを組み合わせたページは滞在時間が伸びやすくなります。SEO 上も滞在時間や直帰率は重要な指標であり、検索流入の改善にもつながります。

視覚的に整理された情報は読まれやすい
滞在時間が伸びることで SEO にも好影響
スクロールアニメーションで「最後まで読みたい」気持ちを引き出せる

製造工程ページとして付加価値を高められる
ハンドメイド・伝統工芸・食品などのブランドでは、製造工程をタイムラインで紹介することで「丁寧に作られている」印象が伝わります。商品単価が高い領域では、購入の決め手になることもあります。

「素材選び→加工→検品→出荷」を視覚的に表現できる
商品単価への納得感を生み出せる
「ストーリーを買う」体験を作れる

デメリット

コンテンツの準備に手間がかかる
タイムラインを魅力的に見せるためには、年代ごとの画像・キャッチコピー・本文を整える必要があります。素材集めには時間がかかる点を事前に押さえておきましょう。

項目を増やしすぎると逆に読まれない
6〜12 項目程度に絞り込むのが適切です。20 項目、30 項目と詰め込むと、読み手が途中で離脱してしまいます。

スマホでの見せ方に注意が必要
PC でジグザグレイアウトのタイムラインも、スマホでは縦一列に切り替わります。スマホでの読みやすさを意識した文章量・画像サイズの調整が重要です。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット:

完全に自由なデザイン・レイアウトを実現できる
月額の追加コストがかからない
ストアの他のセクションと完璧に統一感を出せる

デメリット:

Liquid・CSS・JavaScript の知識が必要
項目を増減するたびにコードの修正が必要
スクロールアニメーションやレスポンシブを自前で実装する必要がある
バグや表示崩れが起きた際に対応の難易度が高い

アプリを導入する方法

メリット:

コーディング不要で美しいタイムラインを設置できる
テーマエディタ上で項目の追加・編集が完結する
スクロールアニメーション、レスポンシブ対応が標準装備
アップデートで機能が増えていく

デメリット:

月額のサブスクリプション費用がかかる（数百円〜数千円）
アプリのデザインの範囲内でしかカスタマイズできない場合がある
アプリをアンインストールするとブロックも消える

結論：最初はアプリで小さく試すのがおすすめ

タイムラインは、ストアの「顔」になる重要なコンテンツです。最初からコード編集で実装してしまうと、「思ったより読まれない」「やっぱり別レイアウトが良かった」となったときに修正の手間が大きくなります。

そのため、まずは月額数百円のアプリで試してみて、効果を確認してから本格的に作り込むのがおすすめです。アプリで運用しながらコンテンツを磨いていけば、「どんな見せ方が刺さるか」が掴めるため、その後の判断もスムーズになります。

アプリのインストール手順

シンプル年表タイムライン｜お手軽会社概要 & 沿革のインストール手順を順を追って解説します。

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリ」をクリックし、「Shopify App Store」へ移動します。
検索窓に「シンプル年表タイムライン」と入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

これでアプリのインストールは完了です。

アプリをテーマに追加（有効化）

インストール後は、タイムラインブロックをテーマに追加します。「自動」と「手動」の 2 通りの方法があります。

自動でテーマに追加（1 クリック追加）

アプリの管理画面を開きます。
追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

手動でテーマに追加（任意ページに設置したい場合）

商品ページや固定ページなど、トップページ以外の特定のページにタイムラインを設置したい場合は、手動で追加します。

Shopify 管理画面で「オンラインストア」→「テーマを編集する」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックし、「アプリ」タブから「シンプル年表タイムライン」ブロックを選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

アプリの設定項目を理解する

タイムラインブロックには、見た目や挙動を細かく調整できる豊富な設定項目があります。すべての設定はテーマエディタ上で変更でき、リアルタイムでプレビューを確認しながら調整できます。

セクション設定（見出し）

タイムラインの上部に表示する見出しに関する設定です。「Our Story」「沿革」「ブランドの歩み」など、伝えたい内容に合わせて自由に設定できます。

見出しテキスト: タイムラインの上に表示する見出しの文言を入力します。
見出しタグ: H1 / H2 / H3 から選択できます。SEO の見出し構造に合わせましょう。
見出しの文字の大きさ: 16px 〜 48px の範囲で調整できます。
見出しの色: 自由に選択できます。
見出しの配置: 「左揃え」「中央揃え」「右揃え」から選択できます。
見出しの左右余白: 0px 〜 100px の範囲で調整できます。

セクション設定の設定画面

ライン設定

タイムラインの中央を縦に走るラインのデザインを設定します。お店の世界観に合わせて、シンプルにも個性的にもアレンジできます。

ラインの色: 自由に色を選択できます。
ラインの太さ: 1px 〜 6px の範囲で調整できます。
ラインのスタイル: 「実線」「破線」「点線」から選択できます。

ライン設定の設定画面

ノード設定

ラインの上に並ぶ「ノード（丸い印）」のデザインを設定します。タイムラインの各項目を視覚的に区切る重要な要素です。

ノードのスタイル: 「ドット（丸い点）」または「番号（連番表示）」から選べます。年代を順に並べるなら「番号」がおすすめです。
ノードの大きさ: 12px 〜 40px の範囲で調整できます。
ノードの色: ノードの内側の色を選択できます。
ノードの枠線の色: ノードの外側の枠線色を選択できます。

ノード設定の設定画面

画像設定

タイムラインの各項目に表示する画像の見せ方を設定します。

画像のアスペクト比: 「画像のサイズに合わせる」「正方形 (1:1)」「横長 (16:9)」「縦長 (3:4)」「丸型」から選択できます。
画像の最大幅: 100px 〜 600px の範囲で調整できます。

画像設定の設定画面

レイアウトとアニメーション

タイムライン全体の余白・配色・アニメーションを設定します。

背景色 / 文字の色 / 上下余白: 自由に調整できます。
スクロールアニメーション: 「なし」「フェードイン」「左右からスライドイン」「下からスライドイン」「ズームイン」から選択できます。

レイアウト設定の設定画面

年表の項目（最大 12 個）

各項目には、画像・ハイライトテキスト・タイトル・リッチテキストの説明文を設定できます。空欄にした項目は自動で非表示になるため、運用しながら項目数を増減できます。

画像: 各項目に表示する画像を選択します。
ハイライトテキスト: タイトルの上に小さく表示される強調テキスト。「2020 年」「STEP 1」「Chapter 01」など。
タイトル: 各項目の見出しになります。
説明文: 各項目の本文。リッチテキストなので、太字・リンク・箇条書きなども使えます。

年表の項目の設定画面

すぐ使えるおすすめ設定例

会社の沿革ページに使う場合

ノードのスタイル: ドット
ラインのスタイル: 実線
画像のアスペクト比: 正方形 (1:1)
スクロールアニメーション: フェードイン
ハイライトテキスト: 年代（例: 2018、2020、2024）

落ち着いた印象で、信頼感を伝えやすい設定です。

ステップガイドページに使う場合

ノードのスタイル: 番号
ラインのスタイル: 破線
画像のアスペクト比: 横長 (16:9)
スクロールアニメーション: 下からスライドイン
ハイライトテキスト: STEP 1、STEP 2、…

順序が明確に伝わる設定です。商品の使い方ガイドや購入後の流れなど、手順を伝えたい場面に最適です。

商品の製造工程ページに使う場合

ノードのスタイル: ドット（大きめ）
ラインのスタイル: 実線
画像のアスペクト比: 横長 (16:9) または 画像のサイズに合わせる
スクロールアニメーション: 左右からスライドイン
ハイライトテキスト: 工程名（例: 素材選び、加工、検品、出荷）

工程ごとのこだわりを丁寧に見せられる設定です。

文言のテンプレ例

会社の沿革: 「Our Story」「私たちの歩み」「History」「会社の沿革」
ブランドストーリー: 「Brand Story」「ブランドの軌跡」「私たちの想い」
製造工程: 「ものづくりの工程」「Crafting Process」「商品ができるまで」
ステップガイド: 「ご利用の流れ」「How it works」「STEP BY STEP」

テーマのコード編集で実装する場合のサンプルコード

アプリではなくテーマのコードを直接編集して実装したい方向けに、最低限のサンプルコードを示します。Shopify の Liquid・CSS・JavaScript の知識が必要です。

実装の流れ

テーマのカスタマイズ画面から「テーマアクション」→「コードを編集する」を開く
新しいセクション sections/timeline.liquid を作成
CSS と JavaScript を assets/ 配下に追加
テーマエディタからセクションを追加して内容を入力

HTML（Liquid）を追加

{% comment %} sections/timeline.liquid {% endcomment %}
{{ 'timeline.css' | asset_url | stylesheet_tag }}
<section class="timeline" id="timeline-{{ section.id }}">
  {% if section.settings.heading != blank %}
    <h2 class="timeline__heading">{{ section.settings.heading }}</h2>
  {% endif %}
  <ul class="timeline__list">
    {% for block in section.blocks %}
      <li class="timeline__item {% cycle 'left', 'right' %}">
        <div class="timeline__node"></div>
        <div class="timeline__content">
          {% if block.settings.image %}
            <img
              src="{{ block.settings.image | image_url: width: 600 }}"
              alt="{{ block.settings.title | escape }}"
              loading="lazy"
              width="600"
              height="auto"
            >
          {% endif %}
          {% if block.settings.year != blank %}
            <span class="timeline__highlight">{{ block.settings.year }}</span>
          {% endif %}
          <h3 class="timeline__title">{{ block.settings.title }}</h3>
          <div class="timeline__description">{{ block.settings.description }}</div>
        </div>
      </li>
    {% endfor %}
  </ul>
</section>
<script src="{{ 'timeline.js' | asset_url }}" defer></script>

{% schema %}
{
  "name": "Timeline",
  "settings": [
    { "type": "text", "id": "heading", "label": "見出し", "default": "Our Story" }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "タイムライン項目",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "画像" },
        { "type": "text", "id": "year", "label": "ハイライトテキスト" },
        { "type": "text", "id": "title", "label": "タイトル" },
        { "type": "richtext", "id": "description", "label": "説明文" }
      ]
    }
  ],
  "presets": [{ "name": "Timeline" }]
}
{% endschema %}

CSS を追加

/* assets/timeline.css */
.timeline { position: relative; max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.timeline__heading { text-align: center; font-size: 28px; margin-bottom: 40px; }
.timeline__list { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline__list::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background-color: #ccc; transform: translateX(-50%);
}
.timeline__item { position: relative; width: 50%; margin-bottom: 40px; }
.timeline__item.left { padding-right: 40px; text-align: right; }
.timeline__item.right { margin-left: 50%; padding-left: 40px; text-align: left; }
.timeline__node {
  position: absolute; top: 0; width: 20px; height: 20px;
  background-color: #333; border-radius: 50%; border: 2px solid #ccc;
}
.timeline__item.left .timeline__node { right: -10px; }
.timeline__item.right .timeline__node { left: -10px; }
.timeline__highlight { display: inline-block; font-size: 0.85em; opacity: 0.7; }
.timeline__title { font-size: 1.2em; font-weight: bold; margin: 4px 0 8px; }
.timeline__description { font-size: 0.95em; line-height: 1.6; }

/* スクロールアニメーション初期状態 */
.timeline__item .timeline__content {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.timeline__item.is-visible .timeline__content {
  opacity: 1;
  transform: translateY(0);
}

/* レスポンシブ */
@media (max-width: 767px) {
  .timeline__list::before { left: 16px; }
  .timeline__item, .timeline__item.left, .timeline__item.right {
    width: 100%; margin-left: 0; padding-left: 40px; padding-right: 0; text-align: left;
  }
  .timeline__item.left .timeline__node, .timeline__item.right .timeline__node {
    left: 6px; right: auto;
  }
}

JavaScript を追加

// assets/timeline.js
(function () {
  const items = document.querySelectorAll('.timeline__item');
  if (items.length === 0) return;

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.3 }
  );

  items.forEach((item) => observer.observe(item));
})();

コード実装の注意点

スクロールアニメーションは IntersectionObserver で実装。古いブラウザでは動作しない場合があるため、必要に応じて polyfill を追加してください。
画像のサイズや比率を統一しないと見た目が崩れやすいので、テーマエディタで画像を入れる前に縦横比を揃えておくのがおすすめです。
項目数を増減するたびにテーマエディタから「ブロックを追加」する必要があります。

シンプルなタイムラインならこれで十分実装できますが、**「左右交互のジグザグ」「4 種類のスクロールアニメーション」「画像のアスペクト比切り替え」「番号ノード／ドットノードの切り替え」などをきちんと実装するのは手間がかかります。アプリを使えばこれらすべてが標準で備わっているため、運用効率を考えると「シンプル年表タイムライン｜お手軽会社概要 & 沿革」**の利用が圧倒的に楽です。