始めたばかりの方へ贈る道しるべ： 『はてなブログ アカデミー』の開発現場から

はてな デザインチームの id:ueday です。先日、はてなブログでは「ブログの書き方・使い方講座」と称した『はてなブログ アカデミー』を公開しました。

hatenablog.com

そこで、この講座がどのように作られたのかを少しご紹介します。

『はてなブログ アカデミー』とは？

一言で説明すると「はてなブログの書き方・使い方が学べる講座形式のコンテンツ」です。

あなたが初めて自分のブログを書く場面を想像してみてください。おそらく、「なにをどう書こう」と漠然とした不安を感じるはずです。それもそのはず、ブログを書くことは「サービスの使い方を知ること」と「自分の考えを文章化すること」の合わせ技だからです。さらに、より思い通りにブログを続けるなら「写真や画像を用意すること」「読者の反応を想像すること」「継続的に書き続けること」など、さまざまな知識や技術が必要になってくるでしょう。

これらの中から、ブログを始めたばかりの方にとってまず最初に知っておきたい知識をまとめた道しるべが『はてなブログ アカデミー』です。

始めたばかりの方へ

「始めたばかりの方へ向けたアプローチ」にはいくつかの方法があります。例えば、重要なボタン付近にツールチップを表示したり、「序盤にすることリスト」を提示したり。チュートリアルを用意するのもそうですね。はてなブログでもこのような案内を表示している箇所はあります。

『はてなブログ アカデミー』では読み物のスタイルを選択しました。その根底には、「文章を書いていただくサービスである以上、我々も文章で伝えたい」という考えがあります。結果的に、前述した既存のアプローチと差別化できましたし、細かなニュアンスを伝えやすくなりました。

開発

プロトタイプをつくる

プロトタイプ作成にはAdobe XDを使っています。主にデザイン検討やディレクターとの認識合わせに用いており、はてなブログの最近のプロジェクトでは通常Adobe XDを起点に作り始めます。

文章を執筆する

講座の内容は、社内の編集スタッフ・サポートスタッフと複数名で協力しながら執筆しました。「講座として機能すること」はもちろん必須としつつ、さらに2つの方針を盛り込みました。

ひとつは、一歩踏み込んだ内容です。「○○について、はてなブログはこのように考えています」のような、ヘルプではなかなか表現しきれない見解を積極的に盛り込みました。これは、はてなブログを利用するうえでどのように振る舞うとよいか、読者がイメージしやすくするためです。

もうひとつは、読者との距離感です。文中では、読者に呼びかけるとき 皆さん という言葉を使っていません。代わりに あなた で統一しています。これには先程の「一歩踏み込んだ内容」であることも関係しているのですが、ともすれば説教臭くなりがちな内容を、あくまで読者の「ブログをうまく書けるようになりたい」という意思に寄り添う形で伝える狙いがあります。ちょうどプライベートレッスンの雰囲気を想像していただけると分かりやすいでしょうか。

「手」

この距離感を示すために使ったモチーフが「手」です。手は、ときに顔以上に豊かな表情をあらわすことができます。手元が見えるくらいの距離から伝えています、と感じてほしかったのです。

手のイラスト素材を作成（上段が下書き）

ちなみに小技として、線画にIllustratorの「ラフ」効果をうっすら入れています。こうすると線がクレヨンで描いたような崩れ方をするため、より人間的なニュアンスを出すことができます。

「ラフ」効果あり（左） | なし（右）

「ラフ」効果の設定は以下のようにしました。「サイズ」をできるだけ小さく、「詳細」を最大に設定するのがポイントです。

「ラフ」効果の設定例

共同で執筆する

複数人での共同執筆をスムーズにするため、Googleドキュメントの「提案モード」を利用しました。これは、ドキュメントの元のテキストを変更せずに、修正を提案できるモードです。

Googleドキュメントの提案モード。提案箇所がハイライトされて分かりやすい

提案にはコメントを添えることができ、変更意図を説明するのに役立ちます。最終的に、メインライターが各提案を承認し整えていく方式で執筆していきました。承認といってもボタンひとつで行えるので、大量の変更でもサクサク取り込めます。

欲を言えば、Googleドキュメントの原稿と実際のコード上のテキストが同期できたら最高だったのですが、あいにく良い仕組みが見当たらず、手動でコードに反映しました。

デバイスごとに要素の順序を自在に入れ替える

『はてなブログ アカデミー』講座ページのレイアウト

『はてなブログ アカデミー』をPC（広いブラウザ幅）で閲覧すると、いわゆる「聖杯レイアウト」の一種であることがわかります。しかし、スマホ（狭いブラウザ幅）の画面と見比べると、いくつかの要素が異なる順序でレイアウトされていることに気づくはずです。特に、「目次」と「ナビゲーション」の位置に注目してください。リード文と本文の間に目次を挟む、あるいはナビゲーションの表示位置を大きく下げるといったことは、単純なFloatやFlexboxではなかなかうまくいきません。

このレイアウトの実装にはCSS Gridを使いました。CSS GridとMedia Queriesを組み合わせると、各デバイス間でより自由度の高いレイアウトの出し分けができるようになります。

特に便利なプロパティが grid-template-areas です。これを使うと、各エリアに名前をつけて要素を配置できます。以下の使用例をご覧ください。grid-template-areas を読むと、実際のレイアウトがなんとなく想像できるのではないでしょうか。

.layout-course-content {
    @media (min-width: 768px) {
        display: grid;
        (中略)
        grid-template-areas:
            "nav lead"
            "nav toc"
            "nav article"
            "pager pager";
    }
    @media (min-width: 1200px) {
        (中略)
        grid-template-areas:
            "nav lead lead"
            "nav article toc"
            "pager pager pager";
    }
}

エリアの名前は、 grid-area プロパティを使って名付けることができます。

.layout-course-nav {
    grid-area: nav;
}
.layout-article {
    grid-area: article;
}
.layout-toc {
    grid-area: toc;
}
.layout-lead {
    grid-area: lead;
}
.layout-course-pager {
    grid-area: pager;
}

ヘッダの背景を動かす

トップページのヘッダは、背景のストライプが斜めに動くようにしてあります。これは、正方形のループ素材を斜め45度に動かすCSSアニメーションで実装しています。さらに、画像を2層のレイヤーに分けて、それぞれ異なる速度で動かすことで奥行きを表現しました。

手前側のストライプ素材（画像中央）は驚くほど簡素ですが、これだけでも充分奥行き感が出ます

.hero {
    background: url('/images/toppage_hero_bg.svg') repeat center;
    text-align: center;
    animation: hero-bg 16s linear infinite;
    background-size: 1000px 1000px;
}
.hero-bg-front {
    background: url('/images/toppage_hero_bg_front.svg') repeat center;
    animation: hero-bg 6s linear infinite;
    background-size: 1000px 1000px;
}
@keyframes hero-bg {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1000px -1000px; // 斜め45度に
    }
}

ちなみに、この画像素材も「リピートグリッドが使えるから」という理由で、Adobe XDで作っています。リピートグリッドは繰り返しオブジェクトを簡単に作成できる機能ですが、ループ素材の確認作業と非常に相性がよいです。

XDのリピートグリッドを使うとループ素材の確認作業がしやすい

---

以上、『はてなブログ アカデミー』のみどころと制作のポイントを紹介しました。現在、はてなブログを新規作成するユーザーには必ずこの『アカデミー』を案内しています。個人的にも、企画・執筆・ページ制作と全工程に携わり、ひときわ思い入れのあるプロジェクトです。まだ読んだことのない方は、ぜひご覧いただけたらと思います。

hatenablog.com