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

2024.11.12 2024.11.12

Shopify開発

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

風間結貴 / アートディレクター
デザイナー

こんにちは。デザイナーの風間です。

当サイトでご好評いただいている「Shopifyサイトのテーマ開発・デザインをする際に役立つ、Adobe XDワイヤーフレームキット」。

今回はShopifyのアップデート内容を盛り込みながら、新たにFigma版を作成しましたので配布いたします。

Shopify未経験の方がオリジナルテーマのワイヤーフレームを作成する際に、そしてテーマ構造を把握する意味でも役立つかと思います。

Figmaワイヤーフレームキット
- Figmaファイル（Figデータ）のダウンロード
配布する理由
ワイヤーフレームキットの概要
- 主な特長
ワイヤーフレームキットを使用するメリット
ワイヤーフレームキットに含まれるページ一覧

Figmaワイヤーフレームキット

Figmaファイル（Figデータ）のダウンロード

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

＊情報はプライバシーポリシーに基づいて適切に管理します。
また、弊社から営業のメールを送ることはありませんので、ご安心ください。
今後Shopifyの仕様に変更が入り、ワイヤーフレームがアップデートされたときのみ、ご連絡を差し上げる可能性があります。

配布する理由

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

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

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

ワイヤーフレームの要素は、OS2.0対応公式テーマ「Dawn」と2024年11月現在の日本版デフォルトテーマ「Rise」を参考に、最低限必要な内容で構成しました。これを足がかりに各ページの要素を検討することができます。

主な特長

各画面において重要と思われる要素については、レイヤー名の先頭に★を付与しています
Figmaには基本的なコンポーネントリスト、テキスト&カラースタイルも用意しておりますので、適宜お役立てください

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

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

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

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