なこ@Shopifyデザイナー

1.3K posts

なこ@Shopifyデザイナー banner
なこ@Shopifyデザイナー

なこ@Shopifyデザイナー

@nako255

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

ポートフォリオはこちらです🔽 Katılım Nisan 2021
516 Takip Edilen622 Takipçiler
Sabitlenmiş Tweet
なこ@Shopifyデザイナー
【制作実績】ドライフラワー販売のShopifyデモストアを作成しました💐 ※デイトラShopifyコースの卒業制作となります。 ギャラリー的な美しさと購入に繋がりやすい導線設計を意識し、細かい部分までこだわって制作しました! 少し長くなってしまいましたが、以下にデザイン意図などまとめましたので見ていただけると嬉しいです✨ --------------------------------- ■ストアURL: fleur-sereine-nako.myshopify.com (パスワード:demo) ■使用テーマ:Dawn ■担当範囲:デザイン・構築 ■制作時間:約15時間 ■デザイン意図や導線設計で工夫した点など: 🌷 ストア全体 ✅ドライフラワーが左右対称な形であることからシンメトリーを意識した要素を取り入れたいと考え、見出しや商品テキストなどは基本的に中央寄せとしています。ECストアでありながらギャラリー的な美しさも表現することを目指してデザインしました。 ✅カラーは基本的にメインカラー(グリーン)とテキストカラー(黒)のみを使用し、最も重要な購入ボタンにのみアクセントカラー(ゴールド)を使用することでCTAボタンを効果的に目立たせています。 ✅洗練された印象を与えられるように、画像やバリエーションボタンなどの角の半径は0としています。 ✅見出し〜コンテンツ間やセクション間の余白について、近づけるところは近づける、離すところは離すようにしてメリハリをつけました。 🌷 ヘッダー・フッター ✅シンメトリーを意識、かつ洗練された印象を与えるため、ヘッダーはロゴが中央配置のレイアウトとしました。 ✅新商品のアピールのため、「New」は別出しにしてヘッダーの左端に配置することで目に留まりやすくしました。 ✅「FAQ」や「Contact」はストア内の優先度としては低めなので、フッターのみに表示しました。 🌷 TOPページ ✅ブランド紹介 ブランドの背景が気になったユーザに向けて、テキストの下に「About Us」ページに繋がるボタンを配置しました。悪目立ちしないよう、黒のアウトラインボタンで控えめにしています。 ✅新商品 リピーターに向けるとともに、ちゃんと更新されているストアということを印象づけるため、商品コンテンツとしては一番上に配置しました。 ✅おすすめ商品 「冬におすすめ」「白基調」と定義することで、何のおすすめでどんな商品が載っているのかがすぐにわかり、ユーザに疑問や迷いを生じさせないようしました。 ✅ベストセラー 売り上げ上位の商品を紹介するためのセクションという位置付けとし、「すべてを表示」ボタンは非表示としました。 ✅セクションの表示順について まず「新商品→おすすめ→ベストセラー」と一通りの商品一覧を出すことで、商品を選ぶ手助けになるようにしました。 その後「カテゴリー」で自分で辿って検索できるようにし、最後に「ブログ」と続いていくことで自然な流れでストアを回れるように設計しています。 ✅各見出しに日本語も併記することで何のセクションか一目でわかりやすくしました。 ✅商品画像を正方形、カテゴリー画像を長方形とあえて違う形にすることで、それぞれ意味の違うリンクであることが視覚的にわかるようにしました。 🌷 商品一覧ページ ✅メインで表示している商品一覧と混在しないよう、他のコレクションなどの表示はなしとしました。 🌷 商品詳細ページ ✅おすすめ商品には同カテゴリの商品(スワッグならスワッグ、リースならリースなど)を設定して統一し、おすすめとして違和感のないようにしました。 ✅「定番人気商品と一緒に、新作の商品も購入してほしい」という要件から、ベストセラーの商品には付属商品として同カテゴリの新商品を設定し、クロスセルを促せるようにしました。 🌷 About Usページ ✅セクションの合間にパララックス画像を入れることで、説明内容が切り替わることがわかるようにしました。 ✅アクセス情報はブランド説明とはまた性質の異なる情報のため、背景色をグリーンにするなどしてデザインに差をつけました。 🌷 FAQページ・お問い合わせページ ✅疑問の解決やお問い合わせに集中できるよう、画像の装飾は入れずにシンプルなデザインとしました。 --------------------------------- ここまで読んでいただきありがとうございました! Shopifyデザイン制作やテーマベースのShopifyデザイン構築など承っております! ぜひお気軽にDMまたはメールからご相談ください☺️ #デイトラ #デイトラコミュニティ #Shopifyデザイン #Shopifyデザイナー #Shopify
なこ@Shopifyデザイナー tweet mediaなこ@Shopifyデザイナー tweet mediaなこ@Shopifyデザイナー tweet mediaなこ@Shopifyデザイナー tweet media
日本語
2
0
49
1.8K
なこ@Shopifyデザイナー
@yukiusagi_723 お世話になっております🙇‍♀️ DMさせていただきましたのでお手すきでご確認いただけますと幸いです!
日本語
0
0
0
302
なこ@Shopifyデザイナー
#デイトラ #エピソード デイトラ6周年おめでとうございます✨ デイトラを受講してからあと少しで5年が経とうとしています。 仕事を好きになれなかった私が、今こうしてやりたいことを見つけて前向きな気持ちで仕事できているのは、間違いなくデイトラのおかげです! 日頃の感謝を込めて書きました。読んでいただいた誰かの参考になると嬉しいです🙏🌸 このままでいいのか悩んでいた私が、デイトラでキャリアを変えた話|なこ @nako255 note.com/nako255/n/ne5a…
日本語
0
1
15
1.4K
sou | Web Designer
sou | Web Designer@sou_design2409·
@nako255 なこさん、ありがとうございます😊 4/11オフ会参加されますかね? またお話ししましょう😊
日本語
1
0
1
125
sou | Web Designer
sou | Web Designer@sou_design2409·
ついに、明日が最終出勤日👨‍🎓 ずっと働くと思っていた会社を離れる。 実感が湧かないくらい、 仕事が終わらない。 とりあえず明日も頑張る 次の肩書きも考えなければ!笑 #Studio制作 #Webデザイン #デイトラ #デイトラコミュニティ
日本語
8
0
165
3K
なこ@Shopifyデザイナー
時間を見つけて、デザインカンプに載せる指示書やワイヤーフレームのセクション・パーツなどのテンプレートを自分用にまとめています💻✨ 特にECストアはリストがよく出てきたり、商品一覧や商品詳細、ブログなど、ある程度構成が決まっているものもあるので、毎回いちからワイヤーを組まなくても済むようにしたいです! AIでワイヤーのベースを作ることも今後増えていくかもしれませんが、最後に自分で調整するときの手作業の部分も少しでも効率化できるといいなと思います☺️
日本語
0
0
13
431
なこ@Shopifyデザイナー
先週は長女の保育園の卒園式でした👧🌸 入場してきた時点でもう涙が出てきてだめでした🥹娘も途中からずっと涙が止まらなくなって何度も目を拭っていて、その姿を見てまたもらい泣きしてしまいました🥲 1歳の時からずっとお世話になっていて、本当にあっという間の5年間でした! 小学校でもたくさんお友だちを作ってとにかく毎日楽しく過ごしてほしいと願うばかりです🙏✨
日本語
1
0
43
805
なこ@Shopifyデザイナー
@pipipi_web03 @mgmtkk お二人とも入賞おめでとうございます🎉✨ 一緒に入賞されていておーっ!と声が出てしまいました😊笑 かつての同じチームコミットメンバーとして私も自分のことのように嬉しいです🥰
日本語
1
0
2
43
めぐむ|言語とWebの架け橋🌈クリエイター
#デイトラ #デザインコンペ 2度目の受賞㊗️🍻🎊 ◥◣✨入賞🏅をいただきました✨◢◤ 前回の結果を点にせず、継続して形にできたことはデザイナーとしての確かな自信に繋がりました😊 支えてくださる皆様への感謝を胸に、今後も期待を超える価値を提供できるよう、真摯に制作へ励みます❣️
船越@デイトラ|受講生3万人スクール講師@ryota_funakoshi

