top of page

MY PORTFOLIO

“心地よさ”と“世界観”を大切に、ブランドや商品の魅力が伝わるデザインを心がけています。

気になる作品をクリックして、詳細をご覧ください
※自店を中心とした実績(秘密保持契約等により)

DTP作品はこちら

relinge_makuake.jpg

新商品「リランジェ®︎」の魅力を伝えるページ構築で、初日PVランキング4位&達成率240%にてプロジェクト成功

fuara_HP30.jpg

HP×Instagram連携によりショップ信頼性が向上し、イベント出店連動で新規顧客約65%増を獲得(依頼主評価)

relinge-fitting_1.jpg

商品写真を自店で撮影・加工し、構図や光で上品さと安心感を表現。顧客から「着用イメージが湧いた」の声多数

loveperfume_HP.jpg

ブランド世界観×機能性を両立したECサイト構築でアクセス総数10,963超・平均滞在時間1.8倍を実現

relinge_DMimage.jpg

Makuake紹介×QRコード付DMハガキを厳選した顧客へ100通郵送、反響率80%以上を記録。ページ閲覧・購入に直結

relinge_PVimage.jpg

Makuake内プロジェクトページに設置しテキスト×動画でPR、自チャンネル平均再生回数より+24%高い視聴率を記録

relinge_SPsite.jpg

Makuakeプロジェクトと連動する特設サイトを構築しセッション数+407%・DM/SNS経由流入数平均+25%を獲得

amour parfumロゴ|キャッチフレーズ付_edited_edited.jpg

ロゴ・キャッチフレーズでコンセプトを視覚化しブランド全体の世界観と統一、顧客の購入意欲向上に寄与

キーボード

【挑戦中】より自由度の高いWeb表現を実現できるスキル習得を目指す(模写作品3点(ヘッダー・カードUIなど)順次公開)

【実績1】Makuake特設ページ制作

目的:新商品「リランジェ®︎」の持つ魅力を伝え、共感と支援を得るプロジェクトページを構築

工夫・実施:

- ページ構成・ライティング・撮影・動画編集をすべて自店で実施​

- FAQやストーリーで信頼感を高め、SNS/LINEで告知展開

 

成果:

- 初日PVランキング4位、支援率240%で即日完売  

- 「世界観が素敵」「文章で安心できた」など好意的な支援コメント

01.Makuake

01. Makuakeサイト内 プロジェクトページ

※Makuakeプロジェクト出品者専用ページ

relinge_makuake90.jpg

目的: Makuake内での新商品「リランジェ®︎」プロジェクトページ制作


ターゲット:ランジェリーに関心のある30~40代女性層

 

工夫:SNS・特設サイトと連携したクロスメディア展開で、商品価値の伝達と導線設計を最適化

成果:

- PV 13,336回 超

- 公開初日PVランキング4位

- 支援率 240% 達成 で完売終了

使用ツール:Illustrator/Photoshop

担当範囲:デザイン・コーディング・撮影

新商品『リランジェ®︎』の魅力を訴求するMakuake内プロジェクトページを、商品写真・PR動画と連動して構築。

ストーリーテリングを軸に、以下のUI/UX設計を工夫しました:

  • ファーストビューでの視覚訴求と情報整理

  • 行動を促すCTAボタンの配置と反復設計

  • 詳細情報へのスムーズな遷移導線の設計

 

自店サイトやDMからの流入導線を構築した結果、Makuake内PVランキング4位を獲得。購入拡大とブランド認知を両立させるキャンペーンを成功させました。

【実績2】自店ブランドECサイト構築(Wix)

目的:「Love Perfume」ブランドの世界観を表現し、信頼・購買促進を図るECサイトを構築

工夫・実施:

- 全ページ構成と導線設計、SEO/SNS連携、カートUI設計まで一貫制作​

- 商品レビューやFAQで安心感を補強し、UX向上を追求

成果:

- 平均PV+25%、商品ページの滞在時間1.8倍

- 「ページが見やすくて安心できる」「雰囲気に惹かれた」との顧客コメント

02.Love Perfume

02. Love Perfume 公式ホームページ

目的: ブランド世界観と購買導線の両立を図った公式ECサイトの構築

ターゲット:

