Web制作

Webサイトの
制作実績

構成の設計から、デザイン、実装、公開後の運用まで。担当したWebサイトと業務システムを掲載しています。

01

ブランドサイト

THE ROSA COFFEE ウェブサイト

クライアント
THE ROSA COFFEE
サイト
rosa-coffee.com
公開
2026

宮崎のスペシャルティコーヒー専門店のウェブサイトです。カフェと焙煎所の店舗情報、取り扱う豆、直接取引する生産者、業務用卸の導入事例、代理店販売を1つのサイトにまとめ、日本語と英語の2言語で構築しました。

THE ROSA COFFEE公式サイトのトップページ
rosa-coffee.com/実際の公開画面&samble

SCOPE

担当領域

  1. 01

    情報設計・サイト構成

  2. 02

    全ページのデザインと実装

  3. 03

    日英2言語対応

  4. 04

    豆・生産者・導入事例のコンテンツ設計

  5. 05

    問い合わせフォームの実装

  6. 06

    オンラインストア・Instagramとの連携

  7. 07

    メタ情報・OGP・構造化データの設定

STACK

使用技術

  • Next.js
  • TypeScript
  • 日英2言語

OUTCOME

公開後の状態

  • 店舗情報と業務用の窓口を1サイトに集約
  • 豆と生産者の情報を随時更新できる構成
  • ページ単位のメタ情報と構造化データを設定

02

業務システム

焙煎・受注管理システム

クライアント
THE ROSA COFFEE
公開
2026

受注から焙煎、発送までを1つの画面で追う社内システムです。取引先が発注コードでログインして発注するポータルと、スタッフ用の管理画面を、公開サイトと同じアプリケーションの中に組み込みました。掲載している画面はサンプルデータです。

焙煎・受注管理システムのダッシュボード画面
ダッシュボード/サンプルデータ&samble

SCOPE

担当領域

  1. 01

    受注から発送までの業務フロー設計

  2. 02

    焙煎担当・発送担当で切り替わる作業画面

  3. 03

    納品日から逆算する焙煎スケジュール

  4. 04

    歩留まりから必要な生豆を算出する計算ロジック

  5. 05

    取引先向けの発注ポータル

  6. 06

    見積・納品書・請求書の発行とPDF出力

  7. 07

    生豆・店舗在庫の棚卸し管理

STACK

使用技術

  • Next.js
  • TypeScript
  • Supabase

OUTCOME

公開後の状態

  • 受注・焙煎・発送の進行状況を1画面で確認できる状態
  • 取引先の発注が、そのまま受注一覧に入る導線
  • 数量を焙煎後kgに統一し、必要な生豆を自動算出

03

コーポレートサイト

OTSUNAGI コーポレートサイト リニューアル

クライアント
OTSUNAGI株式会社
サイト
otsunagi.co
公開
制作中

BtoBウェビナー支援会社のコーポレートサイトのリニューアルです。デザインに合わせてWordPressテーマを新規開発し、サービス、メンバー、事例、セミナーをそれぞれカスタム投稿タイプとして設計しました。現在、公開に向けて制作を進めています。

制作中のOTSUNAGI株式会社コーポレートサイト(リニューアル版)のトップページ
リニューアル版/制作中の画面&samble

SCOPE

担当領域

  1. 01

    既存サイトの構成整理とページ設計

  2. 02

    オリジナルWordPressテーマの新規開発

  3. 03

    カスタム投稿タイプ4種の設計

  4. 04

    事例の絞り込み用タクソノミー設計

  5. 05

    サービス詳細5種のテンプレート実装

  6. 06

    資料ダウンロード・問い合わせ導線の設計

  7. 07

    1440〜320pxのレスポンシブ実装

STACK

使用技術

  • WordPress
  • オリジナルテーマ(PHP)
  • レスポンシブ実装

STATUS

公開後の状態

  • サービス・事例・メンバーを社内で追加できる構成
  • 事例を業種とカテゴリーから絞り込める設計
  • 5つの画面幅で表示を確認しながら調整中

04

ポートフォリオサイト

TROY ポートフォリオサイト

クライアント
Kuroki Ryota (TROY)
サイト
troy-loss.com
公開
2026

映像作家 Kuroki Ryota のポートフォリオサイトです。1990年代のパソコンのデスクトップ画面を模したイントロを入口に、ミュージックビデオ、コマーシャル、ドキュメンタリー、ファッションの4カテゴリで絞り込める作品アーカイブを構築しました。

映像作家TROYのポートフォリオサイトの作品一覧
troy-loss.com/実際の公開画面&samble

SCOPE

担当領域

  1. 01

    コンセプト設計とUI設計

  2. 02

    デスクトップ画面風イントロの実装

  3. 03

    カテゴリ絞り込み付き作品アーカイブ

  4. 04

    動画埋め込みと表示速度の調整

  5. 05

    レスポンシブ対応

  6. 06

    独自ドメインと公開環境の構築

STACK

使用技術

  • Next.js
  • TypeScript

OUTCOME

公開後の状態

  • 作品を4カテゴリで絞り込める構成
  • 新しい作品を追加していける設計
  • スマートフォンからも同じ導線で閲覧できる状態

LET’S TALK

次の一歩を、
一緒に考える。

相談内容が固まっていなくても構いません。いま困っていることを伺い、次に確認することから整理します。

メールで直接送る場合info@andsamble.com

入力内容はメール転送サービス FormSubmit を経由して info@andsamble.com へ送信されます。