TSUDOWACLIENT SERVICES / TETSU WORKS
← 制作例一覧

SELF-INITIATED DEMO / 自主制作

KISSA — Coffee Website高級カフェ公式Webサイト

OVERVIEW

余白と静けさで伝える、一杯のための目的地。

Next.jsReactTypeScriptCSS
Live Demoを操作する

架空店舗の自主制作。来店予約・実店舗案内は行いません。

MAIN VISUAL / LIVE DEMO
KISSAの実装済みDesktop画面
実際に操作できる自主制作デモ
SCOPE
Design + Build + QA
EST. DELIVERY / 納期目安
7〜14営業日
PRICE GUIDE / 参考価格
50,000円〜
VISUAL DIRECTION

訪れる前に、空気感まで。

店舗の温かさと、コーヒーの質感を伝える写真構成。

木の家具と窓からの自然光が温かい架空カフェの店内
SPACE / 店舗の世界観を伝える
ラテアートのコーヒーと焼き菓子
CRAFT / 一杯と過ごす時間

AI生成の架空店舗・メニューのイメージです。

ASSUMED CLIENT BRIEF

想定依頼

新規オープンするカフェの世界観とメニューを伝える公式サイトを制作したい。

CHALLENGE

制作上の課題

雰囲気を伝えながら、メニューに迷わずたどり着けること。

SOLUTION

解決のための実装

大きなタイポグラフィとローカルのグラフィック、種類別メニューを組み合わせました。

DESIGN CONCEPT

制作コンセプト

静かな朝、木漏れ日、一杯の余韻。紙のような色と深いブラウンで編集。

RESPONSIVE DESIGN

画面ごとの最適化

PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。表や操作UIは画面幅に合わせて配置します。

ひとつの体験を、どの画面でも。

実際のデモを各画面幅で撮影したプレビューです。

高級カフェ公式Webサイト / Desktop Preview
Desktop Preview
高級カフェ公式Webサイト / Tablet Preview
Tablet Preview
高級カフェ公式Webサイト / Mobile Preview
Mobile Preview
TECH STACK / 使用技術

Next.js / React / TypeScript / CSS

対応範囲

設計・デザイン・実装・内部QA・ドキュメント整理

制作期間目安

7〜14営業日

参考価格

50,000円〜

実装した機能
  • ドリンク / フード切り替え
  • 店舗コンセプト・営業時間の提示
  • モバイル専用の縦レイアウト
DELIVERABLES / 納品可能物
  • ソースコード・設定ファイル
  • 起動・更新手順のREADME
  • 画面仕様・検証項目一覧
QA内容・確認項目
  • PC / Tablet / Mobile表示
  • キーボード操作・コントラスト
  • リンク・入力・エラー状態

参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。

Related Services / 関連カテゴリ

Webサイト制作HTML / CSS / JavaScriptレスポンシブ対応デザイン / コンテンツ制作
MESSAGE-ONLY OK

メッセージだけでも、進められます。

仕様確認・進捗共有・修正確認・納品まで、クラウドソーシング上のメッセージを中心に対応。Zoom / Google Meetは必須ではありません。

相談内容をまとめる
A GOOD PLACE TO START / TETSU WORKS

つくりたいものを、
聞かせてください。

まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。

相談内容を入力する ↓
まずは文章で。
打ち合わせの前に、相談できます。
  1. 01相談を送信
  2. 02内容を確認
  3. 03メールで返信
  4. 04合意して制作開始

金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。

案件サイトからのご相談は、そのサービス内メッセージでも進められます。

YOUR NEXT PROJECT必須はお名前・メール・ご相談内容
01 何を相談したいですか？ 未定でも大丈夫
02 いま、考えていること

困っていること、つくりたいものを自由に。10〜2,000文字。秘密情報・パスワードは入力しないでください。

予算・希望時期・参考資料を添える 任意

予算・時期はご希望の目安です。制作範囲を確認してお見積もりします。

03 お返事先

送信内容はお問い合わせ対応のために利用します。

受付状況を確認しています。

案件サイトのメッセージで相談したい方へ

入力内容をコピーして、ご利用中のサービスへ貼り付けられます。ここからは送信しません。