実は前回のエントリーを書いたあとにコツコツやっていたんですが、破滅派のリニューアルを始めたため、ほったらかしになってしまっていたとさ。

元のチュートリアルも賞味期限切れかと思いますが、成果物とその感想でもつらつらと書いていきたいと思いますです、はい。

2.Creative Studio Website

黒背景は初心者に向かない

これは車のサイトというふれこみでしたが、まあ、サイト構造としてはかなり寂しいですね。

そういえば、僕がこの業界に入ったとき研修で車のサイトを作ったのですが、黒背景を使って怒られたことを思い出しましたよ。

よく考えると導線が9本しかないサイトってのも寂しいもんですが、まあ、こんなもんでしょう。

セクシーフォト使用

実際に作ったのがこちら。

これはたしか、2時間ぐらいで終わった気がします。

写真はシャッターストックのキャンペーン中にダウンロードしたものを使ってみました。

やっぱ写真ですね。僕は絵心がまったくないので、写真の力に頼り続けたいと思います。

3.Professional Clan/Gaming web template

ヘッダーのクオリティ高し

これはゲームのサイトでしたかね。

ヘッダーの画像は素材として提供されていた（当たり前だけど）ので、そんなに時間はかからなかったはず。

グランジのブラシを使う工程があって、そこで「へ〜」と思った記憶があります。

グランジブラシの使い方がよくわからないという人はやってみるといいかもです。

ただし、これは半透明を使いすぎているので、コーディングはかなり面倒くさそう。

なぜ日本語はダサく見える？

実際に作ったのがこちら。

僕はこういう模倣をするとき、絶対日本語にするようにしています。

かならず劣化しますね。なんだろう。フォントの影響？　やはり、日本人は英語を文字ではなく、視覚的な記号（絵画みたいなもの）って捉えてるってことなんですかね。

意味が無い方がクールなのかな。

4.Vibrant modern Blog design

おしゃれブログ

これは他のチュートリアルでも取り上げられていたので、かなりオサレだったのではないでしょうか。

今となっては少しださく見えますが。ポイントははみ出ているところですかね。

ブログのデザインとしては定型的なものなので、参考になるでしょうか。

背景画像にミス

これが実際に作ったもの。

最大の罠は、背景のぼかしのサイズを間違えたことでしょうか。

背景が光り過ぎで文字が飛んでしまいました…

このおかげでかなりコーディング不可能なサイズの画像になってしまったと思われます。

5.Nature inspired painted background

手描き風デザイン

これはブラシを使いまくるやつですね。

でかい水彩ブラシの重ね方を重点的にやります。

最近、樹木とか鳥とかのすてきなブラシがたくさんあるので、けっこう作りやすいんじゃないでしょうか。

何かが違う...

で、これが実際に作ったヤツです。

質感は本物にかなり見劣りしますね。丁寧に仕事をしないと駄目だという見本のようなものです。

このデザインをHTML化するのはかなり大変そう…

神業的な背景敷き詰め技術が要求されそう。両端をちょっと工夫すればイケそうですかね。

終わりに

僕は生意気にも職場でデザイン研修したりするのですが、いつも思うのは「新規にデザインを起こすより、リニューアルの方が絶対に上達する」です。

たとえば、3のヤツとかがそうなんですが、コンテンツが少なすぎるWebサイトってデザインしようがないし、実際にそんな仕事はないと思います。普通はFlashとかのRIAにするはずですからね。

どんな業種でも、デザインは視覚的表現であるとともに、機能の表現（プレゼンテーション）や指示（インストラクション）だったりします。

そうした勘所をつかむには、新規でやるよりすでにあるコンテンツを整理させた方がよいですね。自由が一番苦しいですから。

とまあ、偉そうなことを書きましたが、半年で5個しか終わっていないので、あと65個…いつになったら終わるのかわかりません！

続く….かもしれない。

Related posts:

