Case Study
株式会社Grand Trading
現在の公式サイト(gratrajapan.com)
CLYVARN 長野県を拠点に、ホームページを制作しています
1画面目の比較
パソコン(幅1440px)で開いたときの、1画面目の上の部分です。どちらも、陶磁器が並ぶ棚の写真を使っています。画面写真は2026年9月25日に撮影しました。
白いヘッダーの下に、写真が切り替わるスライダー。社名のロゴタイプと「日本の伝統文化を世界へ」の一文、グランドオークションへのボタンを重ねています。
写真を画面いっぱいに敷き、濃紺の薄い膜を重ねて、見出しを中央に。メニューは写真の上に重ね、右端に「お問い合わせ」と「JP|EN」の切り替えを置いています。
現在の公式サイトとの比較
公開されているページを確かめて、違いがはっきりしている点だけを並べました。
| 項目 | 現在の公式サイト(gratrajapan.com) | リニューアル案(試作サイトを公開中) |
|---|---|---|
| ページの分け方 | 事業ごとのページ(グランドオークション・ビジネスモデル・海外輸出)と、お知らせ・記事(ピックアップ)・求人のページ | 事業ごとのページに加えて、「対象のお客様」と「アクセス」を独立したページに。日本語8ページ |
| トップの並び | スライダー、お知らせ、記事、事業の紹介、電話とWEBのお問い合わせの順 | 1画面目、ミッション、対象のお客様(4種)、事業内容、ご相談の呼びかけの順 |
| スマホでのお問い合わせ | ヘッダーはロゴとメニューのボタン。メニューを開くか、ページの最後から | ヘッダーに「お問い合わせ」のボタンを常に表示。1タップでお問い合わせのページへ |
| ページのタイトル | トップは社名。下層は「ページ名|社名」 | 全ページに、社名に加えて事業内容や地域名を入れたタイトル |
| 説明文meta description | 確かめた10ページのうち、5ページに設定 | 日本語8ページすべてに、ページごとに書いた説明文 |
| 構造化データJSON-LD | 全ページに自動で出力。会社の情報は、社名・URL・ロゴ | 会社の情報に、事業内容・所在地・対応地域なども記述。アクセスのページには会場ごとの所在地 |
| 英語での閲覧 | 英語のページはなし | ヘッダーの「JP|EN」で、自動翻訳の英語表示に切り替え |
表の言葉の意味
- ページのタイトル(title) ブラウザのタブと、検索結果の見出しに出るページの名前です。社名だけでなく事業や地域を入れると、検索した人が何のページかを見出しで判断できます。
- 説明文(meta description) 検索結果で、ページ名の下に出る2〜3行の文です。ページごとに書いてあると、検索した人が「自分に関係あるか」を結果の画面で判断できます。
- 構造化データ(JSON-LD) 検索エンジンとAIが読む、機械向けの名札です。所在地や事業内容を名札にも書いておくと、検索エンジンやAIが会社の情報を読み取るときの材料になります。
確かめ方:リニューアル案のページで、右クリックの「ページのソースを表示」を開き、「description」と「ld+json」を探すと、説明文と構造化データの中身をそのまま読めます。
2026年9月時点で公開ページを確認(確認日:2026年9月25日)。現在の公式サイトにある、お知らせ・記事・求人・オークションの開催日と規約・電話番号の案内は、リニューアル案には載せていません。
デザインのこだわり
扱う
- 陶磁器の棚の写真を、1画面目いっぱいに 器がひとつずつ収まった棚の写真を画面全体に敷き、濃紺の薄い膜を重ねて、白い文字が読める明るさにしました。文字は中央に集め、棚の奥行きを残しています。
- 英字は Cinzel、和文は Noto Sans JP 英字の見出しには、古代ローマの碑文の字形をもとにした書体を。和文の見出しと本文は、読みやすい角ゴシックでそろえています。
- 色は、濃紺・白・金の3色に絞る 金は、小さな英字のラベル、見出しの下の線、お問い合わせの枠など、細部だけに使っています。
- 画面を一つずつ確かめてから公開する パソコンとスマホで各ページを表示し、改行の位置、ページ内リンクで移った先の見出しの隠れ、文字の大きさと色を直してから公開しています。
導線の設計
見に来た人が、自分に関係するページへ迷わず進み、問い合わせまでたどり着けること。スマホで押しやすいかまで確かめます。
-
トップで、お客様を4種に分けて案内
行政・自治体/店舗/業者/個人のカードから、「対象のお客様」ページのそれぞれの説明へ直接移ります。
-
お客様ごとに、依頼してからの流れを先に示す
個人のお客様なら「お問い合わせ・持ち込み」「査定」「お支払い」のように、3〜4段階の流れを載せています。
-
スマホでも、お問い合わせは1タップ
ヘッダーに「お問い合わせ」のボタンを常に出し、各ページの最後にも「お問い合わせはこちら」を置いています。
-
会社概要とアクセスを分ける
会場の一覧と地図はアクセスのページにまとめ、会社概要のページは会社の情報だけにしています。
SEO・AIO
検索エンジンにも、AIの回答にも、事業の中身が正しく伝わる形に整えます。AIOは、AIが答えをつくるときに、サイトの内容を正しく読み取って引用できるようにする整え方です。
- 全ページに、そのページだけのタイトルと説明文 社名だけでなく、事業内容と地域名を入れています。説明文は、ページごとに書き分けています。
- 構造化データ(JSON-LD) トップに会社(Organization)とサイト(WebSite)、下層のページにパンくず(BreadcrumbList)、アクセスのページに会場ごとの所在地(Place)を記述しています。
- 会社の基本情報を、本文と構造化データの両方に 事業内容・所在地・対応地域などを、読む人向けの本文と、機械が読む構造化データの両方に書き、AIの回答が参照しやすい形にしています。
- サイトマップと robots.txt 独自ドメインが決まった時点で、アドレスを差し替えて使える形で用意しています。
検索順位や、AIの回答に表示されることをお約束するものではありません。
ご相談の内容に合わせて
ご希望をしっかり伺ったうえで、