会社員なのでそちらの仕事もこなす一方で、プライベートなつながりですがいくつか制作させていただきました。（金銭的な利益はないですが。）

Webサイト（建築事務所）
サイト設計・デザイン・コーディング等、一式制作。
予算の問題で、独自ドメインや有料サーバーのレンタルをしませんでしたが、さっそく一件問い合わせがあったようで、サイトとして、まずまずな出だしだと思います。

業務案内チラシ（建築事務所）
上記のWebサイト関連でチラシデザインも制作。
Webサイトとデザインを合わせ、ちょっとしたブランディングも意識しています。

ロゴマーク（社会福祉法人）
地元のお役所系のお仕事です。
ステートメントは決まっていたので、それにあわせた分かりやすいデザインを目指しました。

2010年年賀状
自分の年賀状ですｗ
去年一昨年と同様にシンプルなものですが、今年は少しコピーにこだわりました。

今年も無理せずマイペースにやっていけたらいいなと思います。本年もよろしくお願い申し上げます。

作ったもの

>>demo
※Safari/Winのみ対応

用意した画像

HTMLファイル

<div id="namecard">
<img class="reflect" src="image/logo.gif" width="97" height="73" />
<div class="txtarea">
<h1>19790209.com</h1>
<h2>Graphic/Web Design</h2>
<h3>Site Contents</h3>
<ul>
<li>[About] : Concept, Profile</li>
<li>[Works] : Archive</li>
<li>[Blog] : Output (Powered by Movable Type) </li>
<li>[Contac] : M@il Form</li>
</ul>
<p class="label"><span>Portfolio<br />Site</span></p>
</div>
<br class="clear" />
</div>

CSSファイル

#namecard {
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(0.1, #FFF), to(#d9e2e8));
	-webkit-border-radius: 10px;
	-webkit-box-shadow: #999 0px 2px 4px;
}

.reflect {
  -webkit-border-radius: 4px;
  -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(#FFF));
}

.label {
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
}

.label span {
	display: -webkit-box;
	-webkit-box-align: center;
	-webkit-box-pack: center;
	-webkit-transform: rotate(30deg);
}

余計な記述は省いてます。

▼グラデーション

通常は画像を使うが、CSS3では「 -webkit-gradient() 」を使って表現。
自由度も高く、線形なら縦・横・斜めに表現できるほか、円形もOK。
└ 縦形：-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), to(終了色), color-stop(追加位置, 色));
└ 円形：-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), to(終了色));

▼リフレクション（反射）

これも通常は画像を使っていましたが、「-webkit-box-reflect」を使うことで表現できます。
また、前述の「 -webkit-gradient() 」と組み合わせることでグラデーションマスクの効果が得られます。
└ -webkit-box-reflect:below 1px -webkit-gradient(linear, 開始位置, 終了位置, from(transparent), color-stop(追加位置, transparent), to(終了色));
└ 反転方向：上(above)・下(below)・左(left)・右(right)

▼ボックスシャドウ

ブロック要素の外側にぼかしを加えるドロップシャドウ効果です。
└ -webkit-box-shadow: 横方向のオフセット 縦方向のオフセット ぼかしの半径 影の色;

▼角丸

ボーダーの角を丸くします。個別に四隅の値を設定することもできます。
└ 四隅：-webkit-border-radius: 角丸の半径;
└ 左上：-webkit-border-top-left-radius: 角丸の半径;
└ 右上：-webkit-border-top-right-radius: 角丸の半径;
└ 左下：-webkit-border-bottom-left-radius: 角丸の半径;
└ 右下：-webkit-border-bottom-right-radius: 角丸の半径;

▼文字の回転

文字を変形させます。回転させる場合は「rotate(deg)」で数値を指定します。
└ -webkit-transform: rotate(回転させる数値deg);

まとめ

今回はWebkit系ブラウザ（Safari・Google Chrome等）での表記です。策定中なので今後変更になる可能性もあります。
やはりとても便利と言わざるを得ませんが、自分はデザイナーなので見た目重視の時があるため、細かい微調整といった最終的な「詰め」の部分をコード上でやるのは若干つらいかもしれないし、また画像のほうが制作上早い場合もあると思います。