1. デザイン力向上のために言われたことをやる(1)
2. 山梨開墾日記〜土地囲い編〜
3. 山梨開拓日誌〜水取編〜

海外ネタ紹介ブログというものがあります。やはりWebの技術は西高東低、とりわけ英語圏の方々の技術が突出しています。

で、そうした流れを象徴するかのように、海外ネタ紹介ブログというのが幾つかありまして、よくある人気記事は「＊＊＊のための45のXXX」というまとめエントリーだったりします。

そういうエントリーが人気を集めることは非常に納得のいくことなわけですが、ぼくはそういうエントリーに大量のソーシャルブックマークがついたりして、しかもそのほとんどが「あとでよむ」だったりすると、いつも思うわけです。ほんとうにあなたがたはそれを読むのか、と。そして、読んだ後にやるのか、と。それは集英社の世界文学全集を全部そろえておいて、どれ一つとして読むことなく、教養を手に入れた気になっているオッサンと一緒じゃないか、と。

というわけで、やってみることにしました。

題材として選んだのは、Creamuさんで紹介されていたWebデザイナーとしてのスキルを上げるためのPhotoshopチュートリアル70選です。

縦書きプロジェクトも終わっていないのになぜこれかというと、僕はデザインスキルが低く、なおかつ興味がないからです。

以前、Flash縦書きで参考にさせていただいたブログにサンキューコメントを残したところ、「小説を書いている方は文字組などにもこだわりがあるのでは」などと返信いただいたのですが、ぶっちゃけた話、まったくありませんし、あってはいけないと思っています。

族長の秋という作品があります。これは大変素晴らしい小説ですが、改行がほとんどありません。でも、僕はそれを読み、大変面白いと感じました。

仮に、僕が文字組に大変うるさく、適切な行間や字間、そして適切なフォントが揃っていないときに不快に感じるようんであれば、僕が読める作品の数が少ないということになってしまいます。それはダメです。言葉は言葉。デザインから完全に無縁でいることはできませんが、言葉をもっとも純粋な形で受け止めることができなくなってしまっては、小説家としての先も長くないと思っています。ぼろぼろの装丁であっても、読みにくい組版であっても、優れた文学は優れた文学です。

とまあ、息巻いてしまいましたが、文学好きというのは大体そういうものです。字面でどうこう言っていたら、岩波文庫の復刻版を読めなくなってしまいます。東洋文庫なんてなおのこと。国会図書館の古地図なんて、どうするんですか。

そういえば、破滅派を文芸誌にするとき、僕がエディトリアルを担当するのですが、どのフォントがいいかとアンケートを取ったら、そのとき手元にあったイワタ明朝か教科書体という結果になりました。みんな常識外れですね。

ということで、僕はデザインということに関してそもそもあまり興味がないのですが、そうも言っていられてなくなりました。縦書きブログを実現するにあたり、デザインがどうたらという突っ込みを入れられてはたまらないのです。

プログラマーの方は結構心あたりがあるんじゃないかと思いますが、どんなに優れたアイデアであっても、デザインがダサいというタダそれだけの理由で冷遇されることがあります。

これデザインして、と頼めば優秀なデザイナーがouiと言ってくれるほど偉いならともかく、そうじゃない場合は、自分でデザインしなきゃいけないわけです。しかも、自分の仕事の本質を見失わず、デザイン能力をある程度身につける必要があります。

くれぐれもいっておきますが、僕はデザイナーが卑女であるといっているわけではありません。デザインには力があります。しかし、デザインの力をあてにする小説家はクソだということです。

今回の結果

というわけで、とりあえずPhotoshop力をもうちょっと鍛えようと思い、Webデザイナーとしてのスキルを上げるためのPhotoshopチュートリアル70選の一番上からやってみたわけですが、これがまた時間を食いました。

こんな感じのレイアウトを作るだけで小三時間ですわ。

コレを作る

いやー、恐ろしいですね、Photohop。

