営業時間 9:00 - 18:00(平日)
🎨 デザイン・Web制作 × ⚙️ システム・業務改善

制作実績サンプル

ORVOが提供するサービスの品質をご確認いただくための制作サンプル集です。
各サービスごとに、どのような流れで制作するのかもご紹介しています。

📋

こちらは制作サンプルです

掲載している作品はORVOの技術力・制作クオリティをお伝えするためのサンプルです。架空の企業・店舗を想定して制作しています。実際のご依頼ではお客様のご要望に合わせてオーダーメイドで制作いたします。

すべて
🎨 デザイン・Web制作
⚙️ システム・開発
5 カテゴリ・10 作品
🌐 Homepage

ホームページ制作

企業・店舗向けのスマホ対応コーポレートサイト制作サンプル

Bloom Beauty サロンサイト サンプル SAMPLE
🎨 ホームページ 美容・サロン

Bloom Beauty サロンサイト

架空の美容サロン「Bloom Beauty」を想定したコーポレートサイト。予約への導線設計を重視し、ファーストビューに予約ボタンを大きく配置。サロンの雰囲気が伝わる写真中心のレイアウトで、メニュー・スタッフ紹介・アクセスなど来店に必要な情報をコンパクトにまとめました。スマートフォンからの閲覧を最優先にデザインしています。

ページ数5ページ
構成TOP / メニュー / スタッフ / アクセス / 予約
対応範囲デザイン / コーディング / レスポンシブ
主な機能予約フォーム / Googleマップ埋め込み
レスポンシブ 予約導線設計 写真メイン SEO設定
制作工程
1. ヒアリング・要件整理
ターゲット(20〜40代女性)、サロンの強み、予約につなげたいという目的を整理。競合サロンのサイトも調査し差別化ポイントを特定。
2. サイトマップ・ワイヤーフレーム
5ページ構成を決定し、各ページの情報設計を実施。予約ボタンの配置箇所やスクロール導線を設計。
3. デザインカンプ作成
ナチュラルで上品な配色(ベージュ×ゴールド)をベースにデザイン。写真の選定と加工も同時進行。スマホ版・PC版の2種を作成。
4. コーディング・実装
HTML/CSS/JavaScriptでレスポンシブ対応のコーディング。予約フォーム・Googleマップの埋め込みを実装。
5. テスト・納品
各ブラウザ・端末での表示確認、フォームの動作テスト、表示速度の確認を経て納品。SEO基本設定(タイトル・メタ・OGP)も完了。
SORA建築設計事務所 コーポレートサイト サンプル SAMPLE
🎨 ホームページ 建築・設計

SORA建築設計事務所 コーポレートサイト

架空の建築設計事務所「SORA」を想定した8ページ構成のコーポレートサイト。施工事例ギャラリーを中心に、設計への想い・代表メッセージ・採用情報を掲載。大きな写真で建築作品の魅力を伝えるビジュアル重視のレイアウトを採用し、問い合わせまでの導線を意識した設計にしています。

ページ数8ページ
構成TOP / コンセプト / 施工事例 / サービス / 代表挨拶 / 会社概要 / 採用 / お問い合わせ
対応範囲デザイン / コーディング / 原稿作成 / SEO
主な機能施工事例ギャラリー / お問い合わせフォーム / ブログCMS
レスポンシブ 写真ギャラリー CMS導入 SEO設定 原稿代行
制作工程
1. ヒアリング・競合調査
「施工事例で信頼感を伝えたい」「採用も強化したい」という要件を整理。近隣の同業他社サイトを分析し、差別化方針を策定。
2. サイト設計・原稿作成
8ページのサイトマップを作成。代表メッセージ・コンセプト文・サービス説明の原稿をヒアリング内容をもとにライターが執筆。
3. デザイン制作
モノトーン×アクセントカラーのモダンなデザイン。施工写真を大きく見せるレイアウトを採用し、余白を活かした上品な印象に仕上げ。
4. コーディング・CMS構築
施工事例とブログをCMSで更新可能に。ギャラリーのライトボックス表示やスムーズスクロールのアニメーションも実装。
5. テスト・SEO設定・納品
全ページのクロスブラウザテスト、SEO設定、OGP画像の設定を完了。CMS操作マニュアルも作成して納品。
📄 Landing Page

LP制作

集客・採用・キャンペーンに特化したランディングページの制作サンプル

FIT LIFE 入会促進LP サンプル SAMPLE
🎨 LP フィットネス

FIT LIFE 入会促進LP

架空のフィットネスジム「FIT LIFE」の新規会員獲得を目的としたLP。「初月無料キャンペーン」を訴求軸に、ビフォーアフター・トレーナー紹介・料金プラン・よくある質問・体験申し込みフォームで構成。スクロールするごとに入会メリットが積み重なる設計で、最終CTAへの到達率を意識しました。

