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

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

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

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

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

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

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

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

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

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

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

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

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

あけましておめでとうございます。

ちょっと前までは平成生まれも珍しく、ネットをしている人もほとんどいなかったのに、気がつけば21世紀も10年過ぎました。
そして私は春にはさんじゅうg(ry

今年の年賀状のテーマを、中島敦の短編「山月記」にすることは、半年くらい前から決めていました。
自らの臆病な自尊心を飼い太らせ、虎に変わってしまう主人公・李徴（りちょう）の独白には、フリーランスのクリエイターは皆、何か思うところがあるんじゃないでしょうか。

私は年賀状のイラストに、前の年にあったことを絡める傾向があります。
（昨年の年賀状はSecondLifeをイメージしています）
当初は単に、月に吠える虎の構図になるはずだったのですが、私らしいというか、ややひねりが入った一枚になってしまいました。

昨年の後半、自己管理不足やストレスなど無理がたたって、メンタルの持病がひどく悪化しました。
私の「虎」が、近しい人に噛み付いたり、Twitterのタイムラインに吠えまくりました。

虎になった李徴に再会した親友・袁（えんさん）の前に、李徴は姿を見せることはありません。
李徴の苦しむ訴えは、動物たちには恐ろしい吠え声にしか聞こえません。

だけど私の場合、
家族や友人（袁）は私の様子に戸惑いつつも見守ってくれたし、
Twitterのfollowers（動物たち）はつぶやきに耳を傾けてくれました。
お取引先（月）は私のスキルを必要として、変わらずお仕事を回してくれました。

なので私は、年賀状の虎を吠えさせませんでした。
Twitterのログに残っていた虎も、できるだけ消しました。

李徴の言う通り、虎になってしまった方がぶっちゃけ楽でした。
だけど虎はWEB制作ができません。
私はこの仕事をまだ投げ出したくはありません。

今年の年賀状は、この仕事をできる限り続けて行くという誓いと、
お世話になった皆様への感謝を込めさせていただきました。

今年も頑張ります！

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

WebbingStudioのメインサイトを、MovableType4からa-blog cmsにベースを変えてリニューアルしました。

商用ブログ ホームページ作成 CMSデザイン 札幌のWebデザイナー | WebbingStudio

a-blog cmsは、Dreamweaverを使ってスムーズな構築ができるのと、管理画面とカスタムフィールドを一括してカスタマイズできる点に惹かれて選びました。
既存のテーマファイルは流用せず、いったん静的コンテンツで作成してからCMS化する、実務的な手順で構築しています。

今後、a-blog cmsのデモサイトとして、カスタマイズした投稿画面、テーマファイル内のコード・モジュール設定の公開などを行っていく予定です。
もちろん私自身もまだわからないことが多いので完璧な内容ではないですが、a-blog cmsを勉強中の方の参考になれば幸いです。

追記以降はデザインの話など。

6月頃に、「これまでの自分がやらなかったデザインに挑戦してみよう」と思ってデザインをリニューアルしたものの、やっぱりそれは本来の私のテイストではないわけで、納得が行きませんでした。
なので今回は、素材配布やFC2の共有テンプレートを作っていた頃の原点に戻り、ベクターグラフィックを多用し、背景素材・イラスト以外を全てモノクロでまとめた、シンプルなサイトにしました。

また、画風が固まってきたのでイラストの案件も受けられるようにと、サイト内にイラストを多用しました。
これまできちんと公開してこなかった自分の顔も、イラストでかなり近いものを載せています。

背景画像はコンテンツごとに異なっているのですが、一部はFC2の共有テンプレートで配布していた素材をリメイクしたものです。

• About　・・・　beads
• Work　・・・　lace
• Information　・・・　cycle

Informationの背景画像(cycle)は、他のコンテンツと雰囲気が異なっています。
子供っぽさを感じる方もいるかもしれません。

これは私が好きな北海道のマジックアワーをイメージして描いたもので、趣味でサイトを運営していたころから繰り返しリメイクしています。
思い入れの強いモチーフなので、敢えて加えました。

最後に、このブログを見に来ている方は気付かなかったと思いますが、IE6非対応となりました。
暇な方はIE6でアクセスしてみてください。閲覧はできますが専用のメッセージが出てひどいことになります。
どこに透過PNGを使用しているかわかって面白いかもです。

最近は、IE7以降へアップグレードする人も増えてきました。
私のメインクライアントは「制作会社」か「ネットリテラシーの高い個人」なので、自分のサイトでは切り捨てる決断をしました。
もちろんお仕事では忌々しいと思いつつも、もうしばらく対応していきますけどね…

相変わらず長い記事を、ここまで読んでいただいた方、ありがとうございます v_v
これからも少しずつ、WEB制作者として精進していきたいと思います。

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

MovableTypeは、記事中に画像などの「アイテム」をアップロードして貼り付けると、アイテムに関する詳しい情報も記録されるようになります。
これは、ブログ全体であれば<mt:Assets>、エントリー中であれば<mt:EntryAssets>で呼び出すことができます。

WordPressにも近い機能があるのですが、

• アイテムにエントリーとは別個の「タグ」を付けられる
• テンプレート側でサムネイルのサイズを細かく指定できる
• アップした元ファイルと生成されたサムネイル・ポップアップが別ディレクトリで保管される

という点でMovableTypeは優れています。
（WordPressのように正方形にトリミングできないのが残念ですが）
写真・イラスト中心の個性的なサイトを作るのに力を発揮するでしょう。

追記：2009年9月25日
<$mt:AssetThumbnailURL$>にsquare="1"を加えると正方形にトリミングできます。はてブにコメントくれたaklaswadさんありがとうございます！

<mt:Assets>の強力な機能を使ったtipsをご紹介します。

タイプが「画像」のアイテムを表示する

まずは基本的な使い方です。

<mt:Assets>は、lastnモディファイアで出力される数、typeモディファイアで出力するアイテムの種類を固定できます。
typeをimageとしておくことで、もし動画やPDFが混じっていても確実にサムネイルを出すことができます。

また、サムネイルを出力する<$mt:AssetThumbnailURL$>にwidthとheightモディファイアを指定しておくと、サムネイルはその値を超えないサイズで生成されます。

特定のタグが付けられた画像をリンク・alt付きで表示する

<mt:Assets>にtagモディファイアを付けると、その値のタグが付いているアイテムのみリストアップします。対象はアップロードしたときに付けるアイテムのタグであって、エントリーのタグではありません。

記事中に何枚か貼ったアイテムのうち、タグを付けた画像のみを一覧にサムネイル表示することもできます。

<$mt:AssetProperty$>はpropertyモディファイアの値によって、説明文・ファイルサイズ・縦横サイズ等を取得できます。
アップロード時に入力した説明文を代替テキストにすると、よりアクセシビリティを考慮したHTMLソースを生成でき、jQueryのギャラリー生成ライブラリとの連動もしやすくなります。

<$mt:AssetProperty$>をうまく利用すると、MTOSでも正式版のカスタムフィールドのような拡張が可能なのです。

特定サイズ以下の画像はサムネイルを生成しない

サムネイルを生成する<$mt:AssetThumbnailURL$>には、欠点があります。
指定したwidth・heightモディファイアよりも小さな画像をアップすると、画像が逆に引き延ばされてしまいます。

もしも小さな画像もアップされる可能性がある場合は、<$mt:AssetProperty$>で取得した「画像の幅」「画像の高さ」を<mt:SetVarBlock>で変数に渡し、想定している最大サイズで二段構えの条件分岐を行う必要があります。

やや複雑にはなってしまいますが、上記のようにするとどんな画像をアップしても適切なサイズで表示されることになります。

PDFファイルだけHTMLを変える

CMS等でアップロードされるアイテムには、「PDF」や「Excelファイル」「圧縮ファイル」などもあります。
しかし、これらはMovableType内ではどちらも「type="file"」として判断されるので、最初のtipsではPDFだけを判別できません。

この場合は、アイテムの「拡張子」を取得する、<$mt:AssetFileExt$>を利用します。
PDFであれば値は必ず「pdf」になるはずなので、変数に渡して条件分岐を行うことで出力されるHTMLを変えたり、リンクにクラスを付けて、CSSでPDFアイコンを付ける演出を加えることもできます。

このように、ブログシステムに関わらずかなり高度な画像処理ができるMovableTypeですが、肝心のアップロード画面がお粗末です。
初期状態のまま特に意識せずにアップロードすると、サイトルート＝トップページがある場所に画像が保存されてしまいます。

サムネイルの保管先ディレクトリは環境変数で設定できるのですが、アップする画像そのものの保存先は上の画像のポップアップのHTMLを手入力かプラグインで書き換えるしかありません（いい方法があったら教えてください＞＜）。

また、画像関連の独自タグが入るとサムネイル生成処理が必要となるため、分岐が複雑になるとかなり更新処理が遅くなっていきます。

MovableTypeの画像処理機能は、オープンソース版でも使えるにも関わらずかなり便利なので、次バージョンの5で、ぜひこのあたりを改善してほしいものです。

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

明後日のCSS Niteは、このカードをつけていきます。

先日のデジイチブームと顔出しの件で、顔出しを断りたい人もすぐ分かるようにしなくちゃいけないなと思いました。
でも、「顔出しNG」を伝えるのはなかなか難しいのです。

どんよりした目で

「私…顔出し…嫌だから…」

となったら、相手も気を遣っちゃいますね。

なので

「いやーあっはっは謎キャラでいたいんですよ☆スイマセンネー」

というノリで作ってみました。

PDFデータ置いときますのでよかったらどぞ。名刺サイズにカットして使ってください。
face_ng.pdf (65.3KB)

これから旅行の準備をして（してないのかよ）、
明日から三日間、東京でおのぼりさんです。
CSS Niteでこのカードを付けているやつを見かけてもいじめないでください＞＜

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

「山下たろーくん」シリーズの漫画家、こせきこうじ先生が昨年秋から下北沢の路上で色紙を売っている。
一昨日、これを知った時は腰が抜けました。

上のインタビューによると、収入云々より「読者の声を聞く」のが目的だそうです。
それを裏付けるのが、2001年から開設しているウェブサイト。

おいら～どっとこむ。改

移転に失敗してしまったのか現在は半休止中ですが、BBSやお絵かき板、たろー語を話すチャットボット（!!!）もあったようです。

田舎っぽさを強調したアナログな作風のこせき先生が、
ブログ普及よりずっと前から、
当時の先端技術で、漫画家と読者の距離を詰めようとしていた。

この事実に今度はリプトンのアイスティーを吹きました。

性格上、客観的な前置きになりましたが
20年前に週刊少年ジャンプで連載していた「山下たろ～くん」は、私にとって重要な位置を占めている漫画です。

たろ～並にKYだったせいで転校先でうまくいかなくて、学校に行くのも嫌だった中学時代の支えになった作品です。

Web上でははじめて書くことなんですが

旧コミックスに、当時14歳の私の痛いファンレターが掲載されてます。
センバツ編が始まった頃に募集していた「史上最高のボール」で「サヨナラ台風ボール」が入選してたりします。

あのふざけたボールを考えたのは、実は姉なのですが（私のネタは落選）、
なんとなく名義を統一したばかりに転校前・転校後の学校両方で笑われてしまい、景品のウォークマンと引き換えに酷い目にあいましたwww

こせき先生はこのとき「サヨナラ台風ボール」のイメージを、姉のイラストに忠実に描きおろしてくださって、感動したのを覚えてます。

つまりファンだったのです。

しかし、次作の「ペナントレース　やまだたいちの奇跡」が終わった辺りから、私はだんだん、こせき先生の作品が読めなくなりました。

社会に出たものの仕事はうまくいかないし、
打ち込める人生の目的も見つからないし（ゲームと編み物は好きでしたが）、
「ひたむきに生きようとしたつもり」でも報われないし、

それ以前に、正直な話、周りが「うわぁ」と思ってるのも顧みず暴走する描写に付いていけなくなったのです。

漫画への興味がなくなったこともあって、たろ～くんも含めて持っていた蔵書は全部手放しました。
ここ数年は、バンチで連載していた編集部編を、コンビニで立ち読みしたくらいです。

30歳を過ぎてやっとWeb制作の仕事にたどり着き、
いろいろ身辺が忙しくなって、
ふと、たろ～くんに会いたくなりました。
長島一郎に会いたくなりました。
山田兄弟に会いたくなりました。

で、検索して見つけたのが冒頭の話です。

色紙売り以来、沢山のファンが先生に会っているようで、昔の思い出や今の作品の話、喜びの声が続々アップされています。
（これも目的のひとつだったろうと思います）

しかも、こせき先生は今、初の恋愛漫画を描いてます。

死んだような凪 | こせきこうじがまんがタイムジャンボでラブストーリーを描いてる！必読！

今年で50歳になるはずの今でも、新しいことに挑戦したり、
漫画家と読者のつながりを模索したり、ひたすらに突っ走っておられる。

あれ…読者の私はどうなんだ？
と思い直してしまいました。

古本でもいいので、単行本をちょっとずつ買い戻そうと思います。
来月上京したときは、ダメ元で下北沢に寄ってみようと思います。
できれば直接、当時のお礼を言いたいのです。

色紙をいただいて

わー　うまーい！
（大中央学園：高木の妹）

と言ってみたいですがだめですか。

だったら僕は　史上最高のすんげーボールを投げる
（大潮商業：棟方兄）

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

さて、四月から、市内の専門学校でWeb制作の講師をすることになりました。
このため、4月中旬から毎週火曜日はほぼ不在となります。
火曜日にお問合せをいただくと反応が遅くなってしまいますが、何卒ご了承ください。

教える対象はイラストや漫画のコースに所属する学生さんたちなので、「活動媒体」としてのWeb制作に重きを置く感じです。

私も学生の頃は漫画を書いていたので、今もたまに簡単なイラストは描くことがあります。

15年前と比べると、インターネットという媒体ができて、経済力や住んでいる地域の影響を受けずに、制作者が自分の作品をアピールできる時代になりました。
（その分競争率は激しくなりましたが…）

ブログを借りる手もありますが、作風によって、それに合う表現手法は違います。
やはりブログをカスタマイズするか、別にギャラリーとしてのウェブサイトが欲しくなるところですが、ある程度のWeb制作の知識がなければ、自分の世界の半分も表現できません。
イラストレーター・漫画家としての活動に、Web制作の知識は大きな影響を与えるものだと思います。

RPG「セブンスドラゴン」のイラストを担当しているモタさんは、4コマ漫画や同人小説へのイラスト提供など、Web主導で有名になった方です。

つい最近だと、Web漫画「胎界主」がソーシャルブックマークを通して話題になってます。
（半分まで読みましたが、面白いですねこれ）

Webデザインは、勉強すればするほど「芸術」というよりは「科学」だというのがわかってきます。
一部の学生にはスゲェつまらないかもしれません。
週一回なので、興味がなかったら前習ったことを速攻忘れてしまいます。
どう興味を持ってもらうか、というのが、なかなか難しそうです。

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

特に意味ないんですけど、
iPod・iPhoneに使う本サイトとブログに「webクリップアイコン」を置きました。
直接ブクマしてくださると、もれなくうぇびんたんが付いてきますw

57px四方の「apple-touch-icon.png」という画像を、サーバールートに置くと自動で認識してくれるようです。
OS上はハイライトとべベルがかかっていますが、これはシステム側で追加されるため画像には不要です。
↓こちらを参考にさせていただきました。

ありがとうiPod／研究室／iPhoneとiPod touchのWebクリップ用アイコンの作り方

以前「JAPAZINE」の管理人さんにもアイコンの作成を頼まれたことがあるのですが、白地に朱の「日の丸」にしたら、とてもいい感じにできました。
できるだけシンプルに、余白に余裕を持って作った方がいいみたいです。

現状では実機を持ってないので、iPhoneに加えたときの確認ができません。うまくできているといいのですが。

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

去年の春に開業をしたときに、名刺やら伝票やらに使うロゴが必要になりました。

…が、私、こういうCIデザインが大の苦手です。
（たまに依頼が来ることがありますが、今のところ正式なものはお断りしてます）

そこで、要点だけ踏まえて
できるだけ楽そうなのを作ることにしました。

どんなふうに考えたのか、まとめておきます。

キーカラーは一色のみ

企業ロゴには二色使用されているものもありますが、
色の組み合わせを考えているだけで日が暮れてしまいます。
どうせモノクロで使うことが多いのだから、一色で済むようなデザインにしようと思いました。

とりあえず身近なもので

ふつうの企業ロゴは、企業イニシャルとキーアイテムを様式化して組み合わせデザインして…という流れですが
そんなものは私には無理です。

身近なものを適当に使って、できるだけすぐ描けそうなマークを作ることにしました。

ふと見ると、目の前にモニターがあるじゃないですか。
なんだ、これでいいやと。

関係ありそうなものをくっつける

さらに、私はモニターを通してお客様と接することが多いです。
なので顔文字の「:D」を書きました。

何故「:D」なのかというと、不機嫌でも笑い過ぎでもない、ちょうどいいニコ加減だからです。お客様をそのくらいのニコ加減にしたいところです。

そんなわけで、ロゴマークができました。
個人的に「うぇびんたん」という愛称で呼んでます。
非モテなんだから「たん」ぐらい使わせろ。

ちなみにこれ、中身が顔文字なので

移転前のウェビンブログでは「:P」、

はてなでのアイコンは「:)」になってます。

既存のフォントをちょっといじる

「WebbingStudio」の文字の部分は、このロゴマークに合わせて均一な太さのフォント「Zekton」を選びました。
けっこう有名なフォントです。

Zektonでそのまま「WebbingStudio」と入力するとこうなりますが、

「g」のところをぐいーんとのばして、ロゴのモニターの足部分とつなぎました。

あとは字形や文字間隔を調整して、ロゴの出来上がりです。

こうやって文章にすると、あっという間にできたように見えますが
丸一日かかってます…orz
しかもロゴマークだけだと何なのかわからないという…orz

CIデザインは長い付き合いになるものなので、難しいですね。
お仕事としては当分無理だなあ。

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

あけましておめでとうございます。
札幌はずいぶんと穏やかなお正月です。

昨年は公私共、
多くの方々のお世話になり無事に2008年を過ごすことができました。
今年もカスタマイズ職人、WebbingStudioを何卒宜しくお願い申し上げます。

この年賀状は、
実際に今年（というかつい昨日　汗）発送したものです。

Illustratorで4時間くらいで描いてます。
これについても、いずれ記事にするかもしれません。

…うぇびんぐにブロガーの神が降りてきたら

。・゜・ ノД｀）・゜・。　ｽｲﾏｾｰﾝ

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