<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ウェビンブログ &#187; Work</title>
	<atom:link href="http://blog.webbingstudio.com/category/work/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.webbingstudio.com</link>
	<description>札幌のWebデザイナー・カスタマイズアドバイザー WebbingStudioのよしなし語り</description>
	<lastBuildDate>Fri, 30 Jul 2010 00:11:50 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>覚えてもらえる名刺とは</title>
		<link>http://blog.webbingstudio.com/2010/07/namecard1007.html</link>
		<comments>http://blog.webbingstudio.com/2010/07/namecard1007.html#comments</comments>
		<pubDate>Fri, 23 Jul 2010 07:35:24 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[business]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[illustration]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1463</guid>
		<description><![CDATA[

新しい名刺を注文しました。
右上の「おもて」「うら」は本当に名刺に書いてありますwww
半年ばかり前、前回のデザインの名刺を持って、ある会社の社長さんと顔合わせに行ったところ、社長さんはこのように仰いました。

自分 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.webbingstudio.com/uploads/2010/07/namecard201007_omote.jpg"><img src="http://blog.webbingstudio.com/uploads/2010/07/namecard201007_omote-120x200.jpg" alt="" title="namecard201007_omote" width="120" height="200" class="alignleft size-medium wp-image-1464" /></a><a href="http://blog.webbingstudio.com/uploads/2010/07/namecard201007_ura.jpg"><img src="http://blog.webbingstudio.com/uploads/2010/07/namecard201007_ura-120x200.jpg" alt="" title="namecard201007_ura" width="120" height="200" class="alignleft size-medium wp-image-1465" /></a></p>
<div class="clear"></div>
<p>新しい名刺を注文しました。</p>
<p>右上の「おもて」「うら」は本当に名刺に書いてありますwww</p>
<p>半年ばかり前、<a href="http://blog.webbingstudio.com/2009/11/namecard0911.html">前回のデザインの名刺</a>を持って、ある会社の社長さんと顔合わせに行ったところ、社長さんはこのように仰いました。</p>
<blockquote>
<p>自分は仕事柄、何百枚も名刺を受け取るのだけど、デザインが良くても、業務内容や自分に関することが何も書いていない名刺が多い。だいたいそういうものはフォルダに入れたらもう忘れてしまう。<br />
名刺は人に会ったときに配る大事なものなのに、皆、お金をかけなさすぎる。一枚数十円くらいではないか。いい紙を使って、顔写真や裏面に業務内容を載せるのは絶対必要だと思う。二つ折りにするくらいの勢いがあったっていい。</p>
</blockquote>
<p>そんな話をしながら、社長さんは私に名刺を渡されました。<br />
顔写真と業務内容が大きく書いてある「企画・マーケティングをする人の名刺」です。<br />
しごくもっともなお話だったのですが、それは「デザイナーの名刺」ではありませんでした。</p>
<p>私は適当なオフ会でも、正式な名刺を配っています。<br />
本当にお仕事というのはどこから来るかわからないからです。</p>
<p>一方で、私は名刺はトレーディングカードのように「もらってうれしい」ものでなくてはならないと思っています。<br />
ユルい場で、ビジネス色が強い名刺を配るのは粋じゃないですし、縁があってお会いした人たちに「デザイナーのサービス」を提供したいのです。</p>
<p>社長さんのお話を参考にしたうえで、私らしい名刺をいろいろ考えて、できたのが記事の最初にある名刺です。</p>
<p>今回力を入れたのは裏面です。<br />
一般の名刺の裏面は、業務内容が文字だけでずらずら書いてあったりで、どうも面白くありません。<br />
アイコンなどを使って私がやっていることがイメージでわかるように、ふと裏返したときに「ちょっと得した気分」になるようにしてみました。</p>
<p>名刺は、自分の世界観を表現する意味でも、デザインの勉強になる意味でも、デザイナーには大切なものです。今後もバージョンアップして行こうと思います。</p>
<p>余談ですが、CSS Niteでいただいた、とみたちひろさん(<a href="http://twitter.com/tommmmy" class="blank">@tommmmy</a>)の名刺がとてもすてきだったのです。<br />
<a href="http://www.ladybeetle-design.com/" class="blank">とみたさんのウェブサイト</a>のデザインがそのまま名刺バージョンになっていました。</p>
<p>ウェブデザイナーは、自分のサイトのテイストを名刺に織り込むのもけっこう大事なポイントですよね。</p>

<a href="http://twitter.com/?status=RT+%40%3A+%E8%A6%9A%E3%81%88%E3%81%A6%E3%82%82%E3%82%89%E3%81%88%E3%82%8B%E5%90%8D%E5%88%BA%E3%81%A8%E3%81%AF+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2F2gxkyud&amp;in_reply_to_status_id=19321401876" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2010/07/namecard1007.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>works:NPO法人 富山観光創造会議</title>
		<link>http://blog.webbingstudio.com/2010/06/kanko_toyama.html</link>
		<comments>http://blog.webbingstudio.com/2010/06/kanko_toyama.html#comments</comments>
		<pubDate>Mon, 07 Jun 2010 15:49:27 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Customize]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[MovableType]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1387</guid>
		<description><![CDATA[
富山市の観光活性化を目的とするNPO法人「富山観光創造会議」様のサイトを制作しました。
http://kankou-toyama.com/

ベースはMovableType5のオープンソース版で、新着情報のみ管理してい [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.webbingstudio.com/uploads/2010/06/kankotoyama_l.jpg"><img class="alignleft size-medium wp-image-1388" title="kankotoyama_l" src="http://blog.webbingstudio.com/uploads/2010/06/kankotoyama_l-200x150.jpg" alt="" width="200" height="150" /></a></p>
<p>富山市の観光活性化を目的とするNPO法人「富山観光創造会議」様のサイトを制作しました。</p>
<p><a class="blank" href="http://kankou-toyama.com/">http://kankou-toyama.com/</a></p>
<div class="clear"></div>
<p>ベースはMovableType5のオープンソース版で、新着情報のみ管理しています。<br />
CMS構築のお仕事では最もシンプルなタイプです。</p>
<p>サイト自体を立ち上げたのは一年前ですが、デザインリリューアル・CMS埋め込みを機に実績に追加させていただきました。</p>
<p><span id="more-1387"></span></p>
<p><a href="http://blog.webbingstudio.com/uploads/2010/06/100608-0001.jpg"><img class="alignleft size-medium wp-image-1389" title="100608-0001" src="http://blog.webbingstudio.com/uploads/2010/06/100608-0001-200x137.jpg" alt="" width="200" height="137" /></a></p>
<p>このサイトの新着情報には、三種類のリンクがあります。</p>
<div class="clear"></div>
<ul>
<li>個別記事へのリンク</li>
<li>PDF資料へのリンク（PDFアイコン付）</li>
<li>外部サイトへのリンク（別窓アイコン付）</li>
</ul>
<p>一見するとカスタムフィールドやタグで分岐をさせているように見えますが、特にイレギュラーな細工はしていません。<br />
「本文」と「追記」を以下のように使い分けることで、三種類のリンクを作れるようにしています。</p>
<ol>
<li>本文がなく、追記に記述がある<br />
→追記の内容をhref属性にした外部リンク</li>
<li>記事にPDFがアップされていて、かつ本文の文字数が非常に少ない<br />
→PDFリンク</li>
<li>上記二点に当てはまらない<br />
→個別記事へのリンク</li>
</ol>
<hr />
<p>団体のサイトは活動報告の配信だけでなく、運営上<strong>報告自体を記録／保管すること</strong>も重要な目的になります。<br />
観光創造会議様の場合は、ほとんどの書面がPDFで発行されています。</p>
<p>以前はHTMLの知識がある更新担当者様に「PDFをFTPクライアントでアップロード」→「HTML直書きでリンク追加」という作業をしてもらっていたのですが、MovableTypeOSを組み込んだことで更新頻度が増え、マークアップの間違いも出なくなりました。</p>
<p>単純に一覧／個別記事で構成されたサイトを作るだけでなく、利用する人の状況に合ったオーダーメイドのCMS構築を心がけたいと思います。</p>

<a href="http://twitter.com/?status=RT+%40%3A+works%3ANPO%E6%B3%95%E4%BA%BA+%E5%AF%8C%E5%B1%B1%E8%A6%B3%E5%85%89%E5%89%B5%E9%80%A0%E4%BC%9A%E8%AD%B0+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2F275c442&amp;in_reply_to_status_id=15638093708" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2010/06/kanko_toyama.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>新しい名刺と新しい肩書き</title>
		<link>http://blog.webbingstudio.com/2009/11/namecard0911.html</link>
		<comments>http://blog.webbingstudio.com/2009/11/namecard0911.html#comments</comments>
		<pubDate>Wed, 25 Nov 2009 06:04:03 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Life]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[a-blog cms]]></category>
		<category><![CDATA[business]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1217</guid>
		<description><![CDATA[
住所など変わったので、新しい名刺を発注することにしました。
8月に発注した名刺が90枚近く余ってしまいました。どんまい私。
肩書きが、２つ増えています。
「カスタマイズアドバイザー」「a-blog cmsビジネスパート [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://blog.webbingstudio.com/uploads/2009/11/namecard0911.jpg" alt="namecard0911" title="namecard0911" width="480" height="289" class="alignnone size-full wp-image-1223" /></p>
<p>住所など変わったので、新しい名刺を発注することにしました。<br />
8月に発注した名刺が90枚近く余ってしまいました。どんまい私。</p>
<p>肩書きが、２つ増えています。</p>
<p>「カスタマイズアドバイザー」「a-blog cmsビジネスパートナー」。</p>
<p>a-blog cmsの方はそのまんまです。正式登録したら改めて記事を書きますね。<br />
今回は、<strong>カスタマイズアドバイザーってなんやねん</strong>という突っ込みの話です。</p>
<p><span id="more-1217"></span></p>
<p>今回、ふとこれまでの名刺を見返して、調子に乗っているような気がしてこれまで避けてきた「カスタマイズ専門業としての独自の肩書き」を、名刺やメールフッターに敢えて載せようと決めました。</p>
<p>FC2ブログでCMS的なテンプレートの配布を始めた頃から、私は「カスタマイズ職人」を標榜していました。<br />
それは私の屋号「WebbingStudio≒思考する工房」から来るもので、性格的にも職人がふさわしかったのです。</p>
<p>私が意識していた「カスタマイズ職人」を英語にすると「Customize Artisan（カスタマイズアルティザン）」になります。<br />
響きはかっこいいですがなんだか解りませんし、Artisanには「芸術性の少ない職人」という否定的な表現もあります。<br />
何か違う表現はないかと考え直しました。</p>
<p>趣味を仕事にするようになり、協業先からMovableType・WordPressに関する技術的なご相談を請けることが多くなりました。<br />
「○○のときだけ△△をすることはできますか？」<br />
「MovableTypeでこんなの作ったらどのくらい手数かかります？」<br />
「特に理由もなくWordPressを希望されてるんだけど、いいのでしょうか」<br />
といったものです。</p>
<p>実際に私に発注が来ることもありますが、私の話を元に内製になったり、フルスクラッチCMSで作られた案件もあったりします。<br />
ちょっと凹みますが制作会社だって話聞き出すのもビジネスの一環ですし、検証してお返事をすることで、私はカスタマイズのtipsを増やしてきました。<br />
TwitterのタイムラインでMTやWPで詰まっている人にReplyを返すことも多くなりました。</p>
<p>アドバイスをすること。<br />
それはお取引先と向き合うことであり、職人より開放的な印象があります。</p>
<p>そんなわけで「カスタマイズアドバイザー」としました。<br />
名前負けしないようにこれからも勉強しなくちゃ、ですね。</p>

<a href="http://twitter.com/?status=RT+%40%3A+%E6%96%B0%E3%81%97%E3%81%84%E5%90%8D%E5%88%BA%E3%81%A8%E6%96%B0%E3%81%97%E3%81%84%E8%82%A9%E6%9B%B8%E3%81%8D+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fyfuqdw7" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/11/namecard0911.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WEBの仕事を続けたい</title>
		<link>http://blog.webbingstudio.com/2009/11/vision.html</link>
		<comments>http://blog.webbingstudio.com/2009/11/vision.html#comments</comments>
		<pubDate>Sat, 21 Nov 2009 17:33:56 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Think]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[mental]]></category>
		<category><![CDATA[SOHO]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1214</guid>
		<description><![CDATA[本サイトに続いて、ウェビンブログもデザインをリニューアルしました。
こちらはWordPressをカスタマイズしています。元は「Sandbox」でしたが、手を入れまくって既に原形をとどめなくなっていますw
お仕事などでいろ [...]]]></description>
			<content:encoded><![CDATA[<p>本サイトに続いて、ウェビンブログもデザインをリニューアルしました。<br />
こちらはWordPressをカスタマイズしています。元は「Sandbox」でしたが、手を入れまくって既に原形をとどめなくなっていますw</p>
<p>お仕事などでいろいろなデザインのサイトを手がけてきて、私がWEBデザイナーとしていちばん好きなのは、「<strong>凛とした</strong>」サイトです。</p>
<p>一定のデザイン性を持ち、かと言って文字がちっちゃかったり薄かったり、ごてごてしていない、きりっとしたサイト。それは一般の人には「かっこいい」と思われないでしょうが、自分のサイトは今後もそういう「わかる人にはわかってもらえる」傾向で作っていきたいです。</p>
<p>体調を崩し、思うようにお仕事ができなくなって二ヶ月経ちました。<br />
だいぶ復調してきて、改めて<br />
「もっとWEB制作の仕事をしたい、続けていきたい」<br />
と感じます。</p>
<p><span id="more-1214"></span></p>
<p><a href="http://1pac.jp/" class="blank">ワンパク(SOY CMS)</a>や<a href="http://junior.co.jp/" class="blank">JUNIOR(a-blog cms)</a>のような、デザイン性を落とさず完璧にカスタマイズされたサイトをみるとゾクゾクします。</p>
<p>Googleで「札幌 ホームページ」とか「札幌 MovableType」とかで検索して、ずららっと出てくる名のある制作会社・フリーランサーを見ると、自分もこうなりたい！と思います。</p>
<p>それは無謀かもしれません。<br />
私は元々、スキルが偏った変わり者です。一般のコーダーが進む道、ディレクション・マーケティングの能力がないことはわかっています。<br />
ディレクターに進めないとなると、これまでのデザイン・コーディング・カスタマイズに加えて、プログラミング・SEO・インフォメーションアーキテクトといった、制作を補助するスキル全般が必要になるでしょう。</p>
<p>個人の力だけではお仕事を続けていくのは難しいので、制作会社とのコネクション・チーム制作の経験ももっと積まなければと思います。</p>
<p>それでも、厳しい札幌のWEB業界で、一年半フリーでやってこられました。</p>
<p>WEB制作の講師業も、最初に<a href="http://www.yuriwaka.net/" class="blank">百合若先生</a>に話をいただいたとき「無理だ」と思いましたが、週一回、数人の生徒が相手とはいえ、どうにかこなしています。</p>
<p>多くの方に力を貸していただいたとはいえ、それは確かに私が達成できたことです。</p>
<blockquote><p>
以前、ぼくは、この言葉を一種の根性論として理解していた。勝負が見えていてもとにかくあきらめずさいごまで全力を尽くせ、という意味だ、と。</p>
<p>　しかし、最近ではもうすこし違う意味に解釈している。ひとは、じっさいには可能なことでも、不可能だと思い込んでしまうことがある。そしてそう認識したとたん、本当に不可能になるのだ、ということ。</p>
<p><a href="http://d.hatena.ne.jp/kaien/20091120/p1" class="blank">「あきらめたらそこで試合終了ですよ」という言葉の意味。 &#8211; Something Orange</a>
</p></blockquote>
<p>もう少しで試合に復帰できると思います。<br />
コートに戻ってきたら、皆様、またパスをください。</p>

<a href="http://twitter.com/?status=RT+%40%3A+WEB%E3%81%AE%E4%BB%95%E4%BA%8B%E3%82%92%E7%B6%9A%E3%81%91%E3%81%9F%E3%81%84+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fylx5nsu" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/11/vision.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>works:WebbingStudio(a-blog cms)</title>
		<link>http://blog.webbingstudio.com/2009/11/works_webbingstudio0911.html</link>
		<comments>http://blog.webbingstudio.com/2009/11/works_webbingstudio0911.html#comments</comments>
		<pubDate>Fri, 13 Nov 2009 06:54:42 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[a-blog cms]]></category>
		<category><![CDATA[illustration]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1195</guid>
		<description><![CDATA[
WebbingStudioのメインサイトを、MovableType4からa-blog cmsにベースを変えてリニューアルしました。
商用ブログ ホームページ作成 CMSデザイン 札幌のWebデザイナー &#124; Webbin [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.webbingstudio.com/uploads/2009/11/webbingstudio0911.jpg"><img src="http://blog.webbingstudio.com/uploads/2009/11/webbingstudio0911-480x322.jpg" alt="webbingstudio0911" title="webbingstudio0911" width="480" height="322" class="alignnone size-large wp-image-1197" /></a></p>
<p>WebbingStudioのメインサイトを、MovableType4から<a href="http://www.a-blogcms.jp/" class="blank">a-blog cms</a>にベースを変えてリニューアルしました。</p>
<p><a href="http://webbingstudio.com/" class="blank">商用ブログ ホームページ作成 CMSデザイン 札幌のWebデザイナー | WebbingStudio</a></p>
<p>a-blog cmsは、Dreamweaverを使ってスムーズな構築ができるのと、管理画面とカスタムフィールドを一括してカスタマイズできる点に惹かれて選びました。<br />
既存のテーマファイルは流用せず、いったん静的コンテンツで作成してからCMS化する、実務的な手順で構築しています。</p>
<p>今後、a-blog cmsのデモサイトとして、カスタマイズした投稿画面、テーマファイル内のコード・モジュール設定の公開などを行っていく予定です。<br />
もちろん私自身もまだわからないことが多いので完璧な内容ではないですが、a-blog cmsを勉強中の方の参考になれば幸いです。</p>
<p>追記以降はデザインの話など。</p>
<p><span id="more-1195"></span></p>
<p>6月頃に、「これまでの自分がやらなかったデザインに挑戦してみよう」と思ってデザインをリニューアルしたものの、やっぱりそれは本来の私のテイストではないわけで、納得が行きませんでした。<br />
なので今回は、素材配布やFC2の共有テンプレートを作っていた頃の原点に戻り、ベクターグラフィックを多用し、背景素材・イラスト以外を全てモノクロでまとめた、シンプルなサイトにしました。</p>
<p>また、画風が固まってきたのでイラストの案件も受けられるようにと、サイト内にイラストを多用しました。<br />
これまできちんと公開してこなかった自分の顔も、イラストでかなり近いものを載せています。</p>
<p>背景画像はコンテンツごとに異なっているのですが、一部はFC2の共有テンプレートで配布していた素材をリメイクしたものです。</p>
<ul>
<li>About　・・・　<a href="http://webbingstudio.blog10.fc2.com/?template=beads_1&#038;index" class="blank">beads</a></li>
<li>Work　・・・　<a href="http://webbingstudio.blog10.fc2.com/?template=lace_1&#038;index" class="blank">lace</a></li>
<li>Information　・・・　<a href="http://webbingstudio.blog10.fc2.com/?template=cycle&#038;index" class="blank">cycle</a></li>
</ul>
<p><a href="http://blog.webbingstudio.com/uploads/2009/11/info_header.jpg"><img src="http://blog.webbingstudio.com/uploads/2009/11/info_header-480x85.jpg" alt="info_header" title="info_header" width="480" height="85" class="alignnone size-large wp-image-1196" /></a></p>
<p>Informationの背景画像(cycle)は、他のコンテンツと雰囲気が異なっています。<br />
子供っぽさを感じる方もいるかもしれません。</p>
<p>これは私が好きな北海道の<a href="http://ja.wikipedia.org/wiki/%E3%83%9E%E3%82%B8%E3%83%83%E3%82%AF%E3%82%A2%E3%83%AF%E3%83%BC_%28%E5%86%99%E7%9C%9F%29" class="blank">マジックアワー</a>をイメージして描いたもので、趣味でサイトを運営していたころから繰り返しリメイクしています。<br />
思い入れの強いモチーフなので、敢えて加えました。</p>
<p>最後に、このブログを見に来ている方は気付かなかったと思いますが、IE6非対応となりました。<br />
暇な方はIE6でアクセスしてみてください。閲覧はできますが専用のメッセージが出てひどいことになります。<br />
どこに透過PNGを使用しているかわかって面白いかもです。</p>
<p>最近は、IE7以降へアップグレードする人も増えてきました。<br />
私のメインクライアントは<strong>「制作会社」か「ネットリテラシーの高い個人」</strong>なので、自分のサイトでは切り捨てる決断をしました。<br />
もちろんお仕事では忌々しいと思いつつも、もうしばらく対応していきますけどね…</p>
<hr />
<p>相変わらず長い記事を、ここまで読んでいただいた方、ありがとうございます v_v<br />
これからも少しずつ、WEB制作者として精進していきたいと思います。</p>

<a href="http://twitter.com/?status=RT+%40%3A+works%3AWebbingStudio%28a-blog+cms%29+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fyarvr5f" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/11/works_webbingstudio0911.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>works:家事代行 エルパセオ(FC2ブログ)</title>
		<link>http://blog.webbingstudio.com/2009/10/elpaseo.html</link>
		<comments>http://blog.webbingstudio.com/2009/10/elpaseo.html#comments</comments>
		<pubDate>Thu, 15 Oct 2009 17:43:35 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Customize]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[FC2]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1145</guid>
		<description><![CDATA[
千葉県の家事代行業、エルパセオ様の業務案内ブログをウェブサイト風にリニューアルしました。
久しぶりのFC2ブログのカスタマイズです。
http://elpaseo.blog68.fc2.com/

きちんとした展開をし [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.webbingstudio.com/uploads/2009/10/elpaseo_l.jpg"><img src="http://blog.webbingstudio.com/uploads/2009/10/elpaseo_l-200x150.jpg" alt="elpaseo_l" title="elpaseo_l" width="200" height="150" class="alignleft size-medium wp-image-1146" /></a></p>
<p>千葉県の家事代行業、エルパセオ様の業務案内ブログをウェブサイト風にリニューアルしました。<br />
久しぶりのFC2ブログのカスタマイズです。</p>
<p><a href="http://elpaseo.blog68.fc2.com/" class="blank">http://elpaseo.blog68.fc2.com/</a></p>
<div class="clear"></div>
<p>きちんとした展開をしている業者様の場合、独自ドメイン＋CMS構築が理想ではあります。<br />
ですが今回の場合は長期間に渡って書かれている整理されたコンテンツがあり、また検索サイトでも高い順位を得られているということだったので、ブログの見た目を変えてしまう方向で進めさせていただきました。</p>
<p><span id="more-1145"></span></p>
<p>FC2ブログやWordPressなどの、純粋なブログをCMSとして構築するとき、私がいちばん気を配るのが<br />
「<strong>あとでお客様が改修できる箇所をどう確保するか</strong>」<br />
という点です。</p>
<p>例えばグローバルナビやトップページの導入文は、HTML直書きしてしまった方が作業は早いです。<br />
ですが、業務内容やキーワードの重み付け変更などでの改修というのは意外に多く、そのたびに制作元にいちいち直してもらっていたのでは、CMS的でないばかりかブログよりも不便になってしまいます。<br />
（その修正費用で利益を得るビジネスというのも…げふんげふん）</p>
<p>かといって、何からなにまで変更可能にするとテンプレートに無理がかかり、制作側が後日改修をお願いされた時に見通しが利かなくなります。<br />
ブログサービスの仕様変更・システムのバージョンアップで動作しなくなる個所が出るかもしれませんし、お客様自身も覚えることが多くなりすぎて結局使いこなせません。<br />
実際、そういう苦い経験を何度もしてます…　（＾＿＾；</p>
<p>そんなことなどを考えつつ、テンプレートを構成していきます。</p>
<p>最終的に、エルパセオ様の場合は、以前共有テンプレートで配っていた「website」シリーズをベースに、改修可能な個所を以下のようにしました。</p>
<ul>
<li>ページの上にあるサイト概要　・・・　ブログ説明文</li>
<li>トップページメイン画像下のリード文　・・・　プラグイン３</li>
<li>左メニューグローバルナビ　・・・　カテゴリーリスト</li>
<li>左メニュー連絡先　・・・　プラグイン１</li>
<li>トップページ以外記事の下　・・・　プラグイン２</li>
</ul>
<p>エルパセオ様はFC2ブログを使いこなされているので、３つのプラグインをフル活用しています。</p>
<hr />
<p>もう一点、デザインも今回は「ターゲット層」を意識しました。</p>
<p>家事代行を頼むお客様というと、やっぱり30代以上の女性です。<br />
<a href="http://elpaseo.blog68.fc2.com/blog-category-11.html" class="blank">お客様の声</a>でもあるように、共働きで手が回らない部分とか、年を取ったお母様のために依頼したりするようです。</p>
<p>「家事を人に頼む」というのは、事情があってもやっぱり気後れとかがあるはずです。<br />
配色のご要望はだいたいいただいていたので、心が落ち着くサイトになるよう、デザイン枠の角を丸めたり、ほっこりした書体を選択したり、グローバルナビのアイコンカラーを色相順にしたりなどしてみました。<br />
私の好みが出てしまった感もありますが…w<br />
メインの家族写真も、左右対象の安定したレイアウトのものを選んでいます。</p>
<p>最近は非公開案件などで、クールなデザインを手がけることも多くなりましたが<br />
やっぱり私のキャラクターは、ベクターグラフィック＋ほんわか系だなあ、などと再認識したお仕事でした。</p>

<a href="http://twitter.com/?status=RT+%40%3A+works%3A%E5%AE%B6%E4%BA%8B%E4%BB%A3%E8%A1%8C+%E3%82%A8%E3%83%AB%E3%83%91%E3%82%BB%E3%82%AA%28FC2%E3%83%96%E3%83%AD%E3%82%B0%29+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fylakuh5" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/10/elpaseo.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>個人利用フリーになったa-blog cmsは、現場にじわじわ効いてくる</title>
		<link>http://blog.webbingstudio.com/2009/10/ablogcms_free.html</link>
		<comments>http://blog.webbingstudio.com/2009/10/ablogcms_free.html#comments</comments>
		<pubDate>Sun, 11 Oct 2009 11:08:04 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[CMS]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[a-blog cms]]></category>
		<category><![CDATA[Dreamweaver]]></category>
		<category><![CDATA[money]]></category>
		<category><![CDATA[これはいい]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1129</guid>
		<description><![CDATA[
個人の非商用に限り、a-blog cms は無料でご利用頂ける事になりました &#124; a-blog cms
これまで30日間限定の試用までしかできなかったa-blog cmsが、個人非商用であれば自由にダウンロード・利用で [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.a-blogcms.jp/news/openOneLicense.html"><img src="http://blog.webbingstudio.com/uploads/2009/10/ablogcms_one1.jpg" alt="ablogcms_one" title="ablogcms_one" width="480" height="350" class="alignnone size-full wp-image-1139" /></a></p>
<p><a href="http://www.a-blogcms.jp/news/openOneLicense.html" class="blank">個人の非商用に限り、a-blog cms は無料でご利用頂ける事になりました | a-blog cms</a></p>
<p>これまで30日間限定の試用までしかできなかったa-blog cmsが、個人非商用であれば自由にダウンロード・利用できるようになりました。<br />
評判がいいらしいけど、忙しくて30日じゃ検証しきれない…と思っていた方、とりあえず趣味で使ってみたいんですが、という方は是非お試しを。</p>
<p>ちなみに私は、30日間の試用期間ではほとんどいじれなくて結局ライセンス取っちゃいましたwちきしょうめwww</p>
<p>今回のアップルップルさんの英断を、私は金銭面とは違うところでとても期待しています。<br />
私が把握している範囲では、a-blog cmsというのは「<strong>じわじわ良さがわかってくる</strong>」CMSであるからです。</p>
<p><span id="more-1129"></span></p>
<p>a-blog cmsは「Web制作者のためのCMS」と銘打たれています。<br />
特にアピールされているテンプレート仕様や、投稿画面もカスタマイズできる点などを見ると、なるほどと思います。</p>
<p>ですが、スキルがあればなんでもありになりつつあるMovableTypeやWordPress、やたら構築方法がわかりやすいSOY CMSと比べると、「何がどういいのか」をなかなか一言で説明できない面があります。</p>
<p>その「じわじわくる良さ」の例をひとつ。</p>
<p>二人以上のチームを組んでお仕事をしている制作会社は多いと思います。<br />
大規模なCMS構築の場合、制作を始める段階でテンプレートの構成等をきちんと書類化して、擦り合わせをしてから始めるのですが、諸々の事情で、かなりの確率で途中変更が入ります。</p>
<p>そのひとつ、<br />
「特定のカテゴリーの記事を書いたときだけHTMLの構造を変えたい」<br />
という話になり、その構造を変える範囲が広い場合。</p>
<p>CMSがMovable Typeの場合で、ディレクターがコーダーにどう指示を出すかを考えてみました。</p>
<p><img src="http://blog.webbingstudio.com/uploads/2009/10/mt_shiji.jpg" alt="個別エントリーのテンプレートに条件分岐追加して、○○のカテゴリーのとき、構成が変わるようにして。ソースが長くなりそうだったらモジュール化して。できたら再構築かけて、画像とか、ちゃんとつながってるかチェックしてね。" width="480" height="369" class="alignnone size-full wp-image-1131" /></p>
<p>意味がわかんねえよという人すみません…<br />
MovableTypeは専門用語多いんで…＠＠；</p>
<p>これが、a-blog cmsだった場合、たぶんこうなります。</p>
<p><img src="http://blog.webbingstudio.com/uploads/2009/10/ablog_shiji.jpg" alt="「aaa.html」を元にして、同じ階層に構成の違う「bbb.html」を作って。独自タグはaaa.htmlに書いてあるの参考にしてね。putしたら教えてくれる？" width="480" height="340" class="alignnone size-full wp-image-1132" /></p>
<p>どこが違っているかわかるでしょうか。</p>
<p>まず「条件分岐」について全く触れていません。<br />
a-blog cmsには「<strong>ルール</strong>」という機能があり、特定の条件下で表示するテンプレートを、管理画面側でごっそり変えてしまえるのです。<br />
（もちろん、変わる箇所が少ない場合は他のCMSと同様のテンプレート内条件分岐が使えます）<br />
なので、コーダーにテンプレートさえアップしてもらえば、あとはディレクターが管理画面に入って<br />
「カテゴリーが○○のとき」「bbb.htmlをテンプレートに使用する」<br />
という設定を追加するだけなのです。</p>
<p>もう一点が<br />
「画像のリンク切れについて触れていない」のと<br />
「<strong>putして</strong>と指示している」ことです。</p>
<p>Dreamweaverでは、FTP等を使ってサーバーにファイルをアップすることを「PUT」と呼びます（コマンドラインと同じですね）。</p>
<p>「PUT」は、<a href="http://blog.webbingstudio.com/2009/08/soycms_example.html">SOY CMSのカスタマイズ解説</a>のときにも触れましたが、サーバーとローカルの構造を同じに保ったままファイルをアップします。<br />
なので、実際のサイトルートとは違う箇所にテンプレートをアップしなければならない一般のCMSでは「PUT」を使うことができません。<br />
テンプレートができたらドラッグか他のFTPソフトでアップして画像やリンクが切れてないかチェック…となるわけです。</p>
<p>ですが、a-blog cmsはいろいろなところで紹介されている通り、画像やJavaScriptも含め、全てのサイト構造を崩さないままテンプレート化できます。<br />
なので、Dreamweaverのサイト設定時に<br />
「<strong>サイトのルート＝a-blog cmsのテンプレートを置くディレクトリ</strong>」<br />
とすれば、あとは画像のチェックもほとんど必要なく、更新しては保存→PUT（自動化してもいいかもしれないです）でサクサク進められるのです。</p>
<p>私のようにひとりで作業するのであれば、自分の中でワークフローが確定していればいい訳ですが、多人数の場合は意思の疎通が大変です。<br />
それを大幅に軽減できる可能性があるというのが、a-blog cmsのすごいところであり、なかなか他の人に説明しようとしたとき、わかってもらえないところです。</p>
<p>とにかく皆さん、なんか作ってみてください。<br />
放置サイトがあるなら、それを動的化してみるだけでもいいと思います。</p>
<p>「<a href="http://junnama.alfasado.net/online/2009/07/mt_11.html">もう、MTでいいじゃん</a>」というjunnamaさんの名言があります。<br />
まあそれも確かに正論ですが、<br />
「これでいいのか？」<br />
「もっと良い作業の進め方があるのでは？」<br />
「この案件には別のCMSの方が良くね？」<br />
と考える機会を持つことが、この流れの速い業界では必要なことと思います。<br />
いいじゃんなどと言っていいのは、junnamaさんのようにそのCMSにどっぷり浸かる覚悟がある人だけです。</p>
<hr />
<p><img src="http://blog.webbingstudio.com/uploads/2009/10/ablog_manual.jpg" alt="ablog_manual" title="ablog_manual" width="480" height="268" class="alignnone size-full wp-image-1133" /></p>
<p>a-blog cmsは、「用語の統一」が徹底している点も評価できると思います。<br />
<a href="http://www.a-blogcms.jp/support/manual/" class="blank">マニュアルインデックス</a>を見ると、ほとんどの主要な独自タグにタグ名と口語名が併記されています。</p>
<p>CMSの細かいところについて、人にメールや口頭で説明するのはなかなか難しいものです。<br />
こういった地味でも重要なポイントが、今回のoneライセンス自由化でもっと評価されてほしいと思います。</p>

<a href="http://twitter.com/?status=RT+%40%3A+%E5%80%8B%E4%BA%BA%E5%88%A9%E7%94%A8%E3%83%95%E3%83%AA%E3%83%BC%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9Fa-blog+cms%E3%81%AF%E3%80%81%E7%8F%BE%E5%A0%B4%E3%81%AB%E3%81%98%E3%82%8F%E3%81%98%E3%82%8F%E5%8A%B9%E3%81%84%E3%81%A6%E3%81%8F%E3%82%8B+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fylmqddg" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/10/ablogcms_free.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>works:合同会社AQUASYS(テンプレートエンジン)</title>
		<link>http://blog.webbingstudio.com/2009/08/aquasys.html</link>
		<comments>http://blog.webbingstudio.com/2009/08/aquasys.html#comments</comments>
		<pubDate>Sun, 30 Aug 2009 02:16:03 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Work]]></category>
		<category><![CDATA[business]]></category>
		<category><![CDATA[presentation]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[Python]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1044</guid>
		<description><![CDATA[
沖縄県でSaaS型のWEBサービスを展開されている、AQUASYS（アクアシス）様のウェブサイトリニューアルを行いました。
所属のプログラマ様との共同制作で、デザイン・コーディング・サイト構成の改編を担当しています。
 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.aquasys.co.jp/"><img src="http://blog.webbingstudio.com/uploads/2009/08/aquasys.jpg" alt="aquasys" title="aquasys" width="200" height="115" class="alignleft size-full wp-image-1052" /></a></p>
<p>沖縄県でSaaS型のWEBサービスを展開されている、AQUASYS（アクアシス）様のウェブサイトリニューアルを行いました。<br />
所属のプログラマ様との共同制作で、デザイン・コーディング・サイト構成の改編を担当しています。</p>
<p><a href="http://www.aquasys.co.jp/" class="blank">http://www.aquasys.co.jp/</a></p>
<div class="clear"></div>
<p><span id="more-1044"></span></p>
<p>この案件は、制作前のプレゼンテーション（ユルいものではありましたが）を求められました。<br />
そこで社内の方に特に言ったのが、「<strong>現状のサイトは不安を煽る</strong>」という点でした。</p>
<p><img src="http://blog.webbingstudio.com/uploads/2009/08/aquasys_2.jpg" alt="aquasys_2" title="aquasys_2" width="200" height="259" class="alignleft size-full wp-image-1046" /></p>
<p>前のデザインは（外注したらしいです）一見無難なのですが、コンテンツに行き止まりがあったり、サービスについて概要しか書いていなかったり、欧米圏独特の強い言い回し（AQUASYSの代表は外国の方）が残ったままだったからです。</p>
<p>IT企業というのは実体のないものを扱っているので、ちょっとした不安が「契約しない」という選択につながってしまいます。</p>
<p>とにかく、一般の人には理解しにくい「SaaS」や「CRM（顧客管理システム）」を、障害なく伝えられるかを、プログラマさんから会社としてのデザインの希望や、社内の営業計画を聞きながら制作していきました。<br />
自分でもできるだけ、SaaSやCRMについて予習したつもりです。</p>
<div class="clear"></div>
<p><img src="http://blog.webbingstudio.com/uploads/2009/08/aquasys_1.jpg" alt="aquasys_1" title="aquasys_1" width="480" height="244" class="alignnone size-full wp-image-1045" /></p>
<p>制作時に、ディレクションを担当したプログラマさんに、以下のような要望を出されました。</p>
<ul>
<li>サイトの共通部分の管理に「Genshi」を使いたい</li>
<li>Subversionでのバージョン管理に協力してほしい（TortoiseSVN）</li>
</ul>
<p><img src="http://blog.webbingstudio.com/uploads/2009/08/python.jpg" alt="python" title="python" width="194" height="67" class="alignleft size-full wp-image-1050" /></p>
<p>「<a href="http://genshi.edgewall.org/" class="blank">Genshi</a>」はPythonのテンプレートエンジンです。基本的には<a href="http://www.soycms.net/" class="blank">SOYCMS</a>に似た、HTML内に属性値を書き込み内容を置換する形式で動作します。<br />
実際の組み込みはプログラマさんに行っていただきましたが、独自タグの位置・ページ毎のHTMLの指定方法など、都度指示をもらいながらコーディングをしました。</p>
<p>また、Dreamweaverに入っているSubversionでは機能にまだまだ不備があって管理しにくい、ということだったので、<a href="http://sourceforge.jp/magazine/08/08/29/0550232" class="blank">TortoiseSVN</a>を利用しました。</p>
<p>正直、これまではSubversionのメリットがわからなかったのですが、丁寧に使いかたを説明してもらって導入してみると、プログラマさんといちいち連絡を取らなくても作業を進められるし、バックアップ・復元も簡単にできるので良かったです。</p>
<hr />
<p>今回の案件で、初めて本格的なプログラマさんとお仕事をしました。<br />
<a href="http://blog.webbingstudio.com/2009/08/webcon090828.html" title="WEBデザイナーとプログラマの関係改善を考えてみる">前の記事</a>でも書いたことですが、デザイナーとプログラマの共同作業でいちばん大切なのは、綿密なコミュニケーションだと痛感しました。</p>
<p>お互いの作業に関する要望を出し、どちらかが譲歩することになった場合、譲歩してもらう側は具体的な説明をする。<br />
デザインの反映に関してはプログラマ、作業環境に関してはデザイナーの譲歩が多くなるのですが、ここで説明が足りないともやもやしたまま進んでしまうので、納得のいかないお仕事になってしまうのではないかと思います。<br />
とにかくSkypeチャットは必須ですね。</p>
<p>いつもと違い勉強することがたくさんありましたが、得るものもたくさんありました。</p>

<a href="http://twitter.com/?status=RT+%40%3A+works%3A%E5%90%88%E5%90%8C%E4%BC%9A%E7%A4%BEAQUASYS%28%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3%29+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fmoq4kb" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/08/aquasys.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WEBデザイナーとプログラマの関係改善を考えてみる</title>
		<link>http://blog.webbingstudio.com/2009/08/webcon090828.html</link>
		<comments>http://blog.webbingstudio.com/2009/08/webcon090828.html#comments</comments>
		<pubDate>Fri, 28 Aug 2009 19:15:07 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Think]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[business]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[勉強会]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=1032</guid>
		<description><![CDATA[北海道WEBコンソーシアムの定例会に行ってきました。
北海道WEBコンソーシアム定例会「デザイナー・プログラマーの連携のベストプラクティス」
WEBデザイナーは、WEBサービスやCMS等の制作で、プログラマと協業すること [...]]]></description>
			<content:encoded><![CDATA[<p>北海道WEBコンソーシアムの定例会に行ってきました。</p>
<p><a href="http://hwcon.org/archives/96" class="blank">北海道WEBコンソーシアム定例会「デザイナー・プログラマーの連携のベストプラクティス」</a></p>
<p>WEBデザイナーは、WEBサービスやCMS等の制作で、プログラマと協業することが多くなっています。 <br />
私はまだプログラマさんとの協業経験は少ないですが、かなりの確率でトラブルが起こって、ひどいときは業務に影響するようです。<br />
何故そんなことになってしまうのでしょうか。</p>
<p>今月のWEBコン定例会は<a href="http://www.local.gr.jp/" class="blank">Local</a>の<a href="http://groups.google.co.jp/group/local-php" class="blank">PHP部</a>と共同開催という形で、“デザイナーとプログラマの双方の不満から、それを解決するためにはどのようなことをしたらいいのかを導き出すセミナー及びディスカッション”が行われました。</p>
<p><span id="more-1032"></span></p>
<p>セミナーでは、デザイナー側の長谷川さん（<a href="http://twitter.com/h2ham" class="blank">@h2ham</a>）、プログラマ側の松井さん（<a href="http://twitter.com/ketaiorg" class="blank">@ketaiorg</a>）がそれぞれ</p>
<ol>
<li>協業で困ったこと</li>
<li>自分の業種側が歩み寄るべき点</li>
<li>相手の業種側に希望する点</li>
</ol>
<p>を挙げていきました。</p>
<p>…のですが、打ち合わせをしたわけでもないのに、お互いの内容がほぼ一致する結果になりました。<br />
  表にしてみます。 </p>
<table class="table1">
<tr>
<th width="20%">&nbsp;</th>
<th width="40%">デザイナー（長谷川）</th>
<th width="40%">プログラマ（松井）</th>
</tr>
<tr>
<th>自分の業種側が歩み寄るべき点</th>
<td>
<ul>
<li>プログラミングの基礎の一部でも覚える</li>
<li>抽象的な表現をしない、どのように動作させたいなど具体的に</li>
<li>localhost、Subversionなど効率の良い作業環境を少しは整備する</li>
<li>CMSの基本カスタマイズ、JavaScript(jQuery)など身に付ける<br />
      ＝今後必須のスキルとなっていく</li>
<li>便利なことは覚えるのが大変だが極力取り入れる</li>
</ul>
</td>
<td>
<ul>
<li>技術至上主義</li>
<li>日本語を話さない（無駄に技術用語を使う）</li>
<li>コミュニケーション能力の不足＝空気読めない</li>
<li>自己中心的</li>
</ul>
<p>なので</p>
<ul>
<li>会話しよう、コミュニケーションしよう</li>
<li>技術用語は控える、言いかえる</li>
<li>自己中心的な設計は避ける</li>
<li>フォルダ構造やファイル名はしっかり相談して決める</li>
<li>納品後、長期間メンテするのはデザイナー側が多いことを理解する</li>
</ul>
</td>
</tr>
<tr>
<th>相手の業種側に希望する点</th>
<td>
<ul>
<li>コミュニケーションをしてほしい<br />
      Skypeでの重要な連絡を「どう返事していいかわからなかったから」という理由で無視されたことがある
    </li>
<li>社内用のドキュメントを用意してほしい</li>
<li>ソースにコメントを入れる等してほしい</li>
<li>フォルダの階層・場所はわかりやすくしてほしい</li>
<li>設計等でユーザー側の視点を持ってほしい</li>
</ul>
</td>
<td>
<ul>
<li>「楽する努力」をしっかりしてほしい<br />
      ページ内パーツを共通化しないなど、それ全部手で直すの？なことをする</li>
<li>FTPをいちいち手でアップとか辛くないの？<br />
（localhost・サーバー同期など作業環境の整備）      </li>
<li>PHP・Smartyの構文は壊さないでほしい</li>
<li>テンプレートの条件分岐くらいは覚えてほしい</li>
<li>JavaScriptはある程度でいいので覚えてほしい<br />
（jQueryは完全にデザイナーの領域）</li>
<li>ユーザーインターフェースについての意見がほしい</li>
</ul>
</td>
</tr>
<tr>
<th>お互いが努力すべき点</th>
<td>
<ul>
<li>どちらもユーザー視点を忘れずに</li>
<li>双方ともコミュニケーションをしっかり取れるようにする</li>
<li>納品後の管理についても考慮する</li>
<li>仕様を定める</li>
<li>めんどうくさがらない</li>
</ul>
</td>
<td>
<ul>
<li>コミュニケーション不足を補うため、ドキュメントをしっかり作ろう</li>
<li>メモ書き程度でもいいので残して伝える</li>
<li>プルダウン等のよくある改修方法は文書化する</li>
<li>作業時間に余裕を！</li>
<li>Subversionの導入</li>
</ul>
</td>
</tr>
</table>
<p>デザイナーとプログラマの反省点・要望は、ほとんどの形で一致しています。<br />
  つまり、お互いの歩み寄りが足りないまま協業している状況に、原因の一端があります。</p>
<p><img src="http://blog.webbingstudio.com/uploads/2009/08/webcon090828.jpg" alt="webcon090828" title="webcon090828" width="480" height="370" class="alignnone size-full wp-image-1042" /></p>
<p>これ以外の細かい部分は、</p>
<ul>
<li>思想的な問題（オープンソース至上のプログラマ／著作権と意匠を重視するデザイナー）</li>
<li>業態の問題（初期から入り納品まで集中するプログラマ／中期から入り納品後も改修を続けるデザイナー）</li>
<li>金銭的な問題（長期案件をまとまった見積で請け負うプログラマ／短期案件を手頃な見積で請け負うデザイナー）</li>
<li>雇用関係の問題（プログラマが雇用側／デザイナーが雇用側／どちらもフリー）</li>
</ul>
<p>が複雑に絡んでくると思います。<br />
  こればっかりは、コミュニケーションを重ねるしかないでしょう。</p>
<p>また、表を見たらすぐわかることですが、<strong>トラブルの半分は相手の性格によるもので、業種以前の問題です。<br />
</strong>WEBコンの定例会に参加するような人たちは勉強熱心だったり、自分からコミュニケーションを望むような人たちだから、<strong>上の表に載るような人はそもそも今回のセミナーを聞いてない</strong>のです。</p>
<p>じゃあどうするのか。</p>
<p>改善意識を持ったデザイナー・プログラマが結束して、外堀を埋めてしまうしかなさそうです。<br />
  情報を交換して、協業経験をためて、ワークフローやルールを整えて、困ったさんが出たら注意できる環境を作るということです。</p>
<p>簡単ではないですけど…＞＜</p>
<hr />
<p>「本当は歩み寄らなきゃならないのは、僕らプログラマの方なんだよね」</p>
<p>と、懇親会でプログラマさんに言われました。</p>
<p>確かにデザイナーはよくしゃべる人間が多いですが、それがコミュニケーション能力につながっているのでしょうか？一方的に文句言ってるだけかもしれません。</p>
<p>それに、私は最近の案件ではじめてSubversionを使うことになったのですが、正直「難しそう…めんどくさい（´A｀）」と思いました。実際にちょっとがんばって使ってみると、バックアップも楽だし協業相手に迷惑をかけないし、とてもいいツールなのに。</p>
<p>どっちかが引くのではなくて、双方が歩み寄れればいいですよね。</p>

<a href="http://twitter.com/?status=RT+%40%3A+WEB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%A8%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E9%96%A2%E4%BF%82%E6%94%B9%E5%96%84%E3%82%92%E8%80%83%E3%81%88%E3%81%A6%E3%81%BF%E3%82%8B+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fnlj9y2" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/08/webcon090828.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>works:「ビジュアルメッセージ」告知ページ（静的コンテンツ）</title>
		<link>http://blog.webbingstudio.com/2009/08/visual_message.html</link>
		<comments>http://blog.webbingstudio.com/2009/08/visual_message.html#comments</comments>
		<pubDate>Wed, 19 Aug 2009 17:02:46 +0000</pubDate>
		<dc:creator>WebbingStudio</dc:creator>
				<category><![CDATA[Work]]></category>
		<category><![CDATA[business]]></category>
		<category><![CDATA[携帯]]></category>

		<guid isPermaLink="false">http://blog.webbingstudio.com/?p=968</guid>
		<description><![CDATA[
株式会社アイピーネット様のご依頼で、取扱商品「ビジュアルメッセージ」の告知ページを作成しました。

http://i-pn.jp/vm/
CMS連動ではなく、静的HTMLページです。
前職は観光関連が多かったので、イベ [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://i-pn.jp/vm/" target="_blank"><img src="http://blog.webbingstudio.com/uploads/2009/08/visual.jpg" alt="visual" title="visual" width="205" height="117" class="alignleft size-full wp-image-969" /></a></p>
<p><a href="http://i-pn.jp/" class="blank">株式会社アイピーネット様</a>のご依頼で、取扱商品「ビジュアルメッセージ」の告知ページを作成しました。</p>
<div class="clear"></div>
<p><a href="http://i-pn.jp/vm/" class="blank">http://i-pn.jp/vm/</a></p>
<p>CMS連動ではなく、静的HTMLページです。<br />
前職は観光関連が多かったので、イベントなどで、チラシの素材を再構成して新しいWEBページを作るというお仕事はよくやっていましたが、フリーになってからは久しぶりです。<br />
以前より、だいぶデザインの幅を広げられたし、早くアップできたと思います。</p>
<p>このツール、社長様に見せていただいてとても面白かったので追記以降でご紹介。</p>
<p><span id="more-968"></span></p>
<p>「ビジュアルメッセージ」は、QRコードがたくさん書いてあるシールセットです。</p>
<p>一般の携帯動画配信サービスは、ユーザー登録をしたり、管理画面から編集・削除をする必要があるのですが、ビジュアルメッセージは「QRコードを読み込む」「メールを送る」の二つの操作しかしません。ログインもありません。</p>
<p>送る側は、「登録用」と書いてあるQRコードを読み込んで出てくるメールアドレスに、動画を添付してメールを送ります。<br />
それから、シートについているシールを手紙などに貼り付けます。</p>
<p>観る側は、そのQRコードを読み込んで出てくるURLにアクセスするだけで、動画をすぐ観られます。<br />
縦横サイズは170ピクセル程度の規格に制限されますが、画質はあまり劣化しません。</p>
<p>後ろに追加したり、消したりするときは「登録用」「削除用」を読み込んで同じようにメールを送ります。</p>
<p>システム上有効期限がありますが、その間はサーバーで動画を保管してくれるのでいつでも観られます。<br />
ウェディング用は専用のセットがあって、有効期限が長く、シールの数も多くなってます。</p>
<p>これは何かに使ってみたい！<br />
しかし</p>
<p style="font-size: 150%; color: #8899CC;">iPhoneはQRコードが読めません。 ＿|￣|○|||</p>
<p>そもそも私は3Gなので動画も撮れないんですけどね…</p>
<p>パソコンには詳しくないけど携帯を日常的に使いこなしている、若い女性向けのツールですね。<br />
今後、文具屋などにも売られるだろうと思うので、興味のある人は使ってみてください。</p>

<a href="http://twitter.com/?status=RT+%40%3A+works%3A%E3%80%8C%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%80%8D%E5%91%8A%E7%9F%A5%E3%83%9A%E3%83%BC%E3%82%B8%EF%BC%88%E9%9D%99%E7%9A%84%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%EF%BC%89+-+%E3%82%A6%E3%82%A7%E3%83%93%E3%83%B3%E3%83%96%E3%83%AD%E3%82%B0+%3E%3Ehttp%3A%2F%2Ftinyurl.com%2Fndzb2x" class="tweet-this" ><br /><img src="http://blog.webbingstudio.com/admin/wp-content/plugins/simple-tweet/img/tweet.gif" alt="Twitter" />Twitterで記事を紹介して下さい（-人-）</a>]]></content:encoded>
			<wfw:commentRss>http://blog.webbingstudio.com/2009/08/visual_message.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