セクション数12セクション
構成ヒーロー / 悩み共感 / 特徴 / ビフォーアフター / トレーナー / 料金 / 口コミ / 設備 / アクセス / FAQ / CTA / フォーム
対応範囲構成設計 / コピーライティング / デザイン / コーディング
主な機能体験申し込みフォーム / スクロールアニメーション
コンバージョン設計 コピーライティング フォーム実装 スマホ最適化
制作工程
1. ターゲット分析・構成設計
「運動初心者の30代男女」をメインターゲットに設定。不安を解消→メリット提示→行動促進の流れで12セクション構成を設計。
2. コピーライティング
ヘッドライン・ボディコピー・CTAボタンの文言を全文作成。「続かないジム通い、終わりにしませんか?」をメインコピーに設定。
3. デザイン制作
エネルギッシュな黒×オレンジの配色。動きのある写真とアイコンを使い、スクロールが楽しくなるレイアウトに仕上げ。
4. コーディング・フォーム実装
スクロールアニメーション・固定CTAバー・体験申し込みフォームを実装。スマホでのタップしやすさを徹底検証。
5. 表示テスト・納品
PC・スマホ・タブレットで表示確認。ページ表示速度の最適化(画像圧縮・遅延読み込み)を行い納品。
TechStart プログラミングスクール受講生募集LP サンプル SAMPLE
🎨 LP 教育・スクール

TechStart プログラミングスクール受講生募集LP

架空のオンラインプログラミングスクール「TechStart」の受講生募集LP。「未経験から3ヶ月でWebエンジニアへ」をメインコピーに、カリキュラム紹介・卒業生の声・受講料金・無料説明会申し込みフォームで構成。信頼性を高めるために数値データと卒業生の声を多く配置しました。

セクション数10セクション
構成ヒーロー / 課題提起 / 選ばれる理由 / カリキュラム / 卒業生の声 / 講師紹介 / 料金 / FAQ / CTA / フォーム
対応範囲構成設計 / コピーライティング / デザイン / コーディング
主な機能説明会申し込みフォーム / アコーディオンFAQ
コンバージョン設計 コピーライティング 数値訴求 FAQ実装
制作工程
1. 市場調査・構成設計
競合スクールのLPを10社以上分析。「未経験者の不安解消」を最優先に、10セクションの構成と情報の優先順位を決定。
2. コピーライティング・素材準備
各セクションのコピーを全文執筆。「転職成功率94%」「受講満足度4.8/5.0」など数値データを効果的に配置。
3. デザイン制作
信頼感のあるネイビー×白の配色。カリキュラムのステップ図やアイコンを使い、学習の流れが視覚的に理解できるデザインに。
4. コーディング
アコーディオンFAQ・スクロール連動アニメーション・説明会予約フォームを実装。フォームはバリデーション付き。
5. A/Bテスト準備・納品
ヘッドライン2パターン・CTAボタン色2パターンを用意。Google Analytics・コンバージョン計測タグも設置して納品。
📋 Print

チラシ・パンフレット制作

ポスティング・配布・展示会向けの印刷物デザインの制作サンプル

MORI COFFEE グランドオープン告知チラシ サンプル SAMPLE
🎨 チラシ カフェ・飲食

MORI COFFEE グランドオープン告知チラシ

架空のカフェ「MORI COFFEE」のオープン告知用A4両面チラシ。表面はオープン日時・場所・メイン写真を大きく配置し、目を引くデザインに。裏面にはメニュー一覧・こだわりポイント・地図・クーポンを掲載。近隣住民へのポスティング配布を想定し、手に取った瞬間に「行ってみたい」と思わせる構成にしました。

サイズ・仕様A4 両面フルカラー
用途近隣ポスティング・店頭配布
対応範囲デザイン / コピーライティング / 地図作成 / 入稿データ
納品形式PDF(印刷入稿用) / AI形式
A4両面 ポスティング コピーライティング 地図作成 入稿データ
制作工程
1. ヒアリング・情報整理
オープン日・場所・ターゲット(近隣住民30〜50代)・メニュー情報・お店のこだわりをヒアリング。伝えたい優先順位を整理。
2. ラフ・構成案作成
表面と裏面の情報配分を決定。表面は「写真+日時+場所」でインパクト重視、裏面は「メニュー+こだわり+地図+クーポン」で情報量を確保。
3. デザイン制作
ナチュラルなグリーン×ブラウンの配色でカフェの世界観を表現。写真素材の選定・加工、地図イラストの作成も実施。
4. コピーライティング
キャッチコピー「森の中の一杯を、街なかで。」を作成。メニュー説明文・こだわりポイントのテキストも全文執筆。
5. 入稿データ作成・納品
印刷会社の仕様に合わせた入稿用PDF(トンボ・塗り足し付き)とAI形式のデータを作成して納品。
住まいのミライ 物件紹介パンフレット サンプル SAMPLE
🎨 パンフレット 不動産

