提案しながら実装し、 制作をスムーズにするコーダー
制作会社様のチームの一員として案件を支えます。
Strengths 強み
-
デザイン経験を活かして、
デザインカンプの数値だけを追うのではなく、
「なぜこの余白なのか」「なぜこの配置なのか」という意図を理解した上で、実機に最適化します。 -
実機で使いにくい箇所があれば、
「カンプ通り」と「操作性重視」の2パターンを用意し、どちらが適切かを判断してもらう形で提案します。
ディレクター・デザイナーの手を止めず、判断を楽にします。 -
ホバー時の演出やスマホ時の細かな挙動など、
指示が漏れがちな部分をあらかじめこちらで構築します。
「ここどうしますか？」と聞く前に形にすることで、確認コストを最小限に抑えます。
case study ケーススタディ
〜 追従ヘッダーの視認性改善 〜
-
課題
ヘッダーと背景の同化
白背景のセクションで、追従ヘッダーとコンテンツの境界が曖昧になり、ナビゲーションが目立ちにくい状態。
-
対応
視認性を高める調整案
デザインのトーンを維持しつつ、スクロール時の境界を明確にするため「ブラー」を適用した調整案を作成。
-
結果
検討工数の削減
カンプ通り・調整案の比較提示により、調整案が採用。デザイナーへの再依頼やディレクターの検討工数を削減。
白背景セクションでヘッダーが背景と同化し、ヘッダーと本文の境目が分かりづらい。
ブラーとドロップシャドウを追加し、境界を明確に。
flow 制作の流れ
-
STEP 01
デザイン理解・方針整理
デザインカンプを元に、意図や注意点を把握し、実装時の判断軸を整理します。
-
STEP 02
実装（コーディング）
環境構築後、保守性を意識しつつ、デザインの意図を汲み取りながら実装します。
-
STEP 03
実機検証・調整提案
PC・スマートフォンの実機で確認し、操作性や視認性に懸念がある場合は、意図を崩さない範囲で調整案を作成します。
-
STEP 04
比較共有・反映
調整前／調整後を共有し、判断しやすい形で提案。決定内容をテスト・本番環境へ反映します。
skill スキルセット
-
Front-end
HTML / CSS（SCSS）/ JavaScript / アニメーション（GSAP）
※貴社のコーディング規約・命名規則に柔軟に合わせます。 -
CMS / Development
WordPress（既存テーマ改修 / オリジナルテーマ構築 / CPT＋ACF設計 / テンプレート分割）/ GitHub
-
Design / Planning
Figma / Adobe XD / Photoshop / Illustrator
-
Communication / Workflow
【ツール】Slack、Chatwork、Zoom等、貴社の環境に合わせて柔軟に対応します。【レスポンス】遅くとも当日中に返信します。未確定事項も即時共有し、進行を止めません。
about 私について
1996年生まれ。二児の母。
制作会社でWebサイトのコーディングとデザインを担当してきました。
WordPressでの構築や、アニメーションの実装も経験あり。
チームの一員として、コミュニケーションや制作をスムーズに進めることを大切にしています。
現在は独立し、フリーランスとして活動中です。
お気軽にご相談ください
内容が固まっていない段階でも大丈夫です。
ちょっとしたご質問やご相談も、
お気軽にどうぞ。
どんなことでも大歓迎です
ちょっと相談してみる