無料で相談する

制作サンプル3本の設計意図

ビザ業務は、相手が「就職する外国人本人」なのか「受け入れる企業」なのか「日本人と結婚した配偶者」なのかで、 刺さるサイトの形がまったく変わります。同じ型を使い回さないことを示すために、客層別に3本作りました。 それぞれ何を判断して、何を実装したのかをここに書きます。

まずサンプルサイトを開く（別ウィンドウ・各1〜2分）

作例1 就労ビザ・一人事務所型サンプルサイトのトップページ 作例1 就労ビザ 作例2 特定技能・企業向けB2B型サンプルサイトのトップページ 作例2 特定技能 作例3 配偶者ビザ・帰化・5言語対応サンプルサイトのトップページ 作例3 配偶者ビザ・帰化（5言語）

設計の説明はこの下に続きます。

掲載している3本は、当研究所が制作した架空の行政書士事務所のサンプルサイトです。 受注実績ではありません。実在の事務所・人物・体験談とは一切関係がなく、掲載されている数値・体験談・人物写真は すべてサンプル用に作成したもの（写真はAI生成）です。各サンプルサイトの冒頭にも同じ断り書きを表示しています。

作例1 ／ 就労ビザ・一人事務所型

早瀬国際行政書士事務所

就労ビザ特化・一人事務所型サンプルサイトのトップページ サンプルサイトを開く

想定したのは、開業1〜3年目で技術・人文知識・国際業務（いわゆる就労ビザ）を主力にする一人事務所です。 この層は件数や許可率といった数字をまだ積めていないことが多いので、 数字ではなく「人・経歴・第三者の声」で信頼を作る形を選びました。 架空の設定として、代表は人材会社で外国人採用支援をしていた経歴を持ち、「採用する側の現場を知っている」ことを立ち位置にしています。

設計上の判断

  • トップに代表の顔写真と一人称の挨拶を置いた。調査した15サイトのうち、トップに代表者の写真があったのは5サイトでした。一人事務所は「誰に頼むか」が商品です。
  • 料金表をトップページ内で完結させた。別ページに逃がすと、そのページが404になったまま放置される事故が実際に起きています。
  • 実績数値は基準日を1か所に統一した。数字ごとに時点がバラバラだと、かえって信用を落とします。
  • 相談導線を電話・フォーム・LINEの3系統にして常時追従させた。調査した15サイトのうち、LINEで相談できたのは4サイトでした。
  • 「毎月8件まで」の受注制限を掲載した。対応可能量を正直に書くことは、希少性の演出であると同時に品質の約束になります。
  • 配色はネイビー×白に緑のアクセント、見出しは明朝体。士業サイトで信頼感が出る組み合わせの定石に寄せています。

実装した内容

  • 全4ページ（トップ／ビザ種別の下層ページ／広告着地用LP／英語版）
  • 広告着地用LPは12セクション構成。ファーストビュー、早期CTA、悩み提起、解決策、代表挨拶、法改正の背景、対応業務、流れ、料金、FAQ、最終CTAまで。CTAは即決層・信頼構築層・最終決断層の3か所に配置。
  • ファーストビューに「不許可時の返金保証」「無料診断」のバッジを配置
  • 入管法改正のニュース枠（更新され続けているサイトに見せるための設計）
  • 英語版は全訳ではなく窓口を分離する方式。相談窓口として機能する最小構成に絞っています。
  • 人物写真6枚はAI生成で同一人物を通し、幅1200pxのJPEGに最適化（各74〜161KB）
日本語＋英語 ／ 全4ページ ／ 広告LPつき トップページ 広告LP English

作例2 ／ 特定技能・企業向けB2B型

行政書士法人ネクストゲート

特定技能・外国人雇用のB2B型サンプルサイトのトップページ サンプルサイトを開く

読み手が個人ではなく、建設・介護・外食業などの受け入れ企業の人事担当者になる場合の形です。 決裁の前に社内稟議が挟まるので、情緒に訴える作りは効きません。数字・表・図解で判断材料を渡し、 資料をダウンロードしてもらって商談に進む導線に振り切りました。 架空の設定は「行政書士法人がそのまま登録支援機関を兼ねている」＝申請と支援の窓口が一本化できる、という一点訴求です。

設計上の判断

  • 作例1とわざと真逆のデザインにした。作例1がネイビー×明朝×中央揃えの情緒訴求なら、こちらはグラファイト×アンバー、ゴシックのみ、左揃え、通し番号つき。ファーストビューもダーク基調です。
  • 追従CTAをLINEではなく「資料ダウンロード」に置き換えた。B2Bの初動は相談ではなく資料請求です。相手の行動様式に合わせて導線そのものを変えています。
  • 料金を3プランに分解した。スポット、名前あたりの月額フルサポート、顧問。稟議に載せる際、社内で比較検討した形を作りやすくするためです。
  • フォームの項目をB2B仕様にした。貴社名・部署・受け入れ予定人数まで取り、営業側が事前に温度感を判断できるようにしています。
  • 顧客ロゴ帯・導入事例・対応業種一覧といった、法人が「自社と同じ状況の事例があるか」を探す動線を用意しました。

