WORKS · Web制作・デザイン
TATSUYA STYLE 公式サイト 屋号の立ち上げから公開準備まで自作
このサイトそのものを、ロゴの再構成から実績の原稿づくり、3Dのヒーロー、GAS事例の特集、公開前の個人情報チェックまで自作しました。AIを制作パートナーに、2日間で16ページを組み上げています。
課題
屋号を立ち上げるにあたり、AI活用の実績を「見る人に分かりやすく」「信頼できる形で」見せる場が必要でした。守秘義務のある案件は、特定につながらない書き方で載せること。見本にした建設会社サイトと同じ水準に仕上げること。そして、公開後に自分の手で直し続けられることが条件でした。
取り組んだこと
- 見本サイトの設計規約（紺×金、明朝の見出し、罫線で区切る余白）を読み解き、屋号の色に置き換えて再構成
- ロゴの画像からモノグラムを切り出して透過化し、縦組みを横組みに組み直し。ファビコンとOGP画像も同じ元から生成
- 案件フォルダをAIに読み解かせて実績の原稿を下書きし、大学案件は特定につながる語を伏せて一般名称に置換
- 5つの専門分野を表す3Dのヒーロー（three.js）。3Dが使えない環境では5枚のカードに自動で切り替わる
- GAS業務自動化の8事例を目玉として特集ページ化。「人がやること」と「自動でやること」を色で分けて図解
- 別のAIにレビューと改修を依頼し、写真調のビジュアル、アクセシビリティ、OGP・構造化データを取り込み
- 氏名・所在地・連絡先の置換、見出しの句点、字下げなどの表記調整を再実行できるスクリプトにまとめ、残存チェックを自動化
- 背景の網目と信号のアニメーションは、1コマンドで外して元に戻せる可逆設計
成果
16ページトップ・GAS特集・実績一覧・実績詳細12・サイトマップ・プライバシー
12件掲載した実績・自主制作・提案（このサイトを含む）
8事例GAS業務自動化の特集。人と自動の分担を図解
0件公開前チェックで残った個人を特定する情報
こだわった点
「作ったものは戻せる」「隠すべきものは仕組みで守る」の2点を徹底しました。背景や装飾は切り替えで外せ、匿名化は実行のたびに機械的に検査します。3Dも背景の動きも、動かない環境で内容が欠けないように作っています。
このサイトは公開準備中です。掲載の画面はこのサイトのデザインをもとにした制作イメージです。