•
・The 5 Worst Website Designs in the World （Blog.SpoonGraphics）
上のブログの記事で、デザインがイタいサイトを5つ挙げています。たしかにどれもこれも強烈です。あのポケモンの事件 ですら比べ物にならないほど、ピカピカギラギラしています。
「AHHHH!!! MY EYES! MY EYES!」なんて阿鼻叫喚なコメントが寄せられているのもよく分かります。
でも、日本にはもっとすごいサイトがあります。
・愛生会病院
その筋（どんな筋だ）では知らぬ者はいないと言われるほど、カルト的な人気を誇るサイトです。
でもいまだにこのサイトが病院サイトだって信じられないんですよね。初めて見たのは4、5年前。それから、やっぱりネタじゃないか？という疑念がずーっと晴れません。このページ とか読むと、やっぱりちゃんとした病院サイトなんかなぁ、と思いつつ、一生懸命作った結果があのサイトって誰が得するんだろ？少なくともあれを見てあの病院に行こうと思う人間はいないよなぁ、一体何の目的で？と負のスパイラルに捕らわれそうです。
•
ウェブデザイン技能検定3級に合格しました！
・ウェブデザイン技能検定
サイト上に、こーいう問題が出ますよ、と練習問題がアップされましたが、実際の問題はそれよりもはるかに難しかった。詐欺じゃーん、と言うくらいに実際の試験は難しく、練習問題をベースに勉強していた人はショックが大きかったんじゃないでしょうか。
受かったから、ということでいうわけじゃないんだけど、Web業界歴3年以上の人は、2級から受けた方がいいと思う。3級レベルの実技は簡単過ぎて逆に迷う。
たとえば、「このサイトのヘッダー部分の背景色を、IE、FF両方のブラウザーで見え方に差異が無いように、指定の色に変更しなさい。」なんて問題が出たけど、ちょっとWebに詳しい人だったら、「IEとFFで差異が無いように」ってところで「ん？」と考えてしまうかもしれない。
実際、僕も悩んだ。
どのレベルまでコーディングをやればいいのか判断に迷うので、文章だけではなく、「XXを変更して図Xのような見え方にしなさい」と完成図を提示して欲しいと思った。
学科の方は、html・CSS関連の設問が1/3くらいで、あとはWebに関して網羅的な知識が要求されていたように思う。僕はWeb業界歴が長いので、聞きかじった知識でなんとかなったけど、Web制作のことしか勉強してきていない人は難しく感じかもしれない。
＃肝心のウェブデザイン技能検定のサイトがダメダメってことは触れてはいけませんか？そうですか。
•
いまだに、VicunaとMT4の使い勝手に戸惑っているので、習得するためにデザインを一から作り直してみようと決意してみた。理想形としてはこーいうサイト を考えている。
ただ土台となるCSSレイアウトは、色んなテンプレートが公開されているけど、僕の理想にはちょっと足りない。僕が欲しいのは、左図のような5カラムのレイアウトである。
無いなら作ってしまおう、ということで作ってみた。
・DEMO
そのCSSとhtmlはこちらからダウンロードください。
・Download
ちなみに、「side-top」と「side-bottom」はいくらでも置くことができます。<div id=”side-top”>、あるいは<div id=”side-bottom”>をそれぞれコピーして、既存のside-topやside-bottomの下に追加してください。
逆に、「side-top」と「side-bottom」を使わないって人は、htmlからその箇所を削除してください。
WindowsのIE6、IE7、Firefox2で確認はしましたが、何分、CSSに関しては素人もいいところなので、おかしい箇所があってもおかしくありません。気が付いたことがあればコメントでお教えください。
•
気が付けば2週間ほど更新が滞っていて、月日の経つのは早いものですな。
・Vicuna - Movable Type テンプレート
ちなみに、WordPress、Nucleus、Serene Bach、FC2にも同様のテンプレートが公開されている。やっぱり最大のメリットは、ある一箇所のタグを書き換えるだけで、1カラム、2カラム、3カラムと自由にレイアウトを変更できる点。
しかも、2カラムも、左右にメインコンテンツを入れ替えることができるし、3カラムも中央にメインコンテンツを持ってくることも、左にメインコンテンツ左にサブコンテンツを2つ並べることもできる（このブログもそのスタイルですな） 。
嬉しいことに、いくつかデザインテンプレート（Skinと呼んでいる）が公開されていて、それを差し替えるのもカンタン。スタイルシートやhtmlにあまり詳しくない人でも、好みのレイアウトやデザインに変更することができるのではないでしょうか。
もっともMTビギナーやhtmlを一度もイジったことが無い人でもカンタンに使えるか、というとそれは結構厳しそう。僕はMTは使い慣れているのでMT4＋Vicunaを使いますが、MTに触ったことがないという人なら、デザイン（こちらはThemesと呼んでます）の変更がむちゃくちゃカンタンなWordPressの方をオススメします。WordPress用のVicunaも公開されてますしね。
備忘録として、公式サイトではあまり触れられていないことをいくつか。
・sub-skinの適用
デフォルトのスキンセットである「ninja」には、sub skinという形で「Boomer」「Mono Crystal」という派生スキンが公開されています。これらsub skinを適用させるには、
1：スキンの配布ページから、「Boomer」をダウンロード
でOKです。Boomerってスキン名なので他のスキン同様、
@import url(”<$MTStaticWebPath$>themes/style-Boomer/0-import.css”);
と入れてはみたけど適応されていない、なんて思いをしているのは僕だけではないはず。
Vicunaの雑感。
デザインの汎用性を持たせているので、とにかくコードが多い。分かりやすく分類はされているのですが、どこをどうイジったらサイトに反映されるのかがよむ分からない。僕も、FireFox＋Firebugが無かったら心が折れていたかも。
•
TwitterのようなデザインのWordPress用テーマ（※）「Prologue 」（プロローグ）が公開されています。（ネタ元：ブログヘラルド ）
デモ画面 を見るとたしかに、ミニブログっぽい。
認証をかけることで、社内ミニブログとしても使えそうなことが書いてありますね。あるいは、自分だけのミニブログとして（需要がどれだけあるかは不明ですが）、日々の生活を備忘録的に使っていくと言う、ライフログ的な使い方も考えられそうです。
•
ページ上部のメニューをちょっと変更してみた。ちなみに、デザインの参考にしたのは、「MITRABLOG 」。WordPressのテーマとしても公開されているデザインなのだが無理矢理このブログに移植しようと試みた。ソースは一切見ずにキャプチャして画面データからレイアウトサイズや使われている色を割り出すという、レシピがあるにもかかわらずそれを見ずに分子構成からオリジナルの味を再現するような愚挙に走っているわけです。ほっとけ。
しかし、ただ真似するだけでは芸が無いので、jQuery のプラグイン「Lava Lamp 」を使って、無駄にリッチなメニューを付けてみようと画策してみた。この「Lava Lamp」、実際ののデモ画面を見ていただけると、一目瞭然なのだが、メニューにマウスカーソルを合わせると、ミュイーンとフォーカス部分が動くのである。一見、Flashのようにも見えるが、CSSとJavaScriptだけで行っている。
実際に当ブログに入れてみると、ミュイーンと動きはするのだがクリックできない。クリックしても該当のページに移動できないので、全く見掛け倒しのメニューとなってしまった。というわけで、現在はJavaScriptは外して、Lava LampのCSSだけでメニューを構成している。
あと既知の問題として、トップページと各記事のメニューは問題なく表示されるのだが、カテゴリー別ページや月別ページでは表示がずれる。ほんとCSSってめんどくさい。メニューだけTableで組んでしまおうか、なんてことも考えたくなる。
＃風邪を引いたらしく昨日から伏せっている。体の節々が痛くて、楽しみにしていた「ピューと吹く！ジャガー THE MOVIE」も見に行けず、冴えない連休となりそう。
•
このブログは米国のレンタルサーバー（※）である「DreamHost」上で、運営されています。今でこそ、日本のレンタルサーバーも安いところが増えましたが、DreamHostも話題になった数年前はぶっちぎりの安さだったのです。
これらのスペックがどれだけのインパクトなのか、今一番日本で有名（と思われる）なレンタルサーバー「ロリポップ 」、そのお兄さん的存在の「チカッパ！」、さらにその上のお兄さん的存在「ヘテムル」と比較してみます。なお料金は、1年契約プラン＆キャンペーン価格を適応しない定価を12で割って、月額換算して比較してみます。
DreamHost
ロリポップ
チカッパ！
ヘテムル
1ヶ月あたりの料金
約1.150円（9.95米ドル）（月額9.95×12＋初期費用0）
525円（月額263×12＋初費費用3,150）
700円（月額525×12＋初期費用2,100）
約1,830円（月額1,500×12＋初期費用3,950円）
容量
500GB
200MB
1GB
3GB
MySQL
無制限
1
1？
10
ドメイン
無制限
1
5
10
サブドメイン
無制限
300
無制限
無制限
価格こそ、チカッパ！とヘテムルの間ですが、提供されているサービス内容は雲泥の差です。容量なんて桁が2～3違いますしね（容量の単位を間違っているわけではありません）。MySQLとドメインが無制限で追加できる、ということは、ドメインの登録料さえ払うだけで、100個でも1000個でも10000個でも独自ドメインサイトを月額約1,150円だけで持つことができるというわけです。
あるいはサーバーを借りたときに、好きなドメイン(.com, .net, .org, .info）を1個取得できますので、そのサブドメインサイトを好きなだけぽこぽこ作ることができるわけです。この場合月額約1,150円だけでサイトを好きなだけ持つことができることになります。
当然、美味しい話ばかりではありません。これだけ太っ腹なサービスなので、ユーザーも多くなり、パフォーマンスが極端に悪くなることがあります。重い、繋がらない、なんてことが起きます。そういった海外のレンタルサーバーを使う際のリスクはこちらの記事 を参考にしてみてください。
個人サイトならまだしも、企業サイトであれば、日本のレンタルサーバーが色んな面で安心です。おそらく企業のWeb予算においては、月額1,150円も1,830円も大差ないはずなので、海外の激安レンタルサーバーよりはヘテムルを強くオススメします。
しかしながら個人ユースにおいては、1,150円と1,830円の差は看過できません。ランチ一回分です。そこで僕は「DreamHost」を使い続けているわけです。重いことが致命的になるほどアクセスが多いわけでもありませんしね。
ただし、将来的にはどのようになるかは不透明です。快適なサーバー環境を求めてサーバー移転を考えるかもしれませんし、そもそもDreamHostが未来永劫存続する確証は無いのです。
そこでサーバー移転を視野に入れつつ、DreamHostでサイト構築することになりますが、そのために、DreamHostに全てを委ねないことが重要になってきます。つまり、DreamHostが提供しているサービスでも、他に安価で安心なサービスがあれば、そちらを使います。これにより、DreamHostが突然不測の事態に陥ったとしても最低限の手間でサーバー移転できるというわけですが、ここでは特に、
・ドメイン管理
をDreamHostのサービスから切り分けて管理することにします。具体的に、ドメイン管理は「ムームードメイン 」、メールアドレス管理は「Google Apps 」を使います。
幸い、というか、来年早々にも個人事務所を設立しますので、DreamHostで提供されている1クリックでWordPressをインストールできる機能を使って、その個人事務所サイトを実際に構築していきます。
•
このブログを開設したのが、8月下旬。それから3ヵ月半経過したわけだが、なかなか検索に引っかかってこない。オープン後の半年ほどは検索対象から外される、あるいは検索順位が低く設定されるといういわゆるエイジングフィルタ（Aging filter）に引っかかっているのだろうと思うのだが、分かっていてももどかしい。
エイジングフィルタだと思っているけど、実は検索エンジンにクロールされていないんじゃないのか、あるいはGoogle八分にあっているんじゃないのか、という不安に駆られるのである。特にこのブログはあまり宣伝活動をしていないので、天文的な確率で辿り着いた人達しか見てくれていない。徐々に増えてきてはいるものの、微々たるものだ。
ネタフルのコグレさんは、「とりあえず半年は辛抱して続けること」と語っているが、半年経てばエイジングフィルタが解除されて、検索に引っかかってきやすくなる、という意味も含まれている。頭では分かっているが（SEOの本を書いたくらいだし）、不安は消えない。
3ヵ月後の僕がこの記事を読んで、「そんなことで悩むことなかったのに」と笑ってくれるだろうか。
•
右サイドメニューには、「最近買ったもの」という箇所がありますが、ここには文字通り、最近購入したモノの画像とそのレビュー記事へのリンクを貼られています。
Movable Typeを使って、サイドバーに特定のエントリーの画像を表示させるテクニックは今までもあって、たとえばエントリーの最新X件の画像を表示させるとか、あるカテゴリーに属する画像を一覧表示させることはできます。
しかしこのブログのように、「買ったもの」は本、ゲーム、ハードウェアと色んなカテゴリーに分かれていますので、今回はエントリーのタグに「購入」が付いているエントリーの画像の最近5件を表示させています。 なお、この機能を使うためには、「Collect Plugin for Movable Type 」というプラグインを導入する必要があります。
<MTEntries tags="購入" lastn="5">
•
このブログは、Movable Type 3.35（以下、MT3）で構築されています。
とはいえ、1個1個の記事に<meta>を設定しているのも骨が折れますので、極力、手をかけないために「概要」の部分を<meta>の<description>として表示させてみました。
「概要」の部分を入力するのがめんどくさいという理由で、「エントリーの内容」の冒頭の200字程度をピックアップして概要の代替テキストとして充てている人も多いと思うのですが、このブログの場合、「エントリーの内容」がいきなり別ブログの引用から始まったりするので、冒頭部分を機械的に引っ張ってくることができないのです。そこで概要の部分にはちゃんとテキストを記入しています。
この記事のタイトルに「決定版」と付けていますが、それは同様の記事でよく見かける、「<meta name="description" content="<$MTEntryExcerpt$>" />」という記述の場合、僕のブログではうまく機能しなかったからです。
僕のブログの「概要」には、他サイトへのリンクがあったり、開業が入っていたりしますが、先の記述では、<description>がおかしなことになってしまいます。 そこで余計なhtmlのタグや改行を取り除きプレーンなテキストにする記述をお伝えします。
問題点が無いことも無いので、次回の課題恬として挙げておきます。