実装した内容

  • 全4ページ（トップ／導入事例／対応分野／資料ダウンロードLP）
  • 受け入れフローのタイムライン図、育成就労制度の新旧比較図をHTMLとCSSで作図（画像に焼き込まず、文字として検索・翻訳できる状態を維持）
  • 支援10項目のグリッド、料金3プランの比較表
  • 2段ヘッダー（上段に登録番号と電話、下段にロゴ・ナビ・CTA）。情報量の多いB2Bサイトで、1段に詰めると1280〜1440px幅で崩れたため再設計したものです。
  • 320〜1600pxの10段階の画面幅×4ページ、計40通りで横方向のはみ出しがないことをDOM計測で確認
日本語 ／ 全4ページ ／ 資料DL導線 トップページ 導入事例 資料DL

作例3 ／ 配偶者ビザ・帰化のB2C多言語型

にじいろ国際行政書士事務所

配偶者ビザ・帰化のB2C多言語型サンプルサイトのトップページ サンプルサイトを開く

読み手が在留外国人ご本人、あるいはその日本人配偶者になる場合です。この層が抱えているのは 「費用がいくらか」より前に「偽装結婚を疑われないか」「収入が少ないが大丈夫か」といった不安なので、 サイトの役割を「売り込む」ではなく「不安を1つずつ消す」に振りました。 架空の設定は、代表自身が国際結婚の当事者で、自分の配偶者の在留手続きを自力で通した経験から開業した、というものです。

設計上の判断

  • 作例1・2のどちらとも違う方向に振った。クリーム×テラコッタ×セージ、丸ゴシック、本文17pxで行間2.0、角丸20px。表よりもカード・チェックリスト・Q&Aを主体にしています。
  • 不安を6項目、言葉にして先に並べた。「離婚歴がある」「オーバーステイの経験がある」など、相手が検索窓に打ち込めない類の悩みを、こちらから文字にして置いています。
  • 必要書類を「お客様が集めるもの」「事務所が作るもの」に分けて掲載した。自分の負担がどこまでかが先に分かると、相談の心理的ハードルが下がります。
  • お客様の声に、良い意見だけでなく不満も混ぜた。全部が絶賛だと、かえって信用されません。
  • 連絡手段を言語ごとに変えた。日本語はLINE、英語はWhatsApp、中国語はWeChat、ベトナム語はZalo。「ベトナムの方はLINEではなくZaloを使う」ことを知っている、という事実自体が信頼になります。

実装した内容

  • 全7ページ（日本語／やさしい日本語／英語／簡体中文／ベトナム語のトップ＋配偶者ビザ・帰化の下層2枚）
  • 言語別ページの完全翻訳方式。JavaScriptでその場で切り替える方式は採用していません。多言語での検索流入を捨てることになるためです。
  • hreflangの相互参照を5ページに配置。中国語は zh-CN ではなく表記体系で指定する zh-Hans。言語判定できない訪問者用に x-default を日本語版へ。
  • やさしい日本語版はhreflangの対象外にし、canonicalを日本語版に向けた。同じ言語の別バージョンをalternateに並べるのは誤りだからです。
  • CSSの :lang() でフォントと組版を出し分け。簡体字には簡体字用フォント、ベトナム語は行間を上げて二重アクセント記号が潰れるのを防止。詰め組み（palt）は日本語だけに効かせています。
  • 言語切替UIは全ページ常設。各言語をその言語自身の表記（简体中文、Tiếng Việt、やさしい にほんご）で表示し、現在の言語は非リンク化。
  • 文字を画像に焼き込んでいません。すべて翻訳・検索・拡大が可能なテキストです。
  • 入管用語の対訳表を各言語ページに掲載（在留資格認定証明書＝Certificate of Eligibility／在留资格认定证明书／Giấy chứng nhận tư cách lưu trú）
  • やさしい日本語版はルビ、分かち書き、短文で構成。国が推奨している在留支援の方式ですが、実装している事務所はほとんどありません。
  • altテキストも言語ごとに書き分け。多言語サイトでは代替テキストも翻訳対象です。
  • 7ページ×6段階の画面幅、計42通りではみ出しゼロ、リンク切れゼロ、hreflangの相互参照の整合を確認
5言語 ／ 全7ページ ／ hreflang設計 日本語 やさしい日本語 English 简体中文 Tiếng Việt

補足 制作中に見つけた不具合の話

「多言語対応」を名乗る前に、まず文字が壊れていないか

作例3 の制作中、日本語ページに置いたベトナム語の表記 「Tiếng Việt」の声調記号が分離して崩れていることに気づきました。 原因は単純で、その部分に lang 属性を振っていなかったため、 ベトナム語の文字列に日本語フォントが適用されていたことです。

ベトナム語には母音記号と声調記号が同じ文字に二重で付きます。日本語フォントの多くはこの組み合わせを想定していないので、 記号だけが上にずれて別の文字のように見えてしまう。訪問者からすれば「自分の言語が壊れて表示されているサイト」です。 言語切替のボタン1つで信用を失います。

対処として、全ページの多言語文字列を機械的に洗い出し、すべてに lang 属性を付与しました。 地味な作業ですが、多言語サイトは翻訳の精度より前に、この種の実装で壊れます。 「多言語対応」と書いてある既存サイトを診断すると、同じ問題が残っていることが少なくありません。

無料サイト診断では、この観点も含めて確認しています。 外国語ページをお持ちの場合は、実際にその言語の文字が正しく表示されているかまでお調べします。

同じ作り方で、先生の事務所のサイトを作ります

どの客層を狙うかによって、上の3本のどれに近い形にするかが決まります。 サイトをお持ちの先生には今のサイトの診断を、これから作る先生には同じ地域の同業サイトの調査を、無料でお出しします。

無料で相談する 料金を見る