> BROADCAST INITIATED_

品質重視のWebデザイン

Portfolio 2026

品質にこだわる、 Webデザイン。

QA エンジニアとしての経験を活かし、"動くだけ"ではなく"正しく動く"サイトをつくります。_

お問い合わせはこちら
Editorial
SERVICES_AND_PLANS.DAT [X]

> LOAD SERVICES...

お客様のビジネスに合わせた最適なWeb制作プランをご用意しています。

01
📄

ランディングページ制作

¥100,000~

商品・サービスの訴求に特化した1ページ構成のLP。コンバージョン最大化を意識した設計。

  • 1ページ構成
  • スマホ対応
  • お問い合わせフォーム
  • 公開後2週間サポート
詳しく相談する →
02
🏪

コーポレート・店舗サイト

¥200,000~

レストラン、美容院、クリニック等の店舗・企業サイト。5ページ構成。

  • 5ページ構成
  • スマホ対応
  • お知らせ機能(CMS)
  • 基本的なSEO対策
詳しく相談する →
03
🔧

サイト改善・保守

¥50,000~ / 月

既存サイトのデザインリニューアル、レスポンシブ対応、表示速度改善。

  • デザイン改修
  • スマホ対応化
  • 表示速度の改善
  • 定期的なバックアップ
詳しく相談する →
FILE_MANAGER - C:\WORKS [X]

> DIR /W

VOLUME IN DRIVE C IS POPPINGTREE_SYS

DIRECTORY OF C:\WORKS

Sample
Works

2024 — 2026

作成例

こんなものが作れます、というサンプル例です

新商品プロモーション LP
[01]

LP / デザイン / コーディング

新商品プロモーション LP

新商品のローンチに合わせた1ページ構成のサイト。スクロールに連動するアニメーションと、目を引く位置に「お問い合わせ」ボタンを配置することで、購入・申込に繋がる導線を設計。

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

期間: 2-3週間

詳しく見る →
イタリアンレストラン Bella Cucina
[02]

コーポレート / レスポンシブ / WordPress

イタリアンレストラン Bella Cucina

メニュー写真を大きく配置し、来店意欲を刺激するレストランサイト。アクセス案内にGoogleマップを埋め込み、店舗情報まで一気通貫で見せる構成。

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

期間: 3-4週間

詳しく見る →
さくら歯科医院 公式サイト
[03]

医療 / アクセシビリティ / SEO

さくら歯科医院 公式サイト

年配の患者さんにも使いやすい、文字サイズ・配色・導線にアクセシビリティ配慮を行った歯科医院サイト。診療メニュー、スタッフ紹介、お問い合わせフォーム、診療時間・アクセス案内を含む5ページ構成。

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

期間: 3-4週間

詳しく見る →
新商品プロモーション LP

LP / デザイン / コーディング

新商品プロモーション LP

新商品のローンチに合わせた1ページ構成のサイト。スクロールに連動するアニメーションと、目を引く位置に「お問い合わせ」ボタンを配置することで、購入・申込に繋がる導線を設計。

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

期間: 2-3週間

詳しく見る →
イタリアンレストラン Bella Cucina

コーポレート / レスポンシブ / WordPress

イタリアンレストラン Bella Cucina

メニュー写真を大きく配置し、来店意欲を刺激するレストランサイト。アクセス案内にGoogleマップを埋め込み、店舗情報まで一気通貫で見せる構成。

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

期間: 3-4週間

詳しく見る →
さくら歯科医院 公式サイト

医療 / アクセシビリティ / SEO

さくら歯科医院 公式サイト

年配の患者さんにも使いやすい、文字サイズ・配色・導線にアクセシビリティ配慮を行った歯科医院サイト。診療メニュー、スタッフ紹介、お問い合わせフォーム、診療時間・アクセス案内を含む5ページ構成。

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

期間: 3-4週間

詳しく見る →

3 FILE(S) FOUND.

_

SKILLS_AND_TECH.SYS [X]

スキル・技術

スキル・技術

できること

  • レスポンシブWebサイト制作（PC・タブレット・スマホ対応）
  • ランディングページ制作（コンバージョン重視の設計）
  • WordPressサイト構築・テーマカスタマイズ
  • デザインカンプ作成からコーディングまで一貫対応
  • 既存サイトのリニューアル・表示速度改善

使うツール・技術

Figma UI/UXデザイン レスポンシブ設計 HTML5 CSS3 JavaScript WordPress Git / GitHub SEO基礎

QA由来の強み

1

テスト観点での品質チェック

2

クロスブラウザ対応

3

アクセシビリティ検証

4

パフォーマンス最適化

EXECUTION_FLOW.BAT [X]

制作の流れ

Process

1
Step 01

ヒアリング

ご要望・目的・ターゲットをお伺いします。Google Meet または メールで対応（他ツールもご相談可）。お見積もりもこの段階でお出しします。

2
Step 02

デザイン

ワイヤーフレーム → デザインカンプを作成。Figmaで共有し、フィードバックを反映します。修正は2回まで無料。

