自身のポートフォリオ
Web制作とデザインの実績をまとめ、自分の強みや制作スタイルが伝わるポートフォリオサイトを制作しました。
WORKSを中心に、作品ごとの概要や使用技術がひと目で分かる構成にし、閲覧者が「どんなことができるか」を迷わず把握できるように整理しています。
WordPressでテーマを自作し、SassとBEMの設計でスタイルを整理しました。
JavaScriptでUIの挙動を実装し、PHPでテンプレートを構築しています。
また、ACFで作品情報を投稿として管理できるように整備し、更新しやすい運用を意識しました。
GitHubでバージョン管理を行い、修正や改善を継続できる開発フローにしています。
長野県佐久市の家具店
デザイン案（v0で作成されたモック）をベースに、HTML化・WordPress化を行い、三六家具センター様のWebサイトを構築しました。
ニュース／商品ページをお客様側で自走更新できるよう投稿環境を整備し、あわせてサーバー移行〜公開後の運用保守まで一貫して担当しています。
・v0のデザインをもとに、WordPressテーマとして実装できる形へHTML化し、テンプレートを構築しました。
・v0標準のTailwindは未導入のまま、設計思想を踏まえて「Tailwind風」のCSS設計でスタイルを整理しています。
・JavaScriptはv0の生成物をそのまま流用できない部分があったため、挙動を確認しながら再実装し、表示と操作感を整えました。
・ニュース／商品案内を投稿として運用できるようにし、ACFで入力項目を整備して、更新を内製（自走）できる状態にしました。
・レスポンシブ対応（リキッドレイアウト）で、どの画面幅でも崩れないよう調整した
・ サーバー移行と公開後の運用（保守）まで対応し、継続的に改善できる体制を作りました。
架空のピアノ教室サイト
「しょーごログ」上級課題の合格後、デザインと構成を見直して、架空のピアノ教室サイトとして再構成・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 イースター
日本基督教団 軽井沢追分教会「子どもの教会 イースターお楽しみ会」の告知チラシを制作しました。
初めて教会に触れるご家庭にも内容が伝わるよう、親しみやすい雰囲気と読みやすさを大切にまとめています。
春らしいやさしい色味を基調に、子どもが親しみやすいモチーフとして、ウサギと小鳥のイラストを配置しました。
案内文は卵をイメージした白抜きの枠の中にまとめ、ぱっと見て情報が把握できるよう整理しています。イースターらしさと読みやすさの両方を意識して、全体のバランスを整えました。
