This project is currently in progress. To view the EC site, visit neuraldsp.jp
本プロジェクトは現在進行中であり、ECサイトは neuraldsp.jp からご覧いただける。
In this project, I designed and developed the official Shopify EC site for Neural DSP’s expansion into the Japanese market. I localized the content for Japanese users, designed the UX/UI, created product showcase content, built user flows with Cortex Cloud integration, and implemented responsive design on Shopify to ensure a smooth experience across both mobile and desktop.
このプロジェクトでは、Neural DSPの日本市場進出に伴い、公式ECサイト（Shopify）のデザインと開発を担当する。日本ユーザー向けにコンテンツをローカライズし、UX/UIを設計する。主要製品の紹介コンテンツを制作し、Cortex Cloudとの連携を考慮した導線設計を行う。また、Shopify上でレスポンシブデザインを実装し、モバイルとPC両方で快適な閲覧体験を提供する。
INFORMATION ARCHITECTURE
As a first step, we created this diagram to outline the overall information architecture of the Neural DSP Japan Shopify EC site. The site is structured into three main sections: (1) a Landing Page for browsing products like Nano Cortex®, Quad Cortex®, and accessories; (2) a Support Section with manuals, FAQs, and contact options; and (3) a Documentation Area covering legal terms, warranty, and privacy policies. Users can also create accounts, download software, access Cortex Cloud, and use local payment methods to complete purchases.
第一歩として、Neural DSP JapanのShopify ECサイトにおける全体的な情報設計をこの図で整理する。サイト構成は大きく3つに分かれている。（1）Nano Cortex®やQuad Cortex®などの製品を紹介するランディングページ、（2）マニュアル・FAQ・お問い合わせなどをまとめたサポートセクション、（3）利用規約・保証ポリシー・プライバシーポリシーなどを含むドキュメントセクションである。ユーザーはアカウント作成、ソフトウェアのダウンロード、Cortex Cloudへのアクセス、国内決済サービスでの購入が可能である。
DESIGN
Before moving into development, I created detailed wireframes for each key page—including the landing page, product page, user account, support, and contact. These wireframes helped clarify content structure, user flow, and responsive layout planning, ensuring a smooth and efficient design-to-development process.
開発に入る前に、ランディングページ、商品ページ、アカウントページ、サポートページ、お問い合わせページなど、主要なページのワイヤーフレームを作成する。これにより、コンテンツ構成やユーザーフロー、レスポンシブ対応のレイアウト設計が明確になり、デザインから実装までのプロセスを円滑かつ効率的に進めることができる。
The sample shown here is a responsive video grid component designed for the homepage. It allows all three products—Nano Cortex, Quad Cortex, and GigCase—to be showcased simultaneously. Built with a component-based approach, the layout features a two-column structure with modular video, image, overlay, and text elements. This ensures design consistency, responsiveness, and easy reuse across the site.
ここで紹介しているのは、トップページ用に設計したレスポンシブ対応のビデオグリッドコンポーネントである。Nano Cortex、Quad Cortex、GigCaseの3製品を同時に見せることができる。コンポーネントベースの設計により、動画・画像・テキスト・オーバーレイなどの要素がモジュール化され、デザインの一貫性や柔軟な再利用が可能になっている。
For the product page, I have implemented a full-screen video hero section to create a strong visual impact. It features a responsive layout with the Nano Cortex video using object-fit: cover, optimized for both mobile and desktop with scalable text and flexible two-column support on larger screens.
商品ページには、強い視覚的インパクトを与えるフルスクリーン動画ヒーローセクションを実装する。Nano Cortexの動画をobject-fit: coverで表示し、モバイルとデスクトップ両方に対応したレスポンシブ設計で、テキストも自動でスケーリングされ、PCでは2カラム構成にも対応している。
To better explain the I/O features of the hardware, the I/O MAP component is built via Shopify’s custom Liquid blocks. Each input and output is treated as an individual <column> inside a reusable <number-map-section>, allowing for scalable, modular content updates. Numbered badges are styled consistently (14px font size, 26px minimum width, circular shape) to clearly correspond with their descriptions, ranging from combo inputs and effect loops to USB, MIDI, and Neural Capture outputs.
ハードウェアのI/O機能をより分かりやすく説明するために、I/O MAPコンポーネントはShopifyのカスタムLiquidブロックを使って構築されている。各入出力は再利用可能な <number-map-section> 内の <column> として定義され、スケーラブルかつモジュール化されたコンテンツ更新を可能にする。番号バッジはフォントサイズ14px、最小幅26px、円形という統一されたスタイルで整えられ、コンボ入力、エフェクトループ、USB、MIDI、Neural Capture出力などの説明と明確に対応するようになっている。
I implemented a lot of interactive and motion elements in this project to enhance user experience and create a more dynamic interface, such as hover-based image zoom and image swap, a 360° product viewer for immersive inspection, and ripple effects for button feedback. Navigation is improved through animated menu toggles, a scroll-linked table of contents, and a mobile-friendly hamburger menu. Other features like the slide-in cart and floating labels support seamless interaction without disrupting the browsing flow.
このプロジェクトでは、ユーザー体験を向上させ、よりダイナミックなインターフェースを実現するために、さまざまなインタラクティブおよびモーション要素を実装している。例えば、ホバー時の画像ズームや画像切り替え、360°プロダクトビューアによる没入型の閲覧、ボタンのリップルエフェクトなどが含まれる。ナビゲーションは、アニメーション付きのメニュー切り替え、スクロール連動の目次、モバイル対応のハンバーガーメニューにより改善されている。さらに、スライドインカートやフローティングラベルなどの機能が、閲覧の流れを妨げることなくスムーズな操作をサポートしている。
I focus on delivering a unified experience across the entire project. When a customer subscribes to email marketing, a newsletter is automatically sent that reflects the same visual identity used on the storefront. The color scheme—grayscale tones with accents like Shop Pay purple and discount green—maintains visual harmony. Typography is standardized with IBM Plex Sans JP for Japanese readability, and buttons and forms follow a modular black-and-white UI. The email preview on the right shows how all these elements work seamlessly together, ensuring consistency throughout the user journey.
プロジェクト全体で統一された体験を提供することに注力している。お客様がメールマーケティングに登録すると、ストアフロントと同じビジュアルアイデンティティを反映したニュースレターが自動で送信される。配色はグレースケールに加え、Shop Payの紫やディスカウント用の緑などを使い、視覚的な統一感を保つ。フォントは日本語に適したIBM Plex Sans JPを使用し、ボタンやフォームもモジュール化された白黒のUIで揃える。右のメールプレビューでは、これらの要素がスムーズに連携し、ユーザー体験全体を通して一貫性が保たれていることが確認できる。
COMMUNICATION
One day I woke up during Golden Week and received a request from my teammate to remove the “Note” field from the Shopify cart page, since it wasn’t reflected in the shipping process and could cause confusion. I quickly jumped into it and created clear documentation explaining how to remove the note field by editing cart.liquid or main-cart-items.liquid, along with adding extra margin space to preserve the design layout. This allows us to easily restore it in the future if needed.
ゴールデンウィークのある日、チームメンバーから「Shopifyのカートページにある備考欄を削除してほしい」と依頼され、すぐに対応する。将来的に元に戻せるよう、備考欄を削除し、余白を追加する方法をまとめたドキュメントを作成する。対象ファイル（cart.liquid または main-cart-items.liquid）を編集する手順も明確に記載する。
We responded to the client’s concern promptly regarding the suspicious “fender_analytics” script found on the JP website. After investigating, we clarified that the script was part of Klaviyo’s standard tracking and not related to the Fender brand. Although there was no actual connection to Fender, we decided to remove the plugin immediately to avoid any confusion, ensuring transparency and swift resolution.
クライアントからの「fender_analytics」スクリプトに関する懸念に迅速に対応する。調査の結果、このスクリプトはKlaviyoの標準的なトラッキング機能の一部であり、Fenderブランドとは関係がないことを明らかにする。実際にFenderとの関連性はないが、混乱を避けるために、透明性を確保し、速やかにこのプラグインを削除する。
I updated the Neural DSP Japan homepage to improve visual consistency and user experience. This included standardizing the font and spacing for the Nano Cortex section, optimizing padding for mobile devices, adjusting button styles to better fit the design system, and unifying all button texts to “購入する” (“Purchase”) for clarity and stronger call-to-action. The result is a cleaner and more consistent layout across desktop and mobile views.
Neural DSP Japanのホームページを、視覚的一貫性とユーザー体験を向上させるためにアップデートする。Nano Cortexセクションのフォントとスペーシングを統一し、モバイル端末向けにパディングを最適化する。また、デザインシステムに合うようにボタンスタイルを調整し、すべてのボタン文言を「購入する」に統一して、わかりやすく行動を促す表現にする。これらの対応により、デスクトップとモバイルの両方で、より洗練され一貫性のあるレイアウトを実現する。
MARKETING
SEO is a key part of an EC site that generates visibility and drives traffic. Using AI-assisted deep research based on Google search behavior for Neural DSP in Japan, I can analyze each product by identifying high-volume related keywords (in both English and Japanese), estimating monthly search volumes in Japan, assessing SEO difficulty, and determining the primary search intent. Relevant long-tail keywords are also included. The data is based on the latest insights from 2024–2025, with a strong focus on the Japanese market.
ECサイトにおいてSEOは、視認性を高め、トラフィックを増やすための重要な要素になる。私は、Neural DSP製品に関して、日本におけるGoogleの検索行動をもとにAI支援のディープリサーチを活用し、各製品に関連する英語および日本語の高検索ボリュームキーワードを特定する。日本国内の月間検索数を推定し、SEO難易度を評価し、主な検索意図を分析する。さらに、関連するロングテールキーワードも含める。これらのデータは、2024〜2025年の最新インサイトに基づき、日本市場に強くフォーカスする。
Exact search volumes in Japan are not public, so the numbers here are estimated based on global trends and local interest. Globally, “Nano Cortex” is a rising keyword—media like guitar.com have questioned if it can “live up to the hype.” In Japan, interest is growing but still limited. SEO competition remains low, with few pages targeting “Nano Cortex” beyond official and news sources. Most users research or compare the product to the Quad Cortex before buying.
日本国内の正確な検索ボリュームは公開されていないため、ここに記載する数値は世界的なトレンドと日本での関心度に基づいて推定する。グローバルでは「Nano Cortex」が注目を集め始めており、guitar.comのようなメディアが「その期待に応えることができるのか」と疑問を呈する。日本では関心が高まりつつあるが、まだ限定的にとどまる。SEO競合は少なく、公式やニュース以外で「Nano Cortex」をターゲットにするページはほとんど存在しない。多くのユーザーが、購入前に製品について調査するか、Quad Cortexと比較する傾向にある。
These are the ads I designed for Google and Meta platforms. I discussed with the client and marketing team to align the messaging and visuals, and adapted the designs to fit each platform’s format and audience. For Google, we prepared various sizes to cover both desktop and mobile, focusing on clear CTAs like “Official Store Open.” For Meta, I used lifestyle photos to create a more natural and engaging feel. Overall, I made sure the ads are consistent across platforms while also optimized for conversion.
これは、GoogleとMeta向けに広告をデザインする。クライアントやマーケティングチームと話し合い、メッセージとビジュアルの方向性を決めた上で、各プラットフォームのフォーマットやターゲットに合わせて調整する。Googleでは、デスクトップとモバイル両方をカバーする複数サイズを用意し、「公式ストアOPEN」など明確なCTAを入れる。Metaでは、ライフスタイル写真を使って、より自然で親しみやすい表現にする。全体として、プラットフォームごとの最適化を意識しながら、統一感とコンバージョンの両立を図る。
Based on the client requirements, I designed a two-sided flyer with one side showcasing Quad Cortex and the other featuring Nano Cortex, each with concise bilingual copy and strong product visuals. Both sides emphasize the recent price reduction and core features such as Neural Capture™, DSP performance, portability, and Cortex Cloud access. To meet the print flyer format, I trimmed down the original text for clarity and balance while maintaining key messaging. A trackable QR code is included on each side, linking to the Japanese site. The design aligns with Neural DSP’s branding and is optimized for distribution at Sound Messe in Osaka.
クライアントの要望に基づき、片面にQuad Cortex、もう片面にNano Cortexを掲載する両面フライヤーをデザインする。各面に簡潔な日英バイリンガルコピーと製品の魅力を伝えるビジュアルを配置し、価格改定やNeural Capture™、DSP性能、携帯性、Cortex Cloud対応などの主要機能を強調する。印刷物としての視認性とバランスを考慮し、元のテキストを整理・調整しながらも、伝えるべきメッセージを維持する。日本語サイトへ遷移できるトラッキング対応のQRコードを両面に設置し、Neural DSPのブランドトーンに沿ったデザインに仕上げ、大阪サウンドメッセでの配布に最適化する。