3
Step 03

コーディング・実装

デザインを忠実にコーディング。レスポンシブ対応、ブラウザテスト（QA経験を活かした品質チェック）込み。

4
Step 04

納品・公開

テスト完了後、サーバーへアップロード。公開後2週間は無料で軽微な修正に対応します。

01

ヒアリング

ご要望・目的・ターゲットをお伺いします。Google Meet または メールで対応（他ツールもご相談可）。お見積もりもこの段階でお出しします。

02

デザイン

ワイヤーフレーム → デザインカンプを作成。Figmaで共有し、フィードバックを反映します。修正は2回まで無料。

03

コーディング・実装

デザインを忠実にコーディング。レスポンシブ対応、ブラウザテスト（QA経験を活かした品質チェック）込み。

04

納品・公開

テスト完了後、サーバーへアップロード。公開後2週間は無料で軽微な修正に対応します。

> SEQUENCE COMPLETED. AWAITING INPUT...

ABOUT_ME.TXT [X]

> INITIALIZING PROFILE...

Poppingtree（ポッピングツリー）は、
横浜を拠点とするWebデザイナーです。
QAエンジニアとしてWebの品質保証に携わってきた経験を活かし、
「ユーザーにとって本当に使いやすいとは何か」を考え続けてきた視点で、
すべてのデバイス・すべてのユーザーに正しく届くサイトを制作します。

> DESIGN_MODULE

FIGMA, ADOBE_XD, PHOTOSHOP

> DEV_MODULE

REACT, TYPESCRIPT, TAILWIND

SYSTEM_STATUS.EXE [X] 
      .---.
    /       \
   ¥ O  O    ¥
   |  <      |
    \ --    /
     '-----'
    /|     |\
   / |     | \

> TECHNICAL_PROFICIENCY

UI/UX DESIGN██████████
REACT TS████████░░
TAILWIND█████████░
INTERACTION███████░░░
NEXT JS███████░░░
NODE JS█████░░░░░
LOCATION: YOKOHAMA STATUS: ONLINE
★ PLAYER STATUS ★ ● ONLINE
Poppingtree
Lv.47

POPPINGTREE

WEB DESIGNER

Former QA Engineer

HP
470
MP
320
EXP
EXP+
PROFILE

QAエンジニアとしてWebの品質保証に従事。
「ユーザーにとって本当に使いやすいとは何か」を
考え続けてきた経験がデザインの原点。
すべてのデバイス・すべてのユーザーに
正しく届くサイトを制作します。

▶ SKILL TREE

▶ SPECIAL ABILITIES

品質重視

徹底的な品質チェック

ユーザー目線

テスト観点のUI/UX

コミュニケーション

丁寧なヒアリング

自己紹介

Studio

Poppingtree（ポッピングツリー）は、横浜を拠点とするWebデザイナーです。QAエンジニアとしてWebの品質保証に携わってきた経験を活かし、「ユーザーにとって本当に使いやすいとは何か」を考え続けてきた視点で、すべてのデバイス・すべてのユーザーに正しく届くサイトを制作します。

Design

  • Art Direction
  • UI/UX Design
  • Interaction

Development

  • Frontend Engineering
  • Creative Coding
  • Web Animations

自己紹介

Poppingtree（ポッピングツリー）は、横浜を拠点とするWebデザイナーです。QAエンジニアとしてWebの品質保証に携わってきた経験を活かし、「ユーザーにとって本当に使いやすいとは何か」を考え続けてきた視点で、すべてのデバイス・すべてのユーザーに正しく届くサイトを制作します。

Design Systems WebGL / 3D

UI/UX DESIGN

REACT TS

TAILWIND

INTERACTION

NEXT JS

NODE JS

QUERY_DATABASE.EXE [X]

よくあるご質問

FAQ

デザイン段階で2回、コーディング後の軽微な修正は1回まで無料で対応いたします。追加の修正が必要な場合は、別途お見積もりいたします。
LPで約2週間、5ページ程度のサイトで3〜4週間が目安です。お急ぎの場合はご相談ください。
はい、対応可能です。オリジナルテーマでの制作、または既存テーマのカスタマイズも承ります。
基本的にオンライン（Google Meet）での打ち合わせとなります。他ツールをご希望の場合もご相談ください。横浜近郊であれば対面も可能です。
納品後2週間は無料で軽微な修正に対応します。継続的な保守・運用サポートをご希望の場合は、月額プランをご用意しています。
CONTACT_INFO.TXT [X]

お問い合わせ

お気軽にご相談ください。
内容を確認次第、ご連絡いたします。

Email

contact@poppingtree.jp

対応時間

平日 10:00〜18:00

所在地

神奈川県 横浜市

TRANSMIT_MESSAGE.EXE [X]

送信はプライバシーポリシーに同意したものとみなされます。

より詳しくご相談・お見積もりをご希望の方

アンケート形式でじっくりお伺いします（全12問・約3分・任意項目はスキップ可）

DESIGN | Cyberpunk