自主制作デモ

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

SELF-PRODUCED DEMO

先に見せる、 だから迷わない。 自主制作のデモ集。

出来上がりが想像できないまま発注するのは不安だと思います。実際の納品物と同じ作り方で、架空の題材のページを6点つくりました。

  • 静的HTML / CSS
  • WordPress
  • FLOCSS / BEM
  • レスポンシブ
  • ダークモード対応
  • 記事・原稿
  • 図解・資料

これまでの実績

Web制作
20
WordPress運用
50サイト以上
記事の制作・公開
3,583
ライティング
5
ライターの起用・管理
7

このサイトについて(先にお読みください)

掲載している会社名・店舗名・人物名・数値・感想・料金はすべて架空です。実在の企業や団体とは一切関係ありません。

クライアントから受注して制作したものではなく、すべて自主制作です。守秘義務のある受注案件は掲載していません。

受注した実案件の制作実績は、ご相談の際に個別にご提示します(公開可否の確認が必要なため、このサイトには掲載していません)。

WORKS

デモ一覧(6点)

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

架空の物流会社コーポレートサイトのファーストビュー。棚が並ぶ薄暗い倉庫の写真を背景に、明朝体の見出しが白抜きで載っている
コーポレートサイト

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

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

静的HTML/CSSレスポンシブダークモード対応外部依存ゼロ
デモを見る →
架空のヘアサロンの予約ランディングページ。明るいサロン内の写真を背景に、明朝体の見出しとオレンジの予約ボタンが並んでいる
店舗LP

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

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

1ページ完結予約導線スマホ固定CTAFAQ
デモを見る →
架空ツールの操作マニュアル。パンくずと大見出しの下に、対象・所要時間・対応ブラウザをタグで示している
マニュアル・手順書

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

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

目次追従手順ステップ注意・補足の型印刷対応
デモを見る →
記事ページの構成見本。見出し・書誌情報・お断り書きが並ぶ
記事・オウンドメディア

SEO記事ページの構成見本

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

目次見出し階層比較表出典表記の型
デモを見る →
改修前と改修後の比較ページ。切替タブと前提条件のカードが並ぶ
WordPress改修

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

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

ビフォー/アフター切替変更理由の明示既存を壊さない方針
デモを見る →
説明用の図解4点。フロー図の見出しと図版
資料デザイン・図解

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

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

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

対応できること

「作って終わり」ではなく、公開したあとご自身で運用できる状態までをひとまとまりと考えています。Webディレクションは20年、ライティングは5年おこなってきました。

静的なホームページ・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往復の修正の中で調整します。方向性そのものを変える場合は、追加のお見積りをお出しします。

連絡はどこからすればよいですか?

クラウドソーシングのメッセージ機能からご連絡ください。案件ページのやり取りの中で、ご相談を承ります。

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

決まっていない段階でも構いません。ご相談の内容を伺ったうえで、必要なページ数と進め方をご提案します。

クラウドソーシングでお会いした方は、そちらのメッセージ機能からご連絡ください。

お問い合わせフォームへ