そんな中、新たに策定中なのがCSS3。

特徴をざっと調べてみると、

• テキストに関するエフェクトを定義した「Text Effects」
• 背景やボーダーに関する「Backgrounds and Borders」
• HTMLのレンダリングを指定するための「Advanced Layout」
• グリッドレイアウトを実現する「Grid Position Module」
• 印刷表示用のページをレイアウトするための「Generated Content for Paged Media」

・・・などがあります。しかし、どれも勧告には至っていません。まぁ僕も横文字多くてよくわかりません。

しかし、すでに一部ブラウザでは実装されているとかいないとか。
もちろん全てではなく、策定中につきブラウザのバージョンアップに合わせて変更されていくと思います。
正直、こういうことされると落としどころに悩みます。あちらを立てればこちらが立たず状態です。

で、先走った主なブラウザ達が、Webkit系ブラウザ（Safari・Google Chrome等）、Mozilla系（Firefox等）、Opera系（Opera等）とか？
現状では、IEは関係なさそ。無ければ無いであきらめも付くのでしばらくは対応しない（できない）方向です。
でも、前もって予備知識を得ておく必要もあるので、少しCSS3を使ってみました。（Safari/Winのみ対応）

作ったもの

>>demo
上の画像のようなネームプレート（的なもの）をサンプルで制作しました。
用意する画像は2点。あとは通常通りHTMLファイルにCSSファイルを読み込んで制作します。
※Safari/Winのみ対応　ダウンロード

CSS3雑感

すごく便利。
Webデザインは表現上の「しばり」のため、手間と時間を惜しんであきらめたり、無理やり画像を使用したりと、苦労しなければいけない部分が多く、CSS3が今後、すべてのブラウザで実装されることは、かなりの表現が可能になるということになります。
これならWebデザイナーがコーディングまでする意味がある。

一応の補足で、5月時点では、
1. IE （66.07%） > 2. Firefox （22.50%） > 3. Safari （8.23%） > 4. Chrome （1.41%） > 5. Opera （0.68%） ・・・と、あまり目立った変化ないように思います。

未だIEが（ぼほ独占とはいかなくても）根強い印象です。

とはいえ、そんなIEは6.0、7.0、8.0と3つのバージョンが混在しています。（個人的にはコッチのデータが大事）
バージョン別に見ると、
1. IE6 （25.25%） > 2. IE7 （21.10%） > 3. IE8 （15.10%） > 4. Firefox3.0（12.48%） > 5. Firefox3.5 （8.88%） ・・・以下省略

こちらも補足で5月データ。
1. IE7 （44.54%） > 2. Firefox3 （20.27%） > 3. IE6 （17.48%） > 4. Safari3.2 （4.30%） > 5. IE8 （3.96%） ・・・以下省略

IE8（3月末リリース）が5月時点で3.96%であることから、結構シェア拡大すると思ってたけど、IE6はともかくIE7がかなり減ってます。Firefoxも全体でみるとシェア増えてるようだし、カオスですね。
今の主流のブラウザは○○○と捕らえるより、より一層クライアントが仕様してる環境、アクセス者の環境を知る必要が改めて強まってますね。
大体IEですけど。

IEは6～8の頭の良さがかなり違うので、まだまだWeb制作者泣かせです。IE8はほぼWeb標準に則してくれてるらしいけど、そろそろIE6だけでもなんとかならないかなぁと思います。

2009年7月現在、HTMLはHTML4（1999年）以降10年以上進化せず、変わりにXHTMLで進化していくことに！
なるはずでした・・・。

XHTML1.0（2000年）からはじまり、1.1勧告だの1.2策定中だのといった中、次は2.0だろと言われていたXHTML。今年の7月に策定打ち切りに・・・。（ソース：ウィキペディア）

そこで数年前から言われてたHTML5に注目です。
予定としては2010年の9月に勧告ということですが、ある日いきなり「今日からHTML5だから、ヨロシク」といわれても困るので、ネット上にある膨大な情報量の中から目に留まったものをピックアップ。

1. HTML5はこれまでのHTMLとの後方互換性を保つ、革命ではなく「発展」である
Flashに使われるAS（アクションスクリプト）は2.0から3.0にバージョンアップした際、互換性がほぼ無くなったそうで、現場の制作者はちょっと混乱をしたとかしないとか。
HTML5は、そういった心配はなさそうです。

