自主制作デモ このサイトに掲載しているページは、制作物の見本としてすべて自分で作った架空の題材です。実在する企業・団体・店舗の依頼で制作したものではありません。
SELF-PRODUCED DEMO

「どんなものが出てくるか」を、
先に見てからご依頼いただくための
自主制作デモ集です。

ご依頼前にいちばん不安なのは、出来上がりが想像できないことだと思います。そこで、実際の納品物と同じ作り方・同じ品質基準で、架空の題材のページを6点つくりました。 レイアウトの考え方、文章の粒度、スマホでの見え方、手直しのしやすさまで、そのまま確認していただけます。

このサイトについて(先にお読みください)
  • 掲載している会社名・店舗名・人物名・数値・感想・料金はすべて架空です。実在の企業や団体とは一切関係ありません。
  • クライアントから受注して制作したものではなく、すべて自主制作です。守秘義務のある受注案件は掲載していません。
  • 受注した実案件の制作実績は、ご相談の際に個別にご提示します(公開可否の確認が必要なため、このサイトには掲載していません)。
Web制作
20
Webディレクション
20
ライティング
5
WordPress運用
50 サイト以上
記事の制作・公開
3,583
WORKS

デモ一覧(6点)

よくご依頼いただく5つの領域から、代表的な形を選んで作りました。どれも外部サービスに接続していない静的なページです。スマートフォンでもそのままご覧いただけます。

コーポレートサイト

架空の物流会社のトップページ

BtoBでよくある「事業内容・強み・会社概要・採用・問い合わせ」の一枚構成です。端末の設定に合わせてダークモードにも切り替わります。

  • 静的HTML/CSS
  • レスポンシブ
  • ダークモード対応
  • 外部依存ゼロ
デモを見る →
店舗LP

架空のヘアサロンの予約ランディングページ

初めての方に予約してもらうまでの流れを1ページで組みました。料金・所要時間・アクセス・不安の解消を、迷わない順番に並べています。

  • 1ページ完結
  • 予約導線
  • スマホ固定CTA
  • FAQ
デモを見る →
マニュアル・手順書

架空ツールの操作マニュアル(Web版)

作業しながら見るための手順書です。1手順1画面、つまずきやすい箇所には先回りの注意書き、最後に想定質問。あとから画面が変わっても直しやすい粒度で切っています。

  • 目次追従
  • 手順ステップ
  • 注意・補足の型
  • FAQ
  • 更新履歴
デモを見る →
記事・オウンドメディア

SEO記事ページの構成見本

読み手が知りたい順に並べる見出しの組み方、比較表・FAQ・出典欄の型をまとめた見本です。本文は構成を見ていただくためのダミー原稿です。

  • 目次
  • 見出し階層
  • 比較表
  • FAQ
  • 出典表記の型
デモを見る →
WordPress改修

改修前・改修後の比較(架空の教室サイト)

既存サイトを「壊さずに直す」ときの考え方を、同じ内容のビフォー・アフターで並べました。どこを、なぜ変えたのかを1つずつ書いています。

  • ビフォー/アフター切替
  • 変更理由の明示
  • 既存を壊さない方針
デモを見る →
資料デザイン・図解

説明用の図解4点(フロー・比較・構成・数値)

文章だけでは伝わらない部分を図にしたものです。装飾ではなく「情報の整理」を目的に、同じトンマナで量産できる形にしています。

  • SVG(拡大しても劣化しない)
  • 統一トンマナ
  • 資料・記事に流用可
デモを見る →
SERVICE

対応できること

「作って終わり」ではなく、公開したあとご自身で運用できる状態までをひとまとまりと考えています。

静的なホームページ・LPの制作

HTMLとCSSで組みます。読み込みが速く、月々の維持費がかかりにくい形です。スマートフォンでの見え方を先に決めてから作ります。

WordPressの更新・改修

既存サイトの文言差し替え、ページ追加、表示崩れの修正、記事の入稿まで。既存のデザインやプラグインには触れず、ご依頼の範囲に限定して直します。

記事・オウンドメディアの原稿

検索から読まれることを前提に、構成づくりから執筆・入稿まで対応します。数値や制度の記述は、必ず一次情報を確認してから書きます。

業務マニュアル・手順書

