Shopifyで年表タイムラインや会社概要を簡単に作成できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/05/06

はじめに

Shopify は、世界中で利用されているネットショップ作成プラットフォームです。Shopify では「Shopify アプリ」を追加することで、標準機能では提供されていないさまざまな機能をストアに組み込むことができます。

このガイドでは、Shopify アプリ「シンプル年表タイムライン｜お手軽会社概要 & 沿革」のご利用方法をご紹介します。

このアプリは、ストアに美しい縦型タイムラインを簡単に追加できる Shopify アプリです。会社の沿革やブランドストーリー、商品の製造工程、ステップガイドなど、時系列で伝えたい情報をおしゃれに表示できます。PC では左右交互のジグザグレイアウト、スマホでは縦一列に自動で切り替わるレスポンシブ対応で、コーディング不要・ワンクリックでテーマに追加できます。

料金: Basic Plan $5.99/月　1 週間の無料期間あり　年払いで実質 2 ヶ月分無料でお得にご利用いただけます

👉 アプリストアで「シンプル年表タイムライン｜お手軽会社概要 & 沿革」を見る

ストアに美しい縦型タイムラインを追加しよう

「シンプル年表タイムライン｜お手軽会社概要 & 沿革」でできること

「シンプル年表タイムライン」を使えば、コーディングの知識がなくても、ストアに美しい縦型タイムラインを設置できます。最大 12 項目まで設定でき、それぞれに画像・ハイライトテキスト・タイトル・説明文を入れられるので、会社の歴史やブランドの歩みをわかりやすく伝えるのに最適です。

ライン・ノード・配色・余白などの細かなカスタマイズや、4 種類のスクロールアニメーションも備えており、お店の世界観に合わせた表現が可能です。

ストアに美しい縦型タイムラインを追加しよう

このアプリの特徴

画像とリッチテキスト付きのタイムライン項目を最大 12 個表示できます
フェード・スライド・ズームなど 4 種類のスクロールアニメーションに対応
ライン・ノード・配色・余白を自由にカスタマイズできます
PC はジグザグ、スマホは縦一列のレスポンシブ対応
コーディング不要、ワンクリックでテーマに追加できます

タイムラインを簡単に追加できる！

商品ページやトップページなど、お好きな場所に縦型タイムラインを設置できます。会社の沿革やブランドストーリー、商品の製造工程など、時系列で伝えたい情報を魅力的に演出できます。

タイムラインを簡単に追加できる！

ノーコードで見た目をカスタマイズできる！

ライン・ノード・色・余白・画像のアスペクト比など、細かな見た目の設定をすべてテーマエディタ上から変更できます。HTML や CSS の知識は不要なので、誰でも簡単にお店の雰囲気に合わせたデザインに調整できます。

ノーコードで見た目をカスタマイズできる！

1クリックでテーマに追加できる！

アプリの管理画面から「テーマに追加」ボタンを押すだけで、テーマエディタにブロックが挿入されます。手動でコードを編集する必要は一切ありません。

1クリックでテーマに追加できる！

アプリのインストール

👉 アプリストアで「シンプル年表タイムライン｜お手軽会社概要 & 沿革」を見る

料金: Basic Plan $5.99/月　1 週間の無料期間あり　年払いで実質 2 ヶ月分無料でお得にご利用いただけます

インストール手順

Shopify 管理画面の左下にある「設定」をクリックします

設定をクリック

「アプリ」をクリックし、「Shopify App Store」へ移動します

Shopify App Storeへ移動

検索窓に「シンプル年表タイムライン」と入力し、表示されたアプリをクリックします
アプリ詳細画面で「インストール」をクリックします
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します

アプリブロックをテーマに追加

アプリのインストールが完了したら、タイムラインブロックをテーマに追加します。「自動」と「手動」の 2 つの方法があります。

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

最も簡単な方法です。お店のトップページに自動でタイムラインブロックを追加できます。

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

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

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

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

タイムラインブロックのカスタマイズ

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

セクション設定

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