2. 文章構造を示す新しいタグの追加
現在はdivタグを使ってブロックを積み上げるように、メニューや本文、サイドバーなどを記述しています。

たとえば・・

<div class="header">ヘッダ内容</div>
<div class="navigation">ナビゲーションメニュー</div>
<div class="article">本文の内容</div>
<div class="sidebar">サイドバーの内容</div>
<div class="footer">フッタの内容</div>

という感じに。

しかしHTML5だと同じブロックを積み上げるのは変わらずとも・・・

<header>ヘッダ内容</header>
<nav>ナビゲーションメニュー</nav>
<article>本文の内容</article>
<aside>サイドバーの内容</aside>
<footer>フッタの内容</footer>

と文章構造がわかりやすく、見た目にもスッキリとします。

3. 自由に2Dのグラフィックを描画できるcanvasタグの追加
なんでも、ブラウザ上に図を描くために策定されたものらしいです。
今までHTML上で図を表現するために使っていたGIFやJPEG画像、条件に応じて表示する図の変化やアニメーションを実現するためにFlash動画を用意していましたが、もうしなくて良くなりそうです。（場合によりますが）
このcanvasタグについては、すでにほとんどのブラウザ（IE6以上、Firefox1.5以上、Opera9以上、Safari1.3以上）で対応しているらしく、驚きです。
ただし、IEだけはExplorerCanvasというライブラリのjsファイルを読み込ませてやらないと駄目なようです。

上記以外では、動画や音声をブラウザでサポートするためのvideoタグやaudioタグなどが追加されるようです。

4. IEもHTML5を採用するらしいよ。
ブラウザシェアNO.1といってもかつてのほぼ独占状態にはなく、他ブラウザもシェアを拡大させつつあるため、常に独自路線を突っ走って行くわけにもいかなくなったのだろうか。なったんだろうな。
Web制作者泣かせのIEがWeb標準に賛同するのは、とても助かります。
より高度なクロスブラウザが進むことで、Webブラウザはより高速に、より安定し、より拡張性に富み、より使いやすく、といった部分で差別化が図られて、制作現場だけでなく、一般ユーザーにも多大なメリットをもたらすと思われます。

で、勧告されたらすぐ移行するべきなのか？という話ですが、個人的には移行しません。
出来ないとは言わないけど、すぐはちょっと・・・。

というのも、ある日いきなりどのブラウザでも使えるようになるわけでは無く、最終勧告までに発表される策定案を各ブラウザがバージョンアップしながら対応できるようにしていくので、「よし！今日から僕、html5でサイト作る！」とかは難しいですね。
上記の情報はあくまでテクノロジーのみの話なので、ビジネスとの融合にはちょっと時間がかかるんじゃないかという印象です。

前述した、<div class="article">本文の内容</div>が<article>本文の内容</article>でOKになるという部分も、<article></article>でくくられている要素だけ抽出して見せてくれるような機能が、ブラウザに標準搭載されでもしたら、商用サイトの主な収入源である広告が見られなくなってしまいます。
なので、現状では最先端を追いかける必要は無いのではないかなという結論です。

特に拘りがあるわけでもなくリキッドレイアウトをこのサイトでは採用してるわけですが、やはり幅固定のサイトよりも難しいです。リキッドレイアウトについてはちょっとググってみても、皆さんが四苦八苦している様が伺えます。

今回の問題については、別件のサイト（これもリキッドレイアウト）でIE7へのアップデート時にも経験していたので、同じ手法で対応してみたところ、問題はとりあえず解決しました。
今後もバージョンアップのたびにこういった手直しを繰り返す可能性があることを考えると、オールラウンドで完璧なCSSが書ければいいんですが、まだまだ・・・。

6年間で2社ほど会社員生活を送りましたが、そこから開放されたとき、人の本来の姿が現れます。一応、クリエイター（笑）なので何かしら行動を起こすためフラフラしていると、知り合いの方に声を掛けてもらえることもあります。自分が今までやってきたことは、（現状では）無駄じゃなかったなと思えています。そんなこともあり最近は、自宅で作業をすることも多く、今後会社員として働く場合でも、「オンとオフ」の切り替えが重要だなと強く実感しています。

