MENU
  • WEB制作・開発
    • 学習・挑戦記Web制作に関連する情報
    • 技術MEMO
    • セキュリティ
  • IT TOOL一覧
    • ECサイトIT TOOL ECサイト
    • アピス在庫管理
    • クラウドファンディング
    • セルフオーダーシステム
    • レッスン施術サービスレッスン施術サービス予約サイト
    • シンプルクラウドソーシング
    • 会議室予約
    • ShopifyShopifyに関連する設定などさまざまな投稿をしていきます。
  • 在庫管理
  • ビジネス支援ツール
    • Canva
    • WordPressWordpressのサイト構築あれこれ!
    • ZOOM
    • エクセル・ワード
    • バーコード
  • このブランドはどこの国?|
  • テクノロジー・トレンド
  • お知らせ
  • IT導入補助金
  • イヤホン
  • スマホ・PC・タブレット
  • SEO・ブログ運営
  • アクセス解析
  • ブログ運営
  • ブログ収益化
  • プロンプト
  • PC関連ネットで販売するPC関連商品の説明
技術が生活を楽にする
tecn
    • WEB制作・開発
      • 学習・挑戦記Web制作に関連する情報
      • 技術MEMO
      • セキュリティ
    • IT TOOL一覧
      • ECサイトIT TOOL ECサイト
      • アピス在庫管理
      • クラウドファンディング
      • セルフオーダーシステム
      • レッスン施術サービスレッスン施術サービス予約サイト
      • シンプルクラウドソーシング
      • 会議室予約
      • ShopifyShopifyに関連する設定などさまざまな投稿をしていきます。
    • 在庫管理
    • ビジネス支援ツール
      • Canva
      • WordPressWordpressのサイト構築あれこれ!
      • ZOOM
      • エクセル・ワード
      • バーコード
    • このブランドはどこの国?|
    • テクノロジー・トレンド
    • お知らせ
    • IT導入補助金
    • イヤホン
    • スマホ・PC・タブレット
    • SEO・ブログ運営
    • アクセス解析
    • ブログ運営
    • ブログ収益化
    • プロンプト
    • PC関連ネットで販売するPC関連商品の説明
tecn
    • WEB制作・開発
      • 学習・挑戦記Web制作に関連する情報
      • 技術MEMO
      • セキュリティ
    • IT TOOL一覧
      • ECサイトIT TOOL ECサイト
      • アピス在庫管理
      • クラウドファンディング
      • セルフオーダーシステム
      • レッスン施術サービスレッスン施術サービス予約サイト
      • シンプルクラウドソーシング
      • 会議室予約
      • ShopifyShopifyに関連する設定などさまざまな投稿をしていきます。
    • 在庫管理
    • ビジネス支援ツール
      • Canva
      • WordPressWordpressのサイト構築あれこれ!
      • ZOOM
      • エクセル・ワード
      • バーコード
    • このブランドはどこの国?|
    • テクノロジー・トレンド
    • お知らせ
    • IT導入補助金
    • イヤホン
    • スマホ・PC・タブレット
    • SEO・ブログ運営
    • アクセス解析
    • ブログ運営
    • ブログ収益化
    • プロンプト
    • PC関連ネットで販売するPC関連商品の説明
  1. ホーム
  2. WEB制作・開発
  3. IT TOOL一覧
  4. ECサイト
  5. Shopify ECサイト制作過程

Shopify ECサイト制作過程

2026 7/05
ECサイト Shopify 未分類
2023年3月7日2026年7月5日

アピコです。

ShopifyでのECサイト構築はデザイナー単独でもできる!!

とのことで(汗)、初めてShopifyに入ってみるとWordPressと同じような編集方法でECサイトができます。

(WordPressの賢威を使ってサイトを作たブログもあります)

なるほど、アプリケーションもありポイントやランキングなどを入れることができる。WordPressのプラグインみたいなものですね!

それから、サイトのメインであるデザインテーマは無料テーマも充実。

有料のテーマはさらにたくさんあって、デザインが一層洗練されとる!

無料のテーマよりもJSを使った動作が取り入れられ、UIデザインのランクがグッと上がりサイトを楽しく回遊することができます。また、ランキングなどのオプションも充実していて使いきれないほど多機能。価格は平均して200~300ドルくらいのようです。

一回購入してしまえば、Shopifyおサブスクだけで永久的に利用できるし、他のテーマに切り替えることもできます。

今回、三つのテーマ(無料、有料、無料)に仮画像を入れご提案しましたが、有料となりました。

