Shopify でテキスト付き画像（image with text）を簡単に簡単に表示できるアプリについて徹底解説｜ご利用ガイド
はじめに
Shopify は、世界中で利用されているネットショップ構築プラットフォームです。Shopify には「Shopify アプリ」と呼ばれる拡張機能があり、アプリをインストールするだけでストアにさまざまな機能を追加できます。
「シンプルテキスト付き画像｜Image with Text」は、画像とテキストを組み合わせたセクションを、ホームページ・商品ページ・コレクションページなどあらゆるページに簡単に追加できる Shopify アプリです。Classic、Color Split、Bold、Collage、Overlay、Panel、Checklist、Marquee、Scroll Fade、Gallery の 10 種類のデザインから選べて、タイトル・サブタイトル・説明文・リスト項目ごとに色を変えたり、画像にフレームやオフセット影を付けたり、レイアウトやモバイル表示まで細かく調整できます。コーディングは一切不要で、テーマエディタからブロックを追加するだけで設置が完了します。
料金は Basic Plan $3.99/月 で、インストールから 1 週間の無料期間 が付いています。さらに 年払い にすると 実質 2 ヶ月分無料 でお得にご利用いただけます。
アプリストアはこちら： シンプルテキスト付き画像｜Image with Text
「シンプルテキスト付き画像｜Image with Text」でできること
「シンプルテキスト付き画像｜Image with Text」を導入すると、画像とテキストを組み合わせた魅力的なセクションを、コーディング不要でストアの好きな場所に配置できます。ブランドのこだわりを伝えるブランドストーリー、商品の特徴を強調するハイライト、コレクションへの導線など、用途に合わせてデザインを使い分けることで、ストアの印象を大きく向上できます。
このアプリの主な特徴は以下のとおりです。
- 10 種類のデザインから、ページやブランドに合うものを選べます。
- 色やレイアウト、画像のフレームや影を細かくカスタマイズできます。
- コーディング不要。テーマエディタからブロックを追加するだけで設置できます。
10 種類のデザインからお好みのスタイルで表示！
Classic（クラシック）、Color Split（カラースプリット）、Bold（ボールド）、Collage（コラージュ）、Overlay（オーバーレイ）、Panel（パネル）、Checklist（チェックリスト）、Marquee（マーキー）、Scroll Fade（スクロールフェード）、Gallery（ギャラリー）の 10 種類のデザインから、ページの雰囲気やブランドの世界観に合うものを自由に選べます。シーンに合わせて使い分けることで、訪問者の目を引くセクションを簡単に作れます。
色やレイアウト、画像装飾を自由にカスタマイズ可能！
テキスト・背景・ボタン・タイトル・サブタイトル・説明文・リスト項目など、要素ごとに色を細かく調整できます。さらに、画像の角丸、フレーム、オフセット影といった装飾も自由に組み合わせ可能。最大幅・画像幅・テキスト揃え・垂直揃え・モバイル時の画像位置まで設定できるので、ブランドの世界観にぴったり合うセクションを思い通りに仕上げられます。
ノーコードで様々な項目を設定可能！
設定はすべてテーマエディタの UI から行えるため、コードを書く必要は一切ありません。デザインタイプ、画像、テキスト、ボタン、色、レイアウト、追加画像、アイコン、リスト項目、カスタム CSS まで、画面上で項目を選んだり入力したりするだけで反映されます。コードに不慣れな方でも、安心してストアのカスタマイズを楽しめます。
1 クリックでテーマに追加できる！
アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけで、設置先のテーマにブロックが自動で追加されます。Liquid を編集したり、テーマファイルを直接いじったりする必要はありません。導入から表示までの手順をぐっと短縮できるので、思い立ったときにすぐ運用を始められます。
アプリのインストール
アプリストアはこちら： シンプルテキスト付き画像｜Image with Text
料金は Basic Plan $3.99/月 です。インストールから 1 週間は無料でお試しいただけます。年払いを選択すると、実質 2 ヶ月分無料でお得にご利用いただけます。
以下の手順でアプリをインストールしてください。
- Shopify 管理画面の左下にある「設定」をクリックします。
- 「アプリ」をクリックし、「Shopify App Store」へ移動します。
-
検索窓にアプリ名「シンプルテキスト付き画像」を入力し、表示されたアプリをクリックします。
-
アプリ詳細画面で「インストール」をクリックします。
-
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。
アプリブロックをテーマに追加
アプリをインストールしたら、テーマにアプリブロックを追加して、ストアフロントで実際に表示できる状態にします。テーマへの追加方法には「自動で追加（1 クリック追加）」と「手動で追加」の 2 種類があります。
自動でテーマに追加（1 クリック追加）
アプリの管理画面から、テーマに自動でブロックを追加できる方法です。最短ですぐ使い始めたい方におすすめです。
-
アプリの管理画面を開きます。
-
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
-
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。
手動でテーマに追加（任意ページに設置したい場合）
ホーム以外のページや、テーマエディタ上で配置場所を細かく決めたい場合は、こちらの手順がおすすめです。
-
Shopify 管理画面で「オンラインストア」→「テーマ」→「テーマ編集」を開きます。
-
テーマエディタ上部のプルダウンから、追加したいページに移動します。
-
「セクションを追加」または「ブロックを追加」をクリックします。「アプリ」タブからアプリブロックを選んで追加します。
-
表示を確認し、問題なければ「保存する」をクリックします。
アプリブロックのカスタマイズ
ここからは「シンプルテキスト付き画像｜Image with Text」ブロックの設定項目について、項目ごとに詳しく説明します。
デザイン
ブロック全体の見た目を決める基本のセクションです。まずはここでデザインの種類と画像の配置を決め、そのうえで他の設定を調整していくのがおすすめです。
- デザインタイプ: 表示するデザインを 10 種類から選びます。ページや訴求内容に合わせて使い分けると効果的です。
- Design1: Classic — 画像と文章をシンプルに左右に並べる、王道のレイアウト
- Design2: Color Split — テキストエリアに背景色を付け、画像と色で空間を分けるデザイン
- Design3: Bold — 複数画像を組み合わせた、インパクトのある大きめのレイアウト
- Design4: Collage — 複数画像を重ねて配置するコラージュ風デザイン
- Design5: Overlay — 画像の上にテキストを重ねる、ヒーローセクション向けのデザイン
- Design6: Panel — テキストエリアをパネル状に見せる、落ち着いた印象のデザイン
- Design7: Checklist — リスト項目を強調できる、特徴やメリット紹介向けのデザイン
- Design8: Marquee — サブタイトルがスクロールするように動く、目を引くデザイン
- Design9: Scroll Fade — スクロールに合わせて画像がフェードする、奥行きのあるデザイン
- Design10: Gallery — アイコン付きで複数の特徴を並べられるギャラリーデザイン
- 画像の配置: 画像を左右どちらに置くかを選べます。左右を切り替えるだけで印象が変わるので、複数ブロックを並べる場合は配置を交互にするとリズムが生まれます。
- Left（左）
- Right（右）
コンテンツ
実際に表示するテキスト・画像・ボタンを設定するセクションです。デザインタイプによって使われる項目が異なるので、選んだデザインに合わせて入力してください。
- 画像: メインで表示する画像を選びます。商品の世界観やブランドのストーリーを伝える、印象的な画像を選ぶのがおすすめです。
- タイトル: セクションの中心となる見出しです。一番伝えたいメッセージを簡潔に入れましょう。
- サブタイトル: タイトルを補足する短い文章です。Design8: Marquee ではスクロールテキストとして使われるので、リズムよく流れる短いフレーズが効果的です。
- 説明文: タイトルの内容を詳しく説明するリッチテキストです。改行や強調を使って読みやすくまとめましょう。
- ボタン URL: ボタンをクリックしたときの遷移先 URL を設定します。商品ページやコレクションページへの導線として活用できます。
- ボタンテキスト: ボタンに表示する文言です。「詳しく見る」「コレクションを見る」など、行動を促す言葉にすると効果的です。
- ボタンを表示: ボタンを表示するかどうかを切り替えられます。コンテンツのみを見せたい場合はオフにします。
追加画像
複数の画像やアイコン、リスト項目を使うデザインで利用する設定です。選んだデザインで使われる項目だけを入力すれば問題ありません。
- 画像 2: 追加で表示する画像です（対象: Bold, Collage, Scroll Fade, Gallery）。
- 画像 3: さらに追加する 3 枚目の画像です（対象: Bold, Collage, Scroll Fade）。
- 画像 4: 4 枚目の画像です（対象: Bold）。
- 画像レイアウト: Bold デザインで複数画像をどのように並べるかを選びます（対象: Bold）。
- Single（1 枚のみ）
- Grid (2 images)（2 枚グリッド）
- Grid (3 images)（3 枚グリッド）
- Grid (4 images)（4 枚グリッド）
- Collage（コラージュ）
- アイコン 1〜3: Gallery デザインで使うアイコン画像です。サービスの特徴やメリットをアイコンで表現する場面に便利です（対象: Gallery）。
- アイコン幅: Gallery で表示するアイコンの幅を 20px〜80px の範囲で調整できます（対象: Gallery）。
- リスト項目 1〜3: Checklist デザインで表示するリスト項目のテキストです。商品のメリットや使い方の手順を箇条書きで見せたいときに最適です（対象: Checklist）。
カラー
文字や背景、ボタンなどの色を調整するセクションです。ブランドカラーに合わせて細かく整えることで、ストア全体のトーンと統一感を出せます。
- テキスト色: タイトル・サブタイトル・説明文の基本色として使われます。背景とのコントラストを意識して選びましょう。
- 背景色: セクション全体の背景色です。サイト全体の雰囲気に合う色を選ぶと、ストアに馴染みやすくなります。
- テキストエリア背景色: テキストエリア部分にだけ別の背景色を設定します（対象: Color Split, Panel, Checklist）。
- ボタン色: ボタンの背景色です。クリックを促したい場面では、目立つカラーがおすすめです。
- ボタンテキスト色: ボタンに表示するテキストの色です。ボタン色との組み合わせで視認性を確保しましょう。
- タイトル色: タイトル専用の色です。未設定の場合はテキスト色が使われます。
- サブタイトル色: サブタイトル専用の色です。未設定の場合はテキスト色が使われます。
- 説明文色: 説明文専用の色です。未設定の場合はテキスト色が使われます。
- リスト項目色: Checklist のリスト項目に使う色です。未設定の場合はテキスト色が使われます（対象: Checklist）。
画像装飾
画像の見せ方を細かく調整できるセクションです。装飾を加えることで、シンプルな画像でもおしゃれな印象に仕上げられます。
- 画像の角丸: 画像の角を丸めるサイズを 0px〜50px の範囲で調整できます。柔らかい印象を出したいときに有効です（対象: Classic, Bold, Overlay, Panel）。
- フレームを表示: 画像にフレーム（枠線）を付けるかどうかを切り替えます。雑誌風の雰囲気を出したいときにおすすめです（対象: Classic, Bold, Panel）。
- フレームの色: フレームの色を設定します。ブランドカラーや差し色を使うと印象的に仕上がります（対象: Classic, Bold, Panel）。
- オフセット影を表示: 画像にオフセット影（少しズラした影）を付けるかどうかを切り替えます。立体感やデザイン性を加えたいときに便利です（対象: Classic, Bold, Panel）。
- オフセット影の色: オフセット影の色を設定します。背景と馴染ませたり、あえて目立たせたりと使い分けできます（対象: Classic, Bold, Panel）。
レイアウト
セクションの幅や揃え方、モバイル表示など、レイアウトを調整するセクションです。PC・スマホの両方で見やすい配置に整えましょう。
- 最大幅（px）: PC で表示したときのセクションの最大幅を 600px〜1600px の範囲で調整できます。テーマの横幅に合わせて設定するのがおすすめです。
- 画像幅（%）: セクション内の画像が占める幅を 30%〜70% の範囲で調整できます。画像とテキストのバランスを整えるのに便利です（対象: Classic, Bold, Panel）。
- オーバーレイの不透明度: Overlay デザインで画像の上に重ねるオーバーレイの不透明度を 0%〜100% の範囲で調整します。テキストの読みやすさを優先する場合は高めに設定するのがおすすめです（対象: Overlay）。
- テキスト揃え: テキストの水平方向の揃え方を選びます。
- Left（左揃え）
- Center（中央揃え）
- Right（右揃え）
- 垂直揃え: テキストエリアの垂直方向の揃え方を選びます（対象: Classic, Bold, Panel）。
- Top（上揃え）
- Center（中央揃え）
- Bottom（下揃え）
- モバイル時の画像位置: スマートフォンで表示したときの画像位置を選べます。スマホ閲覧者が多いストアでは、テキストよりも画像を先に見せたい場面で役立ちます（対象: Classic, Color Split, Bold, Panel）。
- Top（上）
- Bottom（下）
詳細設定（カスタム CSS）
標準の設定では実現できない細かいスタイル調整をしたい場合は、こちらにカスタム CSS を記述できます。たとえば、特定の要素のフォントサイズや余白を変更したいときに便利です。指定するセレクタは、このブロックに対するもの（例: .iwt-section { ... }）を記述してください。CSS の知識がある場合のみご利用ください。
おわりに
「シンプルテキスト付き画像｜Image with Text」を活用すれば、次のような魅力的なストアを簡単に作れます。
- 10 種類のデザインから、ページやブランドに合うレイアウトを選んで使い分けできる。
- 色・装飾・レイアウト・モバイル表示まで細かくカスタマイズでき、ブランドの世界観をしっかり表現できる。
- コーディング不要で、テーマエディタからブロックを追加するだけ。手間をかけずにストアをアップデートできる。
料金は Basic Plan $3.99/月、1 週間の無料期間 付き、年払いで実質 2 ヶ月分無料 とお得にご利用いただけます。
アプリストアはこちら： シンプルテキスト付き画像｜Image with Text
.png?w=400)
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
