FRONT-END CODER

任せてよかったと思える
確かな実装を。

大切なことを見落とさず、
ひとつずつ丁寧に仕上げていきます。

WORKS

制作実績

SERVICE

対応できること

  • デザインカンプからのコーディング

    Figmaなどのデザインをもとに、PC・タブレット・スマートフォンで見やすく使いやすいWebサイトを実装します。

  • WordPress

    WordPressサイト制作

    お知らせやブログをご自身で更新できる、運用しやすいWordPressサイトを構築します。

  • 既存サイトの修正・調整

    小さな変更や部分的な修正も承ります。現在のお困りごとを確認し、必要な箇所を丁寧に整えます。

掲載のない内容も、まずはお気軽にご相談ください。

STRENGTHS

実装で大切にしていること

  • 丁寧な確認と共有

    分からないまま進めず、必要な確認を行います。進捗や変更点も分かりやすく共有し、認識のずれを防ぎます。

  • デザインを崩さない実装

    余白・文字サイズ・レイアウトまで細かく確認し、デザインカンプの意図を損なわない実装を行います。

  • 修正しやすいコード

    納品後の修正や更新も想定し、構造が分かりやすく整理されたコードを書きます。

SKILLS

スキル

  • HTML5

    HTML

  • CSS

    CSS

  • Sass

    Sass

  • JavaScript

    JavaScript

  • jQuery

    jQuery

  • WordPress

    WordPress

ABOUT

私について

WebコーダーNaokiのプロフィール写真

FRONT-END CODER

Naoki

依頼する側と、依頼される側。

両方を経験してきました。

前職の病院総務では、外部の業者に仕事を依頼する一方で、院内のさまざまな部門から相談や依頼を受け、調整する立場も経験しました。

その中で実感したのは、安心して仕事を任せるためには、意図が伝わっていること、進捗が見えること、そして気軽に相談できることが欠かせないということです。

Web制作でもこの姿勢を大切にし、こまめな確認と分かりやすい共有を通して、認識を合わせながら丁寧に実装を進めます。

PROCESS

制作の流れ

  1. 01

    お問い合わせ

    フォームより、ご相談内容をお送りください。

  2. 02

    ヒアリング

    目的やご要望、納期などを丁寧に確認します。

  3. 03

    お見積り

    内容を整理し、費用とスケジュールをご案内します。

  4. 04

    コーディング

    仕様に沿って、見やすく丁寧に実装します。

  5. 05

    ご確認・修正

    表示をご確認いただき、必要な調整を行います。

  6. 06

    納品

    最終確認後、データ納品または公開作業を行います。

CONTACT

お問い合わせ

Webコーディングのご依頼・ご相談は、お問い合わせフォームよりご連絡ください。

  • 内容がまとまっていなくても、分かる範囲でご入力いただければ大丈夫です。
  • ご相談・お見積りは無料です。お気軽にご相談ください。
  • 入力いただいた内容は、お問い合わせへのご連絡にのみ使用します。

プライバシーポリシー

当サイトでは、お問い合わせの際にご入力いただいたお名前・メールアドレスなどの個人情報を、お問い合わせへの回答や必要なご連絡のために利用します。

取得した個人情報は適切に管理し、ご本人の同意がある場合または法令に基づく場合を除き、第三者へ提供することはありません。

自主制作

ポートフォリオサイト

ポートフォリオサイトのトップページの表示例

概要

Webコーダーとしてのスキルや制作実績、仕事に対する姿勢を伝えるために制作したポートフォリオサイトです。初めて依頼する方にも安心して相談していただけるよう、対応できることや制作の流れを分かりやすく整理し、シンプルで見やすい構成を意識しました。

担当範囲
サイト設計 / デザイン / コーディング / レスポンシブ対応 / JavaScript実装 / アニメーション実装 / フォーム実装 / 公開作業
制作期間
約3週間
使用技術
HTML / SCSS / JavaScript / jQuery / GSAP / Formspree

実装内容

モバイルファーストでレスポンシブ対応を行い、Worksのモーダル表示やスクロールアニメーション、オープニング演出、お問い合わせフォームを実装しました。

工夫したこと

FLOCSSをベースにSassを整理し、修正・追加しやすい構成を意識しました。また、アニメーションは操作性を損なわないよう、表示箇所や動きの強さを調整しています。

課題と対応

アニメーションを取り入れながら、見やすさや操作性を損なわないことを意識しました。必要な箇所だけに動きを取り入れ、prefers-reduced-motionにも対応しています。

自主制作

歯科クリニック

歯科クリニックサイトトップページの表示例

概要

歯科クリニックを想定して制作したWordPressサイトです。診療内容や医院情報を分かりやすく整理し、お知らせやスタッフブログなどを更新できるサイトとして構築しました。

担当範囲
コーディング / レスポンシブ対応 / WordPress構築 / JavaScript実装
制作期間
約3週間
使用技術
HTML / SCSS / JavaScript / jQuery / WordPress / PHP

実装内容

レスポンシブ対応に加え、WordPressを使用したお知らせ・ブログ機能、カテゴリー別の記事表示、お問い合わせ・WEB予約フォームなどを実装しました。

工夫したこと

診療内容や医院情報など情報量が多いため、ユーザーが目的の情報を探しやすいよう、ページ構成や導線を意識して実装しました。

課題と対応

更新頻度の高いお知らせやブログをWordPressで管理できるようにし、サイト運営時に更新しやすい構成にしました。

自主制作

観光キャンペーンサイト

観光キャンペーンサイトトップページの表示例

概要

デザインカンプをもとに、尾道観光をテーマにしたInstagram投稿キャンペーンLPをコーディングしました。写真やイラスト、装飾を多く使用したデザインを再現しながら、PC・スマートフォンそれぞれで見やすいレスポンシブサイトに仕上げています。

担当範囲
コーディング / レスポンシブ対応 / JavaScript実装
制作期間
約2週間
使用技術
HTML / SCSS / JavaScript / jQuery / Swiper

実装内容

レスポンシブ対応に加え、Swiperを使用したスライダー、モーダル、FAQのアコーディオン、ドロワーメニュー、フォームの入力チェックなどを実装しました。

工夫したこと

写真や装飾が多いデザインのため、余白や画像の配置を細かく調整し、画面幅が変わってもカンプの雰囲気を保てるよう意識しました。

課題と対応

PCとスマートフォンで画像や装飾のバランスが崩れないよう、ブレークポイントごとにサイズや配置を調整しました。

自主制作

サービス紹介サイト

サービス紹介サイトトップページの表示例

概要

ザインカンプをもとに、アプリ「OHA!」の紹介LPをコーディングしました。サービスの特徴や使い方、メリットなど情報量の多い構成を、PC・スマートフォンそれぞれで見やすく再現しています。

担当範囲
コーディング / レスポンシブ対応 / JavaScript実装
制作期間
約2週間
使用技術
HTML / SCSS / JavaScript / jQuery / Swiper / WOW.js

実装内容

レスポンシブ対応に加え、スライダー、モーダル、FAQのアコーディオン、ドロワーメニュー、スクロールアニメーションなどを実装しました。

工夫したこと

セクション数や情報量が多いため、カンプの余白やレイアウトを細かく確認しながら、長いページでも見やすさを保てるよう実装しました。

課題と対応

PCとスマートフォンでレイアウトが大きく変わる箇所は、要素の並びやサイズを画面幅に合わせて調整し、デザインの印象を保つよう対応しました。