📰
TECN NEWS
UPDATE
5 NEWS
TECNで新しく公開・更新した記事や、関連カテゴリの重要情報をお知らせします。
🤖 AI活用 新しい記事を公開しました:GPTsとは?ChatGPTとの違いを初心者向けにわかりやすく解説 2026.07.05 更新 › 🤖 AI活用 新しい記事を公開しました:WordPressでLPをAIと一緒に作る具体的なやり方|素人でもSWELLでデザイナー不要のランディングページ公開まで到達する手順 2026.07.04 更新 › 🤖 AI活用 新しい記事を公開しました:ChatGPTとCanvaを連携する方法|デザイン作成がもっと簡単になる使い方を解説 2026.07.01 更新 › ✉️ STEPmini 新しい記事を公開しました:STEPmini V1.02 初心者向け使い方ガイド|毎日自動配信トリガー対応版 2026.06.16 更新 › 🌏 どこの国 新しい記事を公開しました:Dysonはどこの国のメーカーですか?|信頼性と人気モデルを解説 掃除機編 2026.06.09 更新 ›
目次

初めにすること アカウント作成

お客様にShopifyのアカウントを作成していただき、販売する商品などの画像や価格を登録していきます。

テーマについては無料はもちろん有料も試用期間ないなら無料でサイト構築ができるし、試しながらテーマの切り替えもできるので、どんどん触って画像をアップロードしよう!

アカウントが変わらなければ、登録した商品たちはテーマを変えても商品一覧に揃っていてくれます。

商品だけでなく、ブログページやコレクションページなど制作したページはそのまま残ってくれます。

もし、お客様のアカウント内で直接試したりするのは・・・時が引ける場合はお試しでShopifyのアカウントを作成し、テーマなどをいろいろみて内部を試してみてからでも構いませんが、結局、商品登録など二度手間になるので時短で制作したい方は、お客様のアカウントで進めていくのが良いかもしれません。

ページ作成とヘッダーメニュー

お客様からヒアリングして制作するページを定めたら、Shopifyの左サイドメニューのページから必要なページを作成します。内容は後から編集するので、とりあえずページを追加していきましょう。

作ったページを表示するため、ヘッダーメニューと連携させましょう。

左サイドのメニューから必要なメニューを追加します。

プルダウンでメニューを下に追加したい場合、メニュー左の・が6つ並んでいるとところを掴んで下に持っていきたいメニューの下に移動させるだけ!とても簡単。

リンク先はページから先ほど作ったものを選んで保存すればOKです!

お客様はせっかち!!Shopify 画像サイズの死活問題!!

先ほど、Shopifyのスライダー推奨サイズを調べていましたら、

1800×800とのこと。

ではスマホは?今はスマホサイトの方が大事!! 

なお、Shopify商品画像に使用するときは、JPEG形式かPNG形式がオススメです。

その他、

・Shopifyコレクション画像のオススメサイズ

画像は2048×2048ピクセルの正方形サイズがオススメです。 

正方形の商品画像は、ユーザーがズームイン・ズームアウトするときも最高の品質を提供

・スライドショー画像でオススメのサイズは、幅1200×2000ピクセル、高さ400×600ピクセルです。

・Shopifyのヘッダーに最適なShopify画像サイズは100ピクセル~250ピクセルです。 

なお高さはユーザーの視認性を高めるうえでも120ピクセル以下がオススメです。

・Shopifyバナーは、特にオススメサイズの指定がありません。

・Shopifyのオススメロゴサイズは最大450×250ピクセルです。 

下記のサイトはShopifyについてさまざまな解説そしてくれているのでご参考まで!

Shopi Lab(ショピラボ)|Shopify...
Shopifyを活用した越境EC・国内ECサイトの制作・運用など役立つ情報をお届け|Shopi Lab(ショピラボ) Shopify(ショッピファイ)のアプリやテーマに関する情報や、Shopify構築、制作、運用マーケティング方法について、最新のお役立ち情報を毎日配信。ShopifyでECサイトを制...

セッションには限りがある!!

LPのようにスクロールすr長いページを作るときは要注意!

セッションを増やしてコンテンツを整理して表示させるのですが、セッションには限りがあって途中でセッションが足りない!!となると、初めからやり直す必要が出てしまいます。

タイトルが改行できない件!!

https://www.azukipan.com/posts/shopify-title-newline/

タイトル・サブタイトルが自由に改行できずデバイスによって自動で改行されることで、SP版がめちゃ変な表示になることがあります。

そんな時は、少し怖いのですが、この参考サイトの通り、sessionの、liquidの「| escape」を消し去りましょう!!すると、タイトルに<br>を設定することで改行ができるようになります!!

ECサイト Shopify 未分類
ECsaito ECサイト
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • Yahoo!広告 コンバージョン ユニバーサルタグの設置
  • お名前.comのドメイン追加からWordPressインストールまで