【#デイトラ #デザインコンペ 結果発表】 #デイトラ 生限定の賞金5万円+発注を確約するイベント #デイトラ #デザインコンペ ですが約50作品の応募があり大激戦🤩 デイトラ生へお仕事のきっかけを得て欲しい一心から続けている大人気企画☺️気になる結果発表はこちらです💁🏆 ◤◢◤ 結果発表 ◤◢ 🏆最優秀賞: れもんぱん_webデザイン さん @lemonpan714 dailytrial.net/design-competi… <選定理由> ロゴにシンボルマークもあり可愛らしく好印象でした! 青~黄色のグラデーションの配色もはつらつとしており、子供向けレッスンの雰囲気にあっていると感じました。嶋津さん監修の学習メソッドがこのLPの強みなので、MVに紹介を入れている点も権威性の訴求として効果的だと感じました。全体のトーンも既存サイトと乖離がなくフライトのイメージに合っていると思いました! ーーー 🎖️優秀賞: ざわ | Webデザイナー さん @zawa9150 dailytrial.net/design-competi… <選定理由> PHIGHTのトンマナにハマっているし、「英検」のイメージを残したまま信頼感と柔らかさを両立させた表現で素敵です。写真の選定もバランス良く、直感的にストーリーを感じられました。バランス感覚が優れていると思いました! MIKI さん @mikko_be_design dailytrial.net/design-competi… <選定理由> MVの文字組みが綺麗で、要素が多い中でも整理されており素敵だと感じました!MV内で教材が見えることで内容がイメージしやすく、安心感につながっていると思います。LP内の構成もシンプルで分かりやすいと思いました! あやの🐈WEBデザイナー さん @ayanty_web dailytrial.net/design-competi… <選定理由> 配色がポップでメリハリがあり、全体的に明るく好印象でした!内容も充実しており、学習設計等も授業のイメージが湧きやすかったです! ーーー 🏅入賞: たなはる さん @tnhr_design dailytrial.net/design-competi… めぐむ|言語とWebの架け橋クリエイター さん @mgmtkk dailytrial.net/design-competi… ぴぃさん🍑@デイトラwebデザイン さん @pipipi_web03 dailytrial.net/design-competi… たまき | Webデザイナー さん @Hanioboon dailytrial.net/design-competi… 今回も多くの応募があり大激戦でした!入賞クラスの皆さんは全然お仕事を獲得していけるレベル👏 作品まとめはこちら👇 figma.com/file/asvdlK3I1…

