PORTFOLIO / 2026

唯

デザインから実装まで一気通貫で対応する、AI活用フルスタックエンジニア。業務効率化ツールの構築を得意としています。

制作者
職種
AIエンジニア / フルスタック開発者(元Webデザイナー)
得意領域
Claude APIを活用した業務自動化・AIツール開発、要件定義から本番デプロイまでの一気通貫対応
スキル
Next.jsTypeScriptTailwind CSSSupabase / pgvectorClaude APIVercelGitHub ActionsVitestPhotoshopFigmaCanvaLP / バナー制作

PROFILE唯について

Webデザイナーとしてのキャリアは、「デザインをするのが好き」というシンプルな気持ちから始まりました。AI分野に興味を持ったのは、今まさに市場で注目されている領域だからです。デザインで培った視点に、AIを活用した実装力を掛け合わせることで、見た目だけでなく実際に機能するものづくりを目指しています。

仕事で特に大切にしているのは、丁寧なコミュニケーションと納期を守ることです。要件のすり合わせを丁寧に行い、進捗をこまめに共有しながら、約束した期日には確実に成果物をお届けします。

DESIGN NOTE — 001

EC商品画像・広告バナー

自主
制作

楽天・Amazonなどのショッピングサイトに載せる商品画像と、Web広告バナーを想定して制作した作品です(練習作品)。

工夫した点:ターゲットや目的に合わせたデザイン設計を意識し、「伝わる・行動につながる」ビジュアルを目指しました。商品ごとに、色展開・使うシーン・選ぶ理由など、見る人が知りたいことが一目で伝わる構成にしています。

美容液リップのメイン商品画像。モデル写真と4色のリップを並べたピンク基調のデザイン
美容液リップ — メイン画像(大人の女性向け)
期間限定のいちご尽くしパフェを訴求するカフェのSNS広告バナー
期間限定パフェ — SNS広告バナー
ギフトボックスと木製ブロックの商品画像。記念日フォト・成長記録などの用途をチェックリストで表示
木製ブロック — ギフト訴求
木製ブロックのカラー展開(Natural・Pink・Blue)を紹介する商品画像
木製ブロック — カラー展開
子どもが木製ブロックで遊ぶ写真と月齢フォトの使用例を並べた商品画像
木製ブロック — 使用シーン
バナー制作EC商品画像SNS広告

DESIGN 002美容室LPデザイン(テンプレート横展開)

DESIGN NOTE — 002

Lueur 店舗LP

自主
制作

架空の髪質改善サロン「Lueur」のLPをデザインし、テンプレート化して渋谷・吉祥寺・横浜・表参道の4店舗分のLPに横展開。ターゲットは仕事帰りに通いたい20〜30代の会社員。お悩みへの共感から、こだわり・メニュー・スタッフ・お客様の声・予約までの10セクションで構成。

工夫した点:AIで作った初版をデザイナー目線で見直し、一番の強み「髪質改善」をファーストビューで目立たせる、キャッチコピーの改行位置をそろえる、ボタン色をブランドの木の質感に合うブラウンに変える、8か所あった予約ボタンを4か所に絞る、セクションごとにばらばらだった左端をそろえるなど、訴求の優先順位と読みやすさを調整。店舗データ(JSON)を1つ追加するだけで新しい店舗ページが作れる仕組みにした。

Lueur渋谷店LPのファーストビュー
渋谷店LP — ファーストビュー
Lueurの店舗選択ページ。4店舗のLPへのリンクが並んでいる
店舗選択ページ — 1つのテンプレートから4店舗に展開
LPデザインNext.jsTypeScriptClaude APIVercel

案件 001社内文書検索AI(RAG)

DELIVERY NOTE — 001

社内文書検索AI

検収
済

社内文書が散在し検索性が低いという課題に対し、自然言語で問い合わせられる文書検索AIを構築。

