名刺デザイン・印刷サービスのLP制作

2026-09-28

制作期間

約5週間（2026年8月下旬〜9月下旬）

ヒアリング → 構成設計 → ワイヤーフレーム → ムードボード（配色・書体の3案）から方向性の決定 → 実装 → 確認用サイトでのご確認・修正 → 公開前の品質チェック → 本番公開 → 管理画面の操作説明と計測ツールの権限のお引き渡しまでを担当しました。

業種・サービス内容

東京・歌舞伎町で働く方や店舗さま向けに、名刺をデザインから印刷・お届けまで手がける名刺デザインサービス。テンプレートから選ぶ名刺からオリジナルデザイン、箔押し・エンボス・ホログラムの加工、ロゴやバナー制作まで承っています。

ご相談・ご依頼の窓口はLINEに一本化されています。

担当範囲

ヒアリング・競合調査・構成設計・ワイヤーフレーム・デザイン・コーディング・WordPressのオリジナルテーマ制作・独自ドメイン取得とサーバー設定の代行・ドメインメールの作成・本番公開・公開前後の品質チェック・アクセス解析の設定までを一気通貫で担当しました。

キャッチコピーと見出しはご依頼主さまの言葉を軸にし、料金・納期・お支払い条件の説明文とボタンの文言は当方で整理しています。ファーストビューの写真はご依頼主さまからのご支給です。

サイト種別

ランディングページ（トップ1ページ）＋ブログ・プライバシーポリシーの下層ページ。WordPressで構築し、ご依頼主さまご自身で記事の投稿・制作事例の追加・写真の差し替えができる形でお渡ししています。スマートフォン対応のレスポンシブデザインです。

デザインの方向性

「ホテルライク・余白・凛とした気品」を軸に、純白と黒のモノクロで設計しました。配色と書体を変えた3案のムードボードからご依頼主さまに選んでいただき、明朝体と欧文セリフ体の組み合わせで、派手さではなく品のよさで選ばれる名刺屋の世界観に整えています。

ロゴの対角線をモチーフとして、セクションの区切りやボタンのホバー表現に展開しました。LINEへのボタンもブランドの緑は使わず黒で統一し、世界観を一色で崩さないようにしています。ファーストビューは名刺の写真を全面に敷き、文字が乗る面にだけ白いベールをかけて読みやすさを確保しました。

実装した主な機能・工夫

競合調査で上位のサイトがほとんど書いていなかった「納期」「条件つきの金額」「歌舞伎町内の直接お届け」の3点を、ファーストビューに即答の形で配置
「料金が分かりにくい」「いつ届くか分からない」という不安に先回りし、全プランの料金・追加料金がかかる条件・修正回数・お支払い方法を具体名まですべて掲載。納期は「仕上がりまで」と「お届けまで」の2段に分けた表にしました
LINEへの導線をヘッダー・ファーストビュー・ページ途中の案内帯・締めのご案内に配置し、スマートフォンでは画面下部に固定バー、パソコンでは右下に閉じられるバナーを表示
ページ途中の案内帯はWordPressの同期パターンで共通化し、1か所直せばすべての帯に反映される形に
制作事例はカスタム投稿で管理し、「名刺／チラシ・ポスター／ロゴ」のタブ切り替えと、名刺の表裏を大きく見られる拡大表示を実装。ご依頼主さまが管理画面から事例を追加すると、トップページに自動で並びます
右下バナー・ファーストビューの背景写真・お客様の声の表示／非表示を、管理画面のカスタマイザーから切り替えられるように設定
ロゴを筆跡で描くローディング演出と、スクロールに合わせた控えめなフェード表示。「視差効果を減らす」設定の端末では動きを止めて表示します
ブログは一覧・記事・カテゴリーページと右サイドバーを制作し、記事の見出しから目次を自動で組む機能をプラグインを使わずに実装
検索エンジンとAIに正しく伝わるよう、事業者情報・よくある質問・ブログ記事の構造化データ（JSON-LD）を付与。サイトの主題「歌舞伎町の名刺デザイン」はファーストビューに文字で置いています
Googleアナリティクス4とSearch Consoleを設定し、LINEボタンが押された回数を計測できるようにしてからお引き渡し

使用技術

WordPress（オリジナルテーマを一から制作）/ HTML / CSS / JavaScript / PHP。アニメーションはIntersectionObserverとCSSで実装しています。

画像はWebP形式・レスポンシブ画像で配信し、ファーストビューの写真は先読み（preload）しています。独自ドメインの取得、サーバーのSSL設定、http・wwwありのURLを1つに揃える301リダイレクト、ドメインメールの作成まで代行しました。計測はGoogleタグマネージャー経由でGoogleアナリティクス4に送っています。

品質・パフォーマンス