フォトグラファーのポートフォリオサイトという触れ込みですが、久々にいじったらかなり戸惑いました。

レイヤーの名前を変更するときにクリックする場所がちょっとずれてたりして、レイヤースタイルのダイアログが出ちゃうし、カラースキーム控えるの忘れて、しょうがないからグラデーションの途中からスポイトで適当に色抜いたりとか、鉛筆ツールが上手く使えなくてctrl+zを押しまくったりとか、試行錯誤の三時間でした。

毎日前に一時間ずつやれば楽勝でしょ、とか思ってましたが、いきなり10ページもあるチュートリアルにぶつかるとは。

完成品

できたのがコレ

で、できたのがこれです。

ちょっと細部をコピーしきれませんでした。

面倒になっちゃうのは僕の悪い癖ですね。ブラシファイルのダウンロード先も書いてありましたが、面倒だから自分が持ってたブラシでごまかしちゃいました。

しかし、70個もあるとなると、210時間もあるのか…….。でも、ちゃんとやろう。

追記

今日は破滅派安否情報にもブログを書きました。一応、小説も書きましたが、今日は5枚も書けなかったな。

Related posts:

1. デザイン力向上のために言われたことをやる(2)
2. 山梨開墾日記〜土攫い編〜
3. WordPressとflashでブログ縦書き化計画(3)

IE6で何にも表示されない

それはさておき、2008年度の個人的なビッグ・イシューの一つに「自分のサイトの公開」というものがあったのですが、年の暮れも暮れ、友人からメールが来て、「Internet Explorer以下IEで見られないんですか？」とのこと。え、なにそれ、見られないわけねーじゃん、と思っていたら、なんと見られない。

おお、まさか……。今日びIE6で見るなんて……と途方に暮れつつも、直さないことにはしょうがない。IEというブラウザには、親戚のアバズレ娘のようなところがあり、ちょっと目を離すととんでもない見映えになっているのです。

最近はほとんどチェックせず、「心の目で見えている」と思っていたのですが、まだまだ甘かったようです。しょうがないな、と久々にIEを起動してみると、衝撃的な光景が。

なんにも表示されていない！　IE7でもかなり崩れている。ここまで激しいとは思いませんでした。ほぼ全裸みたいな状態でした。

とはいえ、心当たりがないではないのです。

• positionレイアウトを使いまくった
• z-indexを指定しまくった
• 縦横のエラスティック・レイアウトにした
• 途中で開き直ってpng画像使った
• ie用のCSSを用意しておいたけど、途中で力尽きてやめた

とまあ、色々やったせいで、こうなってしまったわけですね。これを今日直しました。一応、IE7には対応させましたが、6は利用者へのメッセージを込めて、アラートを出すようにしています。

1. IE6以下には対応していない旨を伝え、Firefoxをダウンロードするよう促す
2. 拒否られたら、今度はIEをバージョンアップするよう促す
3. さらに拒否られたら、無念である旨を伝え、スタイルシートを全部切る

IE6だったらCSSを切っちゃう

結果的に、右のような文字だけのページになります。文字だけしかなくて、美しいですね。言葉本来の意味が浮き立ちます。僕はこういうページが好きです。と、言い訳しておきます。

そうはいっても多数派

とまあ、自分のサイトなので適当に対応しましたが、実際問題、IE6を使っている人はまだまだいるでしょう。仕事ではあと数年対象にしなくてはならない気がします。

破滅派などをやっていてよく思うのは、ほとんどの人はブラウザの存在すら知らないということです。

Firefoxの存在を知っているだけでかなりITリテラシーが高い方。はじめから入っているものを使うのが生き物として自然な行為です。

往々にしてITリテラシーが低い人というのは、アップデートをしません。セキュリティの脆弱性がどーたらこーたらなんてどうでもいいわけで、Win XPのSP1とかのままで頑張ってる人も結構います。「パソコンをアップ・トゥ・デイトに保つ」という概念がよくわからないのでしょう。僕も昔はそうでした。