工夫した点:pgvectorによるベクトル検索基盤とClaude APIを組み合わせ、根拠付きで回答できるRAGシステムを実現。要件定義から本番デプロイまで完走。

社内文書検索AIで質問に対する回答と参照元PDFが表示されている画面
質問応答画面 — 回答と参照元文書(出典付き)
Next.jsTypeScriptSupabasepgvectorClaude API

案件 002ブログ記事自動生成システム

DELIVERY NOTE — 002

ブログ記事自動生成システム

検収
済

ブログ記事の作成・投稿作業を自動化し、コンテンツ運用の工数を削減。

工夫した点:GASからClaude APIで記事を生成し、WordPress REST API経由で自動投稿する一連のパイプラインを構築。API連携部分のエラーハンドリングを重ね、安定稼働するフローに仕上げた。

GASのコードエディタで記事生成用プロンプトを設計している画面
GAS — 記事生成プロンプトの設計(トーン・文字数・出力形式を厳密に指定)
GASClaude APIWordPress REST API

案件 003美容室向けLINE公式アカウントBot

DELIVERY NOTE — 003

line-bot-salon

検収
済

美容室向けのLINE公式アカウントBot。お客様からの質問にClaudeがFAQをもとにその場で自動回答し、店舗運営の一次対応を効率化。

工夫した点:FAQに無い内容は推測で答えず問い合わせ案内に誘導する設計に加え、回答ごとの確信度をAIが自己判定し、確信度が低い場合はオーナーへLINEで自動通知する仕組みを構築。Basic認証付きの管理画面からFAQ・メニュー・お知らせ配信・会話ログまで一括管理できる。

line-bot-salon 管理画面のFAQ管理一覧
管理画面 — FAQ管理
LINEトーク画面。確信度が低い回答をオーナーへ自動通知している様子
LINEトーク — 確信度判定&オーナー自動通知
Next.jsTypeScriptSupabaseLINE Messaging APIClaude API

案件 004大規模ナレッジ検索AI(RAG+Slack bot)

DELIVERY NOTE — 004

rag-document-search

検収
済

コンサルティング会社向けを想定した大規模ナレッジ検索システム。文書検索(RAG)+Slack bot+部署別アクセス制御+監査ログまでを実装。

工夫した点:セクション単位のチャンキング設計でRecall@5=100%を達成。RLSによる部署別アクセス制御をアプリ層でも徹底し、質問ログを監査可能な形で記録。誤って機密文書を取り込んだ場合に備えたredact機能や、月次レポートの自動Slack通知も実装。

Slack bot回答画面。出典付きで質問に自動回答している様子
Slack bot — 出典付き自動回答
Next.jsTypeScriptSupabase / pgvectorVoyage AIClaude APISlack APIVercel

案件 005AI搭載売上分析ダッシュボード

DELIVERY NOTE — 005

sales-dashboard

検収
済

アパレルEC向け。毎月3時間かかっていたExcelでの売上レポート作業を、CSVをアップロードするだけで完了させるダッシュボード。3大KPI(売上・粗利・リピート率)・月次推移・カテゴリ別・SKU別の分析と、AIによる分析コメントを自動表示。

工夫した点:Excelでの集計と突合し、全KPIが完全一致することを検証。納品前チェックで二重計上や1,000件の取得上限などの数字のズレを見つけて解消した。CSVの正規化とテスト13件をCIで自動実行し、テスト合格時のみ本番デプロイする仕組みを構築。ROI試算と、予算内に収まる運用プランの提案まで実施。

売上分析ダッシュボード。売上・粗利・リピート率のKPIカードと月次売上推移グラフ
ダッシュボード — 3大KPIと前月比・月次推移
AI分析コメント。売上のサマリーとアクション提案が表示されている様子
AI分析 — サマリーとアクション提案
Next.jsTypeScriptRechartsSupabaseClaude APIVitestGitHub ActionsVercel