動画や既存資料から、初めての方が手を動かせる手順書に落とします。画面の差し替えが起きても直しやすい粒度で作ります。

説明用の図解・資料デザイン

フロー図・比較表・構成図など。同じトンマナで数十点そろえる作業が得意です。SVGで作るので拡大しても粗くなりません。

公開後の引き渡し

ドメイン・公開先・フォームはご依頼者名義でご用意いただき、こちらは作業者として入る形をおすすめしています。解約や引き継ぎでもめない形にするためです。

FLOW

進め方

初回のご連絡から納品まで、この4段階で進みます。着手前に範囲と回数を決めるので、あとから金額が膨らむことはありません。

  1. ヒアリング(30分〜)

    「誰に、何をしてもらいたいのか」から伺います。原稿・写真・既存サイトの有無で作業量が変わるため、そこも先に確認します。

  2. 構成とお見積りの確定

    ページの並びと、各ページに載せる内容を文章でお出しします。ここで合意してから制作に入るので、完成後の作り直しが起きにくくなります。

  3. 制作・ご確認

    初稿をお見せし、PC・スマートフォンの両方でご確認いただきます。修正は初稿後2往復までをお見積りに含めています。

  4. 公開と引き渡し

    公開作業のあと、ファイル一式と更新方法をお渡しします。ご自身で文言を直せる状態にして終わります。

COMMITMENT

お約束していること

あいまいにすると、あとでお互いが困る項目です。最初に決めておきます。

ご連絡への返信営業日ベースで48時間以内に一次返信します。すぐに答えが出せない内容でも、「いつまでに回答するか」を先にお返しします。
進捗のご報告制作中は週1回以上、その時点の画面をお見せします。完成まで音信不通になることはありません。
修正の回数初稿後2往復までをお見積りに含みます。3往復目以降や、合意した構成そのものの変更は、着手前に追加のお見積りをお出しします。
作業範囲お引き受けする範囲は着手前に書面で確定します。範囲外のご相談は「できません」ではなく、追加見積りか別のやり方をご提案します。
納品するものファイル一式と、更新のしかたを書いた手順メモをお渡しします。特定のツールに縛られない形でお渡しします。
できないことできない作業は最初に申し上げます。経験のない領域を「経験あり」とは書きません。24時間・当日対応はお受けしていません。
生成AIの利用下調べと下書きに利用しています。ただし数値・手順・制度に関わる記述は、必ず一次情報を確認してから確定させます。ご依頼側でAIの利用可否のご方針がある場合は、それに合わせます。
FAQ

よくあるご質問

なぜ実際の納品物ではなく、架空のサイトを載せているのですか?
受注した制作物は、公開してよいかを依頼元に確認する必要があるためです。確認が取れているものはご相談の際に個別にお見せします。このサイトは「今すぐ品質を見ていただく」ためのもので、掲載物はすべて自主制作です。
ここにあるデザインをそのまま使えますか?
題材が架空のため、そのままの流用はおすすめしません。ご依頼の際は、業種・お客様層・目的に合わせて構成から作り直します。「この雰囲気が好み」といったご指定にお使いください。
スマートフォンでの見え方は確認できますか?
できます。各デモページはスマートフォンの画面幅でレイアウトが切り替わります。お手元の端末でそのまま開いてご確認ください。
表示は速いですか。維持費はかかりますか?
各ページは外部のスクリプトや広告を一切読み込まない作りです。静的なページとして公開する場合、必要な費用は独自ドメイン代(年間2,000円前後)が中心になります。WordPressをお使いの場合はサーバー代が別途かかります。
途中で「思っていたのと違う」となった場合は?
そうならないように、制作前に構成を文章でお出しして合意してから着手します。それでもずれた場合は、初稿後2往復の修正の中で調整します。方向性そのものを変える場合は、追加のお見積りをお出しします。
連絡はどこからすればよいですか?
クラウドソーシングのメッセージ機能からご連絡ください。案件ページのやり取りをそのまま使っていただくのがいちばん早いです。

まずは「何を作りたいか」だけお聞かせください

要件が固まっていない段階でも構いません。目的とご予算感を伺えれば、ページの並びと概算をお出しします。ご連絡はクラウドソーシングのメッセージからお願いします。