Relation トップページブロック

ブロック組み立て

いよいよページの内容を作っていきます！

このテーマは「たくさんのコンテンツをトップページに詰め込んで、スクロールしながら見ていく」という構成になります。1つ1つのコンテンツを「ブロック」と呼び、様々なレイアウトのブロックを積み上げていくイメージです。

ブロックごとの表示設定

デザイン設定では、ブロックごとに「表示するかどうか」のON/OFFスイッチがありますので、必要なものだけをONにして使用します。

そして、利用するブロックごとに必要な素材(写真やテキスト)を流し込んでいくことで、ページが完成します。

ブロックの順番変更はできませんが、もしどうしても必要であればHTML編集Appでのコードカスタマイズとなります。

ブロック一覧

テーマ設定では、写真やテキストを未設定の状態でもそのブロックがどんなものか分かるよう、あらかじめ仮画像や仮テキストが表示されるようになっています。

仮テキストとしてそのブロックの説明が書き込んでありますので、プレビュー画面を見ながら触ってみるだけでほとんどの使い方を理解していただけると思いますが、ここではどんなブロックがあるかを一通りご紹介します。

シンプル文章ブロック	「見出し + 文章」のみのシンプルなブロックメイン画像で大きく訴求した後、どんなサービスなのかを一息ついて簡潔にあいさつするようなイメージで利用できます。
主力商品ブロック	物販サイトとして特定商品を全面に押し出すたとえば1つの看板商品だけを販売するLP的なサイトとして活用する際、冒頭にその主力商品をここで大きく紹介することができます。「主力商品ブロック」をONにするだけで、すでに登録済みの商品の中の先頭の商品を1つ、大きく表示します。商品は３番目まで表示することができます。すでに登録された商品の写真やタイトル、説明文がそのまま表示されますので、改めて商品情報を入力する必要はありませんここでいう○番目とは、商品管理画面でみる商品の並び順です。また、商品説明文を表示するかどうかを選択できます。このブロックはシンプルに主力商品を大きく見せることが目的です。商品の価格、割引、定期販売、あるいはラベルといった「付随情報」は表示されません。
カテゴリーコレクションブロック（3列）カテゴリーコレクションブロック（2列）	商品カテゴリーの一覧を画像バナー+リンクでまとめる商品カテゴリーAppで出来上がったカテゴリーページへはメインナビゲーションからアクセスできますが、画像バナーで大きな動線を作りたいときに利用します。「カテゴリー画像+リンク先URL」のセットを6つまで設定できます。「リンク先UR」は、カテゴリーを作成した後に実際にそのカテゴリーページを表示させ、そのURLをコピーしてペーストします。カテゴリーバナー画像は画像内にカテゴリー名を入れたり、説明を入れたり、自由にデザインして作成します。縦横比、サイズは自由ですが、綺麗に並べるには全てのバナーで統一する必要があります。「カテゴリ画像の並べ方」は1列〜4列（それぞれスマホ時に1列か2列か）から選択できます。画像の縦横比、またバナー数の奇数/偶数によって、収まりの良いレイアウトを選択できます。
イントロブロック	「写真 + 文章」を左右に分けて３セットサービスの概要やこだわりのポイントを、左右レイアウトでリズム良く演出します。３セットまで追加することができます。それぞれセットは画像を設定すれば表示、画像を削除すれば非表示となります。（初期設定では３セットともサンプル画像が設定されています）
３カードブロック	「画像＋見出し+説明文」を名荒べて３カード並列につのカードが並ぶレイアウトです。サービスの特徴やメリットをひと目で分かりやすく表現できます。
中間ビジュアルブロック	イメージビジュアルを大きく文章が続くと読み手に疲れを感じさせます。雰囲気を伝えるイメージ画像を挿入し、コンテンツ間のクッションに。設定オプション「画像の寄せ指定」にて、スマホ縦表示での画像配置を「中央/右寄せ/左寄せ」から選択できます。
スライドインブロック	「写真 + 文章」がスクロールに合わせてフェードイン「イントロブロック」と似たレイアウトで、最大４枚のカードがスクロールに合わせて左右から現れてくる、動きをつけたブロックです。左右からスライドインすることで成立するレイアウトですので、ブロックON＝２枚目までのカードは必ず表示されます。カードは4枚目まで追加することができます。カード3、カード4は画像をアップロードすることで表示されますので、続いて見出しや説明文を入力してください。
フォトギャラリーブロック	クリックで拡大するフォトギャラリー「タイトル+概要文+写真８枚」のフォトギャラリーを作成できます。サービスの利用イメージ、商品のイメージなどを掲載できます。写真の縦横比率は自由です。縦横比を統一していただくとサムネイルが綺麗に並びます。
キーカラーブロック	「写真+メッセージ」が半分に分かれたポストカード写真にベタ背景を被せることで、メッセージ性のある表現ができます。この色はサイトのキーカラーが採用されます。デモサイトでは「こんなあなたにおすすめ」という切り口で利用しています。
アイコンカードブロック	アイコンを使った特典カードアイコンを使った3つのカードが並ぶブロックです。様々なアイコンがあらかじめ用意されていますので、画像を用意する必要はありません。コミュニティサイトの会員限定特典などの紹介に利用できます。アイコンの色はキーカラーが採用されます。
レビューブロック	利用者のレビューを紹介「アイコン画像、名前、レビュー本文」のセットで4人まで追加できます。アイコン画像は正方形の画像を用意してください。こちらはレビューAppとは関連せず、単に入力したものがそのまま表示されます。 PC画面で横幅が広い状態では3人分が表示できるレイアウトになるため、レビューは最低3件必須となり、レビュー1/2/3の3件は必ず表示されます。
メディア紹介ブロック	メディア掲載実績をアピールサービスがメディア記事で紹介された実績があれば、こちらでメディアのロゴを表示してアピールできます。メディアのロゴがあるだけで信頼感が一気にアップします。ここではロゴだけで、その記事へのリンクはできないようになっています。もし具体的に紹介したい場合はSNSやブログAppを利用すると良いでしょう。
プロフィールブロック	ショップ紹介、プロフィールを改めてページの中盤、訪問者がサービスの内容を理解できてきた頃に現れるプロフィールブロックです。本文は「ショップ設定 > ショップ紹介」で入力した文章が表示されます。画像はこのエリア専用で自由に設定します。ワンページとして設計した場合にこのブロックを活用できますが、ショップ紹介を通常通り「ABOUT」という別ページ単独にすることも可能です。最後の方の設定で「Aboutページを利用する」をONにすると、単独ページが生成されます。
カウンターブロック	データをカウントアップしながら表示しますサービスに関する「数字データ」を、カウントアップしながら表示するブロックです。全ての項目を自由に編集できますので、使い方を工夫して面白いデータを紹介してみてください。左側の画像の有無は自由です。データは2項目は必須、3項目と4項目は任意で追加設定できます。（項目名を入力すると表示されます）「データ項目名」は長すぎると改行され、他のデータ項目と高さのズレができてしまいます。できるだけ短い言葉にすることで分かりやすく、綺麗に表示されまs。「データ数値」は半角数字で、最大4桁（0〜9999）を左詰めで入力してください。全角、半角英字、改行、スペースが入っていると正しく表示できません。数値は必ず必要で、削除すると「0」と表示されてしまいます。
商品一覧ブロック	通常の商品販売にも活用できます！このブロックはON/OFFだけの設定となり、ONにすると登録済みの商品が通常通りそのまま表示されます。コミュニティAppなどによるオンラインレッスンやサブスクサービスの場合、「大量の商品」というものは存在しないと思いますが、このブロックをONにすることで、そういったショップとしての利用が可能です。野菜ボックスのサブスク販売などでは、こちらのブロックをONにして表示しましょう。「カテゴリApp」を利用することで、ナビゲーションからカテゴリーを選んで商品を選ぶこともできます。
フローチャートブロック	ステップ1〜4までの手順案内ができますサービスを利用するための方法を簡単なステップにして案内しましょう。ステップが多すぎる説明は読む方も疲れてしまいますので、ざっくりと4ステップに分けてできるだけ簡潔に説明します。
コミットボタンブロック	申し込みや登録に進むための大切な導線ですサービスを紹介してきた上で、訪問者が次のステップに進むリンクです。押し付けがましくならないような文言で案内しましょう。有料サービスの場合、できるだけ早い段階で、さらにこのボタンでも価格を明示することをお勧めします。散々良いことばかりを読ませて、クリックさせてから価格を表示することは、利用する側にとっては印象がよくありません。
GoogleMapブロック	グーグルマップを大きく表示トップページにグーグルマップの動く地図を埋め込むことができます。 GoogleMapsで所在地を表示し、「共有」>「地図を埋め込む」>「HTMLをコピー」をクリック。（サイズの指定は不要）「地図埋め込みコード」欄にそのままペースト。地図カラーはお好みで選択、地図の下にアクセス方法などの説明文を追加できます。 Aboutページを利用している場合、「この地図をAboutページにも表示」をONで同じ地図をAboutページにも表示させることができます。「■GoogleMapブロック」をOFF、「この地図をAboutページにも表示」をONにすることで、トップページには表示せずにAboutにだけ地図を表示できます。
よくある質問ブロック	よくある質問をまとめ、事前にフォローしましょう実際のところ、有料サービスにいきなり登録することは稀です。コミットボタンを通り過ぎた後に、ここまでで少しでも興味を持っている人が感じていそうな疑問点をあらかじめ「よくある質問」としてまとめておくことはとても有益です。質問項目は5つまで追加できます。
フリーバナーブロック	自由に使えるバナーエリア「バナー画像+リンク先URL」を2つまで設定できます。バナーが1つの場合はそのまま中央に、2つの場合はそれぞれが左右に振り分けられたレイアウトになります。
メルマガ登録ブロック	未購入の方でもメールマガジンに登録メールマガジンAppをインストールすることで、登録フォームを設置できます。最新ニュースやお得なキャンペーン、クーポンをお知らせできます。サイトにアクセスした際に購入までは行かなくとも、メルマガ登録してもらうことで継続的に接点を持つことができます。
SNSアイコンブロック	SNSアカウントは「ショップ設定」で設定できます。YouTubeアカウントだけは「ショップ設定」にはありませんので、こちらで入力します。（全ページのフッターに表示されるブロックです。）