パブリケーションをいま以上に洗練させるための覚書
Medium のカスタマイズはついにここまで来た
パブリケーションのカスタマイズ機能は大きな進化を遂げました。
すべての人はデザイナーではありませんが、今回発表された新機能によって Medium のパブリケーションはこれまで以上に個性的に、かつ優雅に見せることができるようになりました。ここでは、パブリケーションをカスタマイズするためのいくつかのヒントをご紹介します。
他のプラットフォームからの移行
パブリケーションは Medium 上でスクラッチから構築することができますし、他のプラットフォームから移行して構築することもできます。ヘルプセンターにその具体的な手順を記していますので詳しくはそちらをご覧ください。独自ドメインについてもご紹介しています。
ロゴやアバター、ヘッダーの設定
先ずはじめに、パブリケーションを開設するにあたり必要なのはおしゃれなロゴやアバター、ヘッダーです。
今回ご紹介する各種画像はこれまで以上にパブリケーションにとって重要な要素となります。
使用する画像は、どの背景色でも、どのヘッダーでも美しく映える透過 PNG がおすすめです。透過 PNG は Photoshop や GIMP などの編集ツールで用意することができます。
- パブリケーションのロゴサイズは幅600px 高さ75px 以内におさえましょう。パブリケーションのロゴはパブリケーションに掲載されている各種ストーリーの詳細ページの上部に表示されます。
- アバター画像のサイズは60px × 60px がおすすめです。アバター画像はパブリケーション名の横に表示されます。例えば、各種ストーリーの詳細ページの下部などです。
- ヘッダーは小/中/大のサイズより選ぶことができます。ヘッダーには画像を挿入することができます。最小サイズは 1500px ×750px、縦横比は2対1となっています。
Medium Japan からの補足：
Medium Japan の公式パブリケーション「Japanese Official」ではロゴを設定しておらず、テキストのみとなっています。アバター画像はパブリケーションの背景色に国旗の濃い紅色を指定しているため、Medium グリーンが映えるよう、白背景の公式ロゴを設定しています。また、ヘッダーは最も大きい Lサイズを指定し、背景画像を挿入しています。
ヘッダーの補足情報
ヘッダーのカスタマイズは全く新しい機能となります。これからご紹介する細かな機能を使いこなすことで、パブリケーションはこれまで以上に個性的で、かつユニークなものになります。
ヘッダーのサイズと画像挿入オプション
前述しましたが、パブリケーションのヘッダーサイズは小（S）/中（M）/大（L）より選ぶことができます。小または中を選んだ場合は背景画像を挿入できません。背景色の指定のみとなります。
Lサイズのヘッダーのみ、背景画像を挿入することができます。冒頭では 1500px × 750px の画像サイズをおすすめしましたが、縦横比率の2:1を維持できていれば、大きければ大きい方が美しく映えます。
Lサイズのヘッダーに背景画像を指定する場合、閲覧するデバイスによっては欠けてしまっているように見えてしまう恐れがあります。その場合は表示位置を変更するなどして様々なデバイスより確認しながら調整することを推奨します。
ヘッダーのロゴ
ヘッダー内にロゴを指定する場合は高解像度の画像を推奨します。Medium 内のどの環境でも美しく見えるためです。
すべてのロゴは Retina 仕様でアップロードされるため、実際に表示されるサイズよりも倍のサイズでアップロードされます。例えば幅が2000pxで高さが1000pxの画像をアップロードした場合、Medium は 1000px × 500px のサイズで認識されます。そうすることでケータイ画面でも大きな Retina 画面でも美しく見えるようになります。
つまり、使用するロゴは最も高解像度のファイルを指定し、サイズも指定サイズよりも2倍の大きさを選ぶことをおすすめします。
ヘッダーのレイアウト
ヘッダーのサイズに加えて、ヘッダー領域で表示する要素をロゴまたはテキスト、あるいはどちらも指定することができます。
ヘッダーに表示させるテキストの位置は左寄せか中央寄せを選ぶことができます。様々なサイズや色との組み合わせを試してから最適な位置を指定することを推奨します。パブリケーションのヘッダーのカスタマイズは、料理する前のカキのようなものなのですから。
Those People というパブリケーションではSサイズのヘッダーを指定し、四角形のロゴを採用後、2行のタイトルを左寄せに配置しています。
ヘッダーに指定する色とその影響力
ヘッダーに画像を挿入しなくとも、背景色を指定することができます。背景色は subtle か bold というテーマからその表示方法を選択することができます。Bold を選択した場合は subtle よりも指定した背景色がより重く表示され、subtle は控えめに表示されます。
ヘッダーに指定するおすすめの色をご紹介します。Color Hex というサイトをご存知ですか？正にこれが必要です。
上記のサイトに記載のカラーパレットからぜひ様々な色を指定して見比べてみてください。指定した色はパブリケーション内のハイライトやボタン、その他細かな UI にまで適応されるため、その影響力も大きいはずです。
もう一度説明しますが、背景色を指定した場合はパブリケーションのロゴは透過 PNG を使用することをおすすめします。背景色の上に配置されるため、ロゴの背景色＝パブリケーションで指定する背景色ということになります。
タグの指定
パブリケーションにナビゲーションを追加することができます。このナビゲーションは、パブリケーションの編集画面より指定するタグの名称がそのまま表示されます。Talkback のパブリケーションの場合は Feedback や Updates、How To などのナビゲーションを指定しています。つまり、ナビゲーションでフィーチャーしたい特定のタグを指定することで、そのタグが指定されているストーリーへのショートカットを作成することができるようになります。タグは最大で7つまで指定することができます。
Medium Japan からの補足：
Medium Japan のもうひとつの公式パブリケーション「for Shirusu」ではMサイズのヘッダーを指定し、「Japanese Official」同様の紅色を subtle テーマで使用しています。タグは4つ指定しています。対象のタグが指定されているストーリーが表示されるよう、すべてのストーリーを見直し、タグを再設定しています。
ファビコンの設定
サイトにファビコンが指定されていると、愛くるしくなりませんか？ファビコンを見るだけで、どのサイトが、認識しやすくなりますよね。
私たちも同感です。
今回のアップデートにて、パブリケーションにファビコンを指定できるようになりました。この機能はパブリケーションに独自ドメインを指定している方のみ、ご利用いただける限定機能です。独自ドメインの申請方法についてはヘルプセンターよりご覧ください。
ファビコンはいらない？いる？どちらにせよ、あなた好みに設定できます。
パブリケーションのレイアウト変更
新しい機能ではありませんが、パブリケーションのレイアウト変更機能はパブリケーションにとって最も大事と言っても過言ではありません。
レイアウトタブを選択することで、パブリケーションの各セクションやレイアウトを自由に変更することができます。
その選択肢は、ほぼ無限大です。
それではレイアウトからはじめてみましょう。パブリケーションに掲載されるストーリーはグリッド形式か、Medium のトップページのようなストリーム形式か、リスト形式かで選ぶことができます。以下ではストーリーを公開順でグリッド形式で表示するをオプションを選択した場合の例を紹介しています。
パブリケーションは成長するに伴い、ひとつのセクションだけでは物足りなくなります。ヘッダーに指定したナビゲーション用のタグのように、特定のタグ専用のセクションも追加することができます。
他にもパブリッシャーがおすすめするストーリーを指定して掲載することもできますし、最も読まれている順に掲載することもできます。
おもしくなってきませんか？
下記の例では上部のセクションにおすすめのストーリーを2つ紹介しています。
たとえ小さな変更でも、パブリケーションの見た目には多く影響を及ぼします。例えば、ストーリーごとのマージンをなくしてタイトルをストーリーのイメージ画像に被せたレイアウトに変更してみると、これだけイメージが変わります。
違いは、美しい。
前述しましたが、パブリケーションの世界は調理前のカキのようなものです。あれこれ考えず、まずは色々試してみてください。
