新しい名刺を注文しました。

右上の「おもて」「うら」は本当に名刺に書いてありますwww

半年ばかり前、前回のデザインの名刺を持って、ある会社の社長さんと顔合わせに行ったところ、社長さんはこのように仰いました。

自分は仕事柄、何百枚も名刺を受け取るのだけど、デザインが良くても、業務内容や自分に関することが何も書いていない名刺が多い。だいたいそういうものはフォルダに入れたらもう忘れてしまう。
名刺は人に会ったときに配る大事なものなのに、皆、お金をかけなさすぎる。一枚数十円くらいではないか。いい紙を使って、顔写真や裏面に業務内容を載せるのは絶対必要だと思う。二つ折りにするくらいの勢いがあったっていい。

そんな話をしながら、社長さんは私に名刺を渡されました。
顔写真と業務内容が大きく書いてある「企画・マーケティングをする人の名刺」です。
しごくもっともなお話だったのですが、それは「デザイナーの名刺」ではありませんでした。

私は適当なオフ会でも、正式な名刺を配っています。
本当にお仕事というのはどこから来るかわからないからです。

一方で、私は名刺はトレーディングカードのように「もらってうれしい」ものでなくてはならないと思っています。
ユルい場で、ビジネス色が強い名刺を配るのは粋じゃないですし、縁があってお会いした人たちに「デザイナーのサービス」を提供したいのです。

社長さんのお話を参考にしたうえで、私らしい名刺をいろいろ考えて、できたのが記事の最初にある名刺です。

今回力を入れたのは裏面です。
一般の名刺の裏面は、業務内容が文字だけでずらずら書いてあったりで、どうも面白くありません。
アイコンなどを使って私がやっていることがイメージでわかるように、ふと裏返したときに「ちょっと得した気分」になるようにしてみました。

名刺は、自分の世界観を表現する意味でも、デザインの勉強になる意味でも、デザイナーには大切なものです。今後もバージョンアップして行こうと思います。

余談ですが、CSS Niteでいただいた、とみたちひろさん(@tommmmy)の名刺がとてもすてきだったのです。
とみたさんのウェブサイトのデザインがそのまま名刺バージョンになっていました。

ウェブデザイナーは、自分のサイトのテイストを名刺に織り込むのもけっこう大事なポイントですよね。

Twitterで記事を紹介して下さい（-人-）

デザイナーの市村さん（@MarlboroLand）による「WebオペレーターのためのWebデザイン勉強会」の後半、実技編です。

＞＞前編の理論編はこちら

市村さんはIrrustratorを使われているので、実際にイラレを操作しながらの説明となりました。
記事中に添付している画像は、私が家で再現したものです。

ボタンのサイズ

最近のボタンは高さがどんどん短くなっている

→グローバルナビの役割が小さくなり、コンテンツを見せることを重視するようになった

配色について

※記事冒頭のスクリーンショットを参照

原色は避けるべき。色選択はRGBよりHSBの方がいい
90%くらいに落とすとちょうどいい

明度と彩度を保ったまま色だけ変えることができる
ただし緑は彩度、黄色は明度が高すぎるので調整が必要

グラデーションの調整

白→黒のグラデーションはまずない
グラデーションのトーンカーブは全体に柔らかく、いちばん下（濃い部分）のカーブを若干きつめに

→横に回転した時の様子をイメージしてみよう

文字の配置

新ゴ／リュウミンを中心に、モリサワフォントを使うのが無難
（ウェイトを細かく指定できる）
モリサワがないときは、Adobe製品なら小塚ゴシック／明朝があるのでそれで代用

文字のウェイトを細めに、文字を大きめにするとすこしおしゃれに見える

英文字が混在する場合

英語のみHelveticaかArialに、文字サイズを若干大きくすると収まりが良くなる

カーニング

古いバージョンのIllustratorは文字間隔が不安定なので
「イ」「ト」などの隙間が広くなってしまうことがある

