HTML / CSS / SCSS
文書構造と更新後の保守性を考えてマークアップ・スタイリングします。
- セマンティックHTMLと見出し設計
- BEM・FLOCSSを用いたCSS設計
- 各画面幅に合わせたレスポンシブ実装
実務で継続して使ってきた技術と、個人開発・学習で扱っている技術を分けて紹介します。実装だけでなく、CMSの更新性、レスポンシブ表示、アクセシビリティ、SEO、公開前の品質確認までを担当範囲として考えています。
Professional実務で使用
Web制作会社でのサイト制作・運用で使用してきた技術です。
JavaScript
UIの操作やアニメーションを、既存処理への影響を確認しながら実装します。
- メニュー、モーダル、スライダーなどのUI実装
- フォームや表示切り替えの制御
- ブラウザ間の表示・操作確認
PHP / WordPress
更新する人が迷わない管理画面と、運用しやすいテンプレートを構築します。
- オリジナルテーマ・既存テーマの改修
- 投稿タイプ、投稿機能、カスタムフィールド設計
- お問い合わせフォーム、表示速度、運用時の改修
Git
変更履歴を残し、チームで確認しやすい単位を意識してバージョン管理します。
- ブランチを使った機能開発・修正
- 差分確認とレビューを前提にしたコミット
- GitHubを使ったコード管理
Figma / Adobe
デザインの意図やコンポーネント構造を読み取り、実装へ落とし込みます。
- Figmaのデザインデータ確認・制作
- Photoshopでの画像編集・書き出し
- Illustratorでの素材調整
Personal Development個人開発で使用
個人開発やこのポートフォリオの改善を通じて使用し、継続してキャッチアップしています。
Next.js / React
コンポーネント単位でUIを組み立て、App Routerを使ったWebサイト・アプリ開発に取り組んでいます。
- Server Componentsを含む画面構成
- 状態や責務を分けたコンポーネント設計
- メタデータ、画像、表示速度の最適化
TypeScript
PropsやCMSデータに型を定義し、変更時の見落としを減らすために使用しています。
- コンポーネントのProps定義
- API・CMSレスポンスの型定義
- 型チェックによる実装ミスの早期発見
microCMS
個人サイトで記事や制作実績を管理するヘッドレスCMSとして使用しています。
- 一覧・詳細データの取得
- 下書き表示とキャッシュ設計
- CMSデータを使ったメタ情報生成
Learning & Support学習・補助的に使用
Tailwind CSS
ユーティリティクラスによるスタイリングを学習し、基本的なレイアウトやレスポンシブ指定を試しています。
- 個人学習で使用
- 基本的なレイアウト・余白指定
- 既存案件での実務経験とは区別
ChatGPT / Claude / Gemini
要件整理、コードレビュー、テスト観点の洗い出し、ドキュメント作成の補助に活用しています。
- 生成コードをそのまま採用せず差分と影響を確認
- アクセシビリティとレスポンシブ表示を確認
- ブラウザ間の差異と既存処理への影響を確認
その他の補助ツール
Cursor、Visual Studio Code、NotebookLM、Canva、Adobe Express、Fireflyを目的に応じて使い分けています。
- コード編集・調査の補助
- 資料整理とドキュメント作成
- ブログ用画像や素材の作成
Quality実装時に確認すること
- 情報設計・見出し構造
- レスポンシブ表示
- Webアクセシビリティ
- SEO・メタ情報
- 表示速度
- CMSの更新性
- ブラウザ間の差異
- 公開後の保守性