IE6を見捨てることって、開発者にとっては凄く助かることなんですが、結局はそういう人を見捨てることになるんですね。「どうしてもこれがしたい！」ということがないと、わざわざパソコンのことなんて勉強したくないですからね。

ついでに読者のことも考える

なので、やっぱり読んでいる人のことをちゃんと考えるのが大事だなと思ったのですが、それだけで結論づける気にもなれないのが難しいところです。

Web業界で最近よく言われているのは、「開発者が開発しやすい技術は伸びる」ということ。代表例としては、Googleマップとかのサービスがそうですし、AmazonもWebサービスというのを行っています。自分のところの資産を思いっきり公開して、みんなが作りやすくすることで、広めてもらおうとするやり方ですね。

他にもRuby On Railsとか、「開発しやすさ」を念頭においたフレームワークなども徐々に台頭しつつあります。日本ではどうだか知りません。ともかく、発信する側がやりやすいという状態が、結果的に多くの受け手を喜ばせるということがあるようです。

状態ですよ。単体のモノがいいかどうかじゃなくて、状態とそこから生まれる結果の総体の話ですよ。

というわけで、このブログは一文学者高橋文樹がどんどん情報を発信していくためのブログにしようと思っているので、多少の不行き届きはご勘弁を、でも、あんまりひどかったら直すから言ってね、という長い言い訳でした。

Related posts:

1. Opera9.50はなぜnoscriptを出力してしまうのだ
2. デザイン力向上のために言われたことをやる(2)
3. Wordpressのフォーマッティング

というわけで、なんかいいのないかなー、と思っていたら、plaintxtBlogというナイスなテーマを見つけました。その名の通り、大変シンプルなテーマです。スタイルシートしか使っていなくて、潔いです。作者はSandboxを作った人ですね。ちゃんとマイクロフォーマットにも対応してます。

スクリーンショットを貼っておくので、参考にしてください。まあ、例によって破滅派作業用情報なので、かえって悪く見えちゃったら、作者の方に申し訳ありませんが。変な背景画像とフッターのグラデは僕が入れたので、責任は僕にあります。

plaintxtBlog

特徴は大体以下の通りです。

1. ほとんどのHTMLタグがスタイリング済み
2. 管理機能がついていて、カラムの数・文字サイズなどを設定できる
3. マークアップエンジニア垂涎のマイクロフォーマット対応＆Web標準完全準拠
4. コメントとトラックバックを分けたり、ページへのコメント許可機能があったり、色々気が利いてる

というわけで、この素敵なテーマの日本語ファイルを公開します。興味があったら使ってください。ライセンスはplaintxtBlogを継承します。GPLだったかな？

plaintxtBlog日本語ファイル

インストール方法

1. ダウンロードしたzipファイルを解凍する
2. 別途ダウンロードしたplaintxtBlogのテーマフォルダ内にja.moを置く
3. テーマを有効化して終わり

管理画面も翻訳しておいたので、そんなに悩むことはないと思います。

注意点

実にもったい無いことなんですが、このテーマ、ちょっとだけローカライズに対応しきれてない部分がありました。

なので、以下の二点を直す必要があります。

1. 日付が変
2. 投稿のメタ情報「この記事はいついつに誰々がアレして」とかいう部分に、and Tagedと出てしまう

日付に関してはTaiさんの日付の表記を直しましょ！というエントリーを参考にしてください。テキストエディタやらの置換機能で一発だと思います。

投稿のメタ情報に関しては、該当するテーマファイルのand Taggedという部分を直してください。これも置換でやれば、そんなに時間はかかりません。テンプレートファイルの読み込み順序がわからない人は、Codex日本語の説明をどうぞ。

はじめっからそこだけ英語にしとけよボケという方は、下記の手順に従って、訳文を直してください。

