スキル

Webサイトのコーディングで最も土台となる言語であり、日々の業務で最も使用頻度が高いスキルです。見出し・段落・リスト・テーブルなどの要素を意味に沿って正しく使うことで、SEOやアクセシビリティ、後からの保守のしやすさにつなげることを意識しています。 「divで全部囲む」ではなく、文書の構造を意識したマークアップを徹底しており、実務案件・自主制作ともに、規模の大小を問わず一貫した品質を担保してきました。

デザインカンプの再現から、レスポンシブ対応・アニメーション・複雑なレイアウトまで、CSSで幅広く対応できます。Sassを使ったファイル分割・変数・Mixinの活用など、保守しやすいスタイル設計を得意としています。 BEMやFLOCSSといった命名設計を、プロジェクトの規模やチームのルールに合わせて使い分けられます。CMSマルチテーマ案件では4つのデザインテーマを共通のコードベースで管理する設計を担当した一方、長期保守案件では自分以外が設計したCSSのルールを読み解き、既存の設計思想を壊さずにスコープを守って改修する判断も重ねてきました。「自分で設計する力」と「他者の設計を尊重して改修する力」の両方を実務で磨いています。

Webサイトに動きをつける実装はもちろん、フレームワークに頼らない素のJavaScriptでの実装力にも自信があります。スクロール連動のアニメーション・モーダルの開閉・スライダー・フォームのバリデーションなど頻出パターンはひと通り対応できます。 CMSマルチテーマ案件では多階層アコーディオンメニュー・スクロール追従型ナビゲーション・Swiperを用いた多様なスライダーなど複雑なUIを実装。個人開発のブラウザゲーム（SARUGAME）ではCanvas APIと組み合わせ、ゲームループ・状態管理・座標制御をすべて素のJavaScriptで構築しました。jQueryが使われている既存サイトへの追記・改修にも対応できます。

型定義の書き方・命名規則を一貫させることで、コードの予測しやすさと保守性を高めることを意識して使っています。実装時のミスをコンパイル時点で検知できる安心感を、プロダクト開発で実感しています。 Next.js製ポートフォリオサイトと、自主開発のブラウザ拡張機能（メモアプリ / 作業時間管理アプリ）で採用し、いずれも継続的に運用・改善中です。

WordPressのテーマ開発で必要なPHPを実務で使ってきました。記事データの取得・出力・カスタム投稿タイプの設定・テンプレートファイルの分割など、WordPressの仕組みに沿った実装を独力でこなせます。 オリジナルテーマ開発案件では設計から実装・5年間の継続保守までを担当。PHP単体でのバックエンド開発は専門外ですが、WordPressを使ったサイト制作の文脈では設計から実装まで問題なく対応できます。

ブラウザ上でグラフィックを描画するCanvas APIを、個人開発のゲームで活用しています。フレームワークに頼らない実装力を確認する場としても位置づけています。 テナガザルが主人公のブラウザゲーム（SARUGAME）では、プレイヤーの動き・当たり判定・画面遷移・アニメーションの座標制御などをCanvas APIとJavaScriptのみで実装しました。

コンポーネント設計・状態管理・再利用性を意識した実装を心がけています。 Next.js製ポートフォリオサイトのほか、自主開発のブラウザ拡張機能2本で採用し、いずれも現在運用中です。

App RouterのServer Components / Client Componentsの境界を意識した設計で、不要なクライアントバンドルを削減することを意識しています。Server Actionsを使ったサーバー処理の実装にも対応できます。 ポートフォリオサイトでは、お問い合わせフォームのバリデーション・Bot対策・送信処理までをServer Actions単体で完結させ、外部の送信サービスに依存しない構成にしました。環境変数によるステージング/本番環境の出し分けなど、運用面まで見据えた実装経験があります。

ユーティリティクラスを組み合わせてスタイリングするCSSフレームワークです。通常のCSSと比べてコーディングスピードが上がりやすく、チームでの記法の統一にも役立ちます。 ポートフォリオサイト（v4系）、ブラウザ拡張機能2本、CMSマルチテーマ案件（v3系）で採用。CMS案件では引き継ぎ先のエンジニアが扱いやすいよう、Tailwindのユーティリティとカスタムスタイルの使い分けを意識して実装しています。

CSSだけでは難しい複雑なアニメーションをJavaScriptで実装するためのライブラリです。テキストのアニメーション・スクロール連動の動き・要素のフェードイン演出など、サイトに動きのリッチさを加えたい場面で活用しています。 ポートフォリオサイトと自主制作のサンプルサイト（ベーカリー）で採用。「動きは見る人の邪魔をしない程度に」という考えのもと、アニメーションの量や速度、ユーザー操作を妨げないタイミング調整を丁寧に行っています。