一文字ずつの微調整が必要　文字を選択した状態でAlt(option)＋左右キー

立体感を出す作り込み

PCの原点は左上／文字は左上から読む
…なので、左上を光源にするとバランスがいい

1. 1px内側に食い込ませるように、上と左に明るい線を引く
2. 1px内側に食い込ませるように、下と右に暗い線を引く（縁ギリギリに引くとはっきりしない）

ボタン上の文字に立体感を出すコツ

飛び出して見えるようにする

透明度を下げたドロップシャドウをかける

凹んで見えるようにする

1. ぼかしを0、色を明るくしたドロップシャドウを右下に向かってかける
2. ぼかしを0、色を暗くしたドロップシャドウを左上に向かってかける

フラットだけど読みやすくする

ボタンの縁に明るい境界線を細く引く or 光沢を出してみる

上から下のグラデーションのTIPS

上：白っぽい色
→　真ん中：基準色
→　下：彩度を少し高く
下から光っている印象になる

定番の矢印などの装飾

○ ＋　− ＋　>
▲を横に倒す

PhotoShopのオートシェイプに太い矢印があるので調整する手も

※今見ているブログの、右のメニューの矢印を見てみてください＾＾；
※矢印のベクターグラフィック素材は、検索をかけるとけっこう手に入ります

グローバルナビゲーションに応用してみる

横並びのパターンがほぼ主流→誘導リンクの集約

1. メイン枠と同じ幅、ボタン高さのグラデーションの棒を作る
2. シェイプをコピーして「段組設定」で均等に分割する
3. 分割点に区切り線を引く／二本引いて、左を少し暗く、右を少し明るく

Σ（°Д°; 段組設定知らなかったーーーーーーーー！！

※CS4以降だと上メニューの「編集」→「パス」の中にあります

市村さんのおすすめの本

WEBデザイン 不朽の表現（MdN刊）

今回の内容がだいたい網羅されている
DTPのデザイン本も買った方がいい。Webデザインの本はサンプルがしょぼい。

レポートは以上です。

「今回はどのくらい来るかわからなかったので初歩的なテーマにしたが、好評ならもう少し突っ込んだ話をするかも」ということでした。

イラレやフォトショの基本的な機能までは専門学校や勤め先で教われるものの、いわゆるTIPSであったり、理論であったりは実務経験を積まないことには身につきません。
私もコーディングのお仕事が多くなり、きれいなデザインカンプに触れることはできるのですが、なかなかそのテクニックを勉強することができない状況です。
デザイナー寄りの勉強会も定着して欲しいと思います。

@MarlboroLand 普通にReplyくれたらいいですよwwwwwwwwwww

Twitterで記事を紹介して下さい（-人-）

デザイナーの市村さん（@MarlboroLand）がWebデザインの勉強会を開かれたので、参加してきました。
市内のレストランの一室にモニターを持ち込んでの、ごく小さな勉強会です。

WebオペレーターのためのWebデザイン勉強会開催 | くずWebデザイナーのなれの果て

”くずWebデザイナー”とか”ネガティブおやじ”とか名乗られてますが、市村さんはプロのWebデザイナーで、SaCSSでも日本のWebデザイントレンドについて、ライトニングトークをされてます。

初回ということで比較的初歩的な話になりましたが、かなり密度の濃い内容だったのでレポートします。
この記事は前半の、理論に関するまとめです。

勉強会の目的

Webデザインがうまく行かない悩みをみんなで考え解決していこう

コーダーに求められるスキルは？

• 専門的な知識が必要
• 最低でもXHTML+CSSが必須
• プログラムは習得に時間がかかる
• サイト構成などの知識も必要

→要求されるレベルが上がり何でもできないといけない

では、デザイナーに求められているスキルは？

• デザインに答えはない／センス（感性）が必要
• DTPスキルが希望されている
• サイト構成からの知識が必要
• アイコンなどの装飾技術

