しまブログの、WordPress用テーマ（見た目）を検討中。
グリッドは、以前のMovableTypeの時と同じで行こうと思っている。
のだが、今日、とても恐ろしいことに気付いた。
エントリー内に表示される画像の最大横幅を、これまでずっと645pxで作ってきた（昨日のモンハン3の画像なんかはみんなそうなっている）のだが、今日改めてカンプ・旧バージョンのCSSを確認してみたら、最大横幅は630pxだった。
これまでずっと、画像の横幅を間違って作ってきていたのだ……。
表示が崩れなかったのは、たまたま、記事のボックスの右側にマージンがあって、そのマージンで画像がはみ出した幅15pxが吸収されていただけだったのだった。
どおりで、グリッドなのにグリッドに見えないなぁと思っていたよ。
何にせよショック。
だからといって、過去の画像を全部リサイズしたりはしない。面倒くさいから。
今やってるこれって、休んでいるようで休んだことになっていないなぁ、と反省。
ブログのカテゴリを細分化したのはいいのだが、それを気軽に閲覧可能にするナビゲーションを考えると、どうにもうまく収まらない。一度根本から考え直さないといけないと判断し、線画を引くことにした。
ということで、テーマ（見た目）は当分このままで放置。
金も無いし、できることが限られているので、カンプばかり書いている。
各要素の高さを中心に、グリッドを修正。安定感？のようなものが増した。それにしても垢抜けないのは、ブログタイトルやページタイトルの見た目か。カウンタースペースだ、カウンタースペースをちゃんと見なくては。数字は数字。目で見ろ。何か、デザイン会社に入った直後みたいなカンプだ。恥ずかしい。
とにかく垢抜けないなぁ。
背景のパターンが考える上で邪魔になってきたので、一旦外そうと思った。
そして迷走。
明日はちょっと休憩しようかな。
早起きしたので、朝から自主カンプ。
グリッドをかなり変更。グリッド間のマージンをはっきり取る形にした。都合、個々のグリッド幅は狭くなっている。後の、記事アーカイブでこのマージンが必要になるだろうという、先読み。
ちょっとだけそれらしくなってきた？かも？
前回のフレームワークを忠実に、今ある素材で配置したカンプを作ってみる。
ぶっちゃけ、ごちゃごちゃしてて、よくわからーん。グリッド取っちゃえ、グリッド。
……。今と何が違うのか、と聞かれると困るが、これから変わっていくのだろう。たぶん。
しかし、なんか釈然としないなぁ。
見比べてみた。うーむ……。
余計な罫線とか入れたくないわけだけれども、一体どうしたものだろうか。ここからはフレームワークで目指したことを基に、カンプで頑張る番、だなぁ。
前回の続き。色々と整理をしてみた。記事のカテゴリが記事のタイトルより前に来ることに違和感を覚えないでもないけれど、収まりはこれが一番良いように思う。大カテゴリと中カテゴリも、すっきりと並べることにした。
グリッドを外すと、こう。まずまず。
危惧されるのは、記事が縦に複数並ぶ場合だが、これは記事間の間と、記事カテゴリの見せ方で何とかできるんじゃないか、と思っている。どうだろう。うまくいくだろうか。
グリッドを外すと、より一層不安になってくるけれど、少なくともここ3回の中では一番スッキリした見た目だ。
続いて、アーカイブのページを考える。
トップページのグリッドを、馬鹿正直に写すとこういう形になる。が、どうにも気持ち悪い。小カテゴリ（＝アーカイブタイトル）の前後遷移が飛び出しているのが原因だ。
そこで、トップページでは記事カテゴリがあった位置に、アーカイブタイトルを移動させる。これで見た目はすんなり収まった。
アーカイブタイトルには文字数の長いものもある。その際はグリッド2つ目の幅で改行が入ることになるが、致し方ないものとする。
グリッドを外すと、こんな感じ。これを機に、カテゴリ名を短くしてやろうかとも思う。解決はそっちの方が早いかもしれない。
では、難関、記事アーカイブを考えることにする。
長い。基本はトップページのエントリと同じ構成だが、トラックバック・コメントが、リンクではなく実際の一覧・入力画面になるのが特徴だ。
この時点で、大きな問題が2つ発生している。
諸問題をひとまず据え置き、コメント入力部分を整理しなおしてみた。意外と項目が多い上、グリッドにまとめるのはなかなか難しい。
レイアウトとしては非常にオーソドックスで良いのだが、実際に投稿され得るコメントの長さから考えると、4グリッド分の幅は広すぎると考えた。そこで、2グリッド幅に置き換えをしてみる。
こう配置すれば、左側に並ぶコメント群を見ながら、返信を返しやすいのではないかと考えた。コメントが1件も無いときに左側がぽっかり空くことになるが、それは致し方のないこととした。
少し満足したので、これを案Aとする。
引き続き、最初にグリッドを引いた際に「こういう配置があったら面白いな」と思っていた構成を試してみる。
どどーん。コメント全般を、補足情報枠に入れる、という試み。内容の切り分け的にこの配置はおかしいのだが、コメントが盛んにやり取りされるわけではない「しまブログ」において、この配置が最も高さを低くできる（であろう）配置なのだ。
コメントの始まりを本文に合わせたのは、記事タイトルに並ばせるとおかしいんじゃないか、と一瞬思ったため。正直に言うが、これは失敗だ。記事タイトルに面を合わせた方がしっくりくるだろう。
修正をしていない上、いまいち納得がいっていないが、これを案Bとする。
そして、一度、案A・案Bを並べて見てみようと思った。
うむむむ。どう見ても案Aが優勢である。案Bって、どっちかってーと捨てネタっぽい配置だものね。
補足情報枠には、何もなくても、サイト内検索の枠を入れるつもりであったので、全くの空白にはならない。だから、別に空白を気にする必要はないだろう、ということで、案Aで進めるようにする。
あれ？いつの間にか、大体の画面が出揃っちゃった？
次回からは、このフレームワークを基礎に、カンプ作成をしてみる。
昨日のフレームワークが、実寸を無視していたので、実寸の50％で作り直してみた。
入れるべき要素も取り敢えず入れてみる。グリッドを外すとこんな感じ。
驚くべきことに、この時点で既に企図していたビジュアルではない。内容が詰まりすぎていて、かっちりし過ぎている印象を受ける。
ので、試しに間隔を取ってみる。
む。やってみるものだ。確実にさっきより良い。グリッドを外してみる。
こうしてみると、はっきりする。ビジュアルとして一貫性が取れていない原因は、ページタイトルの背景色だ。これは後で外そうと思う。
そういえば、昨日ブロックマンの『Grid Systems in Graphic Design』での、背景色を伴った文字の部分を思い出し書きしていたが、昨夜改めて読んでみると、最善の解決は「背景色をやめ、文字色を変更してグリッドとしてのまとまりを視覚化する」というものだった。
ここに、ウェブならではのグリッドシステムに対する問題が生じる。文字色が、単なる表現としてではなく、機能として認識され得る、という点だ。印刷物にはそれがない。しかし、著書の中で並べられている例を見ると、確実にその選択が正しいと見える。
もちろん、文字量・行間の問題もある。ページタイトルとして配置しようとする文言は、さほど多くない。仮に文字色を変えたとしても、グリッドのまとまりとしては認識されないし、功を奏さないだろう。ここ、良く考える。
もう一つ、日本語の文章における冒頭の一字下げが、グリッドとしてのまとまりを認識する上で足を引っ張っているということも考えさせられる。『Grid Systems in Graphic Design』の中にも日本の書籍が参照されているのだけれど、いずれも一字下げが為されていない。縦書きの、高さの低いグリッドを縦に並べている例だった。
考えていくうちに、同一の内容を示すにも文字数が少ない日本語というのは、グリッドシステムに余り向かないのではないか、とさえ思える。ブロックマンは「日本語は、個々の文字が正方形に収まるように作られているため、極めてグリッドシステムに適した言語と言える」と述べていたけれども。
言語はともあれ、文章量にばらつきがある、個人が更新するブログにおいて、グリッドシステムは効果を十分に発揮できないだろう、という感じはしてきた。雑誌や、一定量の文字数が決定付けられているまとまった文章ならば別かもしれないけれど。
まぁいい。なんとなく、2件エントリが並んでいる状態も作ってみる。
わぁ。一気に超がっかり。やはり、昨日最後に無理やり付けた横線が気持ち悪い。この横線が縦に等間隔に並ぶ、とかであればいいのだろうけども、本文が1行とか増減する場合のことを思うと、この線もやめた方がよいようだ。
自戒の意味も込めて、グリッド線を外した状態の画像でお別れです。さよなら、さよなら、さよなら。
ブログの見た目に完全に混乱が生じていて、ちょっと仕切り直そうと思った。
折しも、会社である人がフレームワークについて述べていたのをチラ読みしたので、しまブログを整理し直してみることにした。
こういうとまるで一度も紙に書いたりせずに作っているように思われるかもしれないけれど、実際はそこそこ紙には書いています。ただ、サイト全体の内容の整理からメニュー構成を導き出し、そのメニューの配置を考えると、そこから先はカンプを作りながら考えるという島元の悪い癖があって、今回も見事に（いや、これまでもずっと）混乱しまくっているという次第。
何を隠そう、このブログ、4年前から何度も作り直そうと骨組みのHTMLを組んだり、下書きやらカンプ書いてみたりやらしまくってきたのです。4年駄目ならもう駄目だろう、とも思うのですけれども、いやさ、諦めないよ。
で、今回は冷静になるために自分で自分の考えを述べながら、整理してみる。で、後で読み返しておかしいところを突っ込んでいこうと思う。
1枚目。一番当初の構成。ブログの画面構成を、そのままshimatch.jp、luminousopera.jpにも持っていこうと思っていて、「グローバルナビ」が付いている。
で。全体を同じ構成で、ってのは無理がありそうだったから、ブログだけに絞って考える。
ローカルナビとタイトルを入れてみる。メニュー同士の間なんかの比率は適当なので、タイトルが妙に小さく見えるけど、ま、気にしない。ことにする。問題は要素の配置を決めていくことだ。
ページタイトルは、大きく2つの項目が入る。「過去の記事」といった大カテゴリと、「カテゴリごとの記事一覧」といった中カテゴリ。
ここで悩む。本当はここに背景色なんか入れるつもりなんかなくて、文字を左寄せのみで置けばいいと思っていた。けど、それだとトップページは特に、どこまでがメニューで、どこまでがページタイトルで、どこからがエントリーなのかが分かり辛くなるのだ。
で、試しに背景色を入れてみたけど、文字の始まりが左端じゃおかしいよね、ってなる。
早くもグリッド崩壊。いや、新しいグリッド線が増えたと理解すべきか。
ヨゼフ・ミューラー=ブロックマンの著書『Grid Systems in Graphic Design』では、背景に色をもった文字列について、文字の先頭部分をグリッドとしてみても良いし、背景色の先頭をもってグリッドとして見てもよい、と両方の例が書かれていた。だから、たぶんこれでもグリッドシステムに沿った配置ではあるんだと思う。
しかし。ローカルナビは背景色を持ちながら、文字の先頭と背景色の先頭が揃えてある。その辺がどうもちぐはぐな印象を受けるのかもしれない。
まぁ、いい。先に進む。
最初のページの場合、内容部分に最新5件のエントリが並ぶ。エントリの構成内容は図の通り……なんだけど、この、下の方の項目たち（投稿日・記事カテゴリ・コメント・トラックバック・前の記事へ・次の記事へ）のゴチャ感がどうにも収まりが悪い。しかも、リンクとして機能するもの、単なる表示であるものが混在しててかなり嫌な感じだ。
まず、記事のカテゴリ名が長いものがあるので、それを別の行に移してやる。
本当は、記事に含まれるタグやら、固定リンク（パーマリンク）なんかも入れないといけない。けど、入れていない。
エントリのタイトルが固定リンク（パーマリンク）になればいいのだが、これもまた違和感がある。タイトル自体がリンク、ってどうも気持ちが悪いのだ。
さらにいくと、このページ構成は、エントリ単体のページ（エントリアーカイブ）でもほぼ共通になる。その際は、コメント・トラックバックはリンクではなく、コメントの一覧とコメント入力フォーム、トラックバックもトラックバック先URLとトラックバック一覧に置き換わる。大抵、この辺で考えるのが嫌になって止まってしまう。ってか、止まった。
やけくそで横幅を合わせるために「前の記事へ」「次の記事へ」のリンクを伸ばしてみたけど、まぁ、これはない。
トップページでは「前の記事へ」「次の記事へ」が必要ないのだから、一旦、この状態で縦に2つエントリを並べてみる。ちなみに、現状のしまブログがこの状態だ。
グリッドを外してみると……うーん。やはり、エントリとエントリの切れ目が良く分からない。
これは設計図なので、視覚的な要素を入れる必要はないわけだが、気持ちが少しでも前向きになるように、エントリの先頭に線を入れてみようと思った。
何となくそれっぽいかなぁ。
グリッドを外してみると、こう。
今日はここで力尽きたのでまた次回。内容が一切明らかにされない「補助情報」の取り回しにこの後、ガンガン振り回され混乱してゆきますので乞うご期待？
……という記事を上げようとしたら、Movable Typeから画像がアップできなくなってしまって半ギレ。直でURLを書く。うざい。おまけにこれじゃ最新の画像にも反映されない。どーなってるんだ。しかも10月にはMovable Type 5出るって言うし。やっと慣れてきたな、と思ったら、もう次かよ。うーん。
ぼんやり、ウェブについて考えていること。
文章も、画像も、ブラウザ上では四角い形の要素として配置されていくのだから、構成は自然とグリッドに近付いていくと考えている。今のこのレイアウトはそれを試みているものだけれど（あくまでも試みだが）、グリッドシステムにはやはり程遠い結果になっている。
字体、文字サイズ、行間、字間、ブロックの高さなど、閲覧環境に左右される要素が多く、見た目を完全にコントロールし切れないブラウザ表示にあっては、垂直についてグリッド化することはできても、水平についてグリッド化することは難しいし、限定的になる。中途半端なグリッドほど気持ち悪い・見辛いものはないし、思い切って普通のレイアウトに変えてしまったものか、このグリッドをより推し進めてみたものか、しまブログの今後について考えあぐねている次第。
画面の高解像度化に伴ってブラウザの1ページあたりの表示領域も広くなりつつあるのだが、その中で、果たしていつまでも表示文字サイズが12ptでいいのだろうか、という疑問が頭の中で渦巻いている。考えてみれば、Internet Explorerの初期文字サイズは16ptである。
文字サイズとしての大小もあるけど、一行あたりの文字数が余りに多いのも、読み辛くて考え物ではないかと感じる。文字サイズと表示幅、行間の比率をもう少し考えた方が良さそうだ。今は、一行当たりの文字数が56文字くらい。やっぱちょっと多いな。40～48文字くらいが読みやすいのかな……。字間を詰めて、行としてのまとまり、単語としてのまとまりを強調した方が良いだろうか？うーむ……。