sites_head3.gif

自前でブログをデザイン運営するということは、すでに実行されている方であればなんてことないことでしょう。ましてや、ホームページを既存のホームページ作成ソフトに頼らずに運営してきた方であれば割と簡単にできることだと思います。私の場合、「ブログって何?」から始まり、タグやスクリプトを書くことがほとんど初体験でした。この未体験ゾーンへの突入を楽しめるか、めんどくさいと思うかで進む道は大きく変わったと思います。

私はその先がきらきらした世界に見えてしまいました。日頃は、建築のデザインをなりわいにしていますので、それと同じく楽しそうな世界に見えたのです。しかし、取り組みはじめたとたん、デザインされたテンプレートに頼らないということはとても恐ろしいことだということに気がつきました。『謎の暗号』(笑)をいくらいじくっても、思うようなデザインにならないのです。あきらめるのはとても悔しかったので、がっぷり四つに取り組んでしまいました。

おそらく、これから自前でブログをデザインし運営しようとする方は、私と同じハードルを越えていかなくてはならないと思われます。そんなハードルを乗り越えさせてくれたサイトに御礼の気持ちをお伝えすると共に、これからブログをデザイン運営しようとする方のために少しでもお役に立てればと思いそれぞれのサイトを紹介したいと思います。


■ ブログをデザインする


sitesakamoto.com


私は、ホームページを開設した当初、このサイトに『がつん!』とやられて以来、いまだにサイトデザインのお手本にしています。当時はトップのデザインが真っ白でした。なにも表示されていないのです。おや?って思いつつ、カーソルを動かすと、リンクが張られたところだけ文字が浮かび上がりました。がつん!!でした。1999年4月15日当時と今はトップのサイトデザインは違っていますが、私の手本となっている本質は変わっていないのです。

その理由は、

  • デザインがシンプルである
  • インターネットのメディアとしての可能性を模索挑戦している
  • ↑この点は、私もアーティストのはしくれとして大いに刺激されています
  • テキスト主体のサイトなので、ビジュアルがとても印象的に残像する
  • 坂本龍一個人が、あけすけに出ている(飾っていない)。今では個人日記的なブログが全盛ですが、1999年当時はとても印象的
  • ↑現在のサイトでは日記を付けていないようですが、当時は娘さんのことや日々の様子が書かれているコーナーがありました
という点でした。

このサイトの『アーティスティック』かつ『多くを語らないかっこよさ』に惹かれてはいるものの、じつにわかりにくいサイトでもあります。先ほども『sitesakamoto.com』に行き、日記のコーナーを探しましたが、あるのか無いのか、どうしたのかが、全くわからずあきらめてしまいました。私のサイトでは知りたいことがあるとキーワード検索により一発でたどり着けるようになりました。管理者の私も『サイト内検索』はとても重宝しています。特にテキスト主体のホームページであるならば、ベースを『Movable Type』に変えることは、大きな魅力になると思います。

『わかりやすさ』と『かっこよさ』。このあんばいが実に難しいところです。このサイトを我々アーキテクト・ユニットの活動をお知らせしていく媒体とするには『sitesakamoto.com』のデザインはそのまま使えませんでした。やはり、わかりやすく、迷子にならないサイトを目指したのです。このような経緯で、デザイン的には異なりますが、『sitesakamoto.com』のサイツ・スピリットはしっかりと本サイトに流れております。

しかし、sarukoは、「なんだか文字ばっかりで、プログラマーさんのサイトみたい」と言っています。そうなんですよね、確かに文字ばっかり。『写真が効果的に残像するように』と狙っているのですが、突然犬や猫が出てきてしまったりしてしまいます。やっぱり、建築をデザインするアーティスト・ユニットのサイトには見えないかもしれません。今後の課題です。


訪問者に優しいWebサイト作り


どんなサイトが『わかりやすく』、『迷子にならない』サイトなのだろうかと考えました。ここでも、やはりグーグル先生をたずねました。すると、まあなんとぴったりなサイトがありました。6年近くサイト運営してきたのですが、まさに目から鱗がドサッと落ちました。この『訪問者に優しいWebサイト作り』を見ていくと、健常者以外の方も対象にしていることがよくわかります。当然ですよね。建築の世界でも、バリアフリーが一般基準になってきています。インターネットでもその考え方が大切なのだと教えられました。

