ともきゃんができることのイメージ画像

Skill

私が実務でよく使っているスキルやサイト制作ツールを紹介します。
CSS設計(BEM・FLOCSSなど)に配慮した保守性の高いコーディングと、WordPressサイトの構築・カスタマイズを特に得意としています。
現在では、モダンなフロントエンド技術(Next.js、React、TypeScript)を活用した高パフォーマンスなWebアプリケーション開発や、SEO対策を意識した実装にも取り組んでいます。
また、ブログ運営で培った知見を武器に、Webライティングやコンテンツマーケティングの分野でもクリエイティブな価値を提供します。お客様の「こうしたい!」という想いを丁寧に汲み取り、唯一無二のアイデアと戦略でカタチに変え、ビジネスの未来を共に切り拓くことをモットーとしています。

Programmingプログラミング言語

HTML5

HTML5

セマンティックHTMLを使用してWebサイトの構造を設計し、アクセシビリティとSEOを意識したマークアップを心がけています。また、レスポンシブ対応やパフォーマンス最適化など、モダンな実装にも対応可能です。

CSS3

CSS3

SCSSを使用してスタイリングやレイアウトのコーディングを行います。レスポンシブデザインやアニメーションの実装に強みがあり、視覚的に魅力的で使いやすいデザインを実現します。また、BEM・FLOCSSを用いたCSS設計を取り入れ、保守性の高いコーディングを心がけています。

JS

JavaScript

JavaScriptを活用し、インタラクティブな機能やアニメーションを実装します。ES6+の最新構文やモジュールシステムを活用した効率的なコード開発を行い、パフォーマンスとユーザビリティの高いWebサイトを構築します。

PHP

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とは異なるアプローチで、クラス名を組み合わせてスタイリングを行う手法に取り組んでおり、レスポンシブデザインや基本的なレイアウト作成ができるレベルです。まだ学習段階ですが、効率的なスタイリング手法として積極的に習得を進めています。

Toolサイト制作ツール

Cursor

Cursor・Visual Studio Code・Git

サイト構築時のメインエディタとしてCursorを使用しています。AIアシスタントによるコード補完や、豊富な拡張機能を活用することで、開発環境を最適化し、より効率的なコーディングを実現しています。また、Gitを用いたバージョン管理も行っています。

Figma

Figma

サイト構築時のデザイン作成や、サムネイル、バナー、図形の作成に活用しています。直感的な操作で効率的にビジュアルを制作し、クオリティを高めています。

Photoshop・Illustrator

Photoshop・Illustrator

画像の編集や加工、ロゴやアイコンの作成など、グラフィックデザインに関する作業全般を行います。Webサイトに最適な形式での書き出しや、デザインの微調整を行い、高品質なビジュアルを提供します。

Canva

Canva・Adobe Express

ブログのサムネイル画像やSNS投稿用の画像作成に活用しています。豊富なテンプレートと直感的な操作で、短時間で魅力的なビジュアルを作成しています。

ChatGPT

ChatGPT・Perplexity・Gemini・NotebookLM

ChatGPTやPerplexity、Gemini、NotebookLMなどのAIツールを活用し、Webサイトやブログのテキスト作成、画像生成、アイデア出しなど幅広い業務を効率化しています。AIの特性を活かしてコンテンツの品質向上や作業時間の短縮、新しい発想の提案など、ポートフォリオ制作にも積極的に取り入れています。

Otherその他

CSS設計(BEM・FLOCSS)
SEO対策(構造化マークアップ・表示速度改善)
バージョン管理(Git・GitHub)
データベース言語(SQL)
CMSサイトの構築(WP・MT)
ヘッドレスCMS(microCMS)
バナーやサムネイル画像の作成
JSON-LD構造化データ
ウェブアクセシビリティ
ブログエリアの背景画像

Blogブログ

私が運営する2つのブログを紹介します。
「ともきゃんのボイトレ生活」では、ボイストレーニングや話し方に関する実践的なノウハウを発信し、
初心者から経験者まで幅広くサポートしています。
「ブログデザインマニア」では、Web制作現場で培った知識をもとに、ブログ運営やデザインのコツ、
収益化のポイントなどを詳しく解説しています。
どちらも実体験に基づいた情報をわかりやすくまとめており、
読者の課題解決やスキルアップに貢献できる内容を心がけています。

PAGE TOP