【ECサイト担当者向け】売上に直結するデザイン用語25選

## ECサイトの売上、デザインで損していませんか？ 「商品はいいのに、なぜか売れない」 「カートに入れるところまでは行くのに、購入されない」 その原因、**デザインにあるかもしれません**。 ECサイトでは、デザインの良し悪しが**売上に直結**します。商品画像のクオリティ、ボタンの配置、色使い...これらを的確に改善するには、**デザイン用語の知識が必須**です。 :::point この記事でわかること： - ECサイトで重要なUI/UX用語 - 商品画像に関する用語 - CV（コンバージョン）を上げる用語 - LP・バナー制作の用語 ::: --- ## 【最重要】EC担当者が最初に覚える8用語 ### 1. CTA（Call To Action） 「購入する」「カートに入れる」など、**ユーザーに行動を促すボタンやリンク**。 :::info CTAボタンの色、サイズ、位置でCVR（コンバージョン率）が大きく変わります。A/Bテストで最適化しましょう。 ::: ### 2. ファーストビュー（First View） ページを開いたときに**スクロールせずに見える範囲**。最も重要な情報を配置すべき場所。 ### 3. ヒーロー画像（Hero Image） ページ上部に大きく表示される**メインビジュアル**。商品の魅力を一瞬で伝える役割。 ### 4. CVR（Conversion Rate） 訪問者のうち**購入に至った割合**。デザイン改善の効果を測る最重要指標。 ### 5. 余白/ホワイトスペース（White Space） 要素と要素の**間のスペース**。余白があると読みやすく、商品が引き立つ。 ### 6. コントラスト（Contrast） **明暗や色の差**。CTAボタンは背景とのコントラストを高くすると目立つ。 ### 7. 視線誘導（Visual Flow） ユーザーの視線を**意図した順序で導く**デザイン技法。商品→特徴→価格→CTAの流れを作る。 ### 8. モバイルファースト（Mobile First） **スマホでの表示を最優先**に設計する考え方。EC売上の70%以上がスマホ経由。 --- :::spec **ECサイト改善の優先順位** 1. CTAボタンの視認性を上げる 2. ファーストビューに重要情報を配置 3. 商品画像のクオリティを上げる 4. ページの読み込み速度を改善 ::: --- ## 【商品画像】売れる画像を作る6用語 ### 9. 白抜き（Knockout/Silhouette） 商品を**背景から切り抜いて白背景にする**こと。ECモールで必須の画像形式。 ### 10. シズル感（Sizzle） 食品や飲料の**おいしそう・新鮮そうな表現**。湯気、水滴、ツヤなど。 ### 11. ライティング（Lighting） **光の当て方**。商品の質感や立体感を表現するのに重要。 ### 12. レタッチ（Retouch） 商品画像の**色補正やゴミ取り**などの加工。Photoshopで行うことが多い。 ### 13. 解像度（Resolution） 画像の**きめ細かさ**。ECモールは最低1000px以上を推奨することが多い。 ### 14. アスペクト比（Aspect Ratio） 画像の**縦横比**。ECモールは1:1（正方形）が基本だが、モールによって異なる。 :::merit **商品画像を改善するメリット** - 商品の魅力が正確に伝わる - 返品率が下がる - 他商品との差別化ができる - 検索結果でクリックされやすくなる ::: --- ## 【LP・バナー】売上を伸ばすデザイン6用語 ### 15. LP（Landing Page） 広告から**最初にたどり着くページ**。商品説明から購入までを1ページで完結させることが多い。 ### 16. バナー（Banner） 広告やキャンペーンを告知する**画像**。クリック率（CTR）が重要な指標。 ### 17. キャッチコピー（Catchphrase） 商品の魅力を**一言で伝える文章**。「〇〇な方へ」「△△を解決」など。 ### 18. マイクロコピー（Microcopy） ボタンやフォーム周辺の**小さなテキスト**。「送料無料」「在庫残りわずか」など。 ### 19. 信頼性要素（Trust Elements） **購入の不安を解消する**要素。レビュー、実績数、返品保証、セキュリティバッジなど。 ### 20. 緊急性（Urgency） 「期間限定」「残り○個」など、**今すぐ買う理由を作る**表現。 --- ## 【UI/UX】ユーザー体験を良くする5用語 ### 21. UI（User Interface） ユーザーが**操作する部分のデザイン**。ボタン、フォーム、ナビゲーションなど。 ### 22. UX（User Experience） ユーザーが**サイトを使う全体の体験**。使いやすさ、満足度、感情など。 ### 23. ナビゲーション（Navigation） サイト内を**移動するためのメニュー**。わかりやすいナビゲーションは離脱を防ぐ。 ### 24. パンくずリスト（Breadcrumb） 現在地を示す**階層リンク**。「トップ > カテゴリ > 商品」のような表示。 ### 25. カート放棄率（Cart Abandonment Rate） カートに入れたのに**購入せず離脱した割合**。デザイン改善で下げられる。 --- :::demerit **デザイン用語を知らないと起こる問題** - デザイナーへの指示が曖昧になる - 改善ポイントが特定できない - A/Bテストの設計ができない - 競合サイトの分析ができない ::: --- ## EC担当者がデザイン用語を学ぶ3つのメリット ### 1. デザイナーとの会話がスムーズに 「CTAのコントラストを上げて」「ファーストビューにヒーロー画像を配置して」など、**具体的な指示**ができるようになります。 ### 2. 改善ポイントを自分で発見できる 「なぜこのページは売れないのか」を**デザインの観点から分析**できるようになります。 ### 3. 外注コストを削減できる 簡単な修正は**自分でできる**ようになり、デザイナーへの依頼は本当に必要なものだけに絞れます。 --- ## よくある質問 :::qa Q. ECモールごとに覚えるべき用語は違いますか？ A. **基本用語は共通**です。ただし、各モール（Amazon、楽天、Yahoo!ショッピング）で画像サイズの規定や禁止事項が異なるため、出店しているモールのガイドラインは確認しましょう。 ::: :::qa Q. 自社ECとモール出店で必要な知識は違いますか？ A. **自社ECはUI/UX全般の知識が必要**、**モール出店は画像とバナーの知識が重要**という傾向があります。モールはテンプレートが決まっているため、商品画像とバナーのクオリティが勝負になります。 ::: :::qa Q. デザイン用語をどのくらいで覚えられますか？ A. **今回紹介した25用語は1〜2週間**で習得できます。デザイン単語帳を使えば、業務の合間に効率よく学習できます。 ::: --- ## まとめ :::summary **EC担当者が覚えるべきデザイン用語** 1. **基本8用語**（CTA、ファーストビュー、余白など）でCV改善の土台を作る 2. **商品画像用語**（白抜き、シズル感、解像度）で魅力的な商品ページを作る 3. **LP・バナー用語**（キャッチコピー、信頼性要素）で広告効果を上げる 4. **UI/UX用語**（ナビゲーション、カート放棄率）でサイト全体を改善 デザイン用語を知っているだけで、ECサイトの売上改善に直結する施策が打てるようになります。 ::: :::cta EC担当者のためのスキマ時間学習 デザ単：デザイン単語帳 App ::: --- ### 関連記事 - [SNS運用担当者向け｜知っておくべきデザイン用語30選](/blogs/tech/design-for-sns-managers) - [マーケター必見！デザイナーとの会話で必要な用語20選](/blogs/tech/design-terminology-for-marketers) - [Photoshop初心者用語｜これだけ覚えれば操作が楽になる25の基本用語](/blogs/tech/photoshop-beginner-terms) - [デザイン用語30選｜初心者が最初に覚えるべき基礎単語](/blogs/tech/design-terms-beginners-guide) --- ※ 画像出典：Unsplash（rupixen.com）