たとえば、『訪問者に優しくないWebサイトが多い理由』といった基本的なことから、特に今まで意識したことがなかった『アクセシビリティとユーザビリティ』は、大変に参考になりました。この『アクセシビリティとユーザビリティ』の中で紹介されている『門前払いをしない>ページにアクセスしたが、ページが白いままである』は、まさに私がかっこいいと思った『sitesakamoto.com』のことをあらわしていました。『アーティスティック』かつ『多くを語らないかっこよさ』は、両刃の刃になる可能性があるのだと思いました。

また、『画像のalt属性について』では、読み上げブラウザを使っている方への配慮について書かれています。やはり、様々な人々や環境下を想定したWebSiteにしていくことが求められるようです。今回制作した当サイトでも、できるだけこの辺の課題を意識して制作したのですが、まだまだ行き渡っていないのが現状です。


構造もかっこいいブログサイト


たまたま、いろいろなカスタマイズを紹介しているサイトをふらふらしていましたら、次のようなサイトに出会いました。『"デザイン(構造も)かっこいいブログ@2chブログ板"まとめサイト』。このサイトは『bombgirl』さんのサイトで知りました。この『bombgirl』さんのサイトも『"デザイン(構造も)かっこいいブログ@2chブログ板"まとめサイト』で紹介されています。デザイン的にすてきなサイトだと思います。正直、好きなサイトの一つです。(勝手にすみません。めけさん)

それにしても、いろんなサイトがあります。私の感想では、やはりうまく『間』をデザインしているサイトがかっこいいと思いました。けっして、写真がきれいだとか、サイトテクニックがてんこ盛りというサイトではないと思います。この『間』は、とても難しいデザインテクニックです。建築の世界も同じです。『間』がきれいに意識してデザインされているととてもきれいな建築になってきます。プランのことを『間取り』とは、とても良くいいあらわしています。ブログのデザインに通ずるところがあるので、お店をデザインする際のテクニックをさわりだけ紹介します。

『庶民的で敷居の低い店=多くの人に来店してほしい(たとえば日用雑貨店)』をつくる場合と『お客を選ぶ店=ある特定の人だけに来てもらいたい(たとえば高級ブランド店)』をつくる場合では、意識してデザインを変えていきます。前者の店の場合は『入り口まわりの高さを低くする』、後者の場合は『入り口のまわりをガラス張りにして、入り口の高さを高くする』といったデザインを仕掛けていきます。

WebSiteのデザインも同じようだと感じています。ほとんど日本語で制作されているサイトはとてもわかりやすいものです。店舗デザインでの『庶民的で敷居の低い店=多くの人に来店してほしい』に相当するのではないでしょうか。逆に、英文表記が多いサイトは、一見かっこ良さそうなのですが、『お客を選ぶ店=ある特定の人だけに来てもらいたい』に近い感じがします。海外のサイトなのではと感じさせ、中に入っていけないように仕掛けているのだとすればねらい通りだと思います。

いろいろな意味でかっこいいサイトを探していましたら『Bolero』さんに出会いました。サイトに行くと衝撃的なイラストが出てきますので、紹介するのをためらいましたが、えいや!と紹介させてもらいます。私はこのサイトのデザインとアクセシビリティをお手本にさせてもらいました。

その理由は、

  • 『間』がきれいに整理されている
  • 一度見たら忘れられないインパクトがある(笑)
  • 行きたいところに行きやすい
  • ブログらしくない
  • 情報がすっきり整理されている
  • ほとんど日本語でまとめられている
です。

しかし、デザインを始めてわかったことなのですが、このサイトはMovable Typeを使っていないようなのです(間違っていましたらすみません)。基本的なことは同じだろうと軽い気持ちで始めたところ、数々のハードルが出てきました。それらの解決方法は、『お世話になったサイト2【自前ブログ導入編】』で紹介させてもらいました『小粋空間』さんをベースに、ほうぼうから情報を集めてきました。


今回の【ブログデザイン編】はこれで終了しますが、次回は『小粋空間』さんをはじめ、サイトデザインする上で、ハードルを越えさせてくれた感謝感謝のサイツを紹介させて頂きます。自分で方針を決めて、目標とするデザインを実現するのは、とても難しいと実感しました。『シンプルに』『アーティスティックに』『かっこよく』『だれにも優しいサイト』。このテーマをすべてクリアするのは『不可能だ』とも思いました。結果、今の状態は「ビジュアルが少なく、文字ばっかりで、なんだか面白くないサイト」になってるような気がしています。この自問自答は今後の課題としてチャレンジしていきたいと思っています。


