「あ、忘れた！」をなくす。高原の旅をもっと快適にする、自分専用のスマート旅行しおり。
最新の生成AI（v0）を開発パートナーとして全面的に活用し、企画・ディレクションからデプロイ（公開）までをスピード重視で一気通貫して制作した、軽井沢旅行特化型の多機能Webアプリケーションです。
プログラムコード（Next.js / Tailwind CSS）自体の記述はAIのパワーを最大限に引き出しつつ、制作者自身が「ユーザーの課題解決（軽井沢特有の気候への対策や、LINEでの手軽な共有）」に集中してプロンプト（指示文）を細かくコントロールすることで、ハイクオリティな機能の実装とバグのない堅牢なシステムを短期間で実現しました。
通常の持ち物管理だけでなく、気温の変化が激しい高原ならではの「軽井沢モード」や、行きたい場所を自由にカスタマイズできる「観光ナビ機能」を搭載。さらに、作成した旅のしおりをそのまま友人にLINEで共有できる、実用性を重視したモダンな仕様となっています。
🌲 ワンクリック「軽井沢モード」
ONにすると、防寒着や雨具など、高原の旅に必須の持ち物アイテムが自動的にリストへ追加されます。同時に、画面が軽井沢の自然をイメージした爽やかなグリーンベースのデザインへと美しく切り替わります。
📂 複数リストの保存・呼び出し・複製
「2026年 夏の軽井沢」「家族旅行」など、複数の旅行リストを名前をつけて保存可能。過去のリストを複製して新しいリストを作ることもできます。データはLocalStorageを活用し、ブラウザを閉じても自動保存されます。
🗺️ カスタム編集付き「軽井沢観光ナビ」
画面下部に固定されたナビメニューから、主要観光地の公式ページへ1タップでアクセス。さらに、ユーザーが自分で好きなスポット名とURLを入力して、オリジナルのナビゲーションリストを自由に追加・削除できます。
💬 爆速LINE共有機能（データ連動）
「LINEで友達に送る」ボタンを押すだけで、現在の持ち物やスケジュールデータをURLに埋め込んで送信可能。受け取った友達の画面でも、全く同じリスト構造やスケジュールが一瞬で再現されます（※プライバシーに配慮し、チェック状態は全解除されて届く親切設計）。
【開発の背景とこだわり】
旅行の準備を楽しく、そして快適にすることを目指して制作しました。特にこだわったのは「圧倒的な使いやすさ（UX）」と「実用性」です。
単なるメモアプリで終わらせず、一緒に行くメンバーに一発で計画を共有できるLINE連携や、現地の最新情報にすぐアクセスできるナビ機能を1つの画面に集約し、旅行中の「これ1つで完結する安心感」を追求しました。
【技術的な挑戦・工夫】
コンポーネントのクリーンな状態管理
複数リストの切り替えやカスタムカテゴリの追加、LocalStorageへの自動保存を実装するにあたり、Next.jsのサーバーサイドレンダリング（SSR）による初期表示のズレ（Hydration Error）が起きないよう、useEffectなどを活用して安全にフロントエンド側でデータを復元・同期する堅牢なロジックを組み込みました。
実用的なデータ共有ロジック
データベースを使わないサーバーレスな設計でありながら、旅行データをURLパラメータへ安全にエンコードして引き渡す仕組みを自作しました。これにより、ユーザーはログイン不要で、LINEを通じて手軽にデータの受け渡しができる「手軽さ」と「機能性」を両立させています。
レスポンシブUI/UXの追求
旅行前や旅行中の「スマホでの利用」を第一に考え、Tailwind CSSを用いて、片手でもスムーズにチェックや操作ができる完全レスポンシブなUIを構築しました。
長野県佐久市に書籍の企画・制作、出版会社
長野県佐久市の編集・制作会社「株式会社バーネット」さまのコーポレートサイトを制作しました。
支給いただいたデザイン案（v0）をもとに、Webとしての見やすさ・使いやすさを整えながら HTML化〜WordPress化 まで一貫して対応。公開後も運用・改善を継続できる構成にしています。
デザインの意図を崩さないよう、クライアントと密に確認しながら 余白・文字組み・レスポンシブ を丁寧に調整しました。
表示や運用面での改善点を整理し、WordPress化 によって更新しやすい構造へ落とし込みました。
公開後も修正が回るよう、運用を前提にした実装・調整（改修しやすさ、更新手順の想定）を意識しています。
使用ツール／技術：WordPress、HTML/CSS、TailwindCSS、JavaScript、PHP（テーマ実装）
「実装の検討や叩き台作成にAIを活用し、最終的な品質確認・調整は自分で行った（効率化と品質担保を両立）」
長野県佐久市の家具店
デザイン案（v0で作成されたモック）をベースに、HTML化・WordPress化を行い、三六家具センター様のWebサイトを構築しました。
ニュース／商品ページをお客様側で自走更新できるよう投稿環境を整備し、あわせてサーバー移行〜公開後の運用保守まで一貫して担当しています。
・v0のデザインをもとに、WordPressテーマとして実装できる形へHTML化し、テンプレートを構築しました。
・v0標準のTailwindは未導入のまま、設計思想を踏まえて「Tailwind風」のCSS設計でスタイルを整理しています。
・JavaScriptはv0の生成物をそのまま流用できない部分があったため、挙動を確認しながら再実装し、表示と操作感を整えました。
・ニュース／商品案内を投稿として運用できるようにし、ACFで入力項目を整備して、更新を内製（自走）できる状態にしました。
・レスポンシブ対応（リキッドレイアウト）で、どの画面幅でも崩れないよう調整した
・ サーバー移行と公開後の運用（保守）まで対応し、継続的に改善できる体制を作りました。
自身のポートフォリオ
Web制作とデザインの実績をまとめ、自分の強みや制作スタイルが伝わるポートフォリオサイトを制作しました。
WORKSを中心に、作品ごとの概要や使用技術がひと目で分かる構成にし、閲覧者が「どんなことができるか」を迷わず把握できるように整理しています。
WordPressでテーマを自作し、SassとBEMの設計でスタイルを整理しました。
JavaScriptでUIの挙動を実装し、PHPでテンプレートを構築しています。
また、ACFで作品情報を投稿として管理できるように整備し、更新しやすい運用を意識しました。
GitHubでバージョン管理を行い、修正や改善を継続できる開発フローにしています。
架空のピアノ教室サイト
「しょーごログ」上級課題の合格後、デザインと構成を見直して、架空のピアノ教室サイトとして再構成・WordPress化しました。
予約やお問い合わせまでを想定した導線を作り、教室の魅力と必要情報（料金、事例など）が分かりやすく伝わるサイトを目指しています。
参考：[しょーごログ](https://shogo-log.com/coding-study/)
XDのデザインデータを元にコーディングを行い、WordPressテーマとして実装しました。
予約の日付選択はflatpickrを用いて実装し、操作性と見やすさを意識しています。
また、AOS.jsによるフェードアニメーションを取り入れ、スクロール時の見せ方も整えました。
「事例」や「料金表」などはACFのカスタム投稿／カスタムフィールドで管理できるようにし、更新しやすい構成にしています。お問い合わせフォームはContact Form 7で実装しました。
架空の家事代行サービスサイト
「しょーごログ」の課題合格後、デザインと構成を見直し、独自の架空ポートフォリオ作品として再構成しました。
サービス内容が直感的に伝わる見せ方と、スマホでも迷わず問い合わせまで進める導線を意識して制作しています。
XDのデザインカンプからコーディングを行い、各セクションの視線誘導と読みやすさを意識して実装しました。
特にイラスト背景は、画面幅によって崩れやすい部分なので、どのサイズでも美しく見えるようレイアウトを調整しています。
また、ハンバーガーメニューやアコーディオンなどのUIはjQueryで実装し、スマホ操作でも使いやすい動きになるよう整えました。
制作内容は「しょーごログ」の事例集にも掲載されています。
[オリジナルポートフォリオ化事例集（掲載ページ）](https://shogo-log.com/sample-original-portfolio/)
0さいからのパイプオルガン
武蔵野市民文化会館で開催される「0歳からのパイプオルガン」公演のチラシを制作しました。
パイプオルガンを“楽器の王様”として見立て、親子でわくわくできる世界観と、告知としての分かりやすさを両立するデザインを目指しています。
既存制作物として用意していた武蔵野市民文化会館のパイプオルガンイラストをベースに、生成AIを活用して立体感や存在感が出るように調整し、主役として目を引くビジュアルに仕上げました。
王冠はAdobe Fireflyで生成し、オルガンの形状や雰囲気に馴染むように合成・調整しています。
また、旗や子ども、王様・王女様などのモチーフはフリー素材をそのまま使うのではなく、全体のテイストが統一されるよう生成AIで雰囲気を整えました。
生成した各素材はIllustratorの画像トレースでベクター化し、細部を調整しながら、カラフルでも散らからないように全体をまとめています。
バッハプラス4
武蔵野市民文化会館で開催される「バッハプラス4」公演のチラシ（表裏）を制作しました。
パイプオルガンを中心にしたコンサートで、プログラムの魅力が一目で伝わるよう、情報設計と読みやすさを重視しています。
・バッハの肖像画、国旗モチーフ背景、金の額縁、裏面のバイオリン画像、というご要望を軸に、テーマが直感的に伝わるビジュアルにまとめました。
・肖像画は著作権フリー素材をFireflyでイラスト調に加工し、背景はPhotoshopでイタリア柄を生成。額縁もFirefly生成素材をベースに、Illustrator／Photoshopでバランスと質感を整えて仕上げました。
軽井沢追分教会 2025 クリスマス
日本基督教団 軽井沢追分教会の「2025年 クリスマス こどものきょうかい」告知チラシを制作しました。
教会が初めてのご家庭でも安心して参加をイメージできるよう、親しみやすさと読みやすさを大切にまとめています。
A5サイズとハガキサイズの2種を制作し、印刷入稿用データとして仕上げました。
低年齢の子ども向けのイベントであることが直感的に伝わるよう、無料イラスト素材を選定し、親しみやすい雰囲気にまとめました。
また、保護者が必要な情報をすぐ判断できるよう、日時・場所・参加方法などの情報を優先順位をつけて整理し、サイズ違い（A5／ハガキ）でも読みやすさが崩れないようレイアウトを調整しています。
印刷入稿を前提に、仕上がりサイズごとのバランスや文字の視認性にも配慮して制作しました。
バッハプラス3
武蔵野市民文化会館で開催される「バッハプラス3『バッハとイタリア』」公演のチラシ（表裏）を制作しました。
公演の内容がひと目で伝わるように、ビジュアルで世界観を提示しつつ、日時・会場・料金などの情報が読み取りやすい構成に整理しています。
バッハの肖像画素材が限られる中で、「世俗」は影を感じる写真を用い、彩度を落として配置することで重厚さを表現しました。
背景は黒を基調にし、全体の空気感を引き締めています。
一方で「聖」の要素は、羽や光が降り注ぐイメージで構成し、静けさと高揚感の両方が伝わるように調整しました。
また、光の表現に用いた多角形モチーフを裏面にも展開し、表裏で世界観がつながるデザインにまとめています。
0さいからのパイプオルガン
武蔵野市民文化会館で開催される「0さいからのパイプオルガンコンサート」の公演チラシ（表裏）を制作しました。
乳幼児連れでも参加しやすい公演であることがひと目で伝わるよう、明るく元気なトーンでまとめつつ、公演情報と注意事項を整理して読みやすく構成しています。
会場の象徴となるパイプオルガンを主役にするため、武蔵野市民文化会館のオルガン写真をもとに、Illustratorのペンツールで形を丁寧にトレースしてオリジナルのイラストとして制作しました。
その上で、クリスマスらしい配色とカラフルなフレーム、子どもやプレゼントのモチーフを組み合わせ、親子向け公演の楽しさが伝わるビジュアルにまとめています。
裏面はプレゼント写真をアクセントにしつつ、注意事項が埋もれないよう情報の優先順位をつけて整理し、初めての来場でも安心できる構成を意識しました。
軽井沢追分教会
軽井沢追分教会で開催される「大人のパイプオルガン体験会」「子どものパイプオルガン体験会」の告知チラシを制作しました。
教会内での印刷運用（リソグラフ、ハガキ印刷）に合わせ、白黒でも印象が伝わるデザインと情報設計でまとめています。
教会のパイプオルガン写真をもとに、Illustratorのペンツールで丁寧にトレースし、白黒印刷でも映える線画として制作しました。
リソグラフ印刷を前提に、細部がつぶれない線の太さや、遠目でも形が分かるメリハリを意識して調整しています。
また「塗り絵」として楽しめるよう、線の密度や面の分割をコントロールし、塗ったときに絵が成立するバランスに整えました。 QRコードはリソグラフでの印刷にも耐えられるよう大きく配置しました。
教会備え付けのリソグラフでの白黒印刷でも読みやすいレイアウトにまとめています。
軽井沢追分教会
軽井沢追分教会で開催される「ニクラス・ヤーン パイプオルガンコンサート」のチラシを制作しました。
あわせて、チケットと当日配布用のプログラムも制作し、コンサート告知から当日の配布物まで一貫したデザインで整えています。
写真撮影から担当し、公演の印象が伝わるビジュアルづくりを行いました。
以降の公演でも差し替え運用できるよう、情報の配置ルールも整理。
レイアウトの骨格を固定しつつ、演奏者の写真や公演の雰囲気に合わせて、オルガン写真の明暗や色味を調整しています。
裏面は礼拝堂全体の写真を透過させて背景に配置し、バロック時代の音楽やオルガンに合う装飾とトーンで、落ち着きと華やかさのバランスを整えました。
また、来場しやすいように地図も作成し、必要情報が迷わず読めるよう整理しています。
軽井沢追分教会 2025 イースター
日本基督教団 軽井沢追分教会「子どもの教会 イースターお楽しみ会」の告知チラシを制作しました。
初めて教会に触れるご家庭にも内容が伝わるよう、親しみやすい雰囲気と読みやすさを大切にまとめています。
春らしいやさしい色味を基調に、子どもが親しみやすいモチーフとして、ウサギと小鳥のイラストを配置しました。
案内文は卵をイメージした白抜きの枠の中にまとめ、ぱっと見て情報が把握できるよう整理しています。イースターらしさと読みやすさの両方を意識して、全体のバランスを整えました。