ブランドの固定ファン・SNSフォロワー層

工夫: 

世界観を訴求するTOP構成、レビュー・SEO・SNS連携による購入導線の強化

 

成果: 

- アクセス総数 10,963回

- 購買率 0.60%

- 客単価 2,664円

 

使用ツール: Wix/Illustrator/Photoshop

 

担当範囲: デザイン・コーディング・撮影

loveperfume_HP73.jpg

「おしゃれと自然派を両立したい」30〜40代女性をターゲットに、アクセサリー・ランジェリーを扱う自店ブランドの公式サイトを設計・運用。

 

UI/UXの観点では以下を重視しました:

  • 直感的なナビゲーションと明確なカテゴリ設計

  • 購入導線のシンプル化とモバイル最適化

  • 商品レビューやブログとの連携によるブランド体験の強化

 

また自店ECやDMからの導線を構築し、Makuake内PVランキング4位・新規購買の獲得に貢献。ブランドの世界観と購買体験を融合させた設計です。

03.relinge

03. リランジェ®︎ 特設ページ

relinge_SPsite58.jpg

目的: Makuake連動型の特設LPを構築し、プロジェクトの訴求を最大化

ターゲット:

Makuake来訪者・SNS経由の新規顧客

工夫: DMやSNSと連動し、Makuakeページとの一貫性ある導線を設計

成果:

- サイトセッション数 +407%

- ユニーク訪問数 +297% (公開前比較)

 

使用ツール: Wix/Illustrator/Photoshop

 

担当範囲: デザイン・コーディング・撮影

Makuakeプロジェクトと連携した特設ページを制作。
新聞掲載記事やカウントダウン表示など、顧客の関心を育む情報発信も担いました。

 

UI/UXの観点では以下を重視しました:

  • Makuakeページとの役割分担を意識した補完設計

  • ページ冒頭に動画やキャッチコピーを配置し、視覚的印象と導入のしやすさを両立

  • DMやSNSからの誘導を想定したナビゲーション構成

 

導線設計から世界観の表現までを一貫して担い、公開前比較でセッション数+407%と高い成果に繋がりました。

【実績3】販促LP・DM制作

目的:EC・SNS・紙媒体を横断し、販促の統一感と集客力を高める

 

工夫・実施:

- LP・DM・バナー等をブランドイメージに統一し、クロスメディア設計を実装

- ECサイトやMakuakeとのスムーズな誘導導線を構築

 

成果:

- 依頼先​)イベント出店でのLP活用により信頼感向上&新規顧客65%増​

- SNS経由の告知反響67%UP、Makuakeプロジェクト支援率240%貢献

04.fuara

04. fuara様ホームページ制作

目的: 世界観と親しみやすさを兼ね備えたペット向けショップの公式サイト制作

ターゲット:

ペットを愛するナチュラル志向の女性層

工夫: パステルトーンを活かした優しい色使いで、イラストや写真素材を引き立てる構成に

成果: 「世界観が伝わる」との顧客の反響を獲得

 

使用ツール: Wix/Illustrator/Photoshop/Figma(一部)

 

担当範囲: デザイン・コーディング

fuara_HP50.jpg

愛媛県のペットアイテムショップ「fuara(ふあら)」様の想いを表現した公式ホームページ。イラストや写真を主役にし、イラストや写真に視線が集まるように背景配色や余白の取り方を調整。やさしい世界観と信頼感が伝わるトーンで構築。

UI/UXの観点では以下を重視しました:

  • モバイルファーストを意識した階層設計

  • TOP→イベント紹介→商品紹介→現地購入への流れをスムーズに誘導

  • 商品ごとのストーリーを伝える柔らかなビジュアル配置

 

「飼い主さまにもワンちゃんにも喜んでもらえる」温かなコンセプトを形にし、ブランド紹介・SNS導線・イベント出店告知など多目的に活用いただきました。

05.DM

05. DMハガキデザイン

relinge_DM80.jpg

目的: Makuakeプロジェクトへのアクセス導線として圧着DMを制作

ターゲット: 過去購入歴のある既存顧客

 

工夫: QRコードと段階的情報設計によりスマホ誘導を強化

成果:DM経由のアクセス率 80%強 を記録

