なこ@Shopifyデザイナー

UIを考慮したShopifyデザインが強み🛒 | テーマ選定・WFから対応可◎ | Figma | デイトラ | 会社員SE→フリーランスデザイナー | 30代 | 東京都 | 6歳2歳の娘 | 好き：音楽を聴く・和スイーツ | 空き：6月〜◯ | ご相談はDMか [email protected] まで📩

[なこ@Shopifyデザイナー @nako255]

直近は手持ちの案件が落ち着いていて、6月後半から7月にかけてリソースに余裕があります🌱
新しいご相談もお受けできそうです🙌

「ストアの見せ方を変えたい」
「TOPページや商品ページを改善したい」
「Shopifyのデザインができるデザイナーを探している」

など、Shopifyデザインまわりでご相談がありましたら、XのDMまたはメールからお気軽にお声がけください☺️

[なこ@Shopifyデザイナー @nako255]

@yoshimaru_ec そうですね！
構築に入る前に根拠を持って固めておけると迷いも減ってスムーズに進められると思います✨

[なこ@Shopifyデザイナー @nako255]

「ShopifyデザインにAIをどう活かすか」を考えたとき、デザインする前の要件定義や競合調査などこそ、AIでうまく巻き取れると強いなと感じています。

そこで、要件定義の部分をClaudeで試してみました！

工夫したのは、ただAIに丸投げするのではなく、ストアの設計で押さえるべき観点をプロンプトに仕込んだこと👀

特に意識したのが「購入導線の設計」です💭

ストアは見た目を整えるだけでは売れず、
【ユーザーが商品を見つける→比較する→カゴに入れる→買う】という流れをどう設計するかで売上が大きく変わります。

なので、その導線を固めるための質問をAIが1問ずつこちらに投げてくれるようにしました。

例えば、購入導線まわりだとこんな質問が出てきます👇

---
Q.「購入の最終判断材料として、レビューを価格・カートボタンのすぐ近くに置きますか？」
→ 試せない商材や高単価商材ほど、買う直前のレビューが背中を押します。逆に衝動買いを狙うならあえて省くこともあります。

Q.「商品一覧では、"回遊しやすさ"より"即購入への最短ルート"を優先しますか？」
→ 回遊重視か即購入重視かで、レイアウトやセクションの並びが変わってきます。
---

他にも見た目の印象を固めるための質問も出てくるので、あとは「はい/いいえ」や出された選択肢で答えていくだけです。

これで添付のようなデザインの方向性のまとめと、TOP・商品一覧・商品詳細のワイヤーフレームが出せました！
SVGでも出力できるので、Figmaに貼ってそのまま手で調整もできます🙆‍♀️

他にも競合調査や、既存ストアのリニューアルなら改善点の洗い出しなどもAIでうまくできれば、より根拠のあるデザインに繋げられそう！

この辺りを実務で使えるフローとして固めていきたいです😌

-----------

引き続き、Shopifyデザインを承っております🎨✨

デザイン前の要件整理からもご相談可能ですので、お気軽にお声がけください😊

[なこ@Shopifyデザイナー @nako255]

今回も米津さんの新曲良すぎる🤦‍♀️なんか泣けてきた🥹

[なこ@Shopifyデザイナー @nako255]

Shopifyのテーマ選定にもAIをうまく活用できないかといろいろ聞いてみたのですが、結構頼れることがわかりました✨

・特定のテーマを使っている実例ストア探し
・各テーマの特徴やデザインの分析
・「このテーマはこういうブランド向き」という整理

試しに「Prestigeを使っているストアを探して」と伝えたら、ジュエリーやアパレル・医療機器まで、ジャンルの違う実例を数分で出してくれて本当に便利でした😊

ただ、それをそのまま鵜呑みにするのではなく、ブランドの世界観に合うかどうかや、実際にストアを触ったときの感じ方などは人間が判断するしかない部分だなとも感じました。

「情報収集はAIに任せて、最終的な確認や意思決定は人間がやる」

というこの分担を意識することはやはり大切ですね🌱

[なこ@Shopifyデザイナー @nako255]

