Case Study

株式会社Grand Trading

現在の公式サイト(gratrajapan.com)と、ご相談を受けてこちらで制作したリニューアル案(試作サイトを公開中)を並べてご紹介します。公式サイトは、これまでどおり gratrajapan.com です。

リニューアル案のパソコンの1画面目。陶磁器が並ぶ棚の写真を全面に敷き、中央に英字の見出しとミッションの一文 リニューアル案のスマホの1画面目。ヘッダーにロゴ、お問い合わせのボタン、メニューのボタン
リニューアル案(試作サイトを公開中)の1画面目。パソコン(幅1440px)とスマホ(幅390px)で開いた画面です。2026年9月25日に撮影。
事業
LIVEオークション(グランドオークション)・海外輸出など
構成
日本語8ページ(リニューアル案)

掲載しているのは、公開の許可をいただいた制作物だけです。

CLYVARNのアイコン

CLYVARN 長野県を拠点に、ホームページを制作しています

1画面目の比較

パソコン(幅1440px)で開いたときの、1画面目の上の部分です。どちらも、陶磁器が並ぶ棚の写真を使っています。画面写真は2026年9月25日に撮影しました。

Current現在の公式サイト(gratrajapan.com)
現在の公式サイトのパソコンの1画面目の上の部分。白いヘッダーにメニューとお問い合わせのボタン、陶磁器の棚の写真に社名のロゴタイプと「日本の伝統文化を世界へ」の一文

白いヘッダーの下に、写真が切り替わるスライダー。社名のロゴタイプと「日本の伝統文化を世界へ」の一文、グランドオークションへのボタンを重ねています。

Proposalリニューアル案(試作サイトを公開中)
リニューアル案のパソコンの1画面目の上の部分。陶磁器の棚の写真を全面に敷き、写真の上にメニュー、中央に英字の見出し「Connecting Japan's Tradition to the Future」

写真を画面いっぱいに敷き、濃紺の薄い膜を重ねて、見出しを中央に。メニューは写真の上に重ね、右端に「お問い合わせ」と「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画面目で伝わること。写真の使い方、書体、色の数、余白まで、ひとつずつ決めてつくります。

  • 陶磁器の棚の写真を、1画面目いっぱいに 器がひとつずつ収まった棚の写真を画面全体に敷き、濃紺の薄い膜を重ねて、白い文字が読める明るさにしました。文字は中央に集め、棚の奥行きを残しています。
  • 英字は Cinzel、和文は Noto Sans JP 英字の見出しには、古代ローマの碑文の字形をもとにした書体を。和文の見出しと本文は、読みやすい角ゴシックでそろえています。
  • 色は、濃紺・白・金の3色に絞る 金は、小さな英字のラベル、見出しの下の線、お問い合わせの枠など、細部だけに使っています。
  • 画面を一つずつ確かめてから公開する パソコンとスマホで各ページを表示し、改行の位置、ページ内リンクで移った先の見出しの隠れ、文字の大きさと色を直してから公開しています。

導線の設計

見に来た人が、自分に関係するページへ迷わず進み、問い合わせまでたどり着けること。スマホで押しやすいかまで確かめます。

  1. トップで、お客様を4種に分けて案内

    行政・自治体/店舗/業者/個人のカードから、「対象のお客様」ページのそれぞれの説明へ直接移ります。

  2. お客様ごとに、依頼してからの流れを先に示す

    個人のお客様なら「お問い合わせ・持ち込み」「査定」「お支払い」のように、3〜4段階の流れを載せています。

  3. スマホでも、お問い合わせは1タップ

    ヘッダーに「お問い合わせ」のボタンを常に出し、各ページの最後にも「お問い合わせはこちら」を置いています。

  4. 会社概要とアクセスを分ける

    会場の一覧と地図はアクセスのページにまとめ、会社概要のページは会社の情報だけにしています。

リニューアル案のスマホのトップ。「対象となるお客様」の見出しと、行政・自治体、店舗様のカード
リニューアル案のトップ(スマホ)。「対象となるお客様」のカードから、それぞれの説明へ進みます。

SEO・AIO

検索エンジンにも、AIの回答にも、事業の中身が正しく伝わる形に整えます。AIOは、AIが答えをつくるときに、サイトの内容を正しく読み取って引用できるようにする整え方です。

  • 全ページに、そのページだけのタイトルと説明文 社名だけでなく、事業内容と地域名を入れています。説明文は、ページごとに書き分けています。
  • 構造化データ(JSON-LD) トップに会社(Organization)とサイト(WebSite)、下層のページにパンくず(BreadcrumbList)、アクセスのページに会場ごとの所在地(Place)を記述しています。
  • 会社の基本情報を、本文と構造化データの両方に 事業内容・所在地・対応地域などを、読む人向けの本文と、機械が読む構造化データの両方に書き、AIの回答が参照しやすい形にしています。
  • サイトマップと robots.txt 独自ドメインが決まった時点で、アドレスを差し替えて使える形で用意しています。

検索順位や、AIの回答に表示されることをお約束するものではありません。

ご相談の内容に合わせて

ご希望をしっかり伺ったうえで、今のサイトのどこを変えるとよいかを、この事例のように具体的にご提案します。会社のホームページと採用ページのご相談は、それぞれのページで進め方をご説明しています。

ご相談の窓口を見る