担当した実装を、動画と図解で紹介します。
商品登録のしくみ / 図解
カスタムフィールドで、更新する情報を整理。
01 / 03 操作デモ
カーソルを重ねると写真が変化する演出。支給デザインの世界観に合わせ、FVのインタラクションを実装しました。
公開サイトの操作を録画・無音
実績専用のカスタム投稿・カスタムフィールドで、公開後も管理画面から実績を追加・編集できます。
商品登録のしくみ / 図解
カスタムフィールドで、更新する情報を整理。
01 / 03 操作デモ
商品種別と素材の2つの条件で絞り込み。Ajax通信を使い、ページ全体を再読み込みせずに結果を更新します。
公開サイトの操作を録画・無音
保守運用中の不具合は内容を確認し、必要に応じて別途お見積もりのうえ対応します。
カンプにない画面幅や、実際に触れたときの見え方まで考えて実装します。
迷う点は対応案と一緒に相談し、デザイナー・ディレクターの皆さまが進めやすい対応を大切にしています。
HTML / CSS / JavaScript
03IMPLEMENTATION DEMO
支給デザインをもとにした実装デモ
旅行サイトのデザインをもとに、PC・スマートフォンに対応したページを制作しました。写真や余白を生かした落ち着いた雰囲気に合わせて、控えめな動きや操作の手がかり、画像の読み込みまで整えています。
担当：コーディング／レスポンシブ調整UI・動きの検討と実装
（新しいタブ）01 / WIDE SCREEN
Foodsの左右の写真は、1440pxを基準に配置。画面幅が広がっても端へ離れすぎず、料理や本文とのバランスを保つよう整えています。
同じ縮尺で比較。広がった分は外側の余白に。
02 / RESPONSIVE
モデルプランは画面の高さに合わせて余白を配分し、現在位置がわかる進行表示を追加。低い画面では固定を解除し、本文を最後まで読める見せ方に切り替えています。
03 / USABILITY
横送りの旅行プランに前後の矢印と表示件数を追加。相談ボタンはページ途中でも使えるようにし、フォーム付近では隠して重複を避けています。
04 / PERFORMANCE
写真をWebP化し、表示条件に合う画像サイズを読み込む構成に。最初に見える写真を優先し、ページ下部の写真は必要なタイミングで読み込むよう調整しました。
支給デザインをもとに制作した実装デモです。お問い合わせフォームは動作確認用です。
コーディング・WordPress構築
Web制作会社でのコーダー経験を経て、現在は制作会社・広告会社の外部パートナーとして活動しています。
前職は携帯ショップの販売員でした。複雑な内容を整理して、相手が判断しやすい言葉で伝える。その経験は、仕様の確認やご相談のやり取りにもつながっています。
デザインの意図や、使う人にとって自然な見せ方を考えながら、細部を整えるのが好きです。迷う点は実装案とともに早めに相談し、ディレクター・デザイナーの皆さまが進めやすい対応を大切にしています。
販売の仕事から、制作会社の外部パートナーへ。
〜2021
複雑な内容を整理して、相手が判断しやすい言葉で伝える仕事。
在宅の正社員として制作会社に勤務しながら、個人でもWeb制作を受注。
2022年末
制作会社との兼業を経て、フリーランスのWeb制作者として活動。
いま
新規制作から軽微な修正まで。迷う点は早めに共有しながら進めています。
デザインデータをもとに、
ページ制作から機能・動きの実装まで対応します。
01 / CODING
支給デザインの意図を汲み取り、各画面幅に対応したWebページを制作します。カンプにない画面幅や細かな差異も、全体のバランスを見て調整します。
02 / WORDPRESS
更新する情報に合わせて投稿・入力項目を用意し、オリジナルテーマで構築します。
03 / ANIMATION
参考イメージをもとに、写真の切り替えや手描きラインなどの動きを実装します。
定期バックアップ・更新作業をご相談いただけます。
不具合対応は、内容に応じて別途お見積もりとなります。
ご相談から納品まで、
中村が直接担当します。
STEP01
案件の概要とご希望の納期を、メールでお送りください。
お問い合わせには原則1営業日以内に返信します。
STEP02
作業範囲・金額・スケジュールをご提示し、合意後に着手します。
確認事項は、実装案や選択肢とあわせて整理します。
STEP03
テスト環境で途中の画面をご確認いただきながら、実装を進めます。
共通パーツ・関連ページへの影響を確認。懸念点は早めに共有します。
STEP04
PC・スマートフォンで表示と操作を確認し、公開作業またはデータ納品を行います。
フォーム・リンクも確認。納品後の不具合は修正します。
制作期間は内容・規模により異なります。ご希望の納期を伺い、お見積もり時にスケジュールをご案内します。
ご依頼前にいただく
ご質問をまとめました。
はい。支給デザインをもとに、各画面幅で自然に見えるレイアウトを検討します。構成の判断が必要な箇所は、実装案を添えてご相談します。対応範囲と費用は、デザインを確認したうえでご案内します。
はい。制作会社さま・ディレクターさまの下請けとして、サイトへの制作者クレジット非表示やNDAの締結に対応します。エンドクライアントの前に出ることはありません。
業務委託契約書・NDAの締結、請求書払いに対応しています。締め日やお支払いサイトなどの条件は、貴社の規定に合わせて調整できますのでご相談ください。
もちろんです。1ページ単位・1機能単位でお受けしています。「この下層ページだけ」「お問い合わせフォームだけ」といったご依頼も歓迎です。
はい、まずはお気軽にご相談ください。内容をうかがったうえで、対応できる範囲とできない範囲を正直にお伝えします。
ページ数・構成・アニメーションの複雑さ・WordPressの有無などで変動するため、ご要件をうかがって個別にお見積りします。お見積りは無料ですので、お気軽にご相談ください。
ご依頼範囲内の修正（デザインとの差異・表示崩れ・不具合など）は、回数制限なく対応します。デザイン変更や仕様追加にあたる内容は、別途お見積りのうえご相談させてください。
はい、まずはご相談ください。スケジュールの状況次第ですが、稼働を調整して特急対応できる場合があります。お急ぎの際は、お問い合わせ時に希望納期をお書き添えください。
はい。テキスト差し替えなどの軽微な修正はスポットで、定期的な更新やWordPressのバージョン管理などは継続的な保守としてご相談いただけます。納品して終わりではなく、運用まで伴走します。
平日9〜18時ごろの稼働で、土日も急ぎの場合は対応します。お問い合わせには原則1営業日以内にご返信します。ご契約後のやり取りは、ChatWorkやSlackなど御社で普段お使いのツールに合わせます。