使用ツール: Illustrator/Photoshop/Canva

 

担当範囲: 構成・デザイン・撮影・編集

過去購入者へ向けて、Makuakeプロジェクトの事前告知を目的としたQRコード付き圧着ハガキをデザイン・郵送。

 

オフライン媒体でありながら、UI/UX視点を取り入れ、

  • スマホ閲覧を前提としたQRコード配置

  • 情報の段階提示による興味喚起とスムーズなWeb誘導

  • 特設ページとの連携による購入促進導線

 

を設計。

閲覧の80%超がDM経由となり、プロジェクト達成率240%に大きく貢献しました。

【実績4】ブランド表現の設計・実装

目的:新商品の価値をストーリーとビジュアルで統一的に表現

工夫・実施:

- ロゴ・キャッチコピーを開発し、写真・映像・音楽でブランド世界観を具現化

- 撮影・構成・編集すべてを自店対応し、一貫性ある表現を実現

 

成果:

- SNS・EC・Makuake等で「着用イメージが湧いた」と好評

- 世界観の統一によりファン層の育成にも貢献

06.Logo

06. ロゴデザイン制作・キャッチフレーズ作成

目的: 新ブランド「amour parfum」のCI開発

ターゲット:30~40代のセルフケア志向の女性層

工夫: 統一感と上品なトーンを意識したロゴ・コピー設計

成果:ブランド認知向上に貢献し、複数チャネルに展開中

 

使用ツール: Illustrator/Photoshop

 

担当範囲:ロゴ制作・キャッチコピー作成

amourparfum_logo.jpg

ブランド名「Love Perfume」「amour parfum」は、自身の名にちなんだ造語で命名。

新ブランドのコンセプト設計からCI(コーポレート・アイデンティティ)を開発。

 

設計上の観点では以下を重視しました:

  • 既存ブランドとの世界観の一貫性を意識した配色・書体設計

  • 記憶に残るネーミングとアイキャッチになる視認性の確保

  • 視覚とコピーの連携によるブランド印象の強化

 

ロゴには共通モチーフとしてダイヤモンドと音楽記号をあしらっており、姉妹ブランド間の世界観を統一。(※)ブランドのやわらかさと上品さを兼ね備えたトーンで構築しました。

loveperfume_logo.jpg

(※)アクセサリーブランドロゴ

07.Photo

07. 商品写真撮影・加工

relinge_fitting_1-93.jpg

目的: ランジェリーの質感や着用イメージを伝える商品ビジュアルの制作

ターゲット: 使用感を重視するECユーザー

 

工夫: 高解像度・構図・スタイリングにこだわり、DTPやWeb展開に最適な写真を構成

成果: 商品別の魅力が伝わると好評/Makuakeや特設サイトでも好反応

 

使用ツール: Illustrator/Photoshop

 

担当範囲: 撮影・出演・スタイリング・画像加工・レイアウト編集

DD3FEA51-2BDD-44A0-9B95-7CB7AC7B75E5.JPG
絵コンテ画像.jpg
relinge_fitting_2-95.jpg
relinge_fitting_3.jpg
relinge_portfolio_top.jpg
relinge_fitting_4-75.jpg
relinge_fitting_5.jpg

Makuake・ECサイト用に自社で撮影・加工を実施。
高解像度の着用写真や商品カットにより、ユーザーの使用イメージを的確に伝えることを重視しました。

UX/導線上の観点では以下を重視しました:

  • 色味やトーンを商品ごとに統一し、ページ全体の調和を設計

  • Web掲載とDTP用途の両方に対応できる解像度と構図を確保

  • SNSや特設ページとのクロス展開に耐えうる汎用性を確保

08.PV

08.「リランジェ®︎」PV制作

目的: Makuakeページ用のPR動画で商品の魅力を視覚的に訴求

ターゲット: スマホ・SNS経由で情報収集する動画視聴者

 

工夫: 商品の動的特性や肌触り感を動画で可視化し、感性に訴える編集を実施

成果:

- 自チャンネル平均再生回数よりも+24%up

- プロジェクト紹介として高評価を獲得

 

使用ツール: Adobe Premiere Pro/Illustrator/Photoshop/DOVA-SYNDROME(BGM)

 

