nagi|Web制作 シナリオ・ライティングのポートフォリオ

PORTFOLIO — WEB

伝えたいことを聞き取って、
見やすいサイトに。

法人営業を14年続けている会社員です。副業でWeb制作をしています。最初にご要望を聞き取って整理し、デザインからコーディング、公開まで一人で対応します。掲載する文章の推敲やキャッチコピーのご提案もできます。

対応範囲
デザイン〜公開構成・デザイン・コーディング・サーバー/ドメイン設定
実装
HTML / CSS / JSNext.js・Supabase を使った仕組みづくりも対応
文章
ライティング実績ありWebライティングの単品案件 10件ほど

01 制作物

業種ごとに作ったデモサイト

すべて自主制作のデモです。店名・住所・料金などは架空で、実在のお店・会社のサイトではありません。写真はイメージ素材です。

hair salon こみち のパソコン表示 hair salon こみち のスマホ表示
デモ美容室|ホームページ

hair salon こみち

初めて来る方が予約前に気になる「料金」「駐車場」「担当が途中で変わらないか」に、先回りして答える作りにしました。

  • メニュー・料金表、スタイル写真、スタッフ紹介
  • よくある質問で不安を解消してから予約へ
  • 同じお店の電子ショップカード(QRから開く1画面)も制作
サイトを見る →
洋食屋 ひなた のパソコン表示 洋食屋 ひなた のスマホ表示
デモ飲食店|LP

洋食屋 ひなた

老舗の洋食屋を想定したランチ集客のLPです。お店の想いとこだわりを先に伝え、人気メニューとお客様の声で来店を後押しする流れにしています。

  • 想い → こだわり → 人気メニュー → 店内 → お客様の声
  • ご利用案内・アクセスまで1ページで完結
サイトを見る →
café komorebi のパソコン表示 café komorebi のスマホ表示
デモカフェ|複数ページのホームページ

café komorebi

トップ・ブログ・お問い合わせの3ページ構成です。コンセプト、メニュー、産地の紹介、焼き菓子の販売、お知らせまで、カフェの日常を伝える作りにしました。

  • トップ/ブログ(お知らせ)/お問い合わせの3ページ
  • お問い合わせフォームの画面(デモのため送信機能はなし)
サイトを見る →
COMPASS経営コンサルティング のパソコン表示 COMPASS経営コンサルティング のスマホ表示
デモ会社(BtoB)|LP

COMPASS経営コンサルティング

中小企業向けコンサルの、無料相談につなげるLPです。お悩みの共感から入り、進め方・料金・事例・よくある質問で不安を減らしてから申し込みへ誘導します。

  • お悩み → 解決の考え方 → 流れ → 料金 → 事例 → FAQ
  • 紺とゴールドで、信頼感のある配色に
サイトを見る →
小料理屋 灯 のパソコン表示 小料理屋 灯 のスマホ表示
デモ和食店|LP

小料理屋 灯(あかり)

明朝体と落ち着いた和の配色で、お店の雰囲気を伝える1ページのサイトです。こだわり・季節のメニュー・アクセスに絞り、迷わず読める量にしています。

サイトを見る →
nagi 制作の募集ページ のパソコン表示 nagi 制作の募集ページ のスマホ表示
自分のサービス募集ページ|LP

nagi ホームページ制作の募集ページ

自分の制作サービスの募集ページです。Instagramの投稿と見た目を揃え、ページからInstagramのDMで相談できる導線にしています。

ページを見る →

ほかの制作物

サロン電子カルテは、紙のカルテと施術写真をiPad 1台にまとめるサロン向けのWebアプリです。提案資料の画面はすべて見本データです。

02 できること

対応できる技術・機能

見た目だけでなく、公開後にお店や会社の方が使いやすい仕組みまでご相談いただけます。

デザイン・コーディング

  • HTML / CSS / JavaScript でのコーディング(スマホ対応)
  • Next.js・TypeScript・Tailwind CSS での複数ページのサイト
  • Figma 形式のデザインデータ納品
  • Canva でのデザイン納品(コーディング不要の場合)

更新しやすい仕組み

  • メニュー・料金・写真をお店側で更新できる管理画面(ログイン付き)
  • 管理画面で書くだけで更新できるブログ(microCMS)
  • よくある質問に答えるAIチャットの設置

集客・予約

  • Square などの予約サービスの埋め込み
  • お問い合わせフォームの設置
  • Googleアナリティクス(GA4)の計測タグ設置
  • Googleへのインデックス登録(Search Console)

公開・文章

  • レンタルサーバー・ドメインの設定から公開まで
  • Cloudflare でのサイト公開
  • GitHub でのバージョン管理
  • 掲載文の推敲・キャッチコピーのご提案

03 進め方

ご依頼から公開まで

  1. ヒアリング目的・お客様・載せたい内容を伺い、要望を整理します
  2. 構成案ページの流れと見出しを先にお見せします
  3. デザイン確認配色・レイアウトを画面で確認していただきます
  4. 実装スマホ・パソコンの両方で表示を確認しながら作ります
  5. 公開サーバー・ドメインの設定と公開作業まで対応します

修正

  • 小規模なサイト(LP・小さなHP)は、納品後2回まで無料で修正します
  • それ以上の修正や追加は、内容を伺って都度ご相談します

AIの使い方

  • 配色・レイアウトの下案づくりにAIを活用し、早い段階で画面をお見せします
  • 写真の見せ方・余白・文字の調整と、公開前の最終チェックは自分の目で行います

04 プロフィール

nagi(nagi205)

仕事
会社員(法人営業職)。2012年から14年間、メーカーと顧客の間に立つ法人営業として、納期調整や社内の課題解決などを担当
副業
Web制作、記事・YouTube台本の執筆
作業時間
週20時間程度(平日夜・土日祝が中心)
強み
相手の意図やニーズを聞き取り、何を作るべきかを整理すること
名前
ハンドルネームで活動しています。ご契約時にはフルネームをお伝えします

ご依頼・ご相談

クラウドワークスのメッセージからご連絡ください。
何を作るか決まっていない段階でも、ご相談いただけます。

シナリオ・ライティングのポートフォリオはこちら →