SuikoLogをリニューアルしました

水交デザインオフィスのブログをリニューアルオープンしました。実に計画したのが昨年の12月頃だったわけですから、半年ばかり実現するのに時間がかかってしまったことになります。

WordPressを覚えたのが昨年の秋だったのですが、その便利さに気づいてからというもの、自社サイトのWordPressサイト化はなるたけ早くやりたい課題でした。で、昨年冬にサイト自体のWordPress化を果たし、本ブログをマルチサイトの子サイトとして入れるところまでは調子良く行っていたのです。

ついでにこのブログもリニューアルしちゃおうぜと息巻いて、デザイン・イラストを上げてから、コーディングを目前にしてつまづき戦意喪失、お仕事も比較的忙しくなり、このブログはあるだけで更新されないブログになっていました(過去の投稿の間の空き方を見ても歴然だと思います)。

やっと重い腰を上げたのが5月に入ってから。日々の仕事をがんばりつつ、ちょこちょことテーマを書きました。ようやくお目見えさせることができて嬉しいです。公開までこぎつけてこんなに嬉しかったサイトは久しぶりかもしれません。

今回はこのテーマができるまでを長々と振り返ってみます。

デザインについて—自分たちが出来ることをちゃんと表現したい

うちの事務所は(ウェブデザイン業に関しては)私と妻・周代の二人だけでやっています。家内制デザイン業ってやつです。
私は企画・設計・デザインからコーディングまでを担当していまして、周代はイラストレーションと進行管理などのマネジメントをやってます。

今回のデザインに関して何よりも優先したかったのは、彼女のイラストという自分の外からの個性をどれだけ利用できるかというところでした。デザイナーとしての私一人の個性なんてのは正直知れたものだと思ってます。けれどウチにはイラストという別のリソースがある。これをしっかり使わなきゃ損だと思ったわけです。

なにが表現したかったのかというと、私たちは二人で一個のクリエイターなのだということなのです。私には彼女ほどのパーソナリティがないけれど、彼女にはそのパーソナリティを完成品までまとめあげる力に欠けている。思えば、それを補完し合えば面白いことになるなと思って僕は独立したのでした。このブログは私たちができることをそのままに表現するようなデザインにできればと思って取り組みました。

水交デザインオフィスのサイトではイラストはちょっとした隠れキャラ的な扱いだったのですが、むしろこれをもっと前面に出してみようと思い、半ば彼女におまかせの状態でヘッダに使える素材やイラストを描きおこしてもらいました。色もそのまま紙にコピックで乗せてもらい、それをそのままスキャンしました。いつもはここからIllustratorで清書するのですが、もうそのままでいっちまえと荒く切り抜いたものをそのまま使用しています。でも切り抜きはちょっと適当すぎましたね。すみません。

コーディングについて—HTML5 + CSS3に挑戦してみた

HTMLのバージョンについてはとにかく早く完成させることが優先だと思い、使い慣れたXHTMLで仕上げようと思っていたのですが、マークアップエンジニアのkonitterさん(職業はディレクターですが私は彼のことをあくまでマークアップエンジニアだと思っています)や3pandaさんとリアルやソーシャルメディア上でいろいろお話をして、やはりHTML5+CSS3でできるところまでやってみようと思いました。

コードも出来るだけシンプルで分かりやすいものになるように透過PNGも惜しげもなく使い、おかげでIE6ではまともに表示されません。ですが、IE7以降にはhtml5.jsなどを用いて対応させました。

新タグのあしらいについてはkonitterさんのブログ「REFLECTDESIGN」を参考にさせていただきました。asideやsection、headerやfooterといった新タグのあしらいについてはほぼ丸パクリといって差し支えない状態です。書きながら意味や用法を調べていく、というような感じで進めていきました。
konitterさん、事後報告でごめんなさい。

調べてもよく分からなかったtimeタグについては、最後にW3Cのバリデーションにかけることで正しい用法を覚えることができました。バリデーションはやっぱり大切。書いたことないものを書くときはなおさらですね。

CSS3に関しては現在のところbox-shadowやtext-shadow、border-radiusなどの小技に用いています。IE8以下で見ると角丸が効いていなかったり、ドロップシャドウがなかったりと見た目がいくぶんダウングレードしています。ですがもちろん記事の可読性はそのままです。それをカバーするためにJS入れるのもなんだか…と思い、これはそのままにしています。

6月中旬にHTML5+CSS3の実践講座に行く予定があるので、よい予習にもなりました。

コンセプトについて

僕は技術ブログにはものすごい憧れがあります。ウェブ屋さんなら当然かもしれません。日頃何かに困ってググってみればいつも出てくるあのブロガーさん、このブロガーさん…。やはりウェブ屋がブログ書くなら技術系とかデザイン系だよという固定観念がありました。

ですから妻が、今取り組んでいる育児しやすい社会のためのささやかな活動などもこのブログに書きたいと行ったとき、私はまず反対しました。ブログのテーマは絞った方がよいとよく言います。このブログが何のブログとも分からない実体のつかめないものになってしまうのではという不安があったのです(実は今でもちょっと不安ですけども)。

けれど、自分に翻って考えてみると、私だってウェブ制作業の他にUstreamの放送をやってみたり、ワーキングスペースを運営したり、DJをやってたり、好きな子ども向けの番組があったり、友人とお酒を飲みにいったり…とにかくいろんなことをやって楽しんでいます。そしてそれらの点が線としてつながり、お互いを潤すということも最近になって実感しています。

私たちは図抜けたスペシャリストではありませんので、むしろ多芸ぶりをウリにしたいと思います。一ヶ月かけてうんうんうなって素敵な技術系の記事を一個上げるより、いろいろやってる私たちのそのままをすこしずつでも書いたら私たちにとっても読む方にとっても楽しいに違いない、そう結論しました。かくして「ウェブデザイナー+イラストレーター夫婦のなんでもログ」というコンセプトが出来上がり、記事のカテゴリもバラエティに富んだものになりました。

さいごに

あとは私たちがちゃんとこのブログに書いていけるか、それが一番大きな問題です。

Twitterにて、僕がいつもお世話になっている「かちびと.net」という技術系ブログの管理人さんに、今回のリニューアルに際して「ブログは取るのが面倒なメモツールと思えば。気になった、勉強した、子どもに熱が出た、くらいからはじめてみたらいいかも」とアドバイスを賜りました。
ちょこちょこと経験したことをアウトプットして身につけていきたいな、そう思います。

SuikoLogをよろしくおねがいします。

「SuikoLogをリニューアルしました」への7件のフィードバック

  1. 【書いた】SuikoLogをリニューアルしました。 http://bit.ly/lgviht

    This comment was originally posted on Twitter

  2. なにこれかわいい。 RT: @witch_doktor: 【書いた】SuikoLogをリニューアルしました。 http://bit.ly/lgviht

    This comment was originally posted on Twitter

  3. ううむ、こういうデザイン好きだなぁ RT @witch_doktor: 【書いた】SuikoLogをリニューアルしました。 http://bit.ly/lgviht

    This comment was originally posted on Twitter

  4. 遅ればせながら、リニューアルおめでとうございます!

    僕は自分のBLOGがまだHTML5でないので名前を出していただいて恐縮です;;

  5. WebサイトのURLを間違えました。m(_ _)m
    http://blog.3panda.net

    すみません;

  6. SuikoLogをリニューアルしました – SuikoLog http://bit.ly/mErfco

    This comment was originally posted on Twitter

  7. 見てる。→ SuikoLogをリニューアルしました – SuikoLog https://suikoudesign.com/suikolog/release/292/

    This comment was originally posted on Twitter

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください