Sho Yamazaki

IN PRACTICE / 制作事例

現場の言葉を、
伝わる体験へ。

ソムリエの経験を軸に、AIとともに再設計した
山崎翔の公式サイト。

このサイトも、現場の気づきを形にする活動の一つです。山崎翔が伝えたい人物像を定め、ChatGPTの制作支援を使いながら、情報の順序・見せ方・操作を磨き込んでいます。

人物の信用スマホから設計AIと共同制作
公式サイトのTOPを見る

伝えたいことが、
迷わず届くように。

ソムリエとして働く写真と店舗の実写を、TOPの入口に。「現場を知る。仕組みをつくる。」を短く伝え、人物、経験、プロダクトへと自然に読み進められる順序にしました。

言葉
仕事の軸を、一つのメッセージに。
写真
TOPは仕事の実写。人物紹介は小さな写真と名前を横並びに。
動き
必要な場面だけに軽いフェード。現場から仕組みへつなぐ線画は、プロダクトページへ。

比較は390px幅の実際の画面です。変更後は公開前のリニューアル案。効果の数値は未計測です。

変更前の公式サイト。写真に文字を重ね、見出しの末尾が改行されている390px表示。
変更前 / 写真と紹介を一つの画面に集約
変更後の公式サイト。仕事と店舗の実写、円形文字、短いメッセージ、活動への入口を配置した390px表示。
変更後 / 仕事の実写と、活動への入口

経験を渡す。
一緒に、形にする。

伝えるべき内容と制作の判断を、現場の当事者とAIの往復で具体化しています。

山崎 翔 / 企画・判断

現場を知る人が、
方向を決める。

  • ソムリエ・運営者としての経験を提供
  • 公式サイトの目的と人物像を定義
  • 写真の大きさ、言葉、順序を確認
  • 公開する内容を最終判断

ChatGPT / 制作支援

意図を受け取り、
体験へ落とし込む。

  • 情報の整理と、原稿・構成の提案
  • 画面・線画アニメーションの制作
  • スマホ・PC表示と導線を整備
  • 操作・表示・既存データ保護の検証

デザインはANDmの写真・余白・文字の見せ方を参考にしています。写真は本人・店舗の既存素材、正式なプロダクトロゴもそのまま使用。英字フォントはCormorant Garamond(SIL Open Font License)です。

見た目の先に、
伝わる仕組みを。

01

信用の入口を、先に。

ソムリエとしての仕事、Tsuki-akariの運営、CAMOS TOKYOでの経験。実際の活動から人物を理解できる順序に。

人物紹介を見る
02

考え方を、触れる形に。

現場から仕組みへの線画と、空席案内・来店後フォローの説明用デモ。言葉だけでは伝えにくい流れを可視化。

プロダクトの紹介へ
03

毎日使う、スマホから。

読みやすい文字、押しやすいボタン、軽い動き。動きを減らす設定にも対応し、小さな画面での体験を優先。

開発の考え方を見る

つくった背景も、
ひらいていく。

店舗の経験をどうアイデアにするか。AIを使ってどう形にするか。本人のnoteでも、その背景を発信しています。

AIとサービス開発エンジニアではないソムリエが、AIを使ってWebサービスを作れるようになった話

AKISEKI・TSUGIVOの一般登録を開始しました。FREE(月額0円)でご利用いただけます。この制作事例のデモは説明用で、登録やメール送信を行いません。

ワインのこと。お店の未来のこと。

ソムリエと運営者の視点から、ご相談をお聞かせください。

相談する