ITエンジニア / PM
ごたけのポートフォリオ
SIerでPM・組織運営を担当。Web制作や業務アプリの開発にも取り組んでいます。
取り組みや学びをnoteで発信しています。
保有資格
- 情報処理安全確保支援士（登録済み）
- ネットワークスペシャリスト
匿名化した紹介用プレビューPC / スマートフォン Webサイト / 実案件制作・確認中
企業サイトのリニューアル
事業内容を伝え、相談へつなぐ企業サイト。PC・スマートフォンに対応。
担当情報設計・デザイン・実装・表示と操作の確認
詳しく見る＋
実案件の画面構成をもとに、社名・写真・文章を架空のものに置き換えた紹介用プレビューです。現行公開サイトの画面ではありません。
制作のポイント
- 01
事業内容から相談までの流れを整理
ページ構成と原稿を整理し、PC・スマートフォンに対応する画面を制作しました。問い合わせは入力・確認・修正の流れまで実装しています。
- 02
確認できる形で制作を進める
確認用プレビューを用意し、表示と操作の確認、修正対応を進めています。一般公開と最終受入はこれからの段階です。
- 目的
- 訪問者が事業内容を理解し、相談先を見つけられるようにすること。
- 担当範囲
- 情報設計、デザイン、実装、表示・操作の検証、確認用プレビューの用意と修正対応。
- 使用技術・関連分野
- 情報設計 / レスポンシブ対応 / 品質確認
取り組んだこと
- ページ構成と原稿の整理
- 画面デザインとPC・スマートフォン向けの実装
- 問い合わせの入力・確認画面
- 確認用プレビューと修正対応
確認したこと
- 確認用サイトを制作し、PC・スマートフォンで表示と操作を確認。
- 問い合わせの入力・確認・修正の流れを確認。
対応範囲・補足
- 制作・確認中の案件です。一般公開と最終受入は未完了です。
- 問い合わせの実送信と本番CMSの運用は未実施です。
匿名化した紹介用プレビューPC / スマートフォン Webサイト / 実案件公開・運用実績
専門家のプロフィールサイト
人物や活動を伝えるサイトと、問い合わせを受け付けて担当者に知らせる仕組みを制作。
担当サイト制作・問い合わせ受付と通知・公開と運用
詳しく見る＋
実案件の確認用デザインをもとに、氏名・写真・経歴・文章を架空のものに置き換えた紹介用プレビューです。現行公開サイトの画面ではありません。
制作のポイント
- 01
活動を伝え、問い合わせを受け付ける
人物や活動を紹介するページから、相談へ進める構成にしました。フォームの入力内容を確認・保存し、担当者へメールで知らせる仕組みまで制作しています。
- 02
公開後の更新と稼働確認までを整える
サイトの公開・更新の手順に加え、迷惑送信対策、通知の再試行、稼働監視を整備。本番でフォーム送信と通知メールの受信を確認しています。
- 目的
- 専門分野や活動を伝え、相談や依頼につながる窓口を整えること。
- 担当範囲
- 情報設計、デザイン・実装、問い合わせの受付・保存・メール通知、公開・更新と稼働確認の整備。
- 使用技術・関連分野
- Hugo / Python / AWS Lambda / DynamoDB / Amazon SES
取り組んだこと
- 人物紹介・専門分野・活動情報・著作を整理したページ構成
- PC・スマートフォンに対応するデザインと実装
- 問い合わせの入力確認、内容の保存、担当者へのメール通知
- 迷惑送信対策、通知の再試行、稼働監視
- サイトの公開・更新手順と、公開後の確認方法の整備
確認したこと
- 主要ページの表示と問い合わせへの導線を確認。
- 本番環境で問い合わせフォームからの送信と、通知メールの受信を確認。
- サイトの公開・更新と、公開後の稼働確認を実施。
対応範囲・補足
- 公開・運用の実績と、掲載している確認用デザインの公開状況は別です。
- プレビューの人物・活動・著作は架空です。実在の人物の経歴や成果を示すものではありません。
- このプレビューでは問い合わせ送信・計測・外部サービス接続を行いません。
Web制作をもっと見る4件 ＋
Webサイト / 自主制作
物件の相談につながるサービスサイト
物件の悩みからサービスを選び、費用の目安を確認して相談内容をまとめる。
担当要件整理・デザイン・相談フォームの実装
詳しく見る＋
クラウドワークスの公開募集を題材にした自主制作です。依頼者からの受注・納品実績ではありません。会社・料金・間取りはすべて架空です。
制作のポイント
- 01
選んだ内容を、そのまま相談へ
物件の目的と面積に合わせて、サービスと費用の目安を表示します。選択内容を相談フォームに引き継ぎ、相談文を編集して確認できる流れにしました。
- 02
使う端末や操作方法に合わせる
PCとスマートフォンの表示を整え、選択や入力はキーボードでも操作できるようにしました。入力不備がある場合は、直す項目を画面上で案内します。
- 目的
- 物件オーナーが依頼できる内容と費用の目安を理解し、相談の準備を進められること。
- 担当範囲
- 公開募集からの要件整理、サイト構成、デザイン、サービス選択と相談フォームの実装。
- 使用技術・関連分野
- Astro / TypeScript / レスポンシブ対応
取り組んだこと
- 物件の用途・悩みに合わせたサービス案内
- 料金目安と間取りの改善イメージ
- 選択内容を引き継ぐ相談フォームと確認画面
確認したこと
- 目的と面積による料金目安の変化、相談文の編集と確認画面への引き継ぎを確認。
- キーボード操作、PC・スマートフォン表示、入力不備への案内を確認。
対応範囲・補足
- 相談内容を確認するまでの作例で、外部への送信はありません。
- CMSは接続していません。公開・運用する場合は更新機能や送信先の設定が必要です。
- 料金・間取りはサンプルで、見積もりや実際の施工実績ではありません。
- 検索向けの基本情報は設定していますが、本番公開後のSEO効果は未検証です。
参考にした公開募集
自社ホームページ制作↗クラウドワークス / 確認 / 募集終了
- 募集の内容
- 空間デザインの依頼につながるよう、サービス・料金・改善例を紹介し、問い合わせへ案内したいという募集。
- 自主制作で形にしたこと
- 物件の悩みからサービスを選び、料金の目安を確かめ、選択内容を相談フォームへ引き継ぐ流れを制作しました。
- 元の依頼との違い
- 元の募集は複数ページと自身で更新できる構成を想定しています。この作例は架空事業の1ページ版で、実際の施工写真、CMS更新、本番問い合わせ送信は含みません。
技術サンプル / 自主制作
NORTHFIELD CONSULTING
事業内容と相談の流れが伝わる、企業サイトのサンプル。
担当情報構成、デザイン、独自テーマの実装、固定ページ、お知らせ一覧、更新手順。
詳しく見る＋
自主制作の架空企業サイトです。実在する顧客の受注実績ではありません。
制作のポイント
- 01
形にしたこと
企業サイト用のWordPressテーマ
- 02
確認したこと
保存プレビューの各ページ、メニュー操作、スマートフォン表示を確認。
- 目的
- 初めて訪れる方が、事業内容を知り、相談できる内容を判断できること。
- 担当範囲
- 情報構成、デザイン、独自テーマの実装、固定ページ、お知らせ一覧、更新手順。
- 使用技術・関連分野
- WordPress / 独自テーマ
取り組んだこと
- 企業サイト用のWordPressテーマ
- 事業紹介・会社情報・お知らせの画面
- 導入と編集方法の説明
確認したこと
- 保存プレビューの各ページ、メニュー操作、スマートフォン表示を確認。
- 従来版テーマの架空データで、WordPressの下書き・公開・表示を確認。改訂テーマでの実CMS操作は未確認。
対応範囲・補足
- 一般のPHP・データベース環境での導入と運用は未検証です。
- 問い合わせ送信は含みません。
技術サンプル / 自主制作
珈琲と焼き菓子 こはる
お店の雰囲気、メニュー、営業案内がひと目でわかるカフェのサンプル。
担当情報構成、デザイン、スマートフォン対応、メニューの分類切替、営業時間の案内。
詳しく見る＋
自主制作の架空店舗サイトです。写真はAI生成素材です。実在する顧客の受注実績ではありません。
制作のポイント
- 01
- 02
確認したこと
メニューの分類切替、リンク、スマートフォン表示を確認。
- 目的
- 来店を検討する方が、お店の雰囲気、メニュー、営業時間を確認できること。
- 担当範囲
- 情報構成、デザイン、スマートフォン対応、メニューの分類切替、営業時間の案内。
- 使用技術・関連分野
- レスポンシブ / メニュー分類
取り組んだこと
- カフェの静的サイト
- メニューの分類切替
- 原稿の編集箇所をまとめた説明
確認したこと
- メニューの分類切替、リンク、スマートフォン表示を確認。
対応範囲・補足
- CMS、予約、注文、決済、問い合わせ送信は含みません。
技術サンプル / 自主制作
暮らしの道具店 はるの
商品の絞り込みと詳細表示を備えた、道具店のサンプル。
担当情報構成、デザイン、表示サイト、商品データの定義、公開API接続、更新手順。
詳しく見る＋
自主制作の架空店舗サイトです。写真はAI生成素材で、商品と価格は架空の設定です。実在する顧客の受注実績ではありません。
制作のポイント
- 01
- 02
確認したこと
保存データの表示、商品の絞り込み・詳細、CMS未接続の状態案内を確認。
- 目的
- 担当者が商品紹介とお知らせを更新し、お店の情報を継続して発信できること。
- 担当範囲
- 情報構成、デザイン、表示サイト、商品データの定義、公開API接続、更新手順。
- 使用技術・関連分野
- ヘッドレスCMS / WordPress API
取り組んだこと
- 店舗の表示サイト
- 商品管理用のコンテンツプラグイン
- CMS接続と更新方法の説明
確認したこと
- 保存データの表示、商品の絞り込み・詳細、CMS未接続の状態案内を確認。
- 従来版店舗の架空データで、WordPress公開APIから商品とお知らせを取得する動作を確認。
対応範囲・補足
- 店舗レイアウトでの下書きプレビュー、在庫管理、注文、決済は含みません。
- microCMSは未接続です。
メール・ファイル共有の見直しや、システムの導入・公開をご相談いただけます。クラウド・社内サーバーなど、利用環境に合わせて構成と運用方法を整理します。Webサイトの公開・運用事例を見る↑
WORKSPACE PLANNING日々の仕事を支える環境へ。現状を整理→比較・設計→切替を計画
担当範囲のイメージ図 業務環境整備 / 実案件計画中
Google Workspace導入・移行の計画
メールとファイル共有の見直しに向け、サービス比較、共有権限、切替手順を整理。
担当要件整理・サービス比較・共有と切替の計画
詳しく見る＋
実案件での検討・計画の取り組みを匿名で掲載しています。Google Workspaceは導入候補で、移行完了の実績ではありません。図は担当範囲の説明用です。
計画のポイント
- 01
サービス選びと共有のルールを整理
メールとファイル共有の要件を整理し、サービスを比較。共有フォルダの構成とアクセス権限を設計案にまとめています。
- 02
切替の前に、工程と確認項目を用意
メールの切替手順と利用者向けの説明資料を整理しています。Google Workspaceは導入候補で、設定や本番切替は未実施です。
- 目的
- 日々のメールとファイル共有を見直し、導入方法と切替時に確認することを整理すること。
- 担当範囲
- 要件整理、サービス比較、共有権限の設計案、移行計画、説明資料の作成。
- 使用技術・関連分野
- Google Workspace / 要件整理 / 移行計画
取り組んだこと
- サービス・プランの比較
- 共有フォルダ構成とアクセス権限の設計案
- メールの切替工程と確認項目
- 利用者向けの説明・確認資料
確認したこと
- 比較・設計案と切替手順を資料として整理。
- 実施前に確認する条件と、今回の対応範囲を整理。
対応範囲・補足
- 導入方法を検討中です。移行先の最終決定、アカウント作成、権限設定、本番切替は未完了です。
- 過去メールと既存ファイルの移行は、今回の計画の対象外です。
AI・発信
AIの報告を受け取るとき、何を根拠に確認するか。制作や判断の進め方をnoteで発信しています。