見出しテキスト: タイムラインの上に表示する見出しの文言を入力します。空欄にすると見出しは非表示になります。
見出しタグ: 見出しに使う HTML タグを H1 / H2 / H3 から選択できます。SEO や見出しの階層構造に合わせて選びましょう。
見出しの文字の大きさ: 16px 〜 48px の範囲で調整できます。お店のデザインや余白に合わせて見やすいサイズに設定してください。
見出しの色: 見出しの文字色を自由に選択できます。背景色との組み合わせを考えて読みやすい色を選びましょう。
見出しの配置: 見出しを「左揃え」「中央揃え」「右揃え」から選択できます。タイムライン本体の中央配置に合わせて「中央揃え」がおすすめです。
見出しの左右余白: 0px 〜 100px の範囲で調整できます。スマホ表示時に見出しが画面端に寄りすぎる場合に使うと便利です。

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

ライン設定

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

ラインの色: ラインの色を自由に選択できます。背景色や見出しの色と統一感を出すと美しく仕上がります。
ラインの太さ: 1px 〜 6px の範囲で調整できます。控えめに見せたい場合は細めに、目立たせたい場合は太めに設定するのがおすすめです。
ラインのスタイル: 「実線」「破線」「点線」から選択できます。やわらかい印象にしたい場合は破線や点線が効果的です。

ライン設定の設定画面

ノード設定

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

ノードのスタイル: 「ドット（丸い点）」または「番号（連番表示）」から選べます。会社の歴史を年代順に並べるなら「番号」を選ぶと視認性が高まります。
ノードの大きさ: 12px 〜 40px の範囲で調整できます。ラインの太さや見出しのサイズとのバランスを考えて設定しましょう。
ノードの色: ノードの内側の色を選択できます。アクセントカラーを設定するとタイムライン全体が引き締まります。
ノードの枠線の色: ノードの外側の枠線色を選択できます。背景色と同じ色にすると枠線がなくなり、スッキリした印象になります。

ノード設定の設定画面

画像設定

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

画像のアスペクト比: 画像の表示比率を以下から選択できます。
- 画像のサイズに合わせる: 元画像の比率をそのまま使用
- 正方形 (1:1): SNS 投稿風の見せ方に最適
- 横長 (16:9): 風景写真や製造工程の写真におすすめ
- 縦長 (3:4): 人物写真や商品写真におすすめ
- 丸型: スタッフ紹介やプロフィール風の表示に最適
画像の最大幅: 100px 〜 600px の範囲で調整できます。タイムラインが長くなりすぎる場合は小さめに、画像をしっかり見せたい場合は大きめに設定しましょう。

画像設定の設定画面

レイアウト設定

タイムライン全体の余白・配色・アニメーションなど、見せ方の総合的な設定です。

背景色: タイムラインの背景色を選択できます。空欄にすると背景は透明になり、テーマの背景色が透けて表示されます。
文字の色: タイムライン内の本文（タイトルや説明文）の文字色を選択できます。
上部余白: 0px 〜 100px の範囲で、タイムラインの上側の余白を調整できます。
下部余白: 0px 〜 100px の範囲で、タイムラインの下側の余白を調整できます。前後のセクションとの間隔を整えるのに使います。
スクロールアニメーション: ページをスクロールしたときに項目が表示されるアニメーションを以下から選択できます。
- なし: アニメーションを使わずに表示
- フェードイン: ふわっと現れる演出
- 左右からスライドイン: 左の項目は左から、右の項目は右から流れ込む演出
- 下からスライドイン: 下から押し上げるように現れる演出
- ズームイン: 小さな状態から拡大しながら現れる演出

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

年表の項目（最大 12 個）

タイムラインに表示する各項目の内容を設定します。最大 12 個まで登録でき、画像・ハイライトテキスト・タイトル・説明文をそれぞれ自由に編集できます。項目を空欄にしておくと、その項目は表示されません。

各項目には次の 4 つを設定できます。

画像: 各項目に表示する画像を選択します。年表の年代写真や、ブランドの歩みを表す画像などを設定すると効果的です。
ハイライトテキスト: タイトルの上に小さく表示される強調テキストです。「2020 年」「STEP 1」「Chapter 01」など、年代やステップ番号を入れるのに便利です。
タイトル: 各項目の見出しになります。出来事の名前やステップのタイトルを入力します。
説明文: 各項目の本文です。リッチテキスト形式なので、太字・リンク・箇条書きなども自由に使えます。詳しいエピソードや解説を記入できます。

年表の項目の設定画面