Mock

現在試作・検証中のアイデアをまとめたページです。
設計途中のメモなどを公開し、ブラッシュアップしていく過程を共有します。

Webサイト

業種毎の仮想サイトシリーズ。予約・店舗紹介・講座販売といった異なるゴールを想定し、画面デザインをより使いやすく整え、情報の配置や流れを分かりやすく可視化します。

  • 信頼感と親しみやすさの両方が伝わるよう、デザインの基本ルールを試作
  • 「予約」「注文」「申し込み」などのわかりやすいボタン導線の確保
  • 将来の更新作業を見据えて、ページを部品ごとに分けて設計
    CMSでの運用や、ノーコードツールとの連携にも対応しやすい構成です。
鍼灸院予約サイトのモック画像

鍼灸院オンライン予約

初めての来院でも安心できるよう、施術方針と症状別メニューを一目で把握できるレイアウトに。柔らかい配色と口コミ導線で信頼感を補強します。

特徴

  • 診療カレンダーと連動した即時予約フォーム
  • 症状タグで最適なメニューをレコメンド
  • スタッフ紹介をカルーセル表示で整理

使用技術

  • HTML / CSS
  • JavaScript(モーダル・カルーセル)
  • Google Calendar API(連携想定)

その他プロジェクト

YouTubeやDiscordなどさまざまなプラットフォームでの展開を想定したプロジェクトです。

編み物講座のモック画像

編み物オンライン

初回無料、2回目以降ワンコインレッスン想定など気軽に始められる場を提供。
w/ピクニック、w/デイキャンプなど、オフ会開催も想定

特徴

  • 習熟度に合わせたカリキュラム
  • 質問対応を想定したFAQ・チャット導線
  • 制作レポートをギャラリー表示で共有

使用技術

  • HTML / CSS / SCSS
  • GSAP(スクロールアニメーション)
  • Memberstack(会員管理想定)
動画る奏でるのモック画像

動画る奏でる|中高生

中高生向けに、楽器演奏と動画企画を組み合わせたセッション型プロジェクトを想定しています。

特徴

  • 弾いてみた(ピアノ・ギター)
  • 叩いてみた(ドラム)
  • それぞれのセッション

使用技術

  • 奏でたい楽器、曲
オンライン学習塾のモック画像

オンライン学習塾|小中学生

学年別の学習ロードマップと進捗管理をセットにした、学習塾のオンライン運営を想定したサイト構成を検証しています。

特徴

  • 学年別のコースと学習スケジュールを可視化
  • 受講者の進捗に合わせた課題通知
  • 講師への質問フォームと面談予約導線

使用技術

  • Next.js(SSG想定)
  • Notion API(教材管理想定)
  • Stripe(定期課金想定)

案件管理フロー構築サービス

YouTubeショート動画をつくるとき、「依頼のやり取りがややこしい…」「素材がどこにあるかわからない…」そんな経験はありませんか?

動画制作はアイデアや撮影に集中したいのに、編集やファイル整理に時間を取られてしまうのはもったいないものです。

依頼〜編集〜承認〜納品までの流れを整理する仕組みを構築します。

YouTubeサムネイル

フォントや色づかい、被写体のサイズを変えて、クリックされやすいデザインをテスト中。

縦動画・横動画どちらでも見やすいように、大事な部分が隠れないエリアを設定。

タイトル文字の見えやすさも意識して、いくつかのレイアウトを試しています。

AI素材+実写素材のミックスも実験中。遊び心を入れつつ、新しい可能性を探っています。