先日、SBC(この出版物)のトップページを変えました。
正直、以前よりかなりカッコよくなりました。
でも、本当の価値は装飾ではありません。
初めて来た読者に、
「何の出版物なのか」
「最初に何を読めばいいのか」
「その次に何を読めばいいのか」
この順番が伝わるようになったことです。
Substackのホームは、公開した記事を保管するだけの場所ではありません。
初期設定のままでも記事は並びます。書き手はすべての記事を知っているので困りませんが、初めて来た人には公開順しか手がかりがありません。
その判断を、ホームの配置で先回りして渡します。
難しいことをする必要はありません。
最初は、Header、Hero、Bodyの3か所だけ整えれば十分です。
まずPCでWebsite editorを開く
ホームの編集は、PCブラウザから行うのがおすすめです。
手順は次のとおりです。
Substackの「Dashboard」を開く
編集する出版物を選ぶ
左側の下の方にある「Website editor」を開く
「Home page」の「Theme」を「Custom」にする
Header、Hero、Bodyを順番に調整する
プレビューを確認して「Save」を押す
Website editorが見つからない場合は、「Settings」から「Website」を開く方法もあります。
設定項目はたくさんありますが、全部を理解してから始める必要はありません。
3か所に一つずつ役割を持たせます。
Headerで「何の出版物か」を伝える
左側の「Header」を開きます。
ここで決めるのは、初めて来た人が出版物名をすぐに確認できるかどうかです。
ロゴやワードマークを設定し、出版物名の配置とナビゲーションの見せ方を選びます。
SBCでは、レイアウトを「Standard」、ナビゲーションを「Text」にしました。
背景は白、アクセントにはオレンジを使っています。
これはSBCに合った組み合わせであって、すべての出版物にとっての正解ではありません。
画像を大きく見せたい人もいれば、文章を中心に静かに見せたい人もいます。
最初は色やフォントにこだわりすぎず、「何の出版物に来たのか」が一目で分かれば合格です。
Heroで「最初に読む一記事」を決める
次に、左側の「Hero」を開きます。
Heroは、ホームを開いたときに最も大きく表示される場所です。
SBCでは「メディア掲載(Media feature)」を選び、大きな画像と一緒に入口記事を見せています。
現在の見出しは「記事は週1回でいい」。
補足は「Substack初期は『記事よりNotes(ノーツ)』が優先」。
ボタンには「最新を読む」と表示しています。
Heroへ表示する記事を変えるときは、プレビュー内のHero部分をクリックします。右側に表示される候補から、最初に読んでほしい記事を選びます。
「トップのポストの行を表示」をオンにすると、Heroの下へ人気のポストも並べられます。SBCでは4本を表示しています。
画像の一部が不自然に切れる場合は、「Home page」の画像設定で、トリミングを「スマート」にする方法もあります。
ただし、先に決めるのはデザインではありません。
初めて来た人に、最初に何を読んでほしいかです。
最新の記事が、一番入りやすい記事とは限りません。
まず一記事を選ぶ。その内容が見えやすくなる形式を、あとから選びます。
Bodyで「次に読む記事」を並べる
最後に、左側の「Body」を開きます。
Heroの記事を読んだ人へ、次に何を渡すかを決める場所です。
SBCでは「List」を選び、Heroと人気のポストに続いて、最新記事が縦に並ぶ形にしています。
これなら、初めて来た人は入口記事から代表的な記事へ進めます。すでにSBCを知っている人は、新しい記事を探せます。
「おすすめを表示」をオンにすれば、自分が紹介したい別の出版物も表示できます。
ただし、最初から情報を増やしすぎる必要はありません。
おすすめ、テーマ別、最新記事と並べるものを増やすほど、読者の選択肢も増えます。何を読んでほしいのかが決まっていないまま表示を足すと、ホームが再び記事置き場へ戻ります。
最初は、入口記事と、その次に読む記事が見つかれば十分です。
記事を書くたびに変更しなくていい
今回の変更は、PCブラウザで見ると特に分かりやすいものです。編集作業もPCで行うことをおすすめします。
ただし、記事を書くたびにホームを変更する必要はありません。
記事が増えたとき。発信するテーマが変わったとき。初めて来た人に読んでほしい記事が変わったとき。
時間のあるときに見直せば十分です。
保存前の合格条件は3つだけです。
Headerを見れば出版物名が分かる
Heroに最初に読んでほしい記事がある
Bodyにその次の記事が並んでいる
この3点をプレビューで確認したら、「Save」を押します。
時間のあるときにPCでWebsite editorを開き、Header、Hero、Bodyの3か所を調整してみてください。

