JULY 2025
担当範囲
Frontend Development / Web Design（一部）
制作期間
コーディング：3ヶ月
使用したテックスタック
Shopify Liquid / HTML / CSS / JavaScript

概要

アパレルブランド「KATAYAMA」の公式サイトおよびECサイトの構築を担当しました。KATAYAMAは、京都の百年の歴史を持つ京絞染の技術を基盤とし、伝統技法と現代美学を融合させた、上品でオーガニックな衣服を展開するブランドです。
フロントエンド開発においては、ブランドの世界観を訪問者に伝えるため、インタラクションやアニメーションの演出に力を入れました。

ターゲット

日本国内および海外の顧客層。

フロントエンド

私は、ウェブサイトをファッションにたとえると、デザインはメイクや服装などの外見であり、インタラクションはその人の「雰囲気」のようなものだと考えています。見た目だけでなく、雰囲気まで整えることで、サイト全体の魅力が高まります。このプロジェクトでは、アニメーションやインタラクションによって、上品で繊細なブランドイメージを表現しました。

サイトの印象を左右する要素は、デザイン以外にも数多くあると考えています。アニメーションのスピード、ホバー時の透明度の変化量、さらにサイトの読み込み速度など、細かなディテールが積み重なって「雰囲気」を形成すると考えています。

デザイン

メインビジュアルはグラフィックデザイナーから提供されましたが、実際にサイトを構築する上では、それ以外にも多くのデザインの検討が必要でした。そのため、既存のデザインをもとに他のセクションやレスポンシブ対応（スマートフォン表示など）を自分でデザイン・補完しました。

プロセス

これは私にとって初めてのShopifyテーマ開発プロジェクトでした。まずは1週間かけて、Shopify CLIやLiquidテンプレート言語、Shopify管理画面の操作方法などを集中的に学び、開発を進めながら継続的に知識を深めていきました。
クライアントのストアに影響を与えないよう、自分自身のShopifyアカウントで別のストアを作成し、2つのストアで並行して開発を進めました。すべての更新は、まず自分のストアでテストしたうえで、クライアント側に反映するようにしました。