私が実務でよく使っているスキルやウェブ制作ツールを紹介します。
私の得意なスキルは、CSS設計（BEM・FLOCSS）に配慮した保守性の高いコーディングと、WordPressサイトの構築・カスタマイズです。
最近は、Next.jsやReact、TypeScriptといったモダンなフロントエンド技術を使ったWebアプリ開発にもチャレンジしています。SEO対策もしっかり意識して、成果につながるWebサイト作りを実践しています。
さらに、スキマ時間や休日には、ブログ運営で培ったノウハウを活かし、Webライティングやコンテンツマーケティングにも挑戦しています。「こんなことがやりたい！」というご要望をしっかりと受け止め、オリジナリティあふれるアイデアや戦略でWebサイトを形にすることを心がけています。
Programmingプログラミング言語
HTML5
セマンティックHTMLを使用してWebサイトの構造を設計し、アクセシビリティとSEOを意識したマークアップを心がけています。また、レスポンシブ対応やパフォーマンス最適化など、モダンな実装にも対応可能です。
CSS3
SCSSを使用してスタイリングやレイアウトのコーディングを行います。レスポンシブデザインやアニメーションの実装に強みがあり、視覚的に魅力的で使いやすいデザインを実現します。また、BEM・FLOCSSを用いたCSS設計を取り入れ、保守性の高いコーディングを心がけています。
JavaScript
JavaScriptを活用し、インタラクティブな機能やアニメーションを実装します。ES6+の最新構文やモジュールシステムを活用した効率的なコード開発を行い、パフォーマンスとユーザビリティの高いWebサイトを構築します。
PHP
PHPを活用して、WordPressテーマやプラグインのカスタマイズを得意としています。お問い合わせフォームの作成や投稿機能の拡張、データベース連携など、お客様の要望に応じた機能開発が可能です。
Modern Frontendモダンフロントエンド
※個人開発や学習を通じて習得し、現在もキャッチアップに取り組んでいます。
Next.js
Next.jsを用いたモダンなWebアプリケーションの開発に取り組んでいます。App RouterやServer Componentsなどの最新機能を積極的に活用し、SEOやパフォーマンスを重視した設計・実装を行っています。静的生成（SSG）やサーバーサイドレンダリング（SSR）も要件に応じて適切に使い分けています。
React
Reactによるコンポーネント設計や状態管理（Hooks、Context APIなど）を得意としています。関数コンポーネントを中心に、再利用性や保守性を意識した設計・実装を行い、パフォーマンス最適化にも配慮しています。
TypeScript
TypeScriptによる型安全なコーディングを実践しています。PropsやStateの型定義、ユニオン型・ジェネリクス・型推論などを活用し、エラーの早期発見や保守性の向上に努めています。特にNext.jsやReactとの組み合わせで、型定義を意識したコンポーネント設計・実装を行い、実運用に耐えうる堅牢なコードを目指しています。
Tailwind CSS
Tailwind CSSの基本的なユーティリティクラスを学習しています。従来のCSSとは異なるアプローチで、クラス名を組み合わせてスタイリングを行う手法に取り組んでおり、レスポンシブデザインや基本的なレイアウト作成ができるレベルです。まだ学習段階ですが、効率的なスタイリング手法として積極的に習得を進めています。
Web Toolウェブ制作ツール
Cursor・Visual Studio Code・Git
サイト構築時のメインエディタとしてCursorを使用しています。AIアシスタントによるコード補完や、豊富な拡張機能を活用することで、開発環境を最適化し、より効率的なコーディングを実現しています。また、GitHubを用いたバージョン管理も行っています。
Figma
サイト構築時のデザイン作成や、サムネイル、バナー、図形の作成に活用しています。直感的な操作で効率的にビジュアルを制作し、クオリティを高めています。
Photoshop・Illustrator
画像の編集や加工、ロゴやアイコンの作成など、グラフィックデザインに関する作業全般を行います。Webサイトに最適な形式での書き出しや、デザインの微調整を行い、高品質なビジュアルを提供します。
Canva・Adobe Express
ブログのサムネイル画像やSNS投稿用の画像作成に活用しています。豊富なテンプレートと直感的な操作で、短時間で魅力的なビジュアルを作成しています。
AI ToolAIツール
ChatGPT
Web制作における多様な作業にChatGPTを活用しています。コンテンツライティングやコーディングサポート、アイデア出し、構造設計のアドバイスなど、開発プロセス全体で効率化を図り、より創造的で質の高いWebサイト制作を実現しています。
Gemini
GoogleのGeminiを活用し、コードレビューや技術的な課題解決、多言語対応の翻訳支援などに取り組んでいます。特に最新の技術トレンドの調査や、プロジェクトの技術選定において、信頼性の高い情報を効率的に収集し、Web制作に反映しています。
NotebookLM
GoogleのNotebookLMを活用し、プロジェクト資料やドキュメントの整理・分析、クライアント要件の整理などを効率化しています。大量の情報をすばやく理解し、Web制作プロジェクトの企画段階から実装まで、一貫性のある品質の高い成果物の作成に活用しています。
Adobe Firefly
Adobe Fireflyの生成AI機能を活用し、Web制作に必要なオリジナル画像やアイコン、バナーなどのビジュアル素材を効率的に作成しています。クライアントの要望に合わせたカスタムビジュアルの生成により、他にはないユニークで魅力的なWebサイトデザインを実現しています。