1. Miyoshiさんの書いたとpoEditで翻訳ファイルを作るいうエントリーを読む
2. ダウンロードしたplaintxtblog.poをpoEditで編集する
3. 保存するとplaintxtblog.moというファイルが生成されるので、それをja.poに直す

簡単ですね。

追記：自分なりにカスタマイズ

ゼロから自分でテーマを作るのもいいですが、よそさまが作ったファイルをじっくり見るというのも、かなり勉強になりますね。初心者を脱出したい人にはいいと思います。

特に、このplaintxtBlogはマークアップが完璧なのにも関わらず、ほとんどデザイン要素がないので、やりがいがあるんじゃないでしょうか。

ただし、CSSがギチギチに書かれている上、子孫セレクタでピンポイントに固めてあるので、スタイルの上書きがやりづらかったりします。なので、こういう場合は!importantを連発しましょう。

li#all-pages li,li#all-posts li{
   display:inline;
   font-size:12px !important; /*←こんな感じ*/
   margin-left:10px;
   padding-left:10px;
   border-left:3px #cccccc solid
}

CSSの差分管理って、いまだに決定的な方法がよくわかりませんが、カスタマイズをどれぐらいやるかを想定しておけば、下から上書きし続けるというのも、立派なルールになりそうですね。

あと、各種用意されているカスタムクラスを設定するのがメンドクセーという人は、TinyMCE Advancedなどを使うといいかもしれません。

このプラグインが動かなくなった場合は、大抵キャッシュのせいなので、キャッシュを消すと動きますよ。

Related posts:

1. WordPressとflashでブログ縦書き化計画(3)
2. デザイン力向上のために言われたことをやる(1)
3. Wordcamp2009行ってきました

で、タイトルにも掲げたGoogleブック検索なんですが、これがまた凄いんですよ。いつの間にかパワーアップしてました。

Googleブック検索の肝としては「本の中が検索できちゃう」ことなわけですが、常識的に考えて、普通に利益を出している出版社がそんなものをオッケーするわけがないです。著作権的に云々かんぬんという問題があり、あまりたくさんの本はありませんでした。

ところが、最近ではGoogleは、著者および出版社と画期的な契約を結びました。というメッセージが掲げられていて、なんか検索対象の本が充実してるんですよ。普通のGoogle検索の結果とは合体されないみたいなので、YouTubeやマップほど全面に押し出されていないですが。

驚いたのは、その出版社の中にオライリーが入っていたこと。オライリーといえば、僕も普段からお世話になってます。オライリー本の充実感はちょっと凄いですね。読んだらできるようになるというのは、素晴らしいことです。まあ、優れた文学作品は読んでも何もできるようにならないのに世界がちょっと変わるから素晴らしいのですが。

Googleブック検索

少し紹介しますと、Googleブック検索の検索インターフェースはこんな感じです。もう、ほとんど全部出てるよ。自分のGmailアカウントも出しちゃった。まあいいや

肝心のコード部分は書かれていないあたりに出版社としての意地を見た感があります。

でも、こうなると、本のアドバンテージってユーザインターフェースぐらいしかなくなるんじゃないのかなってことを考えてしまいます。これが使われないのは、ただ単に読みづらいからでしょ。

まあ、それも大事なことなんですが、その対価として千円以上を要求するのは、ビジネスモデルとして難しくなっているなと感じます。売れなさということを考えると、純文学はますます厳しいですね。

今日のおさらい

ここからはメモ的な感じになりますが、考えたことは二つあります。

ユーザインターフェースというか、デザインというか

ユーザインターフェースとデザインをいっしょくたにして考えるのはよくないと思いますが、純文学こそデザイン性を高めるべきなのかなというのはよく思います。

というのは、どこかで読んだのですが、「難解な本ほどデザインに注力すべきだ」と書いてあったわけです。たしかに、読みづらい本ならば、なおさら読みやすくデザインすべきですよね。そこら辺は変なストイシズム＆ノスタルジーで精興社書体岩波文庫とかに使われてた伝統的な書体を指定したりしないようにしたいですね。

