Shopifyサイトのデザイン作業を大幅に効率化!Adobe XDワイヤーフレームキットを無償配布します

こんにちは、アートディレクターの佐藤です。

このたび、Shopifyサイトのテーマ開発・デザインをする際に役立つ、Adobe XDワイヤーフレームキットを作成しましたので、無償配布します。

Shopify未経験の方がオリジナルテーマをデザインする際に、テーマ構造を把握する意味でも役立つかと思います。

目次

Adobe XDワイヤーフレームキット

プロトタイプ

→ プロトタイプはこちら

各要素にリンクを設定しており、Shopifyサイトの構造を体感的に理解できるようになっています。

赤枠部分には、対応するテンプレートファイル名が表示されます

Adobe XDファイル

→ XDファイルのダウンロードはこちら

ワイヤーフレームキットが入っているXDファイルです。

配布する理由

このワイヤーフレームキットはもともと、Shopifyサイトのデザインカスタマイズをする際にあったら便利と考え社内用に作成したものです。

デザイナー、エンジニアの評判が思いのほかよかったため、同様のニーズがある事業者の方、制作会社の方にも活用いただき、ECサイト制作のより付加価値の高い部分に注力いただければという思いから、公開に至りました。

ワイヤーフレームキットの概要

ワイヤーフレームの要素は、Shopify Theme Kit (Shopify提供の開発者用ツール)で、新規テーマ作成時に生成されるテンプレートファイルをもとにしています。このテンプレートはテーマ作成のために最低限必要な内容で構成されているため、これを足がかりに各ページの要素を検討することができます。

主な特長

  • XDのアートボードとテンプレートファイルは1:1で対応しており、アートボード名の先頭に対応するLiquidテンプレートファイル名を記載しています
  • 各画面において重要と思われる要素については、レイヤー名の先頭に★を付与しています

*テンプレートファイルとページの対応関係はこちら

ワイヤーフレームキットを使用するメリット

  • Shopifyサイトのワイヤーフレーム/デザインカンプ/プロトタイプを作成する際、ワイヤーフレームキットをもとに作成することで、必要なページおよび要素を抜け漏れなく用意できる
  • XDプロトタイプではリンクを設定しているので、Shopifyサイトの構造を体感的に理解できる
  • 静止画のデザインではなく触れるプロトタイプを簡単に作成でき、ユーザーテストなどにも活用できる

デザインを制作する際、必要な要素が予めワイヤーフレーム上に配置されているので、効率的にデザイン作業を進められます。

また、触れるプロトタイプはメンバー間でのイメージの共有やユーザーテストにおいて非常に有効です。弊社では、デザインスプリントと呼ばれるワークショップでECサイトのプロトタイプを作成するのですが、その際にこのキットを使うことで、制作時間を大幅に短縮できています。

ワイヤーフレームキットに含まれるページ一覧

XDファイルはこちらよりダウンロードいただけますが、キットに含まれるページをここでもご紹介します。

トップページ

index.liquid:ホームページ

<共通パーツ>
ヘッダー
★ロゴ
★各項目へのリンク(Shopifyメニューと連動)
★カートリンク
・マイアカウントリンク
・検索窓フッター
★各項目へのリンク(Shopifyメニューと連動)
・自由入力欄
・SNSアイコン

商品ページ関連

list_collections.liquid:商品カテゴリ一覧ページ

<主な要素>
★コレクションタイトル
・コレクションサムネイル画像
・コレクション内商品数

collection.liquid:商品一覧ページ

<主な要素>
★商品タイトル
・商品画像
・商品価格
・商品在庫ステータス
・商品タグリンク
★ページャー

product.liquid:商品詳細ページ

<主な要素>
★商品画像
★商品タイトル
★商品価格(一つあたり)
★商品説明文
・商品バリエーション(SKU)選択
★商品数量(数量入力、もしくはセレクトボックス)
★カートへ追加するボタン

cart.liquid:カート内アイテム一覧ページカート

<主な要素>
★商品画像
★商品タイトル
・商品バリエーション(SKU)
★商品価格(一つあたり)
★商品数量
★商品価格合計(※商品ごとに価格×数量)
★商品をカートから削除するリンク
★注文総額
★チェックアウト画面への遷移リンク
・備考欄

チェックアウト *Shopify Plusプランのみでカスタマイズ可

(チェックアウト画面①:情報)

(チェックアウト画面②:配送)

(チェックアウト画面③:支払い)

(チェックアウト画面④:完了)

ブログ

blog.liquid:ブログ記事一覧ページ

<主な要素>
・ブログタイトル
★ブログ記事タイトル
・ブログ記事サムネイル
・ブログ記事投稿日時
・ブログ記事著者情報
・ブログ記事タグ
・ブログ記事本文抜粋
★ページャー

article.liquid:ブログ記事個別ページ

<主な要素>
★ブログ記事タイトル
★ブログ記事本文
・ブログ記事投稿日時
・ブログ記事タグ
・ブログ記事著者情報
・コメント欄とコメント一覧

固定ページ

page.liquid:固定ページ

*必須要素なし

検索結果

search.liquid:検索結果ページ *検索窓非表示の場合は不要

<主な要素>
・商品タイトル
・商品サムネイル
・商品説明文

404

404.liquid:404ページ

*必須要素なし、ホームへ戻るリンクやテキストなど

パスワード保護時

password.liquid:パスワード保護時のフロントページ

<主な要素>
★パスワード入力フォーム

アカウント関連 *アカウント作成有サイトのみ

customers-login.liquid:アカウントのログインページ

<主な要素>
★メールアドレス入力欄
★パスワード入力欄
★送信ボタン
★パスワード紛失リンク
・アカウント作成リンク

customers-login.liquid:アカウントのログインページ:パスワードをリセット

reset_password.liquid:アカウントのパスワード再発行ページ

<主な要素>
★新規パスワード入力欄
★新規パスワード確認入力欄
★送信ボタン

customers-register.liquid:アカウントの作成ページ

<主な要素>
★姓名入力欄
★メールアドレス入力欄
★パスワード入力欄
★送信ボタン

customers-activate.liquid:アカウントの有効化ページ

<主な要素>
★パスワード入力欄
★送信ボタン

customers-account.liquid:アカウントの詳細ページ

<主な要素>
★注文履歴:注文番号、注文日、決済ステータス、発送ステータス、注文価格
★アカウントの連絡先概要
・ログアウトリンク

customers-order.liquid:アカウントの注文詳細ページ

<主な要素>
★注文番号
★注文内容:商品名、SKU、商品価格、注文個数、合計額
★配送先住所
★請求先住所

customers-addresses.liquid:アカウントの住所ページ

<主な要素>
★アカウントの連絡先情報

ダウンロード

下記よりメールアドレスをご入力ください。ダウンロードリンクをご案内します。


*情報はプライバシーポリシーに基づいて適切に管理します。また、弊社から営業のメールを送ることはありませんので、ご安心ください。

今後モバイル版の作成や、フィードバックを受けながらアップデートする予定もありますのでその際にはお知らせします。

フィードバックや改善案があれば、Twitterや下記ご意見フォームにてぜひお送りください!
今後のアップデートの参考にさせていただきます。


参考:Shopify公式のテーマテンプレート解説
https://help.shopify.com/en/themes/development/templates