そんな生活を送っているときに見かけたタイムリーな記事を、若干解釈は違うかもしれないけどメモ。今更だけど、やはり大事なのはメリハリ・・・。

• 01. 服を着替える
  部屋着から仕事服、仕事服から部屋着に着替え、気持ちを切り替えるキカッケを作る。
• 02. 仕事場を作る
  日常の住空間とは別の仕事用スペースを確保する。
• 03. 家族の写真を飾る
  同じ家という状況にありながら、励みになる。またその気持ちを忘れないようにする。
• 04. 仕事時間を設定する
  仕事量に応じたり、曜日ごとに設定する。2時間ごとに1時間の休憩を入れるのが理想。
• 05. 仕事中に家の雑用をしない
  家事と仕事はきっちり区別。「仕事時間を設定する」ことの意味が出てくる。
• 06. 健康に気を配る
  身体が資本。
• 07. 休憩時間をスケジュールに組み込む
  その時間はきちんと休憩する。多少余裕をもたせれば、急な用事にも柔軟に対応出来る。
• 08. 外に出て気分転換する
  仕事場にこもらず、毎日10分でも散歩などして身体を動かす。鬱防止にも？
• 09. ファイル整理をする
  仕事時間中に書類整理する習慣をつける。ゴミや資料整理することで仕事モードの維持。
• 10. 仕事に自分でけりをつける
  余力を残したまま仕事を終えることに罪悪感を感じてはいけない。

会社員として働く場合も、かなり参考になるように思います。
参考記事はコチラ。自宅の仕事でオンオフを切り替える10のコツ : ライフハッカー［日本版］

近況は、また後日。

東京で知り合った方たちとは、ほんのちょっとお別れですが、今の時代メールはもちろんデータのやり取りすらどうにでもなってしまうサービスが溢れているので、いずれまた一緒に仕事出来たらいいなと思っています。顔を合わせた打ち合わせはどうしても必要ですけど。
そのための力をこの1~3年でさらに付けたいですね。とくにプレゼン能力とコミュニケーション能力。広告も結局は人対人なので。

とはいえ、名古屋も不景気で、未だ求職中のため主夫をしてますが、マイペースにやっていくしかないのが現状です。しばらくは暇してると思うので、知り合いの方で近くにお越しの際は是非お立ち寄り下さい。

自分はどちらかといえば「Google」ユーザーです。検索するときはまずググります。知り合いの会社でも、OJTでまず最初にググることを教えるそうです。（だいぶ前に、大学生にはGoogleを知らない人がいるというブログを読んだのを思い出した。）
では、「Yahoo!」はどうなのかというと、使わないことも無いです。
個人的な使い方として、「Google」は技術・専門知識の検索、「Yahoo!」は消費・生活情報の検索という感じです。各サイトのトップページもその傾向を如実に表してると思います。
「Google」は今でこそ各テーマに合わせたメニューがありますが、昔は検索窓だけでしたし、やはり検索がメインなので、実際ヒットする情報もブログやwikiが多いです。一方、「Yahoo!」はニュース等の情報満載で、検索すると知恵袋の情報も多くヒットします。また、目立つところに信頼感のある大手企業のバナー広告があるせいか、「Yahoo!」ユーザーは大きな画像をクリックするという傾向も無くはないらしいです。（リテラシー的にはありうるとは思いますが、本当かどうかはしりません。聞いただけの話なのでね・・・。）

こういった傾向をたどると、おのずと手掛けるWebサイトの作り方・デザインも変わってきます。コーポレートサイトは「Google」を意識して、画像よりもテキスト主体にデザインしたり、キャンペーンサイトは消費者に気に入られるようにイケてる画像をたくさん使って、といった具合に。
ショッピングサイトにおいては、WebSideStoryというアメリカの調査会社の統計で、「Google」ユーザーは「Yahoo!」ユーザーに比べて商品購入の確率が低い傾向にあるというデータもあります。
ビジネスブログやアフィリエイトはテキスト主体になるので必然的に「Google」向けになりやすい。
ただ、実際問題として「Google」では上位にヒットするが「Yahoo!」じゃ全然ダメとか、その逆もあったりするんですけどね。検索エンジンのアルゴリズムが公開されて無い以上絶対的なことは言えません。