というわけで、『bombgirl』さん、『Bolero』さんにトラックバック送らせてもらいます。いざっ!


追記:
紹介させて頂いたサイトの運営者様、不適切な表現がありましたらご指摘ください。
ただちに修正致します。

トラックバック(1)

昨日、ひょんな事から、えらく素敵なサイトの管理人さんとお知り合いになる事ができました。 同じテンプレートを使っている「Vivid-styl... 続きを読む

▼ コメント(6)

はじめまして。TB記事読ませて頂きました。
プロの建築家の方に好きなサイトだと書いて頂き、うれしいやら恥ずかしいやらで恐縮しております。
トップのイラストが佐山さんご本人に似ていてほのぼのしました。

boleroさんは以前からプラグインをお借りしたり、コメント書かせて頂いたりしてます。ブログはどうしてもデザインが似たり寄ったりになりますが、boleroさんはかなり個性的な使い方をされていると思います。
ちなみに私もboleroさんもsbというサーバーインストール型ブログツールを使ってます。再構築が早いのと自由度がかなり高い魅力的なツールで惚れ込んでます。

建築のことは全然わかりませんが、デザインを考えるという点は似ているんでしょうか。誰にでも見やすく、なおかつcoolなデザインがしていければいいなと思ってます。

コメントありがとうございます。
「sb」というツールは再構築が早いですか。
私の今の状態は、再構築が遅い遅い。皆さんどうしているのかと思ってしまうくらいです。
・スクリプトの見直し(構造の単純化)
・モジュール化
・ダイナミックパブリッシング化(←意味不明)
あたりにキーがあるのではとふんでいます。

>誰にでも見やすく、なおかつcool
私も理想です。

「誰にでも見やすく=優しい=あたたかい(warm)」
「cool=かっこいい=すましてる(近寄りがたい)」
一見、混じり合いにくい要素ですね。

デザインはcool。内容はwarm。
このあたりの路線を狙うしかないかと。
今は両方どっちつかずですけど。

私は、めけ。さんのサイトの女忍者(?)の絵が好きでした。
こんな人なのかなあと想像してしまいます。
今の絵でも、こんな人なのかなあ(爆)とイメージがふくらみます。
今後とも、よろしくお願いします。

はじめまして、orzmaruです。

TB&コメントありがとうございました。
はやくお返事さしあげたかったのですが、
ここへきて仕事がたてこんで・・・_| ̄|○

サイトのデザインて難しいですね。
閲覧のしやすさ(私は、軽いことが何より大事と思います)はテキストだけ(HTML+CSS)の方が良いですが、
それだけだと、「見栄え」という点でHTML+CSS+画像には勝てない。

もちろん両者は両立しませんが、ここらのトレードオフが
出来上がったサイトに「びしっ!」と決まっている、
作成者の意図がきちんとでているものが
見栄えはどうあれ、かっこいいサイトだと思います。

とか、えらそうなことを書きましたが、
トップ絵すいません。昔からアレが好きなんです(笑)

はじめまして、orzmaruさん。
あのイラストはとてもいい味を出していると思います。
私たち(goron+saruko)の間では、あの『う○こ』でもう
わかってしまいます。
でも、サイト名にしなくて良かったと思います。
紹介できなかっただろうし、TBもらっても困るし。(爆)

今、私のサイト・トップが「ブログデザイン」の記事で止まっています。
あれを放置状態にしておくと、何のサイトかわからなくなってしまいそうだと気がつきました。
やはりorzmaruさんのスタイルはその辺も熟慮されていると感心し、やはりお手本にさせてもらいたいと思っています。

今後とも、よろしくお願い致します。

こんばんは。
デザインが日々変わってきていますね。
コメント遅くなりましたが、次回も楽しみにしています。

そうなんです。日替わり。(笑)
実は、この記事を書いたあと、今のデザインがどうにも気に入らなくて、続きの記事を書く前に、全面的に手を入れていました。
そして、昨夜サッカーの試合が終わったあと、再構築。
そして、チェックすると、リンク先が変だったので、急いで撤収。
今日には新装開店する予定です。
コメントありがとうございました。

▼ コメントする

▼ サイト内検索                複数キーワードは半角スペースを挿入

             
   

▼ 記事へのコメント

過去のコメント一覧を見る