Tanaka's Portfolio

Webコーダー

Webサイト・LP・WordPressの
コーディングを行います。
品質チェックと進行管理にこだわり、
手戻りを最小限に抑えた制作を実現します。

制作方針

徹底した品質管理

初稿提出前に、レイアウト崩れ‧動作チェック‧アクセシビリティなど60項目以上のテストを実施し、品質を確保します。これにより、バグや差し戻しを最小限に抑え、貴社の確認工数を減らすことができます。

透明性の高い進行管理

着手前に作業全体のロードマップを作成し、進捗ボードを共有します。どの工程がどこまで進んでいるかをリアルタイムで確認いただける体制を整えます。

制作途中の共有も柔軟に対応

必要に応じて、制作途中のページをテストサーバーへアップロードし、実際の動作をご確認いただけます。また、コードはGitHubでバージョン管理し、変更履歴や構造が明確になるよう管理します。

対応領域

WEBサイト・LPコーディング

Figma / XD / Photoshopなどのデザインデータをもとに再現したコーディングを行います。
HTML / CSS(SCSS) / JavaScriptを用い、レスポンシブ・アクセシビリティ・表示速度にも配慮します。公開後も保守しやすい構造で、SEOや部分的な実装・機能追加にも柔軟に対応可能です。

WordPressの構築・修正

WordPressを用いた更新可能なサイトの構築・カスタマイズを行います。オリジナルテーマの作成や既存テーマのカスタマイズに対応し、ブログ・お知らせ・お問い合わせフォームなどの実装も可能です。固定ページや投稿の追加、表示崩れの修正、機能追加など、柔軟に対応いたします。PHPを活用したオリジナルテーマを提供します。制作も可能で、保守しやすく運用しやすいサイトを提供します。

既存サイトの修正・機能追加

文言の変更や表示崩れの調整、新規ページ追加など、既存サイトの部分的な改修や機能追加に幅広く対応します。既存の構成やルールを尊重し、保守性・運用性を意識した対応を心がけています。

サイトの運用・保守

公開後もサイトが安定して稼働するようサポートします。テキスト・画像の更新、バックアップ、WordPressの更新、軽微な改修など、継続的なメンテナンスに対応します。効果測定の土台を整え、改善を重ねながらサイトを育てる運用も行います。

制作実績

人材会社『グローバルスタンダード』のコーポレートサイト

URL

https://corporate.web-developers.tanakakeishiro.com/ ZIPをダウンロード

概要

人材会社『グローバルスタンダード』のコーポレートサイトの仮想案件です。

担当範囲

コーディング

技術

Figma,Gulp,Git,GitHub,WordPress,HTML,CSS(SCSS),JS,Swiper

制作ポイント

  • FLOCSSを用いてレイアウト・コンポーネント・プロジェクト単位でスタイルを整理し、拡張性の高いCSS設計を構築
  • オリジナルのWordPressテーマを作成
  • ACF（Advanced Custom Fields）を導入し、管理画面から柔軟にコンテンツ更新が可能な設計を実装
  • カスタム投稿タイプを作成し、実績コンテンツを効率的に管理できる構造を設計
  • front-page.php / single.php / category.php など用途別にテンプレートを分離し、保守性を向上
  • Contact Form 7のスクリプトをお問い合わせページのみに限定して読み込み、パフォーマンスを最適化
  • WordPressの不要なheadタグ（絵文字・フィード・wp-embed等）を削除し、HTML構造と読み込み効率を改善

スマートフォンアプリ紹介サイト「OHA!」

スマートフォンアプリ紹介サイト「OHA!」

URL

https://oha.tanakakeishiro.com/ ZIPをダウンロード

概要

スマホアプリ「OHA!」を紹介するランディングページの仮想案件です。

担当範囲

コーディング

技術

Figma,Gulp,Git,GitHub,HTML,CSS(SCSS),JS(jQuery),Swiper,PHP工房

制作ポイント

  • 初期表示速度の改善を目的に、クリティカルCSSのインライン化およびCSSのpreloadによる先読みを実装
  • Google Fontsを非同期読み込みとし、noscript対応を含めてレンダリングブロックを回避
  • AVIF・srcset・lazy loadingを組み合わせ、通信量削減と最適な画像配信を実現
  • YouTube動画をクリック時に読み込む遅延読み込みを実装し、初期表示の負荷を軽減
  • dialog要素とARIA属性を用いたモーダルを実装し、アクセシビリティに配慮
  • モーダルにフォーカス管理・Escキー操作・背景クリック閉じ・スクロール制御を実装し、操作性を向上
  • フォームのエラー表示を最適化し、入力ミスをユーザーが直感的に認識できる設計に改善

アクセサリーブランドのサイト「sobolon」

URL

https://sobolon.tanakakeishiro.com/ ZIPをダウンロード

概要

アクセサリーブランドサイト「sobolon」の仮想案件です。

担当範囲

コーディング

技術

Figma,Gulp,Git,GitHub,PHP工房,HTML,CSS(SCSS),JS/jQuery

