Line 1: Error: Invalid Blog('by Esehara' )

または私は如何にして心配するのを止めてバグを愛するようになったか

>> Zanmemo

あと何かあれは 「esehara あっと じーめーる」 か @esehara まで

デザインのことがわからない自分が、はてなブログのデザインをカスタマイズするのを頑張ってみた

はじめに

 こんにちは。以前まで蟲!虫!蟲! - #!/usr/bin/bugrammerという、はてなグループで技術的な記事を書いていました。しかし、さすがに、はてなブログの優遇っぷりと、はてなグループの場末感で、もうそろそろ空気を入れ替えなければいけないんではないかと悩んだ結果として、はてなブログに移転するということになりました。

 で、たぶん既存のデザインテーマとか使えばいいんでしょうけど、CSSくらいは少しかじっておいたほうがいいよなー、とは常に思っていて、前回の日記もCSSをかなりいじりました。なので、今回も自力でデザインしたいなーという思ったわけです。

 しかし、この「デザイン」という奴が、プログラマーにとっては曲者で、割と近い処で仕事をしているのにも関わらず、実際に「デザイン」ってなんだよ、っていう話になると全くわからない。

 そういうときに、「だったらじゃあ自分でデザインのフローをやってみるといいんじゃないんだろうか」と思って、一からやってみようというのが、今回の記事の主旨になります。

で、デザインって何なのという話

 いわゆる「デザイン思考」という言葉が流行ってから、プログラムの世界でも「デザイン的なアプローチ」というのをしよう、ということはたびたび言われるようにはなりました。

 しかし、「デザイン」と言われると真っ先に思い浮かぶのが「ビジュアルデザイン」、つまり「綺麗な画像をカッチョヨク作る人」みたいなイメージが先行しがちだなあというのがあります。

 「デザイン」とはなにか、というのを考えるのは、余りにも大きすぎるので、何かを参考にしてみます。手元に岩波講座・現代工学の基礎シリーズの一つに、デザイン論と言う本があります。そこから引用してみましょう。

岩波講座 現代工学の基礎〈2〉材料特性と材料選択 《材料系III》・デザイン論 《技術関連系VI》

岩波講座 現代工学の基礎〈2〉材料特性と材料選択 《材料系III》・デザイン論 《技術関連系VI》

  • 作者: 落合庄治郎,藤田静雄,田中央,北条正樹,伊藤靖彦,吉川弘之,岸輝雄,中島尚正,矢川元基,安西祐一郎,国武豊喜,松波弘之
  • 出版社/メーカー: 岩波書店
  • 発売日: 2000/06/08
  • メディア: 単行本
  • クリック: 5回
  • この商品を含むブログを見る

じつはデザインという言葉にはコンセプトと同様の「構想する」「概念化する」「筋書をつくる」といった意味が含まれている。デザインをすること自体がコンセプトづくりを行い、コンセプトをもつことであるともいえる。このことは狭義のデザインとしての造形に限ったデザインにもいえる。つまり、ある具体的に設定したテーマの製品コンセプトにもとづく、いわば各論としての造形コンセプトである。

 自分は広い意味で、デザインということを「設計」と捉えていますが、もっとやわらかく言えば、「なんらかの形を与えるもの」だと思っているわけです。だから、グラフィックに限らず、なんらかの形を与えるものであるならば、それはデザインなのかな、と漠然と思ってます。

まずは、ゴール・目的・ターゲットを考えてみる

 デザインはともかく、自分はデザイナーではないので、具体的なデザインのフローというものがよくわからなかったりします。フローとしてやるあたり、下の記事を参考にしました。

 まず最初に、どうやら「ゴール」「目的」「ターゲット」を明確化すると書いてあるので、そういうものかと思って、自分をクライアントとして考えて、自分のブログの立ち位置をはっきりさせよう、と思いました。

  • ゴール
    • 月1万PVにする
    • 小遣い程度のアフィリエイトは稼げるようにする(言葉にするとちょっと恥ずかしい)
  • 目的
    • 自分が試したことや考えたことを公開して反応を見てみたい
    • 自分のサービスの宣伝をしたい
    • 承認欲求
    • 文章力の向上
    • 面白い人と思われる
  • ターゲット
    • 20代から30代の、Web系を専門とするプログラマー

 で、このあたりを固めた上で、コンセプトを考えます。

 たぶん、本来だったら「ハッカーぽさ」というのが挙がってくるのでしょうけれども、前のブログを生かしたかったのと、あとプログラマーとしてはまだまだ若造の範囲であるので、下のように決めました。

  • コンセプト
    • 楽しさ
    • フレッシュさ
    • ポップさ

 齢29歳にもなって何いってるんだ、という感じではありますが、とりあえず、ゴール・目的・ターゲットは決まりました。

デザインのルールをきちんとおさえる

 コンセプトとして、どことなく「楽しく、親しみを持って接してもらえるブログ」という形にしようと思ったわけですが、デザインをいわゆる「感性」の問題として捉えてしまうともったいないのかな、と思ったりもします。

 もちろん、個々人の素質みたいな部分で、最終的に「感性」の問題は出てくるとは思われますが、しかし「感性」ではない部分、つまりデザインをやる上において抑えておくべきルールみたいなものがあるのならば、それを使うのに超したことは無いでしょう。

 例えば、非デザイナー向けのデザイン本の一つに、あまりにも有名な下の本があります。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

  • 作者: Robin Williams,吉川典秀
  • 出版社/メーカー: 毎日コミュニケーションズ
  • 発売日: 2008/11/19
  • メディア: 単行本(ソフトカバー)
  • 購入: 58人 クリック: 1,019回
  • この商品を含むブログ (97件) を見る

 ここに、デザインの原則が四つほど挙げられています。

  • 近接
  • 整列
  • 反復
  • コントラスト

 それらについて、それぞれ見ていきましょう。