関連記事

  • AIでLPやHPをコーディングできるの?  説明スライド
    AIでLPやホームページのコーディングはできる?デザインカンプをAIがHTML/CSS化する実践例
    2026年7月7日
  • WordPressでNEWS配信システムを作る実践講座|第7回:新規投稿をNEWS候補へ取り込むバッチ処理を作る
    2026年7月5日
  • WordPressでNEWS配信システムを作る実践講座|第8回:新規投稿取込バッチでTECN NEWS自動表示枠を記事本文に挿入する
    2026年7月5日
  • WordPressでNEWS配信システムを作る実践講座|第6回:固定ページ内でNEWS候補を編集・承認できる担当者UIを作る
    2026年7月5日
  • WordPressでLPをAIと一緒に作る具体的なやり方|素人でもSWELLでデザイナー不要のランディングページ公開まで到達する手順
    2026年7月4日
  • SWELLで特定の固定ページだけLP化する方法|WordPressでグローバルメニュー・目次・サイドバーをページ単位で非表示にする手順 | AI 丸投げ
    2026年7月4日
  • 問い合わせmini V1.0 運用マニュアル|自動返信・下書き確認・要確認で問い合わせ対応を効率化する
    2026年7月3日
  • 問い合わせmini V1.0 WEB UI 画面  モックアップ|問い合わせ対応を自動化 無料TOOL 
    2026年7月2日

コメント

コメントする コメントをキャンセル

アピス在庫管理システム
アピス在庫管理導入講座

カテゴリー

  • AIに対してのプロンプト
  • AI活用
  • Bluetoothコーデック基礎
  • Canva
  • Chrome ブラウザー
  • Dropbox
  • ECサイト
  • GAS・JavaScript
  • GAS等仕様書・設定・操作手順
  • HTML・CSS
  • IT TOOL一覧
  • IT導入補助金
  • LDAC-Bluetooth
  • mini:GAS仕様 設定手順等
  • OBS-Studio
  • PC・スマホ便利技
  • PC関連
  • SEO・ブログ運営
  • Shopify
  • SKU・JAN・商品コード
  • STEPmini
  • WEB制作・開発
  • Windows
  • WordPress
  • ZOOM
  • アクセス解析
  • アピスmini・IT-Tool
  • アピス在庫管理
  • イヤホン
  • エクセル・ワード
  • お知らせ
  • スポーツ・アウトドア用品
  • セキュリティ
  • セルフオーダーシステム
  • どこの国・ブランド
  • ネットで販売
  • バーコード
  • ビジネス支援ツール
  • ブログ
  • ブログ収益化
  • ブログ運営
  • プロンプト
  • レッスン施術サービス
  • 会議室予約
  • 充電器・バッテリー
  • 動画
  • 受発注管理
  • 問い合わせmini
  • 回線・インターネット
  • 在庫管理
  • 学習・挑戦記
  • 家事代行予約
  • 家電ガジェット
  • 技術MEMO
  • 接続&音質トラブル
  • 政治・経済
  • 時事・経済・グローバル
  • 未分類
  • 業務効率化
  • 生産性アップ・便利
  • 画像生成
  • 画像生成AI
  • 端末別設定
  • 美容院予約
  • 見積
  • 見積管理
  • 請求管理
  • 電気自動車(EV)

最近の投稿

  • ChatGPTで旅行のしおりを作る方法|たった2行のプロンプトでここまでできる!
  • ChatGPTで旅行のしおりを作るプロンプト|コピペで使えるテンプレートを公開!
  • AIで背景を削除できる無料ツール比較|登録なしで使えるおすすめサービスと注意点
  • Canvaで背景を透過する方法|無料版・有料版の違いと保存方法を解説
  • チャッピーは無料で使える?料金プランをわかりやすく解説【2026年最新版】

アーカイブ

  • 2026年7月
  • 2026年6月
  • 2026年5月
  • 2026年4月
  • 2026年3月
  • 2026年2月
  • 2026年1月
  • 2025年12月
  • 2025年11月
  • 2025年10月
  • 2025年9月
  • 2025年8月
  • 2025年7月
  • 2025年6月
  • 2025年5月
  • 2025年4月
  • 2025年3月
  • 2025年2月
  • 2025年1月
  • 2024年12月
  • 2024年11月
  • 2024年9月
  • 2024年8月
  • 2024年7月
  • 2024年6月
  • 2024年4月
  • 2024年3月
  • 2024年2月
  • 2024年1月
  • 2023年12月
  • 2023年11月
  • 2023年10月
  • 2023年8月
  • 2023年7月
  • 2023年6月
  • 2023年5月
  • 2023年4月
  • 2023年3月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月

APICE

問い合わせ

アピステクノロジー|tec note

 〒224-0032 神奈川県横浜市都筑区茅ケ崎中央42−21 第2佐藤ビル 203

電話番号: 045-532-4480

お問い合せ

© tecn.

目次