制作ポイント

  • 初期表示速度の改善を目的に、クリティカルCSSをインライン化し、レンダリングブロックを削減
  • メインCSSを非同期読み込みにすることで、描画の最適化と体感速度の向上を実現
  • Google Fontsにpreconnect・preloadを適用し、フォント読み込みの高速化と表示遅延の軽減を実施
  • WebP・srcset・lazy loadingを組み合わせ、適切な画像配信と通信量削減によりLCP改善を意識
  • ハンバーガーメニューにスクロール制御・フォーカストラップ・Escキー対応を実装し、アクセシビリティと操作性を向上
  • フォームにクライアントサイドバリデーションを実装し、エラー表示と自動スクロールにより入力体験を改善
  • セマンティックHTMLとARIA属性を用い、支援技術にも配慮したアクセシブルな設計を実装
  • BEMベースのクラス設計とユーティリティ化により、再利用性と保守性の高いスタイル設計を構築

キャンペーンサイト「尾道レトロキャンペーン」

URL

https://onomichi.tanakakeishiro.com/ ZIPをダウンロード

概要

キャンペーンサイト「尾道レトロキャンペーン」の仮想案件です。

担当範囲

コーディング

技術

Figma,Gulp,Git,GitHub,PHP工房,HTML,CSS(SCSS),JS,Swiper

制作ポイント

  • 初期表示速度の改善を目的に、クリティカルCSSのインライン化やCSSの非同期読み込み（preload＋onload）を実装し、レンダリングブロックを削減
  • Google Fontsのpreconnectおよび非同期読み込み、LCP画像のpreload・fetchpriority指定により、表示パフォーマンスを最適化
  • 画像をWebP化し、srcset・lazy loadingを組み合わせることで通信量を削減しつつ、適切な解像度で配信
  • Swiperやニュース一覧をIntersection Observerで遅延読み込みし、初期表示の負荷を軽減
  • requestAnimationFrameを用いて再描画タイミングを制御し、アニメーションのパフォーマンスを改善
  • ハンバーガーメニューやモーダルにフォーカストラップ・Escキー対応・aria属性を実装し、アクセシビリティとUXを向上
  • SCSSのmixin・mapおよびz-index設計により、再利用性と保守性の高いスタイル設計を構築

LPサイト「e-tiga」

URL

https://e-tiga.tanakakeishiro.com/ ZIPをダウンロード

概要

スケジュールや名刺をデジタル化するサービスのLPサイト「e-tiga」の仮想案件です。

担当範囲

コーディング

技術

Figma,Gulp,Git,GitHub,HTML,CSS(SCSS),JS(jQuery),Swiper

制作ポイント

  • 初期表示の負荷軽減のため、Swiperやニュース一覧を遅延読み込み・動的生成し、必要なタイミングでのみ描画を実行
  • Intersection ObserverおよびrequestAnimationFrameを活用し、描画タイミングを制御してパフォーマンスを最適化
  • ハンバーガーメニューやモーダルにaria属性・フォーカストラップ・Escキー対応・スクロール固定を実装し、アクセシビリティと操作性を向上
  • タブUIにrole="tab"やキーボード操作（矢印キー・Home/End）を実装し、アクセシブルなUIを構築
  • details要素を活用したFAQとアコーディオンにトランジション制御を加え、軽量かつ滑らかなUIを実現
  • transform中心のアニメーション設計とwill-change制御により、描画負荷を抑えた表現を実装
  • prefers-reduced-motionやfocus-visible、hover可能デバイス判定に対応し、ユーザー環境に応じたインタラクション設計を実装
  • SCSSのmixin・mapおよびz-index管理により、保守性と再利用性を意識した設計を構築

自己紹介

初めまして、滋賀県野洲市小篠原在住のフリーランスWebコーダーの田中啓嗣郎と申します。
情報系の大学でWeb・ネットワーク・セキュリティを学びました。
その経験を活かし、崩れにくく修正しやすい構造づくりと、デザイン意図の正確な再現を大切にしています。
小さな改修から新規構築まで、丁寧に対応いたします。

お問い合わせ

お気軽にお問い合わせください。内容を確認後、2日以内にご返信いたします。

ご依頼内容 （必須）

プライバシーポリシー

本サイトでは、個人情報の保護に配慮し、以下のとおり適切に取り扱います。

個人情報の利用目的
当サイトでは、お問い合わせの際、名前やメールアドレス等の個人情報を入力いただく場合がございます。取得した個人情報は、お問い合わせに対する回答や必要な情報をご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。

個人情報の第三者提供について
当サイトは、以下の場合を除き、あらかじめお客様の同意を得ないで、第三者に個人情報を提供することはいたしません。ただし、法令に基づく場合は除きます。

アクセス解析ツールについて
当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにクッキー（Cookie）を使用しております。トラフィックデータは匿名で収集されており、個人を特定するものではありません。

Cookieの利用について
本サイトでは、利便性向上やアクセス解析のためにCookieを利用することがあります。ブラウザの設定によりCookieを無効化することも可能です。

免責事項
当サイトからリンクやバナーなどで他のサイトへ移動された場合、移動先サイトで提供される情報、サービス等については一切の責任を負いかねます。

安全管理について
本サイトでは、取得した個人情報を適切に管理し、不正アクセスや漏洩等を防止するために安全対策を講じます。