Claude DesignでShopifyのデザインもできないかと思って超ざっくりなプロンプト投げてみたけど、それだけでもここまでのベースのデザインが出てきた！

書体やアクセントカラーもクリックで変えられて直感的にいろいろ試せて便利！

この後の構築もClaude Codeとかに任せる前提だと、Figmaでデザインするというよりも最初からこういう風にベースデザインを出して、AIツールやプロンプトでデザインを調整していくフローが当たり前になっていくのかもしれないですね…ほんと置いていかれないようにしていかねば🥹

[なこ@Shopifyデザイナー @nako255]

@nadeshikoweb こちらこそためになる講座をありがとうございます😊✨

メタオブジェクトの使い方などあまりよくわかってなかったのでとても勉強になりました！！✨

[なこ@Shopifyデザイナー @nako255]

メタフィールドやメタオブジェクトを使ったデザイン設計が学べてこれらへの理解がより深まりました✨

デザイナーも裏側でデータをどう持つべきかというところから考えるべきで、見た目だけでなくその後の運用やメンテナンスのことまで考えたストア作りがとても大切だとあらためて感じました🙌

[Nadeshiko @nadeshikoweb]

Shopifyデザイナーの方用のUdemy教材の販売を開始しました！

【2026年版】Shopify Horizon デザイン設定：メタオブジェクトで実現する「設計思考」のワークフロー　という教材です。

割引クーポン配布させていただきますので
必要な方はDMください！

#Shopify

[Nadeshiko @nadeshikoweb]

Shopifyデザイナーの方用のUdemy教材の販売を開始しました！

【2026年版】Shopify Horizon デザイン設定：メタオブジェクトで実現する「設計思考」のワークフロー　という教材です。

割引クーポン配布させていただきますので
必要な方はDMください！

#Shopify

[なこ@Shopifyデザイナー @nako255]

@tom__webdesign こちらこそありがとうございました✨
ぜひ行きましょうー！🙌

[なこ@Shopifyデザイナー @nako255]

昨日はtomさん(@tom__webdesign )とランチをご一緒させていただきました😊（話に夢中でご飯の写真撮り忘れた😇）

オフでゆっくりお話するのは初めてでしたが、お互いの近況やShopifyデザインのこと、AIのことなど話題が尽きず、時間が経つのが本当にあっという間でした✨

リフレッシュになってモチベも上がるし、やっぱりオフで人と会って話すって大事だなーと思います😊

#デイトラ #デイトラコミュニティ

[なこ@Shopifyデザイナー @nako255]

デモストアはこちらです💻
（公開テーマをデザイン改善版に入れ替えました🔄）
https://t.co/kMMFHPHwjx

パスワード：gahstu

[なこ@Shopifyデザイナー @nako255]

先日ポストしたお香のShopifyストアのデザイン改善を、ClaudeとCodexを使って試してみました🙌

やったこととしては以下です👇

1️⃣Claude Chatで以下の工程を行い、結果をmdファイルとしてまとめてもらう
・ブランド・ターゲット整理
・競合調査
・既存ストアの改善点洗い出し
・サイトマップ・導線設計

2️⃣↑の結果をもとにClaude Codeでデザインガイドラインのmdファイルを作成

3️⃣↑をもとにClaude Codeで「ShopifyのRiseテーマをベースにしたECストアを生成してください」と指示し、Shopifyストアを生成

4️⃣↑のZipファイルをShopifyにインポートし、Codexでデザインや文言などの細かい部分を調整

---

今回はさくっと試してみたかったので1️⃣の結果をとりあえずそのまま使いましたが、ページ構成も変わってデザインもだいぶ洗練されました✨

実案件では1️⃣でしっかりと内容を確認しながらAIと壁打ちして進めていければ、あとはShopifyへの実装まで一気にやってくれるので、今後はやっぱり手を動かしてデザインを作れるかよりも上流工程の部分が重要になってくると思いました💡

[なこ@Shopifyデザイナー @nako255]

こちらの講座で、お香のShopifyデモストアを作成してみました✨

管理画面もコードも全くいじらず、AIとAIに教えてもらったコマンドだけでここまでできました😳✨デザインで気になった細かい部分もAIへの指示だけでちゃんと直せました！