スライダーやカルーセルUIを実装するためのライブラリです。横スライド・縦スクロール・複数枚表示・自動再生・中央強調など、さまざまなパターンを実務で実装した経験があります。 CMSマルチテーマ案件では4テーマそれぞれに異なるスライダーデザインを実装しており、オプション設定・レスポンシブ対応・カスタムスタイルの組み合わせに慣れています。

既存サイトへの追記・機能追加など、jQueryが使われている環境での作業に対応できます。 宿泊・観光施設サイトの長期保守案件を中心に、jQueryベースのコードを読み解きながら修正・追加を行ってきました。新しい開発で積極的に選ぶ機会は減っていますが、多くの既存サイトで使われているため、「読んで・書いて・影響範囲を把握できる」スキルは実務で重宝しています。

再利用性と保守性を両立するコンポーネント分割、必要最小限の状態管理設計を意識しています。「何をコンポーネントの外に出し、何を中に閉じ込めるか」という責務の分け方を重視しています。 ポートフォリオサイトではZustandを使った軽量な状態管理を採用。自主開発のブラウザ拡張機能では、アプリ再起動後も直前の操作状態を復元する仕組みなど、UXに直結する状態設計を実装しています。

フロントエンドの実装にとどまらず、Server ActionsやZodを使ったバリデーション設計、外部サービス連携を含むサーバー処理の実装に対応できます。 ポートフォリオサイトのお問い合わせフォームでは、Zodによる入力検証、Cloudflare TurnstileによるBot対策、Resendによるメール送信までを、外部の送信サービスに依存しない形で一式実装しました。

「本当にJavaScriptが必要か」「クライアントに送るコードを減らせないか」を常に検討する習慣があります。CSSアニメーションで実現できる表現をあえてJavaScriptに頼らず実装するなど、必要な技術を必要な分だけ使う判断を意識しています。 ポートフォリオサイトではServer Components / Client Componentsの境界設計により不要なクライアントバンドルを削減。自主制作のサンプルサイト（ベーカリー）では、メインビジュアルの演出をCSSアニメーションのみで実現しています。

キーボードだけで操作できるか・スクリーンリーダーで正しく読み上げられるかを確認しながらコーディングする習慣があります。WCAG 2.1 / 2.2の基準を参照しながら、特定のユーザーだけでなく幅広い方が使いやすいサイトを目指しています。 ポートフォリオサイトではキーボードナビゲーション・セマンティックなHTML構造・ユーザーのブラウザ設定を尊重したrem/em単位系を採用。CMSマルチテーマ案件やサンプルサイト（ベーカリー）でも、自動再生コンテンツの制御や代替テキストの設定などアクセシビリティ施策を継続的に実施しています。「対応コストとのバランスを取りながら実践する」ことを大切にしています。

大規模な改修やリファクタリングにおいて、テストコードがあることで安心して手を入れられることを実務で体感しました。体系的なテスト設計・TDDの実践経験はまだ浅く、今後強化していきたい領域です。 CMSマルチテーマ案件の完了後、自発的なリファクタリングの一環としてテストコードを導入し、大量のコードをモジュール化した状態で管理しやすい構成に再整備しました。

ESLintやPrettierなどのフォーマット設定をプロジェクト単位で整備し、チームメンバー全員のコードスタイルを揃える運用に慣れています。「レビューで指摘するコスト」を減らすための仕組みづくりを意識しています。 CMSマルチテーマ案件ではプロジェクト専用のフォーマット設定をチームで共有し、誰が書いても一貫したスタイルのコードになる開発環境を整備しました。

普段使いしています。ブランチを切って安全に作業する・変更履歴を辿るなど、日常的な操作はひと通りこなせます。

Vercelを使った継続的デプロイと、環境変数を用いたステージング/本番環境の出し分けに対応できます。 ポートフォリオサイトでは、検索エンジンへの露出可否とBasic認証によるアクセス制限を環境変数ベースで切り替える仕組みを実装。自主制作のサンプルサイトやゲーム開発でもVercelを使った公開・運用を行っています。

フロントエンド開発の環境を手軽に整えられるビルドツールで、立ち上げが速く、ファイルを保存するたびにブラウザに即時反映されるため、開発体験が良いです。 ブラウザ拡張機能（React + TypeScript構成）のアプリケーション開発でも採用しており、プロジェクトに合わせた設定ができます。

npmによるパッケージ管理やビルドツールの実行など、フロントエンド開発環境の整備で日常的に使用しています。 バックエンド開発での深い経験はありませんが、開発に必要な範囲での扱いには慣れています。

ビルドツール・タスクランナーの仕組みを理解するための学習目的で触れました。 現在は主にViteやNext.jsを使うことが多くなっていますが、既存のプロジェクトがWebpack・Gulp構成であっても、設定ファイルを読み解いて対応することができます。

