何を選べるか
ブログのデザインは、トップページの並べ方(レイアウト)、地色や差し色(配色)、見出しや本文の書体、文字サイズ、カードや画像の角の丸さ、スクロールに合わせた動きの6つの要素で決まります。どれも保存前にプレビューで確認できます。
業種やブランドの印象に合わせて組み合わせを選べるため、士業やBtoB向けには信頼感のある落ち着いた配色、食や暮らしに関する内容には温かみのある配色というように、狙った印象に寄せて調整できます。
これらは見た目だけの設定で、記事の内容や検索順位を見た自動リライト(検索順位を見た自動リライト)の判定には影響しません。デザインとコンテンツの仕組みはそれぞれ独立して動きます。
レイアウトと配色
トップページのレイアウトは8種から選べます。並べ方の考え方がそれぞれ異なり、記事の見せたい雰囲気に合わせて選べます。公開した記事がまだ無いときはどのレイアウトでも「記事はまだありません。」と表示され、体裁が崩れることはありません。ページ送りの仕組みもレイアウトに関わらず共通です。
| レイアウト | 特徴 |
|---|---|
| ヒーロー＋注目記事 | 紹介文の横に最新記事を大きく見せ、下に残りをカードで並べます。 |
| マガジン | 最新記事を画像と文章を横に並べた大きなカードで見せ、下に3列のカードを並べます。 |
| リスト | 画像を左に置いた横並びの一覧。記事数が多いときに読みやすい形です。 |
| ミニマル | 画像を使わず、日付とタイトルだけを並べる文字中心の形です。 |
| グリッド | 帯状の見出しの下に、全記事を同じ大きさのカードで並べます。 |
| サイドバー付き | 一覧の横に、サービス紹介・テーマ・最新記事の見出しを置きます。 |
| タイムライン | 月ごとにまとめて時系列で並べます。更新の積み重ねが伝わる形です。 |
| ショーケース | 最新5本を横にスクロールする帯で見せ、下に残りをカードで並べます。 |
配色は10案(うちダーク系2案)から選び、差し色だけを自由な色に変えることもできます。ネイビー×ゴールドの信頼感のある案や、生成り×グリーンの落ち着いた案、モノクロで引き締めた案など、業種の雰囲気に合わせて選べます。レイアウトと配色は組み合わせが自由で、どちらかを変えてももう一方に影響しません。
ブログの紹介文の背景には、AIで生成するかアップロードした横長の画像を敷けます。写真の上に文字を重ねても読みやすいよう、画像にかける膜の濃さも薄い・標準・濃いの3段階から選べます。薄くすると写真がよく見える代わりに文字がやや読みにくくなり、濃くすると文字の読みやすさを優先して写真の主張を抑えます。画像を設定しなければ、選んだ配色に合わせたグラデーションの背景になります。
書体・文字サイズ・角丸
| 項目 | 選べる幅 |
|---|---|
| 書体 | ゴシック体・明朝体・ポップ体の3種 |
| 文字サイズ | 小・標準・大の3段階(本文だけでなくブログ全体に反映) |
| 角丸 | 最小・標準・大きめの3段階 |
| 書体 | 印象 |
|---|---|
| ゴシック体 | 汎用的で読みやすい印象 |
| 明朝体 | 落ち着いた印象 |
| ポップ体 | 柔らかく親しみやすい印象 |
文字サイズと角丸はブログ全体の読みやすさや柔らかさを調整するもので、記事本文だけでなくカードや見出しなど画面全体に反映されます。明朝体やポップ体を選ぶと、それぞれの雰囲気に合ったWeb用の書体が自動で読み込まれます。
ロゴは明るい配色用と暗い配色用の2パターンをアップロードでき、AIによる生成もできます。トップページのカバー画像も同様にアップロードとAI生成の両方に対応しています。ロゴのプレビューは選んだ配色のヘッダーと同じ地色で表示されるため、実際の見え方に近い形で確認できます。
スクロールに合わせた動き
| 動き | 動き方 |
|---|---|
| なし | 動かしません。 |
| フェードアップ | 画面に入った要素が下から浮き上がりながら現れます。 |
| スライドイン | 左右から交互に滑り込みます。 |
| ズームイン | 少し小さい状態から広がりながら現れます。 |
| 順送り | 並んだカードが少しずつ遅れて順に現れます。 |
| パララックス | サムネイルやカバー画像がスクロールに合わせてゆっくり動きます。 |
JavaScriptが動く前の状態ではすべて表示されるため、読み込み直後に画面が真っ白になることはありません。
読みやすさへの配慮
配色のプリセットは、本文や見出しの文字色が背景に対して読みやすいコントラストを保つように作られています。ダーク系の配色でも、補助的な文字だけが薄くて読めなくなるようなことはありません。
集客ラクダではどうなるか
これらの設定は工程5「出力設定」の「集客ラクダのブログとして公開する」カードにまとまっています。公開URL(スラッグ)を設定していれば、保存する前に各案をプレビューして確認できます。独自ドメイン(独自ドメインでの公開)で公開する場合も同じ設定がそのまま使われます。
設定を変更すると、すでに公開済みの記事も含めてブログ全体にすぐ反映されます。過去の記事だけ古い見た目のまま取り残されるということはありません。
よくある質問
レイアウトは記事ごとに変えられますか。
- 変えられません。ブログ全体で1つのレイアウトを使う設計です。書体や配色も同様にブログ単位です。
ダークな配色はありますか。
- あります。配色のプリセットにダーク系の案を用意しています。
独自のロゴを使えますか。
- 使えます。明るい配色用と暗い配色用の2枚を個別にアップロードでき、AIによる生成もできます。
変更する前に見た目を確認できますか。
- できます。公開URLを設定していれば、保存する前にレイアウトや配色ごとのプレビューを開けます。