→時代に合わせたデザインを作り出せる感性や発想が必要

デザイン習得のための原則

1. やってみること
2. 感じること
3. 調べてみること
4. 創ること
5. 観ること
6. 続けること

→とにかく思い立ったら行動してください（市村さん談）

制作時必要なソフト

1. Firewoks　スライスの書き出しが早い
2. PhotoShop　画質が高い
3. Illustrator　文字組がきれい

Illustratorでテキスト作り、PhotoShopで調整、Firewoksでスライス…という流れだったが、各ソフトの向上で変わってきている

Webデザインの変遷

※記事冒頭のモニター写真を参照

制作ソフトが普及してなかったり、画像形式テーブルレイアウトなど制限が多かったため、デザインにもその影響が出ていることが分かる

→モニタの肥大化による詳細なデザインの実現
→（ユニクロなど）DTP寄りのデザインが要求されはじめている

見ておいた方がいいサイト

• コリス
• WebDesignDetabase

Webデザインの基本

モニタ横幅＝1024pxが最も多い

コンテンツ幅＝960px
様々な数で割れ、グリッドシステムを組みやすい

メインコンテンツの幅は一行何文字入ればいいのか？

この問題に答えはなくまちまち／幅から算出するしかない

最近のデザインの傾向

• フッターにサイトマップが入っているデザインが非常に多くなっている
• サイトの肥大化に伴いグローバルナビの役割が変わってきている（後述）
• 特に誘導したい、必要とされるリンク／最上層のカテゴリー一覧
  それより下層のサブカテゴリーを全てフッターに掲載する

Webデザインでつまづきやすい場所

装飾の方法

ボタンやバナーなどの作り方を覚えよう

サイトレイアウト

ヘッダやフッタなどの必要なコンテンツの配置方法を覚えよう

レイアウトバランス

配色による影響や見出し、文字の組み方を考えよう

コンテンツの組み立て方

コンテンツ情報をまとめサイトマップを作ってみよう

その他：重要だけど学ぼうとすると時間のかかるもの

文字の形式やウェイト
カラーキーワードや色に関する人への影響
画像の加工方法 etc…

グローバルナビから先の構成の変化

• むかし：　1ページに全て載っている
• 少し前：　最初の1ページが載っている
• 現在：　子ページのインデックスが掲載されている