住まいのミライ 物件紹介パンフレット

架空の不動産会社「住まいのミライ」の物件紹介用8ページ冊子パンフレット。表紙・会社紹介・取り扱い物件4件の紹介・お客様の声・お問い合わせ案内で構成。各物件は見開きで大きく写真を掲載し、間取り図・設備情報・周辺環境をコンパクトにまとめました。展示会やモデルルーム来場者への配布を想定しています。

サイズ・仕様A4 8ページ中綴じ冊子
用途展示会配布・モデルルーム設置
対応範囲デザイン / 原稿構成 / 間取り図作成 / 入稿データ
納品形式PDF(印刷入稿用) / AI形式
8P冊子 中綴じ 間取り図 写真構成 入稿データ
制作工程
1. ヒアリング・台割作成
掲載物件の選定、各ページに載せる情報を整理。8ページの台割(各ページの内容配分)を作成し構成を確定。
2. 原稿・素材準備
物件紹介文・お客様の声のテキストを作成。間取り図のトレース・清書、写真素材の選定と色調補正を実施。
3. デザイン制作
信頼感のあるネイビー×ホワイトの配色。物件写真を大きく見せるレイアウトで、情報の視認性と高級感を両立。
4. 校正・修正
物件情報の正確性チェック、文字校正、写真の色味調整を2回の校正サイクルで仕上げ。
5. 入稿データ作成・納品
中綴じ冊子の面付けに対応した入稿用PDFを作成。印刷会社との仕様確認も代行して納品。
🖼️ Banner

バナー制作

Web広告・SNS広告向けバナーデザインの制作サンプル

KNOT アパレルブランド セール広告バナーセット サンプル SAMPLE
🎨 バナー アパレル・ファッション

KNOT アパレルブランド セール広告バナーセット

架空のアパレルブランド「KNOT」のシーズンセール告知用Web広告バナー。Google広告・Instagram広告・Yahoo!広告の各フォーマットに対応した5サイズ展開。「MAX 70% OFF」のインパクトある数字と商品写真を組み合わせ、クリックしたくなるデザインに仕上げました。A/Bテスト用にデザイン違いの2パターンを制作。

サイズ展開5サイズ(300×250 / 728×90 / 160×600 / 1080×1080 / 1200×628)
パターン数2パターン(写真メイン / テキストメイン)
対応範囲デザイン / コピー作成 / リサイズ展開
納品形式PNG / JPG / PSD
Google広告 Instagram広告 5サイズ展開 A/Bテスト コピー作成
制作工程
1. 要件確認・トンマナ整理
ブランドガイドライン・使用フォント・カラーを確認。掲載媒体の入稿規定(ファイルサイズ・テキスト量制限等)を整理。
2. コピー作成・ラフ制作
「MAX 70% OFF」「この夏、最後のチャンス。」などのコピー案を複数作成。300×250サイズでラフデザインを2パターン制作。
3. デザイン仕上げ
採用パターンのデザインを精緻化。写真の切り抜き・色調補正、テキストの視認性調整を行い完成版を作成。
4. リサイズ展開
基準サイズから5サイズへ展開。サイズごとにレイアウト・文字サイズを最適化し、どのサイズでも訴求力を維持。
5. 入稿データ納品
各媒体の規定に合わせたPNG/JPG形式で納品。編集用PSDデータも同梱。合計10点(5サイズ×2パターン)を一括納品。
旅するカバン SNS広告バナーセット サンプル SAMPLE
🎨 バナー 旅行・観光

旅するカバン SNS広告バナーセット

架空の旅行会社「旅するカバン」のSNS広告用バナー制作。Instagram・Facebook・X(旧Twitter)向けの3サイズで、沖縄ツアーの訴求を目的としたデザイン。美しい海の写真を前面に出しながら、ツアー価格と「残りわずか」の希少性訴求で申し込みを促す構成。GIFアニメーション版も制作し、フィード上での視認性を向上させました。

サイズ展開3サイズ(1080×1080 / 1200×628 / 1080×1920)
パターン数静止画3点 + GIFアニメーション1点
対応範囲デザイン / コピー作成 / GIFアニメ制作
納品形式PNG / GIF / PSD
Instagram広告 Facebook広告 GIFアニメーション コピー作成
制作工程
1. 要件確認・素材選定
訴求商品(沖縄ツアー)の特徴・ターゲット(20〜30代カップル・女性グループ)を確認。イメージに合う海・ビーチの写真素材を選定。
2. コピー作成
「この夏、忘れられない青を見に行こう。」をメインコピーに。「残り5組限定」「早割で最大20%OFF」のサブコピーで行動を促進。
3. 静止画デザイン制作
透明感のあるブルー×ホワイトの配色。海の写真を大きく使い、テキストはオーバーレイで読みやすく配置。3サイズ分を制作。
4. GIFアニメーション制作
1080×1080サイズでGIFアニメを制作。テキストがフェードインする3秒ループのアニメーションでフィード上での視認性をアップ。
5. 最終調整・納品
各SNSの広告規定(テキスト面積比率・ファイルサイズ上限)に合わせて最終調整。PNG・GIF・PSD形式で納品。
⚙️ System

