KANZAKIProfile
プロフィール
神﨑 勝弘
かんざき まさひろ
コーディングからキャリアを始め、現在はFigmaでのデザイン制作とフロントエンド実装の両方を担当しています。「見る人に伝わるデザイン」と「意図を正確に再現するコーディング」の両立を軸に、実務を想定した制作を重ねてきました。
特にこだわっているのは、ユーザー目線での導線設計と、ブランドらしさを活かすレイアウト設計。スマートフォンでも快適に閲覧できるレスポンシブ対応や、ライブラリを用いた動的な演出にも取り組んでいます。
デザインと実装のあいだで情報が迷子にならないものづくりを心がけ、企業やサービスの魅力をしっかり伝えるWebサイト制作に携わっていきたいと考えています。
Skills
スキル
HTML / CSS（SCSS）
- デザインカンプからのレスポンシブ実装（ピクセルパーフェクト）
- BEM設計・デザイントークン運用・コーディングルールの整備
- @layer / oklch() / カスケードレイヤー設計などモダンCSSの実践（本サイトで使用）
Figma / Adobe XD
- LP・コーポレートサイトのデザイン制作
- auto-layout・コンポーネントによる再利用性の高いデータ設計
- 実装への受け渡し（ハンドオフ）を前提とした命名・余白の一貫性
JavaScript
- スライダー・アコーディオン・ドロワーなどのUI実装
- IntersectionObserverによるスクロール演出（本サイトで使用）
- prefers-reduced-motionに配慮したアニメーション設計
WordPress / PHP
- 既存テーマのカスタマイズ
- 本サイトのブロックテーマ化（オリジナルテーマ）を実践
Photoshop / Illustrator
- バナー・ロゴ制作（ターゲット別の複数案提案）
- Web用画像の書き出し・軽量化（WebP対応）
AI活用（Claude Code）
- Figma連携によるデザイン→コードのワークフロー構築
- 本サイトのリニューアル・ブラッシュアップにも活用
サイト公開・計測設定
- レンタルサーバーへの公開（独自ドメイン・SSL・WordPress移行）
- GA4・Google Search Console の導入とサイトマップ送信
- PageSpeed Insights による表示速度改善（本サイトはデスクトップ全項目100点）
Works
作品
デザインから実装まで一貫して制作した作品です。気になる作品は、カードから詳細ページで制作プロセスをご覧いただけます。
-
実案件
-
実案件
-
実案件
-
実案件
-
-
-
-
実案件あり
-
Service
できること
LP・コーポレートサイトを中心に、下記の範囲でお仕事をお受けしています。デザインのみ・実装のみといった部分的なご依頼も可能です。
LP・Webサイト制作
構成・ワイヤーフレームからデザイン・コーディング・公開まで一貫して対応します。1ページのランディングページから、中小規模のコーポレートサイトまでお受けできます。
WordPressサイト構築
オリジナルテーマでの構築に対応します。ブロックエディタで運用できる形で納品するため、公開後はお客様ご自身の手でお知らせやページの更新ができます。
デザイン・素材制作
Figmaでのデザイン単体のご依頼にも対応します。実装への受け渡しを前提としたデータ設計で納品するため、別のコーダーさんへもスムーズに引き継げます。バナー・ロゴの制作も可能です。
公開後の計測・改善
GA4・Googleサーチコンソールの導入と、アクセス状況のレポート作成に対応します。表示速度やアクセシビリティの改善もご相談いただけます。
料金の目安
金額は目安です。内容とボリュームに応じて正式なお見積りをご提示します（お見積りは無料です）。
-
LP制作
120,000円〜
- ページ数
- 1ページ
- 構成・ワイヤー
- 込み
- デザイン
- 込み
- コーディング
- 込み
- 期間目安
- 3〜4週間
-
コーポレートサイト制作
250,000円〜
- ページ数
- 〜5ページ
- 構成・ワイヤー
- 込み
- デザイン
- 込み
- コーディング
- 込み
- 期間目安
- 1〜2ヶ月
-
WordPress構築
＋80,000円〜
- テーマ
- オリジナル
- 更新画面
- ブロックエディタ
- 更新レクチャー
- 込み
- ご自身での更新
- 可能
- 期間目安
- ＋1週間〜
※ WordPress構築は、LP・コーポレートサイト制作に追加するオプションです。
全プラン共通
- レスポンシブ対応
- 基本SEO・OGP設定
- GA4・サーチコンソール初期設定
- 表示速度・アクセシビリティ配慮
- 公開後2週間の不具合修正
単品メニュー・追加費用
- バナー制作
- 8,000円〜／枚
- ロゴ制作複数案のご提案つき
- 50,000円〜
- ページ追加6ページ目以降
- ＋30,000円〜／ページ
- 原稿作成・写真選定の代行
- ＋20,000円〜
- 公開後の更新・保守代行
- 月5,000円〜
※ デザインのみ・実装のみなど部分的なご依頼もご相談いただけます。複数メニューの組み合わせは、セット料金でお見積りします。
制作の流れ
期間はLP制作（1ページ）の目安です。コーポレートサイト（〜5ページ）は全体で1〜2ヶ月ほどです。
-
ヒアリング
目的・ターゲット・参考サイトを伺い、ゴールのすり合わせをします。
お願い：参考サイト・資料のご共有
-
構成・ワイヤー
ページ構成と骨組みを先にご確認いただき、方向性を固めてから進めます。
お願い：構成のご確認
-
デザイン
Figmaでデザインを作成し、確認と修正のやりとりを重ねて仕上げます。
お願い：デザインのご確認・修正のご指示
-
実装
コーディング・WordPress構築。表示速度とアクセシビリティに配慮します。
お願い：原稿・写真の最終確認
-
公開・運用
サーバーへの公開、GA4等の計測設定まで対応。公開後のご相談も承ります。
お願い：サーバー情報のご提供
よくあるご質問
ご依頼前
Q.予算が限られているのですが、相談できますか？
はい。ご予算に応じてページ構成や制作範囲を調整したプランをご提案します。掲載の料金はあくまで目安ですので、まずはお気軽にご相談ください。
Q.原稿や写真が用意できなくても依頼できますか？
はい。ヒアリングをもとに原稿の下書きから対応できます。写真素材の選定・ご提案も可能です。実案件「津堅島シークルーズ」では、原稿と写真素材の準備も担当しました。
Q.サーバーやドメインの契約がよく分からなくても大丈夫ですか？
はい。目的とご予算に合ったレンタルサーバー・独自ドメインの選定から、契約のサポート、公開作業までお手伝いします。本サイトも自分でサーバー契約から公開・計測設定までを行っています。
Q.打ち合わせは対面ですか？
オンライン（Zoom・Google Meet）とメール・チャットでのやりとりを基本に、全国からのご依頼に対応しています。
制作中
Q.制作期間はどれくらいかかりますか？
目安として、LPはデザイン＋コーディングで3〜4週間、コーポレートサイト（〜5ページ）は1〜2ヶ月ほどです。内容やご確認のペースにより前後します。お急ぎの場合もまずはご相談ください。
Q.デザインの修正は何回までできますか？
デザイン段階での修正は2回まで料金内で対応します。構成・ワイヤーの段階で方向性をすり合わせてから進めるため、大きな手戻りが起きにくい流れにしています。3回目以降は内容に応じて別途お見積りします。
Q.制作中のやりとりや進捗確認はどのように行いますか？
「構成・ワイヤー」「デザイン」「実装」の各工程の節目で、確認のご連絡をします。実装中はテスト用URLを共有しますので、実際の画面をスマートフォンからもご確認いただけます。
公開後・費用
Q.お支払いのタイミングを教えてください。
着手時に50%、納品後に残りの50%を銀行振込でお願いしています。請求書を発行しますので、法人様の締め支払いにも対応できます。
Q.公開後の更新や運用もお願いできますか？
WordPressで構築する場合は、お客様ご自身で更新できる形で納品します。更新作業の代行（月5,000円〜）や、GA4を使ったアクセスレポートの作成もご相談いただけます。
Q.納品後に不具合が見つかった場合はどうなりますか？
公開後2週間以内の表示崩れや動作の不具合は、無償で修正します。それ以降の改修や機能追加は、内容に応じてお見積りします。
料金や進め方について、まずはお気軽にご相談ください。お見積りは無料です。
相談してみるAbout
このサイトについて
本サイトはテンプレートを使わず、自分で整備したコーディングルール（BEM設計・デザイントークン・SCSSのコンポーネント分割）に基づいて、設計から実装まで一貫して制作しました。デザインはFigmaで組み、フロントエンドはWordPressのオリジナルブロックテーマとして実装しています。
この制作では、AI（Claude Code）を実装のパートナーとして本格的に活用しました。コードの多くはAIとの協働から生まれたもので、その事実を隠すつもりはありません。
一方で、何をどう作るかという設計判断と、品質の最終責任は自分が握り続けました。AIを「手を動かす道具」として使いこなし、@layer によるカスケード管理、oklch() によるカラートークン設計、WebPによる画像最適化といったモダンな手法を、迷いなくこのサイト自身で実践しています。AIを使いこなす力もまた、これからの制作者に必要なスキルだと考え、「どう作るか」という判断そのものを作品の一部としてご覧いただけるようにしました。
公開後の運用も自分の手で行っています。レンタルサーバーへの公開から、GA4・Google Search Console の導入とサイトマップ送信、PageSpeed Insights を用いたパフォーマンス改善（デスクトップ全項目100点）まで、「作って終わり」ではなく「届けて計測する」ところまでを本サイトで実践しています。
Built With
HTML
SCSS
JavaScript
WordPress
ブロックテーマ
BEM
@layer
oklch()
WebP
Figma
Claude Code
GA4
Search Console
Contact