Grand（グランド）テンプレート 利用ガイド
Grand（グランド）は、信頼と格式を打ち出したいビジネス向けに設計されたプレミアムテンプレートです。IT・法律・金融・コンサルティング・医療・高級店など、洗練された印象のサイトを作りたい方におすすめです。
他のテンプレートと異なる点
- スクロールアニメーション：画面をスクロールすると要素が滑らかに登場します
- テーマカラー連動：ヘッダー・フッター・各セクションの背景色がまとめて変わります
- 写真セクションの2通りの使い方：口コミとしても、フォトアルバムとしても活用できます（詳細は6章）
- メニューの自動整理：メニューが多い場合、自動的に「その他」にまとめられます
管理画面の「基本情報」から、ヘッダーに表示する ロゴ画像 と 説明文 を設定できます。
ロゴ画像
「ロゴ画像設定」でサイズを選ぶと、ヘッダーでの表示サイズが変わります。
| サイズ設定 | ヘッダーでの表示高さ | こんな場合に |
|---|---|---|
| Original / Large | 最大 40px | ロゴをしっかり見せたいとき（デフォルト） |
| Medium | 最大 32px | コンパクトにまとめたいとき |
| Small | 最大 24px | シンプルに小さく添えたいとき |
| 項目 | 内容 |
|---|---|
| 推奨の縦サイズ | 80px 前後 |
| 横幅 | 縦横比を保って自動調整（制限なし） |
| 形式 | PNG（透過背景）を推奨 |
ロゴの見せ方：2つのパターン
Grand のヘッダーはテーマカラー（濃色）の背景のため、ロゴの見せ方は大きく2通りあります。
| パターン | 方法 | 向いている場合 |
|---|---|---|
| ① 白抜き・明るい色のロゴを使う | 白や明るい色でロゴを用意する | 既存のロゴデータが白抜き版で入手できる場合 |
| ② 透過PNGを使う | 背景が透明なPNGを登録する | カラーロゴをそのまま使いたい場合。背景付き画像よりも自然に表示しやすい |
説明文(基本情報の「説明」)
ロゴの下に、サイトの説明やキャッチコピーを表示できます。改行を入れて2〜3行に分けることもできます。
| 項目 | 内容 |
|---|---|
| 表示行数 | 最大 3行まで |
| 表示文字数 | 最大 約120文字まで（超えた分は「…」で省略） |
| 改行 | 対応（入力した改行はそのまま反映されます） |
| スマートフォン表示 | 非表示 |
管理画面の「デザイン」→「編集：かんたん編集」→「テーマカラー」からカラーを選択できます。Grand テンプレートは全10色のカラーバリエーションをご用意しています。
テーマカラーが変わる箇所
- ヘッダー（メニューバー）の背景色
- フッターの背景色
- 各ページのトップ帯（ページヒーロー）の背景色
- トップページのお問い合わせセクションの背景色
- ボタンの色
| カラー | こんな業種に |
|---|---|
| ネイビー（デフォルト） | IT・金融・法律・コンサル |
| 黒 | ギャラリー・建築・高級ブランド |
| グリーン | 環境・農業・オーガニック |
| レッド | ワインバー・美容・ブライダル |
| グレー | 製造・建設・エンジニアリング |
| 松葉色 | 和食・旅館・アトリエ・カフェ |
| ブレイズオレンジ | 飲食・パン屋・雑貨 |
| ターコイズ | クリニック・ヘルスケア・IT |
| ブラウン | ジュエリー・旅館・ラグジュアリー |
| ききょう色 | スタジオ・クリエイティブ・バー |
トップページの最上部に表示される全画面スライドショーです。サイトの第一印象を決める重要な要素です。
推奨仕様
| 項目 | 内容 |
|---|---|
| アスペクト比 | 横長推奨（16:9 以上） |
| 推奨解像度 | 1920 × 1080px 以上 |
| 表示高さ | PC: 画面高さの70% ／ スマホ: 50% |
Grand の「フォトアルバム」は、口コミ・お客様の声としても、フォトアルバムとしても使えるよう設計されています。登録した内容（本文・タイトル・写真）の組み合わせによって、カードの見た目が自動的に切り替わります。
トップページへの表示について
トップページの「お客様の声」セクションには、登録した写真のうち新しいものから6件が表示されます。
- カテゴリーの設定に関係なく、すべての写真が対象です
- 7件目以降は「View All」ボタンからフォトアルバムページで確認できます
カード表示パターン
→ 口コミカードとして、テキスト・写真・名前がすべて表示されます
→ 写真と名前をシンプルに表示。プロフィールカードとして活用できます
→ 匿名の口コミ・コメントに適しています。名前は表示されません
→ フォトタイルモード。写真が正方形にトリミングされてカード全面に表示されるギャラリー風のレイアウトになります
カードをクリックしたときの動作
トップページのカードをクリックすると、フォトアルバム一覧ページに遷移します。フォトアルバム一覧ページでは、カードをクリックするとその場でモーダルが開き、全文・写真を確認できます。
- 本文が長い場合、カード上では冒頭5行で省略表示されます
- 写真は元のサイズ・縦横比のままで表示されます（トリミングなし）
- 本文がある場合は、写真の下にテキストが表示されます
- 左右の矢印ボタンで前後のカードに切り替えられます
写真セクションの見出しを変える
トップページの「写真」セクションの見出しは、ナビゲーションの表示名がそのまま使われます。「お客様の声」「Voice」「ギャラリー」など、サイトの用途に合わせて自由に変更できます。
スマートフォンでの表示
Grand テンプレートはスマートフォン・タブレット・PCのすべてに最適化されています。管理画面でスマートフォンプレビューを確認しながら設定することをおすすめします。
→ https://r.goope.jp/sample107/