近接

 近接の目的は、関連する情報をまとめてグループ化することにあるといいます。逆に言うと、どれもこれもが同じような間隔で並んでいると、同じような情報として認識してしまって、混乱するということです。

 例えば、はてなブログにおいて、同じような情報というのはどういうものか、ということを少し考えたりしていました。

 これが果たして正しいグルーピングなのかはよくわかりませんが、これらの項目を意識して、近くに配置するようにしてみました。

整列

 次に整列です。どうやら『ノンデザイナーズ・デザインブック』によれば、「ページ上のすべてのものを意識的に配置しなければならない、すべての項目がページ上のなにかほかのものと視覚的に関連していなければならない」というものです。具体的には、「強い透明の線を見えるようにする」ことが書かれています。

 例えば、自分のブログですと、やや中途半端な形ではありますが、下のようなラインを意識して作ったりしていました。

反復・コントラスト

 反復は文字通り、「デザイン上の何かの特徴を作品通して反復する」ということです。例えば、このブログには見出しが何度も出てきます。そういう部分には強調を。あと、普段から自分が「ロボットくん」と呼んで、何かと使っているキャラクターを何度も登場させるといいのかな?と考えたりしていました。

 あと、コントラストについては、「2つの項目が正確に同じでないのなら、はっきりと異ならせる」ということらしいです。例えば、「ブログタイトル」と「記事本文」は正確に違うものであるので、暗い色と明るい色で異ならせてみたりします。

 ちなみに、ペーパープロトタイプの状態では、下のような感じになっていました。

デザインで意識することはわかったからペーパープロトタイピングする

 で、とりあえず『ノンデザイナーズ・デザインブック』を種本にしながら、どういうレイアウトがありうるかをペーパープロトタイピングしてみます。自分の場合だと、無印良品の四コマノートが気にいったりしています。実際に作られたものに関しては、下のようになります。

 真ん中に「優先度」というのがありますが、これは自分が何を強調したいのか、というメモ書きです。

 で、最初の予定では、ブログのタイトルは、ブラウザ幅100%で全面表示にしようかな、と思っていたのですが、手を動かしてみると、色々なやりかたがありそうだぞ、ということに気がつきました。むしろブログ名はあえて強調しないことによって、本文を強調するほうがいいのではないか、というわけで、下左2番目のレイアウトに落ち着きました。自分のブログの場合、本文を読んでもらえることのほうが重要だなあと思ったので。

 上でも出てきましたが、この下左2番目を取り出して、もう少し詳細をペーパープロトタイピングしました。

あとはSCSSでゴリゴリコーディングする

 ある程度方向性が決まったら、今度はCSSに落とし込んでいくのですが、普通にCSSを書くのも辛いので、自分の場合は、scss+compassを使っています。scssは、変数であったり、テンプレートっぽいものが使えるcss変換用の文法と、自分では理解しています。その便利なライブラリがたくさん詰まっているのがcompass、という理解でいいのではないかと。

 ここら辺はプログラマーというか、コーダーとしての力が発揮される部分だと思いますが、zurui-design // Speaker Deckなどを参考にしながら、ガンガン形にしていきます。

他の種本

 上記以外にも、参考にした本は幾つかあります。例えば、下の本なんかはとても参考になりました。

7日間でマスターするレイアウト基礎講座 (DESIGN BEGINNER SERIES)

7日間でマスターするレイアウト基礎講座 (DESIGN BEGINNER SERIES)

 参考にした部分をあげると、例えば、空白というのは多ければ多いほど高級感が出て、逆に空白が少なければカジュアルなイメージになるという話が載っています。最初に書いた通り、どちらかといえば楽しげな雰囲気を出したい自分としては、空白を少なめにすることで、元気さが強調されてればいいなと思います。

 また、自分はレイアウトのことはあまりわからないのですが、文字のジャンプ率というのも参考になりました。

 文字のジャンプ率というのは、上記の本から引用するならば、本文を基準にして、最も大きなタイトルとの字幅、または字高で計算したものだといいます。ジャンプ率を挙げることによって、元気な、いきいきとした文章レイアウトになるということらしいです。

まとめ

 どうしても、デザインのことを書いているブログというのは、デザインのことをドヤ顔で書いている割には醜かったりする印象を受けることは時々あって、自分の場合も、付け焼刃というか、一生懸命勉強してなんとかした感じが出てしまっているのは正直否めないかなあという気もしています。

 またデザイナーの人にとって、自分みたいなちょっとかじった人間が、デザインに口だししているのを見て苦笑いしている部分もあったりするので、そういうところは謙虚である必要があるなと。

 ただ、どうしてもプログラマーはプログラマーで、「文字さえ読めればいい」みたいなところがあったり、デザインは些細な問題だと矮小しがちになって、その辺ですれ違いになったりするので、少しくらいは基本をおさえておいたほうがいいのかな、と思ってメモ代わりに今回の記事を書きました。何かの参考になれば幸いです。