logo

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

Shopifyテーマ開発にFigmaを使ったらかなり捗った話

こんにちは、Shopifyテーマ開発に携わる者です。

最近、Shopifyテーマ開発にFigmaというツールを導入してみたら、かなり作業効率がよくなったので紹介します。

Figmaとは

Figmaは、デザインプロセスに必要なワイヤフレーム設計・UI/UX設計・プロトタイプ設計などが行えるツールです。WEBブラウザでの利用が可能で簡単に始めることができます。私はチーム開発でデザインのイメージを共有する際に使用しています。

Figmaを使う時に入れておいたら助かったプラグイン3選

HTML To Figma

すでにあるサイトのデザインを踏襲したい場合に、HTMLをFigmaへインポートすることができます。特定ページを作成・改修したい場合に、新しくデザインを起こすよりも、既存のページをインポートする方が効率が良く、トンマナも揃えやすいので良く使います。正直これさえあればOKです笑

Figmaコミュニティ
https://www.figma.com/community/plugin/851183094275736358/Figma-to-HTML

Norted

Figmaファイルに付箋を貼れるプラグインです。デザインをボスにレビューしてもらう際にコメントをもらうために使用しています。私のFigmaファイルは付箋紙だらけになります笑

Figmaコミュニティ
https://www.figma.com/community/file/873811480190908553

Content Reel

ブログページを作る時など、あらかじめデータが必要なときがありそんなときにダミーデータを用意するのに使用してしています。依頼が来る時はこんな情報を載せたいとか具体的にきまっていないことが多いので、これがあってとても助かっています。

Figmaコミュニティ
https://www.figma.com/community/plugin/731627216655469013/Content-Reel

まとめ

これまで開発するテーマを直接見ながら口頭で開発内容のやりとりをしてきたのですが、イメージのズレが多かった。何かいい方法はないかと探していたところ見つけたのがFigmaです。プロトタイプをサクッと作成してレビューをもらってそれからShopifyのテーマをコーディングしていく流れとしたことで、開発がスムーズになった気がします。みなさんもぜひ使ってみてくださいね。

※この記事は2024年02月時点の内容です。今後のアップデートやShopifyの仕様変更等により、記事の内容が古くなってしまう可能性があります。

\ShopifyでEC構築を検討中の方へ/

現在、Shopify公式は無料のお試しキャンペーンを実施しています。

Shopify

百聞は一見に如かずといいますが、ネット上で情報収集するよりも、実際にShopifyに触れるほうが何倍も効率が良いでしょう。

下記の案内ページからキャンペーンの詳細をご確認ください。

【1ドル×1ヶ月】CP実施中!!

サービス

Service

- プロジェクトプラン -

こんな方におすすめ!

  • これからShopifyでECを立ち上げるための支援をしてほしい

  • 自社で取ってきたShopify案件のディレクションや開発業務を任せたい

  • 自社サービスとShopifyを連携させたアプリケーションを作ってほしい

- サポートプラン -

こんな方におすすめ!

  • 自社でShopifyストアを立ち上げてみたが、やはり専門家がいないと厳しいため、相談できるパートナーがほしい

  • 自社で受けたShopify案件の一部を、Shopifyに強い開発者に相談したい

  • 開発してもらったShopifyアプリの保守やメンテナンスをお願いしたい

- SESプラン -

こんな方におすすめ!

  • ストアの改修や更新業務が忙しくなってきたため、色々な業務をお願いできて専門的なスキルを持っている人材がほしい

  • 自社でShopify案件が溢れてしまい、数ヶ月間、スピーディかつ自由に案件を依頼できる外部のパートナーがほしい

事例

Works

ストア開発/支援

Shopify Store

累計100以上のShopifyストア開発経験を基に、商材・業界ごとに無駄のないご提案~実装が可能です。また、既に公開されているShopifyストアを、技術的な観点から保守/サポートさせて頂いております。弊社が構築していないストア様も、ご加入が可能です。

アプリ開発

Shopify App

各ストアに特化したカスタムアプリだけでなく、Shopify App Storeに掲載できる公開アプリ開発のご相談・ご依頼を承っています。例えば、自社サービスで構築しているAPIとShopifyのAPIを連携~Shopify App Storeで公開することで、Shopifyを使用しているEC事業者に自社サービスをリーチさせることができます。