日本語
4
0
83
1.9K
なこ@Shopifyデザイナー
🌟2月の振り返り <お仕事> ✅Shopifyデザイン&構築【納品】 ✅Shopifyデザイン①:ワイヤーフレーム作成 ✅Shopifyデザイン②:お見積 <自主学習> ✅UIデザイン学習(BONO) 案件対応を優先しつつ、UIデザインの学習にも時間を使っています💻そろそろポートフォリオに載せる自主制作のことも考えていきたいところ💡 プライベートでは長女の保育園最後の遠足や学校説明会、入学準備などでバタバタする中、先週はインフルエンザBに罹患しあまり思うように動けませんでした😭(かかったのは私だけで家庭内感染は免れた…はず) 花粉症もきていてなかなか体調が万全とはいきませんが、自分のペースで今月も頑張ります🌱 #デイトラ #デイトラコミュニティ
日本語
0
0
29
453
なこ@Shopifyデザイナー
ヘッダーメニュー(=グローバルナビゲーション)は、 ユーザを迷わせずに目的へ導くためのものであり、ECストアの最終ゴールは「購入」です🛒 そのため、商品ページへつなげる導線の設置はほぼ必須だと思います! ただ、「商品一覧」というラベルは少し曖昧なので、単なる一覧ではなく、「どう選べるのか」が伝わる表現にするだけで、商品はぐっと探しやすくなります🔍✨ ✅例 ✕ 商品一覧 ○ シーンから探す ○ 価格帯で選ぶ ○ 初めての方へ 配置などのデザインだけでなく、「言葉」もUIの一部だとあらためて感じています😌
日本語
0
0
9
277
なこ@Shopifyデザイナー retweetledi
こうき | Webとカレーをつくる人
\日本一周しながら全国各地で間借りカレー/ 始めます! 5年間の間借りカレー営業の経験を活かし 今度は日本全国でカレー屋営業します! 「うちの地元に美味しい食材あるよ!」 「ここで間借りできるよ!」 という情報があればぜひ教えてください! あなたの街でスパイスカレー作らせてください🍛
日本語
4
31
140
13.2K
なこ@Shopifyデザイナー
@aopp25ixs 私の近場の無印もポップコーン置いてなかったのでオンラインで取り寄せました🌸取扱店舗自体少なそうな感じでした🤔 無印のアプリから店舗の在庫確認もできるのでよろしければ合わせてチェックしてみてください✨
日本語
1
0
1
84
なこ@Shopifyデザイナー
スタバの桜が今日から始まったので朝から行ってきました🌸✨ 毎年この時期の桜関連の散財がえぐいけど満たされるからよし😌
なこ@Shopifyデザイナー tweet media
日本語
2
0
17
713
なこ@Shopifyデザイナー
桜見るのも食べるのもめっちゃ好きです…!!✨ 私もいつもスタバの桜タンブラーやマグカップ買うか悩んで何個かお迎えしてます🌸✨本当は毎年ほしいけどあんまり増やしても使いきれないのでがんばって我慢してます😇 コースター店頭で実物見たらかわいすぎてつい買ってしまいました🥰 初日でまだ間に合うと思うのでぜひスタバ行ってみてください〜!
日本語
0
0
1
1.6K
あんず | デザイン&漫画イラスト
@nako255 なこさん桜お好きなんですね…!私もスタバの桜タンブラー2本持ってます&桜餡よく食べてます🌸 コースター、キラキラでめちゃ可愛いです!私もスタバ駆け込んできます🏃‍♀️💨 素敵な情報を教えていただきありがとうございます〜!
日本語
1
0
1
1.4K
なこ@Shopifyデザイナー
@aopp25ixs 私もそれ買いました!!おいしいですよね🌸✨ 無印はチェック済みでこんなに買い込んでしまいました👍抹茶も大好きなので掛け合わされると買うしかなくなります🤣 桜好き仲間嬉しいです〜🥰
なこ@Shopifyデザイナー tweet media
日本語
1
0
1
75
えり¦UIUX / Webデザイナー
えり¦UIUX / Webデザイナー@eri_design123·
@nako255 なこさん、ありがとうございました! 方向性が定まって良かったです✨ またお気軽にご活用くださいね🙌🏻💗
日本語
1
0
1
223
なこ@Shopifyデザイナー
今日はデイトラのメンターのえりさん(@eri_design123 )に個別で相談に乗っていただきました✨ 今後UIデザインの自主制作をするにあたっての方向性についてなどいろいろとアドバイスいただき、限られた時間でしたがとてもありがたかったです🙇‍♀️✨ メンター個別相談会は初めての利用でしたが、もっと積極的に活用していこうと思いました! #デイトラ #デイトラコミュニティ
日本語
1
2
24
1.1K
なこ@Shopifyデザイナー
昨日は次女の2歳のお誕生日でした🎂✨ 下の子は上の子の時よりもさらに早く成長を感じます😳 休日だったので家族みんなでのんびりお祝いできてよかったです☺️
日本語
0
0
21
312
なこ@Shopifyデザイナー
UIデザインにおいて、主役は「アクション」や「ナビゲーション」ではなく「コンテンツ」であるとBONOで学びました! たとえば、あるアプリを使うときに目的がスムーズに達成できないと「なんか使い方がよくわからないからやめよう・・」となってしまう。 「ユーザは何をしたいからそのアプリを使うのか?」を念頭に置いて、目的を達成するための手助けをデザインでしてあげないといけない。 ECストアも同じで、いくら「これほしい!」と思ってもらえても、購入ボタンが見つけにくかったり導線がわかりづらいと「買いたい」という目的が達成できません🤔 ECストアは「購入してもらうこと」が目的なので、商品やブランドの世界観を表現する前に ✅購入導線は整理されているかどうか ✅購入ボタンは迷わず押せるかどうか をまずはしっかり設計することが大切だとあらためて感じました💡 #Shopifyデザイン #UIデザイン
日本語
0
0
15
254
なこ@Shopifyデザイナー
ECストアの商品カードは 📷商品画像 🏷️商品名 🪙価格 (➕補足情報(レビュー・送料無料など)) で構成されることが多いですが、仮に商品名と価格が同じ大きさ/太さ/色だとパッと見たときに何を見ればいいのか分からなくなり、購入の判断がしづらくなってしまいます🤔 大事なのは「どこを強調したいか」を見た目で伝えることで、例えば、 📷商品画像を主役にして 🪙価格はすぐ見つかるように大きめに 🏷️商品名と➕補足情報は控えめにする など見た目で優先順位を表現するイメージです。 商品カードは基本的に【一覧で見て、他の商品と比較するためのもの】なので、 ✅購入の判断スピードをどれだけ上げてあげられるか を意識するだけで、ECストアの見やすさはかなり変わると思います💡 もちろんストアの世界観によっては価格はあまり押し出したくない場合もあるので、そこは与えたい印象によって商品カードの構成やメリハリを考えられるとよいです! Shopifyのテーマ選定の際に商品カードのデザインやどこまで設定を変えられるか?まで考慮できると一番よいですね✨ #Shopify #Shopifyデザイン #UIデザイン
日本語
0
0
16
487