とはいえ、僕は組み版のスペシャリストではないし、予算のない(と思われる)純文学に高いデザイナーを傭う余裕もないだろうから、あくまで個人的なつながりになるのかなと思います。優れたエディトリアルデザイナーと一緒に仕事ができるように、愛される小説家になっておかなくちゃいけないな。

「売れっ子絵師さんに表紙絵を頼む」的に単細胞なしかけも面白くないので、なんか考えておこう。

間テクスト性ここに極まれり、かな？

間テクスト性というのは、ジュリア・クリステヴァの概念ですが、大ザッパに言ってしまうと、「あるテクストが他のテクストとの関連性によって意味を持ったりすること」です。

一概にはいえないですが、前提とする知識が多過ぎてわからない作品なんかは、こういう検索対象の増加によって、少しずつ補強されていくのかもしれません。ハイパーテクストとこの間テクスト性について述べている批評家も結構いるみたいですね。

そういえば、僕がWebの世界にしつこく残っている理由の一つに、この間テクスト性とWebの関連性に興味を持ったからというのがありました。入社後受けた研修で、Webの成り立ちについて調べたのですが、そもそもHTMLは学者の論文発表用フォーマットとして作られたという事実参考：Wikipediaを知ったのです。これには非道く納得しました。

大学の学部生のレポートというのは、普通に書くと、どっかの本のパクりにしかならないので、一生懸命調べて、新しい問題を発見しなければなりません。ところが、これがまた面倒くさい。

一人の作家について書かれた本がそんなに世の中に出回っているわけではないので、有名な研究書とかプレイアード版の高い全集とかの末尾に書いてある参考文献を調べて、それを尋ね歩くわけです。これがまた見つからない。あと、翻訳ないから原書で読んだのに、実は邦訳されてたりして、「なんだよ！」みたいなこともあるわけです。

でも、ハイパーリンクにしておけば、そういう手間も省けます。もうちょっと使い勝手が向上すれば、色んなテクストを渡り歩くようなことが実現しちゃうかもしれません。バルトが「S/Z」でやったようなことも布衍されて、違った読み方ができたり。

ああ、未来の本の姿が浮かんできた！ でも、Photoshop起動が面倒だから僕の頭にしまっておこう。

というわけで、今日はもったい付けて終わり。

Related posts:

1. デザイン力向上のために言われたことをやる(1)
2. ディエゴ・マラーニ『通訳』を読んでやる気を出してみる。
3. 活版印刷の老舗中村活字で名刺発注

特に、ブログのようにコンテンツがどんどん増えて行くページでは、ある程度CSSによってデザインを規定しておくことが必要ですよね。というわけで、以下にテンプレとなるコードを記したいと思います。

これがh2（記事タイトルなど）

これが段落（これが出展）これが段落これが段落これが段落これがstrongこれが段落これが段落これが段落これが段落これが段落これが段落これが打ち消し線これが段落これは出典これが段落これが段落これが段落これがemこれが段落これが段落これがリンクこれが段落

これがh3（中見出しか記事タイトル）

• これが番号なしリスト
• これが番号なしリスト
• これが番号なしリスト

1. これが番号ありリスト
2. これが番号ありリスト
3. これが番号ありリスト

これがh4（小見出し）

これがブロック引用これがブロック引用これがブロック引用これがブロック引用これがブロック引用これがブロック引用これがブロック引用これがブロック引用これは引用内の出典

//これは整形済みテキスト
var strong = document.getElementById('em');
alert('strong')

というわけで、ほとんどテスト投稿に近いものでしたが、一応、どこかで誰かの役に立つかもしれないので、このままにしておきます。ソースをコピペして使ってください。

Related posts:

1. .htaccessの正体見たり、枯れ尾花
2. Dreamweaverのサイト管理が便利だ
3. 「さらばIE6」と思ったってことは、視野狭窄かしら