noteXcoconala

Web制作の対応スキル

実務での対応領域と、個人開発・学習で扱っている技術を分けて紹介します。実装に加え、仕様確認や制作進行、公開対応も行っています。WordPressの実装・改修では、画面表示とともに更新する人の作業や保守性を考えます。案件ごとの担当範囲は制作実績に掲載しています。

Professional実務での対応領域

Web制作会社でのサイト制作・運用で対応してきた技術と制作進行を紹介します。

HTML / CSS / SCSS

文書構造と更新後の保守性を考えてマークアップ・スタイリングします。

  • セマンティックHTMLと見出し設計
  • BEM・FLOCSSを用いたCSS設計
  • 各画面幅に合わせたレスポンシブ実装

JavaScript

UIの操作やアニメーションを、既存処理への影響を確認しながら実装します。

  • メニュー、モーダル、スライダーなどのUI実装
  • フォームや表示切り替えの制御
  • ブラウザ間の表示・操作確認

PHP

PHPを用いたお問い合わせフォームやログイン機能の実装に対応しています。WordPressのカスタマイズにも活用しています。

  • テンプレート内の表示処理の実装
  • 既存コードの改修・保守

CMS

WordPressを中心にCMSを使用しています。Movable Type・RCMSの使用経験があり、microCMSは個人開発で使用しています。

  • WordPressのオリジナルテーマ開発・既存テーマの改修
  • 投稿タイプ・投稿機能、カスタムブロック、カスタムフィールドの設計
  • お問い合わせフォーム、表示速度、運用時の改修

Git

変更履歴を残し、チームで確認しやすい単位を意識してバージョン管理します。

  • ブランチを使った機能開発・修正
  • 差分確認とレビューを前提にしたコミット
  • GitHubを使ったコード管理

Webディレクション・進行管理

実装経験を活かし、お客様との仕様確認や制作チームとの調整を行い、制作から公開まで進めます。

  • お客様との調整、要件・仕様の確認
  • 制作チームへの作業指示、進捗確認・スケジュール調整
  • テスト環境への反映、品質確認・公開対応

Personal Development個人開発で使用

個人開発やこのポートフォリオの改善を通じて使用しています。本業の商用案件での経験とは分けて紹介します。

Next.js / React

コンポーネント単位でUIを組み立て、App Routerを使ったWebサイト・アプリ開発に取り組んでいます。

  • Server Componentsを含む画面構成
  • 状態や責務を分けたコンポーネント設計
  • メタデータ、画像、表示速度の最適化

TypeScript

PropsやCMSデータに型を定義し、変更時の見落としを減らすために使用しています。

  • コンポーネントのProps定義
  • API・CMSレスポンスの型定義
  • 型チェックによる実装ミスの早期発見

microCMS

個人サイトで記事や制作実績を管理するヘッドレスCMSとして使用しています。

  • 一覧・詳細データの取得
  • 下書き表示とキャッシュ設計
  • CMSデータを使ったメタ情報生成

Learning & Support学習中の技術・AI活用

Tailwind CSS

ユーティリティクラスによるスタイリングを学習し、基本的なレイアウトやレスポンシブ指定を試しています。

  • 個人学習で使用
  • 基本的なレイアウト・余白指定
  • 既存案件での実務経験とは区別

ChatGPT / Claude / Gemini / Codex / gemini Notebook

要件整理、コードレビュー、テスト観点の洗い出しなど、開発の補助に活用しています。Gemini・gemini Notebookでは、仕様や資料の作成・整理も行っています。

  • 生成コードをそのまま採用せず差分と影響を確認
  • アクセシビリティとレスポンシブ表示を確認
  • ブラウザ間の差異と既存処理への影響を確認

Tools制作・開発のツール

使用技術とは分けて、デザイン確認・画像編集・コード編集のツールを紹介します。

Figma / Adobe

デザインの意図やコンポーネント構造を読み取り、実装へ落とし込みます。

  • Figmaのデザインデータ確認・制作
  • Adobe XD・Illustrator・Photoshopのデザインデータにも対応可能
  • Photoshopでの画像編集・書き出し
  • Illustratorでの素材調整

その他の補助ツール

Cursor、Visual Studio Code、gemini Notebook、Canva、Adobe Express、Fireflyを目的に応じて使い分けています。

  • コード編集・調査の補助
  • 資料整理とドキュメント作成
  • ブログ用画像や素材の作成

Quality実装時に重視する観点

  • 情報設計・見出し構造
  • レスポンシブ表示
  • Webアクセシビリティ
  • SEO・メタ情報
  • 表示速度
  • CMSの更新性
  • ブラウザ間の差異
  • 公開後の保守性
担当領域が分かる制作実績を見るプロフィール・経歴を見る

Contact技術領域について相談する

WordPress、CMS構築、フロントエンド実装、UI改善、SEOに関する採用・業務委託・協業のご相談を受け付けています。

対応スキルについて問い合わせる