ポートフォリオ
はじめまして。
ITエンジニアとしてWebアプリケーションの開発・保守に携わりながら、副業でWeb制作とWebライティングに取り組んでいるシュウと申します。
HTML・SCSS・JavaScriptを使用したコーポレートサイトやLPの制作、レスポンシブ対応、JavaScriptによる機能実装、Webサイトのテストなどに対応しています。
Webライティングでは、IT・Apple製品・ガジェット・デスク環境などを中心に、実体験と一次情報をもとにした記事を執筆しています。
このページでは、Web制作・Webライティングの実績と、これまでの経歴をまとめています。
お仕事の依頼、ご相談はX（旧Twitter）のDMまたはお問い合わせフォームより受け付けております。
▼X（旧Twitter）
@k_engineer124
▼お問い合わせフォーム
こちらをクリック
▼メールアドレス
yasui2023engineer@gmail.com
プロフィール
名前 | シュウ
年齢 | 20代後半
在住 | 東海地方
学歴 | 4年制大学（電気電子工学科）卒業
経歴 | 半導体メーカー 2年半、情報通信業 2年半
資格 | 基本情報技術者試験、Oracle Certified Java Programmer, Silver SE 11
経歴
・大学卒業後、半導体関連企業でストレージ製品の性能評価、展示会用デモ機の作成、ソフトウェアの保守運用などを担当
・システム開発分野への関心から、未経験からITエンジニアに転職
・Java／Spring Boot、TypeScript／Vue.jsを使用したWebアプリケーションの開発・保守を経験
・本業の傍ら、副業としてWeb制作とWebライティングに取り組む
Web制作実績（自主制作）
ポートフォリオ用の自主制作として、コーポレートサイトとランディングページを制作しました。
企画・要件整理・サイト構成・デザイン・コーディング・レスポンシブ対応・テスト・公開まで一貫して行っています。
1．中小企業向けDX支援会社のコーポレートサイト
愛知県・名古屋市周辺の中小企業を支援する、架空のDX・業務改善会社を想定したコーポレートサイトです。
IT担当者がいない、または少人数の企業に向けて、Excelや紙を使用した業務のデジタル化、クラウドサービス導入支援、IT相談などのサービス内容を分かりやすく伝え、問い合わせにつなげることを目的に制作しました。
【担当範囲】
・企画、要件整理
・情報設計、ページ構成
・デザイン
・HTML／SCSS／JavaScriptによるコーディング
・レスポンシブ対応
・動作確認、自動テスト
・GitHub Pagesでの公開
【ページ構成】
・トップページ
・サービス紹介
・導入事例一覧
・導入事例詳細
・お知らせ一覧
・会社案内
・お問い合わせ
・プライバシーポリシー
・404ページ
全9ページで構成しています。
【主な実装内容】
・スマートフォン、タブレット、PCへの対応
・ハンバーガーメニュー
・FAQの開閉機能
・スクロールアニメーション
・お問い合わせフォームの入力チェック
・BEMを基本としたSCSS設計
・JavaScriptのES Modulesによる機能分割
・metaタグ、OGP、canonical、構造化データなどの基本的なSEO設定
・キーボード操作、代替テキスト、見出し構造などのアクセシビリティ対応
・画像の最適化、遅延読み込み
・Vitestによる単体テスト
・PlaywrightによるE2Eテスト
【工夫した点】
ITに詳しくない担当者にも、サービス内容や導入までの流れが伝わるように、専門用語を抑えた文章と分かりやすい情報設計を意識しました。
各ページから問い合わせまで迷わず進めるように、ボタンの配置や導線も統一しています。
【使用技術】
HTML5／SCSS／JavaScript（ES Modules）／Vite／Vitest／Playwright／Git／GitHub Pages
▼サイトを見る
https://yasuka0186.github.io/asunote-nagoya/
▼ソースコード
https://github.com/yasuka0186/asunote-nagoya/
※ポートフォリオ用に制作した架空企業のデモサイトです。企業情報や導入事例はすべて架空のものです。
2．初心者向けJava学習サービス「はじめてJava」
「Javaを学びたいが、何から始めればよいか分からない」というプログラミング初心者を想定した、架空のJava学習サービスのLPです。
サービスを紹介するだけでなく、ブラウザ上でJavaコードの一部入力を体験できる無料体験ページも実装しました。
【担当範囲】
・企画、要件整理
・情報設計、学習構成の作成
・デザイン
・HTML／SCSS／JavaScriptによるコーディング
・JavaScriptによる無料体験機能の実装
・レスポンシブ対応
・動作確認、自動テスト
・GitHub Pagesでの公開
【主な実装内容】
・Java学習サービスの紹介LP
・全3問のJavaコード入力体験
・JavaScriptによる正誤判定
・誤答内容に応じたヒントの表示
・正解後の解説とコンソール風の想定出力
・localStorageを使用した入力内容と学習進捗の保存・復元
・完了した問題の見直し、再挑戦、進捗リセット
・Ctrl／Command＋Enterによる回答判定
・スマートフォン、タブレット、PCへの対応
・キーボード操作、フォーカス管理、読み上げなどのアクセシビリティ対応
・Vitestによる単体テスト
・PlaywrightによるE2Eテスト
【工夫した点】
新入社員向けJava研修でサブ講師を担当した経験を生かし、専門用語をできるだけ抑えました。
無料体験では「コードの一部を入力する」「1行全体を入力する」「表示する内容を変更する」と段階的に難易度を上げ、初心者がJavaコードに触れやすい構成にしています。
【使用技術】
HTML5／SCSS／JavaScript（ES Modules）／Vite／Vitest／Playwright／Git／GitHub Pages
▼サイトを見る
https://yasuka0186.github.io/hajimete-java/
▼ソースコード
https://github.com/yasuka0186/hajimete-java
※ポートフォリオ用に制作した架空サービスです。実際のJavaコード実行、会員登録、決済、有料プランの提供は行っていません。
生成AIの活用について
自主制作では、要件整理・実装・テスト・コードレビューの補助として生成AIを活用しています。
生成された内容をそのまま使用するのではなく、仕様との照合、コードの確認、ブラウザ上での動作確認、自動テストを実施し、必要な修正を行ったうえで制作物へ反映しています。
Webライティング実績
これまでに執筆した記事の一部を掲載しています。
IT、Apple製品、ガジェット、デスク環境などを得意としています。公式サイトや公的機関などの一次情報を確認し、専門用語を初心者にも分かりやすく伝えることを意識しています。
※この下に、現在掲載している「記事1～3」と非公開案件の実績を残します。
実績
過去に執筆した記事を一部掲載しています。
Apple製品、IT関連のジャンルを得意としておりますが、そのほかのジャンルも幅広く対応しております。
✅記事1
ジャンル：Apple製品
キーワード：MacBookAir、Apple
文字数：3,202字
「MacBook Air M2って2026年でも使えるの？」 「8GBメモリ・256GBストレージで足りる？」 「WindowsからMacに乗り換えて後悔しない？」 私も購入前は同じような悩みを抱えていました。 Ma[…]
✅記事2
ジャンル：IT
キーワード：テックゴー、転職
文字数：6,360字
「テックゴーって実際どうなの？」 「エンジニア経験者向けって聞くけど、SES勤務でも使える？」 「登録したら、すぐ転職をすすめられそうで不安……」 このように感じている方も多いのではないでしょうか。 私もテックゴーを[…]
✅記事3
ジャンル：デスク環境
キーワード：デスク、在宅ワーク
文字数：8,387字
「在宅勤務や副業をしたいのに、デスクが狭くて作業しづらい」 「PCやモニターを置いたら、机の上がほとんど埋まる」 「ブログや個人開発をしたいけど、作業環境が整っていなくて集中できない」 このように感じたことはありませんか？[…]
クライアント上の規約で公開できませんが、執筆した記事のジャンルです。
対応可能な業務
Web制作
・コーポレートサイト、LPの制作
・サイト構成、掲載内容の整理
・HTML／CSS／SCSSによるコーディング
・スマートフォン、タブレット、PCへのレスポンシブ対応
・JavaScriptによるUI、インタラクションの実装
・既存ページの修正、レイアウト調整
・お問い合わせフォームの画面実装、入力チェック
・metaタグ、OGPなどの基本的なSEO設定
・アクセシビリティを考慮したマークアップ
・Webサイトの動作確認、単体テスト、E2Eテスト
・GitHub Pagesを使用した静的サイトの公開
Webライティング
・キーワード選定
・競合記事のリサーチ
・記事構成の作成
・SEO記事の執筆
・WordPressへの入稿
・画像選定、記事装飾
・サムネイル、アイキャッチ画像の作成
・実際の使用経験に基づく商品レビュー
使用技術・ツール
Web制作・システム開発
・HTML5
・CSS／SCSS
・JavaScript
・TypeScript／Vue.js
・Java／Spring Boot
・Vite
・Vitest
・Playwright
・Git／GitHub
・GitHub Pages
ライティング・その他
・WordPress
・Word、Excel、PowerPoint
・Googleドキュメント、Googleスプレッドシート
・Canva
資格・免許
・基本情報技術者試験
・Oracle Certified Java Programmer, Silver SE 11
・普通自動車第一種運転免許
稼働時間
・平日：2~3時間（19:00以降）
・土日：3~8時間（10:00~23:00)
納期はご相談いただければ柔軟に対応いたしますので、お気軽にお申しつけください。
対応可能なジャンル
・Apple製品
・ガジェット
・デスク環境、在宅ワーク
・資格、自己研鑽
・旅行、温泉、カフェ
・ゲーム、アニメ、映画
・暮らし、ライフスタイル
アピールポイント
・コーポレートサイトやLPの企画から公開まで一貫して対応できる
・スマートフォン、タブレット、PCに対応したレスポンシブ制作ができる
・JavaScriptを使用したUIや簡単な機能を実装できる
・見た目だけでなく、アクセシビリティやテストも考慮して制作する
・ITに詳しくない方にも伝わるよう、専門用語をかみ砕いて説明できる
・公式サイトや公的機関などの一次情報を優先してリサーチする
・修正やフィードバックに柔軟に対応し、納期を守って進行する
お仕事の依頼、お問い合わせ
お仕事の依頼、ご相談はX（旧Twitter）のDMまたはお問い合わせフォームよりお願いいたします。
▼X（旧Twitter）
@k_engineer124
▼お問い合わせフォーム
こちらをクリック
▼メールアドレス
yasui2023engineer@gmail.com
そのほか（経験・趣味）
仕事以外での経験や趣味をまとめました。
関連する記事の執筆に対応しています。
・音楽
UVERworldのライブによく行く。
・ゲーム
PS5 Marvel’ s Spider-Manシリーズをプレイ済み
スマホ用ゲーム SDガンダムジージェネレーションエターナル
・アニメ、漫画、小説
青エク、ヒロアカ、ぐらんぶる、SAO、青ブタ、ハリポタが好き。
・映画
MCUシリーズ、ハリーポッターシリーズが好き。
・温泉、スーパー銭湯
リフレッシュでよく行く。
・カフェ巡り
・SNS運用
Instagram、Threads、X、楽天ROOMを運用
・個人開発
体調管理アプリを開発中。
・自宅サーバー運用
共有ファイルサーバー（Ubuntu + Samba）
・ガジェット集め
iPhone、MacBook周辺機器、自作PCのパーツ収集。