デザインカンプをもとに、0からWebサイトをコーディングする作業が得意です。デザインの忠実な再現はもちろん、後からの修正や追加対応がしやすいコードを書くことを常に意識しています。 実務では、5名のチームに参画してCMSマルチテーマテンプレートを4テーマ×3ページ構成でコーディングした案件や、自身のポートフォリオサイトを一から設計・実装した経験があります。デザイナーやディレクターとの連携はチャットや打ち合わせをうまく使い分け、手戻りが発生しないように進めることを大切にしています。

自分が設計したのではないコードに対して、設計意図を読み解きながら安全に手を入れることが得意です。「自分好みの書き方を持ち込まない」「着手前に影響範囲を見積もる」ことを、既存サイトを壊さないための最優先事項として徹底しています。 観光・宿泊施設サイト30サイト超を対象に11ヶ月以上にわたり継続保守した実績があります。案件ごとに異なるCSS設計思想を都度把握し、複数のディレクターから同時並行でタスクを受け取りながら正確にこなしてきました。確実な納品が評価され、案件完了直後に別件のご相談をいただいたこともあります。

オリジナルテーマの制作・既存テーマのカスタマイズ・プラグインの設定や改修まで、WordPress案件を一通り対応できます。 デザイナーと共同で構築したWebサイトでは、ブログ機能・カスタム投稿タイプ・お問い合わせフォーム・サイドバーなどを実装。実装者不在でも運用が回るよう管理画面をカスタマイズし、5年間にわたり自ら保守を続けています。「納品して終わり」ではなく、数年単位の運用を前提とした設計を大切にしています。

コーディングの段階から内部SEOを意識した実装を行っています。見出しタグの使い方・構造化データの記述・メタ情報の設定・ソーシャルメディア用のOGP設定・モバイルフレンドリーな実装など、一般的な内部SEO対策に対応できます。 CMSマルチテーマ案件やサンプルサイト（ベーカリー）など、複数のプロジェクトでSEOを意識したHTMLの設計・実装を経験しています。

楽天トラベルやB-Cartのような独自プラットフォーム上での開発は、通常のHTML制作とは異なる制約（テンプレートの記述ルール・システム側の仕様）を理解した上での実装判断が求められます。既存システムへの影響を最小化するため、「テスト環境で確認→本番環境に反映」というフローを徹底しています。 楽天トラベルでは長期保守案件の中でカスタマイズページへの反映作業を継続的に担当。B-Cart（株式会社ナゴミヤ様のECサイト）では、コンテンツの修正・新規追加・機能改修・ページリニューアルまで幅広く対応しました。

Figmaのデザインカンプを正確に読み解き、コードに落とし込む作業に慣れています。スペック・余白・フォントサイズなどの数値を拾うのはもちろん、「このデザインの意図は何か」を考えながら実装することで、細部の再現精度を高めています。 CMSマルチテーマ案件ではデザイナーとFigma上でやりとりしながら実装を進め、コメント機能を活用した仕様確認で手戻りを防いできました。また、サンプルサイト（ベーカリー）では自らFigmaでデザインを作成した経験もあり、デザイナーの目線も理解しています。

Gemini・ChatGPT・Claudeなどを定期的に活用しています。コードのたたき台生成・エラー原因の調査・ドキュメントの整理など、作業の効率化に役立てています。 AIの出力をそのまま使うのではなく、内容を自分で理解・確認した上で採用するようにしています。便利なツールですが過信しすぎず、使いどころを見極めて活用することを意識しています。

メインのコードエディタとして日常的に使用しており、自分なりの作業効率化の設定を積み重ねてきました。 プロジェクトごとにフォーマット設定をファイルで管理し、チームメンバーと共有することでコードの書き方を揃える運用も実践しています。Emmetを使った高速なHTML入力・マルチカーソルでの一括編集など、エディタの機能を活かして作業時間を短縮することを意識しています。

フルリモートでの業務が中心のため、チャットでのコミュニケーションに慣れています。「相手を不安にさせない」「作業の進捗を適切に共有する」ことを意識したやりとりを心がけています。 CMSマルチテーマ案件（Slack）では5名のチームで、定例打ち合わせ・個別相談・チャットなど状況に応じた連絡手段を使い分けながら進めました。宿泊施設サイトの長期保守案件（Chatwork）では複数のディレクターと同時並行でやりとりしながら、大量のタスクを管理してきました。

デモサイトのトップページを制作したことで基本操作を簡単に把握しています。 Studioを裏側で支えるコードを読むことで、トラブル対処も可能です。

Webフロントエンド技術の仕組み・成り立ちのような背景から理解することを好みます。 コーディングの知見に加えて、Webサーバーとクライアント間の通信フローや支える規格、ブラウザ内部の処理フロー、レンダリング手法の違い・Webデザインの基礎概念の理解などの関連する知識も意識的に取り入れています。

フロントエンドは勿論、バックエンド・インフラ・セキュリティなどの周辺知識も関心があり継続的に学んでいます。