業務管理システム開発

社内業務の効率化・自動化を実現するカスタムWebシステムの制作サンプル

架空物流会社向け 在庫管理システム サンプル SAMPLE
⚙️ システム開発 物流・倉庫

架空物流会社向け 在庫管理システム

Excelで管理していた在庫データをWebシステム化したサンプル。商品マスタ登録・入出庫処理・在庫一覧・在庫アラート・CSV一括エクスポートの5画面構成。複数拠点の倉庫スタッフがスマートフォンから入出庫を記録でき、管理者はPCのダッシュボードでリアルタイムに在庫状況を把握できます。Excelとの決定的な違いは「同時編集」「検索」「自動集計」ができること。

画面数5画面
構成ダッシュボード / 商品マスタ / 入出庫処理 / 在庫一覧 / CSV出力
主な機能在庫アラート / CSV出力 / 権限管理(管理者・倉庫スタッフ)/ スマホ対応
技術レスポンシブWebアプリ / リアルタイム在庫計算
在庫管理 Excel移行 ダッシュボード CSV出力 権限管理 スマホ対応
制作工程
1. 業務ヒアリング・要件定義
現在のExcel管理の課題(同時編集不可・ミス発生・集計に時間がかかる)を洗い出し、必要な画面・機能・権限設計を文書化。
2. 画面設計・プロトタイプ
5画面分のワイヤーフレームを作成し操作フローを検証。倉庫スタッフがスマホで迷わず入力できるUI設計を重視。
3. データベース設計・開発
商品・入出庫・在庫のテーブル設計を行い、バックエンドとフロントエンドを開発。在庫計算ロジックとアラート機能を実装。
4. テスト・データ移行
Excelの既存データをシステムにインポートするスクリプトを作成。入出庫処理・在庫計算・CSV出力の動作を徹底テスト。
5. 操作説明・納品
操作マニュアル(スクリーンショット付き)を作成。管理者・スタッフ向けに操作説明会を実施し、システムを引き渡し。
架空人材会社向け 顧客管理CRM サンプル SAMPLE
⚙️ システム開発 人材・サービス

架空人材会社向け 顧客管理CRM

求職者と法人クライアントの情報・対応履歴を一元管理するCRMシステムのサンプル。求職者情報の登録・検索、法人案件の管理、マッチング候補の表示、対応履歴のタイムライン表示、月次レポート出力の6画面構成。担当者ごとの対応状況を可視化するダッシュボードにより、チーム全体の進捗をリアルタイムで把握できます。

画面数6画面
構成ダッシュボード / 求職者管理 / 法人管理 / 対応履歴 / マッチング / レポート
主な機能検索フィルター / タイムライン / グラフ表示 / PDF出力 / 権限管理(3段階)
技術レスポンシブWebアプリ / グラフ描画 / PDF生成
CRM 顧客管理 ダッシュボード PDF出力 権限管理 検索・フィルター
制作工程
1. 業務フロー整理・要件定義
求職者登録→案件マッチング→面接調整→成約という業務フローを可視化。各ステップで必要な情報と画面遷移を定義。
2. 画面設計・UI設計
6画面分のワイヤーフレームを作成。対応履歴のタイムライン表示、検索フィルターのUI、ダッシュボードのグラフ配置を設計。
3. データベース設計・開発
求職者・法人・案件・対応履歴のテーブル設計を実施。検索フィルター・タイムライン・グラフ描画・PDF生成機能を順次実装。
4. テスト・権限検証
管理者・マネージャー・一般担当者の3権限でそれぞれ操作テスト。データの登録・検索・出力が正しく動作することを確認。
5. マニュアル作成・納品
権限別の操作マニュアルを3種類作成。サンプルデータを投入した状態で引き渡し、すぐに試用開始できる状態で納品。
Contact

サンプルのクオリティで
あなたのプロジェクトも制作します

デザインも開発も、まずはお気軽にご相談ください。初回ヒアリングは無料です。

🎨

デザイン・Web制作の
ご相談はこちら

ホームページ・LP・チラシ・バナーなど、集客につながるクリエイティブ制作を承ります。

デザインを相談する →
⚙️

システム・業務改善の
ご相談はこちら

業務効率化・社内システム開発・既存ツールの改修など、開発全般に対応します。

開発を相談する →
まず費用感を確認したい方は見積シミュレーション →