担当範囲: 企画構成・撮影・出演・編集・サムネイル作成

Makuakeプロジェクト紹介用のPR動画を企画・構成から編集まで一貫して担当。
映像による着用感・使用感の可視化により、購入意欲を引き出す効果が得られました。

UI/UXの観点では以下を重視しました:

  • 冒頭3秒で惹きつけるシーン構成(CTA誘導を意識)

  • 視覚・音・テンポの調和による感性訴求

  • スマートフォン閲覧での視認性・再生負荷に配慮した編集

HTML/CSS

【挑戦中】HTML/CSSによるWebコーディング学習

HTML/CSSは現在学習中で、基礎の理解を深めながら制作実践に着実に移行・強化しています

実務で活かせるスキルへ昇華することを意識し、日々のアウトプットと検証を重ねています

 

静的ページを順次公開し、簡易コーディングを実務でも対応可能な体制を整えていきます

概要: 静的ページの模写・自社ECサイトのカスタマイズを中心に、HTML/CSSの実践的な学習を継続中

 

目的: Wixやノーコードツールに依存せず、より自由度の高いWeb表現を実現できるスキルの習得を目指す

 

実施内容:

- 複数のレイアウト模写(Flexbox/グリッド対応)や、レスポンシブ対応の基礎演習を習得中

- 自店ECサイトのセクション部分をHTML/CSSで独自に組み直す練習を進行中

 

今後の展望:

- 学習成果を反映した静的Webページをポートフォリオ内に順次掲載予定

- Webデザイン・EC制作の実務でも、簡易なコーディング対応が可能な体制を整備中

Web制作における設計ワークフロー(AI × Figma × HTML)

12年のデザイン経験を基盤に、最新ツールを活用して

ロジカルかつスピーディーにサイトを構築するプロセスを紹介します。

 

※掲載のワイヤーフレームは、機密保持のため一部情報を抽象化・改変して掲載しております

スクリーンショット 2026-01-13 13.48.03-1.png

AI(Relume)とFigmaを横断した、ロジカルな情報設計

Relumeで構築した骨組みをベースに、Figmaでマルチデバイスに最適化した情報体験を再設計しています。

AIを活用して構造構築を迅速化することで、アートディレクターとして最も重要視すべき「ユーザーの視線誘導」や「コンバージョンへ繋がる微調整」にリソースを集中させる、現代的なワークフローを実践しています。

UXの整合性と、ブランド世界観を具現化するグリッド設計

制作実績ページでは、作品が主役となるよう、グリッドと余白をピクセル単位で追求。

 

デスクトップからモバイルまで、情報の優先順位を崩さないレスポンシブ設計を徹底。単なる装飾ではなく、ブランドの信頼感を高めるための「論理的な美しさ」を具現化します。

スクリーンショット 2026-01-13 14.03.28-1.png
スクリーンショット 2026-01-13 20.39.38.png

チーム制作を見据えた、デザインシステムの構築と運用効率化

スタイルガイド(Text/Color Styles)を定義し、属人性を排した設計思考をデータに反映。

コンポーネント化やレイヤー整理を徹底することで「変更に強く、誰が見ても直感的に理解できるデータ構造」を構築しています。

 

将来的なチーム制作やエンジニアとの連携をスムーズにする、システム的なデザイン管理を実践しています。

Future Outlook:

最新ワークフローによる自店サイトのフルリニューアル

現在、本ページで紹介した「Relume × Figma」による設計プロセスを土台に、自店「Love Perfume」公式ホームページのフルリニューアル・HTML化を進行中です。

【本プロジェクトの狙い】

  • デザインの完全制御: Figmaでミリ単位で設計した独自のトーン&マナーを、HTML/CSSコーディングによって細部まで忠実に再現し、より純度の高いブランド体験を提供します。

  • パフォーマンスの最適化: 構造からコードを書き起こすことで、表示速度の向上やSEOの最適化を図り、ビジネス成果に直結する基盤を構築します。

  • ADとしての挑戦: 12年のデザインキャリアに「最新の設計手法」と「実装スキル」を掛け合わせ、企画・設計からアウトプットまでを一貫して統括できる、次世代のアートディレクションの形を追求し続けています。

bottom of page