Style Guide

こちらでは、このブログのビジュアル面に関するスタイルを簡単に紹介します。俯瞰できるページがあることで自分が全体像を振り返りやすいし、もしかしたら僕と同じように、制作者の意図が気になる人もいるかもしれないので。書き言葉に関するルールは、こちらに設けています。

一貫性

例えば、シャンプーとリンスを間違えて使ってしまうなど。決まった役割を持つものが、自分のイメージと違った場所に配置されるだけで、ちょっとした問題は起こります。

シャンプーとリンス問題に関してはいろんな対策が考えられますが、今回のこのブログでは「一貫性」をテーマに、読者の負担を最小限にするように全体を設計しました。必要最低限の要素を、最適な場所に、法則性を持たせて配置することで、快適に閲覧できるようにしています。また、伝えたい内容に集中してもらうために、すべての要素はメインコンテンツの文字にあわせて一定のリズムで設計されています(キーボードのGを押してみてください)。くわしくはこちらに書きました。

本文

ブログの主目的である、本文まわりのビジュアルスタイルをざっくりと紹介します。

書き言葉については、日本語の作文技術The Elements of Typographic Styleを読んで一通り把握してはいますが、基本的に個人ブログなので適当になる傾向にあります。欧文は、「Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis cum eius possimus, fugit eveniet perferendis temporibus, quis atque consectetur accusamus minima beatae neque natus ex ratione nostrum eos. A, veniam?」このように表示されます。

  • これがリストです
  • 短い箇条書きには句点はつけません
    • 2段に渡る箇条書きです
  • これがリストの最後です
  1. これが数字付きリストです。
  2. 箇条書きも長い文章になれば、句点をつけるようにします。句読点を付ける場合は、長文以外のリストも合わせてつけます。
    1. 数字付きリストも2段にわたって展開することができます。このように文章を無理やり長くすると途中で折り返します。
  3. 数字付きリストの最後です。

引用は、僕以外の人の思考をあらわすので、イタリック・薄いグレーにすることで本文とのコントラストを強調し、トーンを変えています。

Design is just a language, it’s not a message. If you say “retro” too much you will get hives and maybe die. Learn your design history. Know that design changes when technology changes, and its been that way since the 1400s.
by Frank Chimero

コードを公開すると、以下のようにスタイリングされます。precodeタグを自動検出し、Google Code Prettifyでシンタックスハイライトが効きます。色は自分が普段使っているSublime Textに極力近づけ、書体は言うまでもなくAdobeのSource Code Proを使っています。1

var checkConsistency = (function(cons){
    if (cons === true){
        alert("Well done.");
    } else {
        alert('Hey, don’t be lazy!');
    }
})();

本文のスタイルをざっくりとご紹介しました。まだ紹介できていない部分もあります2が、それは以下のもっと読むから探してみてください。

  1. ところで、Source Code Proってたまらないほどカワイイと思いません?などと脱線する場合などは、foot noteに記述します。背景色がアニメーションが発動するのでフォーカスされた位置が割と見やすいようになってます。余談ですが、cssの擬似要素である“target”を使ってアニメーションさせています。擬似要素って、ほんと便利なので、状況が許す限りよく使います。

  2. テーブルレイアウト、画像、キャプションの紹介などを省いています。あくまで目安なので、全体を俯瞰できればそれでよしとしました。

もっと読む →