watir

黄金比によるWebレイアウト

「Balance in Design 美しく見せるデザインの原則」に触発され、「黄金比によるWebレイアウト」を実践してみました。黄金比とは「最も美しい比」と呼ばれている比率で、具体的には5:8（1:1.618…)の縦横比をさします。バランスが良く安定した形で、人工物のみならず自然物にも美しいと感じるものの多くに黄金比が存在するそうです。

さて実践。最初に全体のレイアウトから。縦幅を800pxに想定して、そこから横幅を計算してみました。800pxを長辺とすると、短辺は1.6で割って500px。しかし横幅500pxだとなんとなく狭い感じがしたので、800pxを2で割って、短辺を400pxとした2つの黄金長方形として考えることにしました。400pxを短辺とすると、長辺は1.6をかけて640px。最終的に微調整をして横幅を650pxとしてみました。

次に横幅650pxを5:8に分けて、メインカラムを400px、サイドバーカラムを250pxとしてみました。厳密には5:8ではありませんが、10px単位でレイアウトを分けた方が楽なので。サイドバーカラムに250pxも必要ないように感じたので、250pxをさらに160pxと90pxに分割。

次にロゴを入れる箇所を作るために、縦幅400pxを150pxと250pxに分けて、上の5の部分にロゴを入れることにしました。最初はページ全体の上をロゴ部分にしようと思っていましたが、最終的にはサイドバーカラムの上だけをロゴ部分にしました。

そして下記のデザインが完成しました。少しメインカラムが狭いようにも感じますが、まあまあのできばえ。横幅760px、縦幅を950px（475+475）ぐらいでレイアウトしても良いかもしれませんね。これだと逆に縦に長くなりますが。

参考

• Wikipedia - 黄金比

最近買ったCD

いろいろと書きたいことはたまりつつも、なかなかまとまりきれずにいます。とりあえず最近買ったCDについてでも・・

Arctic Monkeys - Whatever People Say I Am, That's What I'm Not

最近かなりはまっています。シンプルだけどパワフルなロック。音楽論の難しいところは分かりませんが、曲の切り変わり方とかスピード感とかツボにはまっています。

Bent Fabric - Jukebox

AmazonやApple Music Storeによると、81歳のピアニスト（Bent Fabric）が若者アーティストをボーカルに迎えて手がけた意欲作らしいです。80歳を過ぎても新しいことに挑戦していく姿勢はすばらしいです。Apple Music Storeで入手できるミュージックビデオもコミカルだけど上品な感じがして好きです。「Juke box」と「shake」がお気に入り。

ELLEGARDEN - Space Sonic

ELLEGARDEN（エルレガーデン）の新曲。日本語の曲も英語の曲も同じくらい良い感じなのはエルレだけかもしれない。メロディアスでエモ、というのが非常にツボです。ボーカルの細美武士は仕事の都合でロサンゼルスに滞在したり、海外スタッフとやりとりが多かったために英語が堪能になったそうだ。（Wikipedia - ELLEGARDEN）

Millencolin - Kingwood

今はなんと表現するのが良いのかは良く分かりませんが、昔はメロコアとか呼ばれていました。今も昔もこういう感じのメロディアスで、ギターもドラムもなんかガンガンに音出しまくりの曲が好きです。

あと、Apple Music Storeで布袋寅泰の「さらば青春の光」と「サレンダー」、木村カエラの「happiness」「リルラリルハ」、くるりの「ワンダーフォーゲル」「ばらの花」とかも買ってます。はい。

シックス・アパートで働いています。

• Six Apart - Six Apart: 人材募集のお知らせ
• のまのしわざ：まだまだ人材募集中

しばらく前から、シックス・アパートで働かせていただいています。今さら言うのもなんですが、「どこで働いているか」ということが情報のゆがみ（バイアス）となることがしばしばあるので、私の発信する情報の是非を考慮する上でのひとつの情報として提示しておこうと思います。できるだけ手前味噌な情報は避けたい所存ですが、なにしろ私はMovableTypeもTypePadもSix Apartも大好きだなので、たまに手前味噌になるかもしれません。お許しください。はい。

ついでに申し上げると、現在シックス・アパートでは人材を募集中です。スーパーエンジニアだらけのように見える会社ですが、スーパエンジニアでもMBAでも英語ぺらぺらでもない、パスポートすら持っていなかったような私もいます。毎日が勉強です。はい。

進路を決めるのは自分自身

仕事を変え、キャリアを決めるのは自分である。自らの得るべきところを知るのは自分である。組織への貢献において、自らに高い要求を課すのも自分である。飽きることを自らに許さないよう予防策を講じるのも自分である。挑戦し続けるのも自分である。

P.F.ドラッガー「仕事の哲学」P73

またまたデザイン変更

気がついたら2ヶ月ぶりのエントリーになっていました。この2ヶ月の間にいろんなことがありましたが、それはまた追ってお話する機会があれば・・

それはさておき。またもやデザインを変更してみました。時間が足りなくなってしまったので、とりあえずインデックスページと個別アーカイブのみです。他のページにアクセスすると、ひどい状態になっています。また少しずつ戻していきます（その間にまたデザイン変更しているかもしれませんが）。

今回の変更では、下記の3つの試みを新たに行ってみました。声を大にして言うほどすごいことをしているわけではありませんが、目的をもって行う方が楽しいので。

1. 黄金律によるレイアウト：黄金律（5:8）を意識してレイアウトを決めました。全体の横幅が650pxで、メインカラムが400px、右カラムが250pxで5:8（1:1.6）となっています。また、右カラムのメニュー部分が90pxで、記事リストの部分が160pxとなっており、5:8に近い状態になっています。全体の横幅も、ディスプレイの縦と横を意識して5:8になるようにしているつもりですが、これはあまり意味がなかったかも。
2. structure firstなHTML：CSSを作る前に（できるかぎり理想的な）HTML構造を作ってしまって、そのあとにCSSを作成しながら調整していく、というアプローチをとってみました。当たり前といえば当たり前のアプローチですが、意識的に行うと少し違う（と思う）。無用なclass/idがなくなり、美しい構造になります。Movable Type(MT)の場合、mt-site.jsがname-email、comments-open、trackbacks-infoなどのidを使っているようで、ここで少しはまってしまいました。
3. CSS表記順の統一：これは単純に、プロパティをできるだけ50音順になるように並べたというだけです。フォント部分を独立させて表記したりなどはいつもの通り。

なお、いつものように表示の確認はMac SafariとFireFoxでのみ行っています。Windowsは会社でこっそりと昼休みにでも確認します。