→キーワード細分化によるSEO的な利点
→腹黒い話見積がちょっと増(ry

市村さんが最近作ったサイト

ブレインワークス
最近のサイトデザインのトレンドを踏襲してみました

• 直線的なデザイン
• 整理されたグローバルナビ
• フッターにサイトマップ

>> 実技編につづく

Twitterで記事を紹介して下さい（-人-）

デジカメを購入しました。フジのFINEPIX F70EXR。

ついでにflickrのアカウントも取ってみました。
http://www.flickr.com/photos/webbingstudio/

私は、写真を撮るのも撮られるのも苦手です。
これまでは、携帯でスナップを撮るくらいしかしてきませんでした。

ウェビンブログ：勉強会とデジカメと顔出しの微妙な事情

そんな私がカメラを買ったのには、お仕事やプライベートなど、いろいろ思うところがあってのことです。

デザインの勉強になる（かも）

写真を撮るときは、大なり小なり、自分が観ているものを「被写体＝作品対象」として意識することになります。
今まで何となく観ていた些細なものも、意識すればデザインの要素であるわけです。

デザインスキルを向上するためには「何故これを美しいと思ったか」「何故このような色／構図にすると美しくなると思ったか」を考えることが大切だと言われます。
WEBデザイナー・イラストレーターに写真好きが多いのは、単なる素材集めのためだけではないのです。

デジカメだとクリアに観られる

私は生まれつき、斜視・乱視・眼球振動があります。なので、眼鏡をかけても遠くの景色（特に夜景）は鮮明に見えません。
覗き込むタイプの銀塩カメラで、写真をうまく撮れなかったのもこのせいです。

ですが、Twitterで知り合った写真好きな人たちの作品を観ているうちに
「あれ？風景をデジカメで撮って家で見れば、綺麗に観られるんじゃね？」
「て言うか、今のデジカメはディスプレイ見ながら撮れるから、私でも失敗しないんじゃね？」
と今更気付きましたwww

意識的に「苦手」を克服する

私が写真を撮るのが苦手なのは、銀塩カメラ時代にピンボケ写真ばかり撮っては凹んできたからです。

私が写真を撮られるのが苦手なのは、自分にコンプレックスがあるからです。

うまく撮れないと思うなら、オートフォーカスのデジカメを使えばいい。

撮られるのが嫌なら、少しでもコンプレックスが減るように自分を磨けばいい。

そういう風に、自分の意識を変えていこうと思いました。
それは今年の私のテーマでもあります。

自分の記録を残す

今のお仕事に就くまで、あまり自分の記録を残したいとは思えませんでした。
ですが最近は、勉強会やオフ会で沢山の人に会い、いろいろな場所へ行くようになって、少しずつ「自分が体験したことを残したい」と感じるようになっています。

文中で貼っている写真は、札幌エスタ＝ビックカメラ前のブリッジから試し撮りしたものです。
札幌駅前を見渡すことができる、なかなかいいところです。
iPhoneやMacbookなどの大きな機材を買ったときや、打ち合わせ等、お仕事の節目に通ることも多く、なじみの深い場所です。

使い慣れていなくて結局ヘタレな写真になってしまいましたが…
（本当はもっとひどかったので補正しています）

年が変わってから、いろいろとこれまでしてこなかったことを試したりしています。
「下手な鉄砲も数撃ちゃ当たる」というやつで、
どれかひとつくらい、いや全部がちょっとずつ、今後の役に立ってくれるかもと期待してみる今日この頃です。

Twitterで記事を紹介して下さい（-人-）

千葉県の家事代行業、エルパセオ様の業務案内ブログをウェブサイト風にリニューアルしました。
久しぶりのFC2ブログのカスタマイズです。

http://elpaseo.blog68.fc2.com/

きちんとした展開をしている業者様の場合、独自ドメイン＋CMS構築が理想ではあります。
ですが今回の場合は長期間に渡って書かれている整理されたコンテンツがあり、また検索サイトでも高い順位を得られているということだったので、ブログの見た目を変えてしまう方向で進めさせていただきました。

FC2ブログやWordPressなどの、純粋なブログをCMSとして構築するとき、私がいちばん気を配るのが
「あとでお客様が改修できる箇所をどう確保するか」
という点です。

例えばグローバルナビやトップページの導入文は、HTML直書きしてしまった方が作業は早いです。
ですが、業務内容やキーワードの重み付け変更などでの改修というのは意外に多く、そのたびに制作元にいちいち直してもらっていたのでは、CMS的でないばかりかブログよりも不便になってしまいます。
（その修正費用で利益を得るビジネスというのも…げふんげふん）

かといって、何からなにまで変更可能にするとテンプレートに無理がかかり、制作側が後日改修をお願いされた時に見通しが利かなくなります。
ブログサービスの仕様変更・システムのバージョンアップで動作しなくなる個所が出るかもしれませんし、お客様自身も覚えることが多くなりすぎて結局使いこなせません。
実際、そういう苦い経験を何度もしてます…　（＾＿＾；

そんなことなどを考えつつ、テンプレートを構成していきます。

最終的に、エルパセオ様の場合は、以前共有テンプレートで配っていた「website」シリーズをベースに、改修可能な個所を以下のようにしました。

• ページの上にあるサイト概要　・・・　ブログ説明文
• トップページメイン画像下のリード文　・・・　プラグイン３
• 左メニューグローバルナビ　・・・　カテゴリーリスト
• 左メニュー連絡先　・・・　プラグイン１
• トップページ以外記事の下　・・・　プラグイン２

エルパセオ様はFC2ブログを使いこなされているので、３つのプラグインをフル活用しています。

もう一点、デザインも今回は「ターゲット層」を意識しました。

家事代行を頼むお客様というと、やっぱり30代以上の女性です。
お客様の声でもあるように、共働きで手が回らない部分とか、年を取ったお母様のために依頼したりするようです。

「家事を人に頼む」というのは、事情があってもやっぱり気後れとかがあるはずです。
配色のご要望はだいたいいただいていたので、心が落ち着くサイトになるよう、デザイン枠の角を丸めたり、ほっこりした書体を選択したり、グローバルナビのアイコンカラーを色相順にしたりなどしてみました。
私の好みが出てしまった感もありますが…w
メインの家族写真も、左右対象の安定したレイアウトのものを選んでいます。

最近は非公開案件などで、クールなデザインを手がけることも多くなりましたが
やっぱり私のキャラクターは、ベクターグラフィック＋ほんわか系だなあ、などと再認識したお仕事でした。

Twitterで記事を紹介して下さい（-人-）

2009年6月27日に開催された、CSS Nite LP, Disk 6 「CMSリベンジ編」の参加レポートです。

15:50～

「CMS Designer」
ベンダー：
アル・デザインワークス

【使用経験あり】

レポートを書き始める前に、一点フォローがあります。

セッション後の質問コーナーで、
「CMSDは文書宣言より前にPHPスクリプトを書き込む仕様になっているので、テンプレートをローカルで見たときにIE6で互換モードになってしまうのですが、なんとかなりませんか」
という質問をしたのは私です。

この質問を聞いて
「サーバーにアップしたあとも互換モードになってしまうのか！」
と誤解した人がいるらしく、アル・デザインワークスさんにご迷惑をかける事態になってしまいました。

私はCMSDの使用経験がありますが、後方互換モードになるのはローカルで見たときだけです（当然ですがこんなふざけたバグがあるIE6だけです）。
PHPのコードおよび各種CMSの独自タグは、実行時は出力されることはありません。

なんかすみませんでした　o…rz

この質問をした細かい理由については最後の感想で書きます。

アル・デザインワークスについて

福井県の制作会社
東京から3時間 / 越前カニ美味しい / オバマ大統領を勝手に応援する会…申し訳ございません

これからのWEBはどうなっていくのか？

それぞれが独り勝ちを狙っている→もちろんCMSも…
ひとつのプラットフォームに依存しすぎないことが大事

• バージョンアップでプラグインが使えなくなる
• 構築の仕事が「CMSの部品を作るだけの簡単なお仕事」になりかねない

MovableTypeの問題点

1. 一か所の修正がサイト全体に影響する
2. MovableType以外のブログ・CMSへのデザイン移行が面倒
3. プラグインの保証がない

（もう一点あったのですが失念してしまいました）

CMS Designerは…

ページ単位でCMSを作れる
既存のHTMLの中にCMSを「埋め込む」発想

実績

下村楽器店
武生刃物卸 など

構築をした株式会社アーキテクチャウェブシステム様の声
「お客様へのレクチャーが短かった」
「制作の費用を抑えられた」

CMSDは管理画面の入力項目を自由に構成できる
余分な説明・よくわからない専門用語がない

ここでプレゼンター新出さんの主張：
FCK Editerにも対応しているけれど、こんな入力支援を使わなくてもきれいなサイトを構築できるのがCMSDの理想です。

構築の流れ

テンプレートはXML＋XSL

1. フィールドの定義（スキーマ）
   →XMLファイルでテキスト、ファイルアップロード等の入力仕様や順序、ラベルを既定
   →XSLファイルで動的部分の出力HTML、細かい条件分岐などを既定
2. コンテンツを保存する場所としてコンテンツ毎に格納フォルダを用意する
3. 既存静的ページのHTMLの先頭・末尾におまじない（＝PHP構文）を入れる
4. 既存のHTMLコードを
   <cmsd:entrylist name=”hogehoge”><cmsd:design>
   ～
   </cmsd:design></cmsd:entrylist”>
   で囲み、XSLタグを書き込んでいく
5. ファイルの拡張子を「.php」にする（サーバーでmod:rewriteが使用可能であればHTMLでもできる）

URLによる動的ソート

URLに引数（?hoge=xxx&huga=yyy）を付けることで、記事の項目内容による絞り込みが簡単にできるようになっている
他のCMSの場合は各ページを書き出すことを想定しなければならないがCMSDは引数で条件に沿ったページを自動生成するので、複雑な条件分岐はあまり必要ない

その他

1. 日時指定（コンテンツごとに任意で要・不要を設定できる）
2. ユーザー権限
3. コマンド制限（記事の作成はできても削除ができないユーザーを作るなど）
4. 表示制限（管理画面で自分が書いた記事しか表示されないなど）
5. ページキャッシュ

感想

私がCMS Designerのことを知ったのは、制作会社で働いていた頃に社長から「これは使えるだろうか？」と聞かれたのがきっかけです。

当時はサーバー等の条件が合わず導入は見送りましたが、WEBの知識がない（しかもCMSには慎重だった）50代の社長が興味を持ったということは、それだけ簡潔なインターフェースだったということです。

「埋め込む」「データベースがいらない」「世界共通技術のXMLベース」という概念のため導入しやすく、マニュアル、サンプルデータもきちんと完備されています。今回のCSS Niteでも「プレゼンうまいなー」という印象を受けました。

CMSDの方が「救世主」には近い気ガス　´・ω・）

でも、進行役の鷹野さんが指摘している通り、カスタマイズの工数は規模の割に多いです。

また、テンプレートエディタはなく、「スキーマ」という概念が理解しにくいため、レンタルブログ等でのカスタマイズ経験がない人、XMLが分からない人にはややハードルが高いです。

ここで冒頭の質問の件になるのですが、
私が一人で構築をするのであれば、ローカルプレビューの件は全く気にならないのです。レンタルブログのカスタマイズのときは全てブラウザで作業しますし、そもそもIE6なんか、あと一年くらいでゴミ箱に放り込んでもいいブラウザです。

でも、自分以外の（CMSDのスキルがない/そもそもコーディングの技量も未熟な）同僚・後輩などとチーム制作をする場合、細かい説明をしなければならない点が多いと、じわじわと最終的な作業時間に関わってきます。

ぶっちゃけ、PHPとXMLをいろいろ書きこまなければならないのであれば

「MovableTypeかWordPressで記事リストだけ作って、includeでよくね？」

となってしまいます。

そのようなわけで、私の中では、導入したいけれど残念なCMSとして位置づけられてしまっているのです。
公開後に撤去できるようなテンプレートエディタができたり、PHP構文がいらなくなってほしいところです…

Twitterで記事を紹介して下さい（-人-）

Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語

美しい。
流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。
しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。
北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。

このサイトではWEBデザインの美しいテクニックがあちこちに使われています。
全ては紹介できませんが、取り急ぎ目立つものだけ。

WEBデザインの可能性を広げる、透過PNG

このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカルな演出を実現しています。
PNG32形式はファイルサイズが大きくなる欠点がありますが、近年のADSL、光回線の普及で使いやすくなりました。

ですが…
あのクソ忌々しいInternetExplorer6はこれに対応しておらず、足を引っ張り続けています。
このIE6でも透過PNGの表示を可能にするのが、「PNGFix」と呼ばれるJavaScriptライブラリです。
「Discover Shiretoko」はjQueryライブラリを使用しているので、jquery.pngFix.jsを採用しています。

jquery.pngFix.js – PNG-Transparency for Windows IE 5.5 & 6

衝撃のGlider.js

いや、これはびっくりしました。
てっきり知床→Firefox間でページを移動するのだろうと思っていましたから。
このダイナミックな横スライドは、日本人が作成したjQueryライブラリ「Glider.js」を採用しています。

Glider.jsを作ってみた。 – Ho-KAGO After School

Firefoxユーザーのなかには、「No Script」プラグインでJavaScriptをオフにしている方も少なくありませんが、このライブラリはdivでグルーピングされたHTMLに対し演出を加えるものなので、内容が読めなくなることはありません。
でも、できればこのサイトくらいはJavaScriptオンで見てあげてください…

一部が重なっているナビゲーション

本文最後尾のナビゲーションは、矢印の一部が重なっています。
四角ベースのCSSレイアウトでこれを実現するには、各ボタンを透過画像で作成し（ここは透明度はあまり関係ないのでgifです）、さらにフロートで横に整列したボタンに対し「ネガティブマージン」や「position:relative（相対配置）」で矢印の一部が重なるように位置ずらしをすることで実現できます。

説明記事がネット上にいろいろあったのだが見つからない…汗

尚、ボタンの重なっている部分は「HTMLで後に書かれている要素」が優先されます。なので、重なりは最小限に抑える必要があります。

トップ専用CSSによるデザインの上書き

「Discover Shiretoko」はトップ以外のデザインでは、共通の背景画像が使われています。
半島のすみっこにくまさんがいるやつです。
ですが、トップページのみ「top.css」を後から読み込ませることにより、導入部をよりダイナミックな構成に変更しています。
こうすることで、作業量を最小限にしつつ、ページ毎の演出を調整することができます。

これはWEBデザイナーの間では割と常套手段なんですが、CSS勉強中の方も自分のサイトやブログなどでお試しください。楽しいですよ。

他にもレイヤー配置など、たくさんのテクニックが使われていますが、この辺で。ノシ

何故ここまで高度なテクニックを多用したのか。その答えははっきりしています。

「Mozilla Firefox」が最先端のレンダリング、スクリプト処理に対応できるブラウザであることを、自らのサイトで証明するため。

「Discover Shiretoko」は、制作チームの自信の現れなのです。

Twitterで記事を紹介して下さい（-人-）

本サイトをリニューアルしました。

案件がたまっているのに何をやっているんだという感じですが、「4月からチクチク作っていて、サイト自体は今週の頭には完成していたのです！」「トップページにOSCとCSS Niteのバナーを貼ったのでイベントまでにアップしたかったのです！」
と言い訳します。

WEBデザイナーとしてお仕事をはじめてから、4回目のリニュになります。

2006年1月

2006年10月

2008年4月（いっこまえ）

…変なサイトばかりです。

なので、今回は当初、わりとまともなサイトを作ろうとしました。
でも、それはボツになりました。

勝ちを見据えたおとなしいサイトは、私のサイトではないです。

ブログカスタマイズやCMS構築が一般の人にも知られるようになって、
CMSを扱う技術者に、閲覧者が求めているものは
「静的サイトでは実現できない情報配信力」と
「ブログでは実現できないインパクト」だと思ってます。

だから今回はホワイトボードになぐり書き風にして、「WEBデザインのよさげポイント」すらぶち壊しました。

昔のブログを見てみると、私は4年前にも同じことを考えてます。

「柔よく剛を制す」。
これって、WEBにも当てはまるところがあると思うのです。

文書構造は大事です。SEOも考慮しなければお客は来てくれません。
トラックバックやRSSも、交流の幅を広げるのに重要な要素でしょう。その点でブログ形式が有利なことは確かです。

しかし、訪ねて来た閲覧者が見たホームページが無個性で、味も素っ気もないデザインだったら。
記事が全然無くて、それが丸コピー・ペーストしたような文章ばかりだったら。
アフィリエイトであれば、コメントもなくただ写真が貼ってあるだけだったら。
記事を読んだ後は、その閲覧者が二度と来ることはないでしょう。ウェブサイトは他にも何十億とあるのですから。

文章でも、デザインでも、イラストでもいい。何か閲覧者の心に残る「技あり」な部分があれば、もう一度見に来ようと思ってくれるかもしれないし、再びそのサイトを訪れたときに「あっ、ここ前に来たことがある！」と思い出してもらうこともあるでしょう。

閲覧者から華麗に一本を取れ : ウェビンブログ（旧）

一本を取ろうとする柔道は、なかなか勝てません。
お仕事では簡単にできません。

それでも、日々技を磨いて、いつかは華麗に一本を取りたいと思うのです。
自分のサイトはその練習場です。

というわけで、お仕事に戻ります。
しょうもないところで詰まってしまって、まだおわんないです。
自分のサイトを作っててお仕事の方がgdgdになりました、なんてことになったらシャレにならないですからね；；

Twitterで記事を紹介して下さい（-人-）

OSC2009 Hokkaidoに、DevDo:北海道開発オフも展示を出すことになり、そこに貼るA3ポスターを作成しました。

サムネイルをクリックすると拡大して見られます。

顔出し許可をくださった参加者の皆さん、ありがとうございます（-人-）

今回は何より、道民部のカメラマン・@kobun※に感謝×感謝です。
写真のほとんどはコブンが撮ったものですが、素晴らしい素材を惜しみなく提供してもらって、「いろいろな立場・年代の人のゆる楽しい勉強会」という感じのポスターを作ることができました。

私は写真が本当にへたくそなのでうらやましいです。
印刷は他の人にお願いしているので、会場にポスターがどーんと貼られるのが楽しみです。

OSCというのは「オープンソースカンファレンス」のことで、主にプログラミングに関する最新の技術セミナーや、市内の勉強会の展示を一日中見まくるという、プログラマさん大喜びのイベントです。

ノンプログラマの自分には難しそう…と思ったら、Firefoxの次世代版とかeZ Publishなど、各種CMSに関するセミナーも結構多いのですよ。

プログラミング・CMSに興味のある方は、自己研鑽の一日などいかがでしょう。
開発オフのブースも見に来てくださいね（＾-＾）ノ

※【さん】を付けると何故か怒られる

Twitterで記事を紹介して下さい（-人-）

名刺を増刷しました。

この名刺は自作で、バージョン的には2.2くらいになります。
前は下の帯が黄色だったのですが、増刷のついでにサイトに使っているライトブルーに変えてみました。

フリーランサーにとって、名刺は大切なものです。

打ち合わせに、自分のことを紹介してくれる上司や同僚は同行しません。
デザイナーであれば、名刺の見た目も地味にチェックされます。
ごくたまーに、オフ会やセミナーで名刺を交換した方が、お仕事の相談をしてくれることもあります。
なので、常に切らすことはできません。

名刺の肩書きは、「Web Designer」ですが、
脇に薄く「Design * Customize * Coding etc…」と書いてます。
Webに詳しい方だと、濃い方の文字だけでは私の守備範囲がわかりませんし、
Webに詳しくない方は、薄い方の文字では私が何をしているのかわかりません。

結局、全部盛りにしたのが今の状態です。
「ラーメン　みそ味 * とろ肉チャーシュー * メンマ * 味付け卵」
みたいなものですw

また、名刺は左を大きく空けてます。
どこかで聞いた話なのですが、名刺に余白が多いと、後でどんな人だったかや、ちょっとしたことをメモする人に親切なのだそうです。
実際私もWebコンなど、いちどにたくさんの人に会ったときは、書き込むの申し訳ないなーと思いつつも、外見などメモすることがあります。

h2hamさんの名刺に違う方の情報を書いてしまって、二度目に声をかけられたときに反応が遅れたのは秘密です。
今度会ったら新しい名刺もらおう…orz

今のところは厚番手の名刺紙を買ってきて、プリンターで手刷りしています。
どうしてもふちがボソボソしてしまうので、この紙を使い切ったら業者さんに頼んでみようかな。

Twitterで記事を紹介して下さい（-人-）