しかし、こういった傾向は実際使っていてヒシヒシと感じます。クオリティーの高いビジュアルやコピーを作ることはもちろんですが、その点も踏まえてプレゼンできれば説得力は増すんじゃないかなと思います。

かなりのコンパクト化に成功している折りたたみ自転車。場所を取らないだけでなく、持ち運びにも便利そう。

たぶんテーブル。視覚効果が面白いです。血が滴っているのは嫌がる人もいるだろうけど、その滴りで宙に浮いているような不思議な感じです。

デジタルで絵やイラストを描いてる人にはかなり革命的商品じゃないでしょうか。すごい高価そうだけど・・・。

たぶんグリル。魚を挟んだ絵がシュールｗｗｗｗｗ。

竹とんぼ型カメラ。ちょっとした流行になりそう。このイメージ画像も広告的でクォリティ高い。

焦げ目が絵になってるトースターはすでにあるけど、コチラはその時々で書いた自分の絵や文字が焦げ目になるトースター。前の晩にケンカした奥さんに朝「ごめんね」と書いた温かいトーストを出せば家庭も温か。コミュニケーションツールとしても有効です。

これはすぐに製品化できそう。事故の発生をかなり防ぐことができる。ちょっとした目の付け所がみんなのためになる、ユニバーサルデザインの見本のようなアイデア。

これら他、多数のアイデア製品は以下のリンクにて紹介されてます。
15 Incredible Conceptual Designs You Wish Existed

ちなみに自分のお気に入りはコレ。是非製品化を望みます。

いろいろ調べてみたら、どうやらMT4.2xにおいてRSS配信はatom.xmlしか自動で構築されないようです。

一応コンテンツを勉強がてら制作するのであれば、知っておいても損は無いだろうと思い、ネットを徘徊して得たテンプレートコードを使ってAtomだけでなく、RSS1.0／RSS2.0を配信出来るようにしてみました。（このブログ誰かみてるの？なんて声は聞こえない聞こえない・・・）

配信されたRSSの情報を任意のフィードリーダーに登録することを、「購読する」といいます。世の中には巡回するブログが多すぎて全てに目を通せないという強者もいるらしく、そういう人にとってRSSの購読は更新情報を効率よく把握できてとても便利です。RSSの購読をするにはフィードリーダーというアプリケーションが必要で、GoogleやYahoo!だけでなく、さまざまなポータルサイトからフィードリーダーサービスが提供されています。

自分はある程度定期的に巡回しているサイトはあるものの、数も少ないので特定のサイトのRSSは購読はしてません。よってフィードリーダーは使ったことがありません。

自分がフィードリーダーを使わないので、いままでRSSにはピンときてなかったんですが、この際なんで多少得た知識をメモ。

• RSS = Rich Site Summary
• 現状のフォーマトは、RSS1.0 = RDF Site Summary／RSS2.0 = Really Simple Syndication／新規格のAtom（アトム）
• RSS1.0と2.0の違いは専門的なのでうまく明言できないが、派閥みたいなもんという印象（開発的・拡張的な意味で）
• 結果としてRSS配信できるという点は変わらない
• 日本国内で提供されてるWebサービス（ニュースサイトとか）はRSS1.0が、ブログではRSS2.0が多いらしい
• RSS2.0は1.0のバージョンアップという訳ではなく、ほぼ別物
• しかもRSSは開発凍結（今後は進化しない？）
• なので？MTとかGoogleとかはAtomを採用
• 今後はRSSといえばAtomという流れになっていくのかもしれない

使用ソフトはMT（Movable Type - ムーバブルタイプ）です。
フリーソフトのWord Press（ワードプレス）でもいいかな？と思ったけど、使っているサーバーがMTのインストール方法などの情報が記載されていたので、MTを選びました。（MTも商用利用じゃなければ無料です。）

今後はいろいろ試していきながら、日々「Input」した情報を「Output」する場として利用していこうと思います。
また、日常のコトも時々書いていくと思います。私的なメモなのでお知り合いの方はナマ暖かく時々覗いていただけると、中の人は喜びます。