デザイナー的には、最初のChatGPTでストアのコンセプトや構成を決めていく流れがとても参考になりました！スタイルガイドも指示すれば画像で出してくれるので、デザインの提案にもそのまま使えそう👏

Figmaプラグインのhttps://t.co/0fEy5qkCFQを使えば、実装したShopifyストアのデザインをFigmaで編集できる状態で落とすこともできるので、デザイン作業のベースとしても使えそうです！

実装まで巻き取れるようになるのはもちろん、デザインだけ担当する案件でも工数を削減できそうなので、さっそく取り入れていきたいです🙌

[なこ@Shopifyデザイナー @nako255]

デモストアはこちら🔽
https://t.co/TXGltjebTo

パスワード：gahstu

[なこ@Shopifyデザイナー @nako255]

こちらの講座で、お香のShopifyデモストアを作成してみました✨

管理画面もコードも全くいじらず、AIとAIに教えてもらったコマンドだけでここまでできました😳✨デザインで気になった細かい部分もAIへの指示だけでちゃんと直せました！

デザイナー的には、最初のChatGPTでストアのコンセプトや構成を決めていく流れがとても参考になりました！スタイルガイドも指示すれば画像で出してくれるので、デザインの提案にもそのまま使えそう👏

Figmaプラグインのhttps://t.co/0fEy5qkCFQを使えば、実装したShopifyストアのデザインをFigmaで編集できる状態で落とすこともできるので、デザイン作業のベースとしても使えそうです！

実装まで巻き取れるようになるのはもちろん、デザインだけ担当する案件でも工数を削減できそうなので、さっそく取り入れていきたいです🙌

[しょうへい｜デイトラ代表 / AI経営顧問 @showheyohtaki]

https://t.co/pMPn8EGsK4

[なこ@Shopifyデザイナー @nako255]

年始の時点では「今年はUIデザインにも挑戦していく！」と意気込んでいたのですが、最近はAIをキャッチアップして、今の仕事にどう活かすかを考えることに時間を割いた方がよさそうだと感じています。

本音としては、AIを活用しながらUIデザインも仕事にしていけるのが理想！
ただ、今から新しい分野に手を出すよりも、このままShopifyデザインに全振りした方がいいのかも？など今後の方向性を考える日々です🤔💭

[なこ@Shopifyデザイナー @nako255]

@yuhei_design ずっと気になっていたClaudeCode、ウェビナーを見て自分にもできるかもと思い触ってみました🙌わかりやすいご説明ありがとうございました🙇‍♀️

ECストアデザイン用のMD、いろいろ模索してみます✨

[なこ@Shopifyデザイナー @nako255]

トムさん (@yuhei_design )のClaude Code×Figmaのウェビナーを参考に、以前作成した自主制作のECストアの情報を元にしてmdファイルとトップページデザインを生成してみました！

Claude Codeのインストールやら環境設定も思ったよりスムーズにいけて、こういうときに元SEで本当によかったと思います😂

手直しは絶対必要ではあるけど、Figmaで触れる形式でベースとなるデザインが出せるのはやっぱりすごい！！

テーマベースのShopifyデザインだとセクションの考慮が必要なのでプロンプトなどを工夫しないとですが、オリジナルデザイン前提であれば比較的活用しやすいかも？

商品一覧や商品詳細ページも作成できるかなど、ECストアデザインの観点でいろいろ試してみたいです✨

[なこ@Shopifyデザイナー @nako255]

@natsukishopify なつきさんもですかー！😂任期2年は長いですね😭

人脈や仕事にも活かせる何かが得られるかもと思えば前向きになれる気がしています😂お互い頑張りましょう！！🤝

[なこ@Shopifyデザイナー @nako255]

早いうちにやった方が後々気が楽だろうと今年度のPTAに立候補したのですが、くじでまさかの所属する委員会の委員長になってしまいました😇要らんところで当たりを引き当てる運の悪さよ…

人前に出たりするのはあまり得意ではないですが、本部や学校とのやりとり、メンバーとの連携など、案件でいうところのディレクターやPM的な役回りになったつもりでいい経験になると捉えて前向きに頑張ります😂