Web制作

架空のブランドを題材にした Web サイトの制作例です。デザインからコーディング、動きまで、一つずつ作り込んでいます。

01テーマ: ポップ

こんだてガチャ — 献立アプリ

架空の献立アプリのサービス紹介ページ

クリーム色の紙に太い墨線、ずらした影、5色のキャンディカラー。ステッカー帳のようなサービス紹介ページです。目玉はページの中で実際に回せるガチャ。ハンドルが回り、カプセルが揺れ、出てきた1個がパカッと開いて今夜の献立を教えてくれます。

見どころ

  • CSS と React で動くガチャ。回る・揺れる・落ちる・開く
  • 月払い / 年払いの料金切り替えと、details を使った FAQ
  • インライン SVG で描いた食べ物ステッカーと、CSS のスマホモック
  • スマホではヒーローを過ぎると現れる追従ボタン

02テーマ: 和モダン

湯宿 月白 — 白霧谷温泉

架空の温泉旅館の公式サイト

スクロールすると稜線の向こうから月がのぼる夜の谷。紅葉が舞い、本文は縦書きで組んでいます。客室では障子が左右に開いて窓の外の景色が現れ、お品書きは右から左へ流れ、四季のセクションは季節ごとに色と舞うもの(桜・蛍・紅葉・雪)が変わります。

見どころ

  • 見出し・お品書き・ヒーローを縦書きで組み、palt で字詰め
  • 星・のぼる月・三重の稜線・流れる霧による多層 SVG パララックス
  • ホバーやタップで開く障子の奥に、部屋ごとの客室写真
  • 配色と舞うものを切り替える、アクセシブルな季節タブ

03テーマ: かわいい

ふくふくベーカリー — 街のパン屋さん

架空のパン屋さんのホームページ

いちごミルクのピンク、バターの黄色、ココア色のやわらかい線。ストライプのひさしの下に、顔のあるパンが並ぶホームページです。ヒーローのかごのパンはつつくと「むぎゅ」とつぶれてしゃべり、焼きあがり時間の表は見ている人の時計から次に焼けるパンまでをカウントダウン。メニューからトレーにのせて、受けとり日と時間を選ぶおとりおき予約もできます。

見どころ

  • インライン SVG で描いた、同じ顔をもつ11種類のパン
  • つつくと伸び縮みして、ふきだしでしゃべるヒーローのパン
  • 見ている人の時計で動く、焼きあがりタイムテーブルと営業中表示
  • カテゴリ絞りこみ、個数と合計が出るトレー、受けとり日の選択

掲載しているブランド・店舗・施設・人物の名前はすべて架空のものです。各サイトは静的な HTML / CSS / JavaScript だけで動いています。