イメージの上にCSSでPNG画像を被せて装飾するサンプルの紹介サイトをご紹介します。これCMSを使っている場合、かなり便利ですよ。

上記のような感じにセロハンや押しピンや切手風など様々なバリエーションがあります。サンプルを利用するのもありですが、やり方を覚えてオリジナルを作るのもいいですね。

マークアップとCSSはこういう感じに空のスパンをイメージタグの上に配置します。被せる画像にはPNG形式の画像を使用するのでIE６でのPNG対策としてiepngfix.htcを利用すると便利です。CSSでiepngfix.htcまでのルートを下記のように指定します。

<!--[if lt IE 7]>
<style type="text/css">

  .photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->

空のspanタグをマークアップせずに利用するには

空のspanタグは使いたくはないというマークアップエンジニアはjQueryを利用してDOMでspanタグを挿入するようにすればOK。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  //prepend span tag
  $(".photo a").prepend("<span></span>");

});
</script>

使い方を覚えたらデモページでサンプルのソースを読んでみるのもありですね。

CMSなどで画像加工ができない利用者でもこのようなイメージの装飾ができるようになるというのは素晴らしいですね。MTなんかでも利用できそうです。

商品・サービス紹介

商品やサービスの内容の説明ページです。商品やサービスラインナップが多ければ多いほどページのボリュームは多くなります。

お問い合わせ

商品・サービスに関する問い合わせをメールフォームにて受けるページです。最終的にこのページから問い合わせを受け、その後のやり取りによって成約して、始めてWEBサイトの効果があるといえるでしょう。最近では入力項目の数や入力補助機能といったフォームのユーザビリティが離脱率を下げるために効果的であると言われています。

会社案内

自社の概要や沿革、代表挨拶、アクセスマップなどを掲載するページです。自社に関する情報をユーザーに知ってもらうためのページです。

リクルート情報

自社のサービスを提供するために必要な人材を募集するページです。最近ではリクルートページのSEOも脚光を浴びきています。自社に興味を持ってくれている人材に見つけてもらいやすくする工夫は大事であると思います。

サイトマップ

ページ全体を一覧できるWEBサイトの案内板の役割を担ったページです。ページ数の少ないサイトではあまり必要ないかとは思いますが、ページ数の膨大なサイトであれば、ユーザーが目的の情報にたどり着ける道先案内の役割を果たします。百貨店やモールに行ってまず案内図を見るという人も多いように、初めてのWEBサイトをおと連れた時にまずサイトマップを見るという人も少なからずいるでしょう。

利用規約・個人情報保護

サービスに関する利用規約やユーザーの大切な個人情報をどう扱うかを明記するページになります。お互いの後々のトラブル回避のためにもかならず必要なページであると考えています。

その他のコンテンツ

FAQ

Q&A形式でお客様から寄せられるよくある質問を掲載していくコンテンツです。WEB サイトの立ち上げ時のフェイズでは、過去の例をリストアップしていき、公開後の運用フェイズでは実際の質問内容などを随時追加していくようにすると効果的です。ポイントとしてはユーザーがサービス・商品について一番気になる内容(追加費用やサポート内容、商品の機能やスペックなど)をユーザー視点で考える事が大事だと思います。ユーザーが問い合わせるかどうかの一押しになるコンテンツと言えるでしょう。

トピックス・ブログ

商品・サービスに関する最新情報やキャンペーンといったイベントなどを随時追加していけるコンテンツです。常にWEBサイトでフレッシュな情報を追加していくことはユーザーのリピートを促進するばかりではなく、SEOにも効果的です。大事なのは何よりもスピードや事細かな説明であると思います。

スタッフ紹介

例えば、商材がサービスである場合、商品はスタッフである人といえます。実際にそのサービスを申し込むとなれば、どのような人が来るのかは気になるところです。スタッフの笑顔で会社の印象を良くすることは、企業イメージの向上にも繋がります。

フローチャート

商材が商品である場合はお問い合わせから商品が届くまでの流れ、商材がサービスの場合はお問い合わせからサービス完了までの流れといったような商材がユーザーに届くまでの流れはユーザーが商品又はサービスを手に入れる経験を促進する効果があると同時に、どのような形でステップを踏んでいくのかが分かり不安を軽減する効果があります。「流れがイレギュラーなケースが多いよ」という場合でも、基本の流れを掲示しておくことは大事であると私は考えています。

提携企業・取引先の紹介

スタッフ紹介と似ているようですが、若干意図する目的が異なります。提携企業・取引先を紹介する事は、提携企業・取引先の宣伝にもなりますし、ユーザーが自社がどのような提携企業・取引先があるのかを知ることができるので、信頼のある企業であればあるほど安心感が生まれます。また、提携企業・取引先を宣伝することにより、提携企業・取引先からビジネスチャンスが生まれる事も考えられます。逆に提携企業・取引先の信用度が低い場合はデメリットにもなりえる事も意識しておかなければなりません。

比較ページ

リフォームで例えるとビフォー＆アフターであったり、他社製品との比較などをする事で、自社の商材の長所、現状からサービスを受けるにあたってのメリットなどが分かりやすくユーザーに伝わります。ポイントとしては良いことばかりを書くのではなく、デメリットや短所なども含める事で逆に信用度が上がることもあります。

カスタマーレビュー

アマゾンなどで見られるカスタマーレビューや、お客様から直接頂いたお便りや写真を掲載することは自社のサービス・商品に絶大な安心感をユーザーに与えます。問題はレビューを頂く仕組みづくりにあります。ユーザーがわざわざコメントを寄せるにはそれなりのサービス・商品の満足感などがないと得られないケースが多いからです。特にカスタマーの個人情報を掲載するのは非常に難しいと言えます。

他にも色々なコンテンツがあるかとは思いますが、また効果があったと結果の出たコンテンツや汎用的に使えるなというサイトがあれば追加でリストアップしていこうと思います。また「こんなコンテンツどう？こういう効果が期待できそうなんだけど」みたなのがあればコメント頂ければありがたいです。

]]> tag:www.u-ziq.com,2008:/blog//3.240 2008-05-14T12:55:25Z 2008-05-27T13:08:59Z

YAHOO!JAPANのサイトエクスプローラーのベータ版が公開されました。これに...

u-ziq http://u-ziq.com/ YAHOO!JAPANのサイトエクスプローラーのベータ版が公開されました。これにサイトやブログのフィードを登録することでページのインデックスを促進してるかも？のようです。

]]> YAHOO!JAPANのサイトエクスプローラーはGoogleのウェブマスターツールと少し違い、ヘッダーにスクリプトを書いたり独自の形式のXMLを用意する必要はないようですが、指定のhtmlファイルをサイトへアップロードして認証しなければいけません。

YAHOO!JAPANのサイトエクスプローラー

これをしたからといって検索エンジンで上位表示するとは思えませんが、ページがインデックスされていない場合などはしておいたほうが良さそうですね。

]]> tag:www.u-ziq.com,2008:/blog//3.239 2008-05-04T10:10:31Z 2008-05-27T13:10:04Z

FCKeditorはご存知でしょうか？FCKeditorはAjaxで非同期に動作...

u-ziq http://u-ziq.com/ FCKeditorはご存知でしょうか？FCKeditorはAjaxで非同期に動作するブラウザベースのWYSIWYGエディタです。これのMTのプラグインとしての日本語版が素晴らしいのでぜひご紹介したいと思います。

]]> 今日のコラム：AjaxなWYSIWYGエディタ、FCKeditor 2.6 日本語版をリリースしたよ。

MT4.1/MTOS対応版のダウンロードはSourceForge.JP: Project File List - FCKeditor Japanより、MT-Plugin-FCKeditor-1.2.ja_v2.zipをダウンロードしてください。

FCKeditorのUIは下記のように文章の装飾やリストやテーブルなどの入力補助機能がついた高機能なエディタです。下記のほかにも様々なスキンが用意されています。

AJAXでパレットが開く

FCKeditor 2.6の素晴らしい点はページ遷移なしに、AJAXでパレットが開く点です。スペックの低いマシンではきついですが、ある程度のスペックのあるマシンであれば快適な操作ができると思います。

テーブルカラムの作成機能

もう一点個人的にこれが素晴らしいと思ったのは、テーブルタグの入力補助機能です。CMSでサイト構築した事がある方ならわかると思いますが、CMSでの入力作業はHTMLを理解していない企業担当者がほとんどです。ですので、例えばオプションや材質によって価格が変動する商材や、機能スペックや価格表といった商品情報を入力しなければ成り立たない商材を入力する際には、このようなテーブルで入力できる機能がCMSに搭載されていないというのはかなり致命傷なんですね。これをカバーできるのは本当に素晴らしいです。

MT4.1の場合、カスタムフィールドを使用すれば問題ないのですけど、MTOSを利用している場合はカスタムフィールドが使えないのでかなり重宝すると思います。そのうちMTOSでもカスタムフィールドのようなプラグインを開発する人がいるかもしれませんが。※そうなればMT4.1の商用ライセンスを支払うデベロッパーが激減するような気もするのでどうなるかは予想が立てづらいですがね。

僕はたいがいいつも手打ちでタグ書いてエントリーを投稿しているので、あまり必要でないのですが、機会があればぜひ利用してみたいと思います。

]]> tag:www.u-ziq.com,2008:/blog//3.238 2008-05-01T14:03:40Z 2008-05-01T14:47:42Z

ALPSLABの白地図APIで簡単にマップを作成する方法をご紹介します。...

u-ziq http://u-ziq.com/ ALPSLABの白地図APIで簡単にマップを作成する方法をご紹介します。

]]> ALPSLAB api - 白地図API

これがどういうものなのかというと、任意の色で白地図を塗り分け、その結果をPNG形式で取得することができる。また白地図は県レベル、市区町村レベルまで対応しています。

例えば、大阪だけを赤色で塗りつぶした白地図を作るとすれば以下のURLで取得できます。

http://api.alpslab.jp/v1/whitemap?width=300&height=300&code0=27&code0=27&color0=FF0000&border=999999&antialias=yes

この長いパロメーターの組み合わせによって、サイズ、範囲、塗りの色、ボーダーの色、アンチエイリアスのオン・オフなどを指定します。

簡単にちょっとした対応マップを作ってみたいという時、塗りの範囲だけをcodeとcolorの組み合わせが複数できるので簡単に作成することができます。上記の例を利用して、大阪・京都・兵庫を塗りにした対応エリアマップとかを作るとすれば以下の県コードとカラーの複数組み合わせで簡単に作れます。

県コード(2桁)

• 大阪(27)
• 京都(26)
• 兵庫(28)

code0=27&color0=FF0000

上記のパロメータが県コードとカラーのワンセットとなり、code0=27,code1=26,code2=28とcolor0=FF0000,color1=FF0000,color2=FF0000という感じにcodeとcolorの組み合わせを複数記入します。

http://api.alpslab.jp/v1/whitemap?width=300&height=300&code0=26&color0=FF0000&code1=27&color1=FF0000&code2=28&color2=FF0000&border=999999&antialias=yes

imgタグと組み合わせると以下のように表示できます。

imgタグを利用するときのコードは以下の通り

<img src="http://api.alpslab.jp/v1/whitemap?width=300&height=300&code0=26&color0=FF0000&code1=27&color1=FF0000&code2=28&color2=FF0000&border=999999&antialias=yes" alt="map" />

注意事項

この白地図APIを使用する際は、クレジットの明記が必要になります。

Powered by <a href="http://www.alpslab.jp/">ALPSLAB</a>

また、利用規約にて"本APIを商用目的で利用することはできません。"と記述があるので、注意してください。YAHOOのサービスはGoogleと違ってこのように商用できないケースが多いので残念ですね。

]]> tag:www.u-ziq.com,2008:/blog//3.237 2008-04-19T12:20:25Z 2008-04-19T12:49:28Z

ユーザーセンタードデザインと並んで最近注目を浴びているユーザーエクスペリエンスド...

u-ziq http://u-ziq.com/ ユーザーセンタードデザインと並んで最近注目を浴びているユーザーエクスペリエンスドデザインを覚書とあわせてまとめてみようと思います。

]]> ユーザーエクスペリエンス・デザインとは

ユーザーが商品を購入する、若しくはサービスを体験する時の満足度といった経験を元にデザイン・情報設計を行う方法論。ユーザーセンタードデザインとはまた概念が異なる。

ユーザーエクスペリエンス・ハニカム

ユーザーエクスペリエンス・ハニカムとはユーザーエクスペリエンスを図式で表したものです。今後、変化していっても大丈夫なような拡張性の持てる蜂の巣構造が素晴らしいと思います。

• 役にたつ(useful)
• 使いやすい(usable)
• 好ましい(desirable)
• 見つけやすい(findable)
• アクセスしやすい(accessible)
• 信頼できる(credible)
• 価値がある(valuable)

ネットイヤーさんのユーザーエクスペリエンス・デザインの解説で述べられているようにユーザーエクスペリエンスドデザインを行う際には人間の五感といった感性の部分に着目したデザイン設計が肝になってくるように思います。

また、Googleのユーザーエクスペリエンス10か条というのもあり、世界最大のインターネットサービスのユーザーエクスペリエンスドデザインは参考になるのではないかと思います。

リアルサービスとWEB媒体のユーザーエクスペリエンスとの比較

項目	リアルサービス	WEBサイト
役にたつ	商品・情報の提供	商品・情報の提供ができる機能
使いやすい	商品の取りやすい棚の高さといった設計	ユーザビリティ設計(使いやすさの向上)
好ましい	接客対応(おもてなしの心)、気持ちよさ(五感で感じる部分)、楽しさ(はまってくれる仕組み)	インタラクション機能(対話性)、モーション(感覚的なモーションの気持ちよさ)・質感(デザイン)・音(効果音・BGM)、RIAコンテンツ(映像・音楽・ゲーム等)
見つけやすい	ポップの使い方や商品の配置	識別しやすい色の使い方、メニューの配置
アクセスしやすい	近い、たどり着きやすさ(立地条件、標札、ポップ)、口コミ	SEO/SEM/SMO対策、アクセシビリティ設計(アクセスのしやすさの向上)
信頼できる	信頼性(アフターサービス・保障）	FAQ、サポートコンテンツ、WEB電話
価値がある	商品の魅力(コストに対する価値の実感)	コンテンツ(信頼のおける内容の説明)・美しさ(デザイン性)

このようにリアルサービスとWEBサイトでのユーザーエクスペリエンスを比較すると分かりやすいかなと思って作ってみました。WEBでしかけるサービス内容やターゲットの規模などによってどれに力を入れていくかを選定していけば、ブレのないユーザーエクスペリエンスドデザインを設計していけるのではないかなと思います。

]]> tag:www.u-ziq.com,2008:/blog//3.236 2008-04-16T14:52:35Z 2008-04-16T15:16:54Z

MTOSのライセンス形態はGPLで使用できるプラグインもGPLのものに限られます...

u-ziq http://u-ziq.com/ MTOSのライセンス形態はGPLで使用できるプラグインもGPLのものに限られます。そこでMTOSで利用できるプラグインをまとめてみようと思います。

]]>

MTOSリリース、MT4.1、LogViewer4MTOS公開。 (Junnama Online (Mirror))
簡単なアクセスログを管理画面で表示できるプラグイン

リンクの挿入をより便利にするプラグイン(MT4.1/MTOS専用版) - The blog of H.Fujimoto
リンクの挿入をより便利にするプラグイン

携帯からMTにメールで投稿するMoblogプラグイン「Moober」。 (Junnama Online (Mirror))
携帯から添付ファイル付き投稿できるMTOS用プラグイン

小粋空間: ブログ記事の入力フィールドに初期値を設定するプラグイン
ブログ記事の入力フィールドに初期値を設定するプラグイン

遅延再構築プラグイン - Nizah Blog
再構築を早くするプラグイン

カテゴリーとフォルダを並べ替えるプラグイン（MT4.1／MTOS用） - The blog of H.Fujimoto
カテゴリーとフォルダを並べ替えるプラグイン

「A-Form」～MovableType/MTOSに簡単設置でフォームを自由に追加できるプラグイン～ : アークウェブ ビジネスブログ
お問い合わせフォームのプラグイン。商用利用する際にはシェアウェアになるようです。※たぶん

Widget Set Custom Field
エントリーごとにウィジェットを選択することができるプラグイン

reCaptcha
reCaptchaというキャプチャを表示できるサービスを利用してMTでキャプチャを表示するプラグイン。

DeliciousJSON
DeliciousでブックマークしたリンクをJSONを利用して表示できるプラグイン

]]> tag:www.u-ziq.com,2008:/blog//3.235 2008-04-15T17:02:30Z 2008-04-15T17:36:19Z

最近よく耳にするWEBコンサルタントという新しいWEB業界というフィールドの職種...

u-ziq http://u-ziq.com/ 最近よく耳にするWEBコンサルタントという新しいWEB業界というフィールドの職種を紹介しようと思います。

]]> ミツエーリンクスさんでの募集項目によると「Webサイトの構築・運用に関わる分析・診断業務を通して、顧客企業への提案活動を行う」との事だそうです。

さらに具体的に引用すると「Webサイトのアクセスログ解析、ユーザビリティ診断、競合サイト調査、SEO対策等の解析・コンサルティング業務」となるらしいです。

WEBプロデューサーとWEBディレクターとどう違うの？という疑問が出てきますが、僕なりの解釈で説明するとWEBコンサルティングはWEBプロデューサーとWEBディレクターに比べ、既にある既存サイトの改善という点と、クライアントのリアルビジネスを含めたWEBを利用しての改善という点が大きいのかなと思います。

従来であれば、フィールドは主に、WEB媒体を利用してのビジネス戦略を担える人材がいない中小企業をサポートする形で、WEBディレクターが兼任するようなイメージでしたが、最近では、大企業においてもWEBコンサルタントの需要があるように思います。

背景としては"WEBサイトを作ってみたが、思うような結果がでない"”ROIを意識した結果の出せるWEBサイトを作りたい”というニーズがあるからかなと思います。

作って終わりのWEBサイトでは、もはや集客は難しい時代。同じようなサービスを提供するWEBサイトが無数に存在する今の現状において、ただWEBサイトを構築するだけではビジネスとして機能しないというのは身にもって感じます。

WEB制作会社が直取引で仕事を取っていくためにはこのようなWEBコンサルタントというフィールドの人材が必要になってくるんだろうなと感じます。

僕も仕事では、クライアントに対してハンズオントレーニングで運用面でのコンサルティングを行ったり、WEB媒体だけではなく、WEB媒体がチラシや営業を補完するような形でのコンサルティングを行ったり、アクセスログのデータマイニングからの現状分析から既存サイトのユーザビリティやアクセシビリティの強化によって、コンバージョンレートの改善などを行ったりしていて、これらの業務の重要性を非常に感じます。

これらの業務を独立した形で行うことができ、深い部分まで精通しているプロフェッショナルであるWEBコンサルタントの需要はこれから高まるだろうなと感じる今日この頃です。

]]> tag:www.u-ziq.com,2008:/blog//3.234 2008-03-27T17:12:58Z 2008-05-27T13:12:07Z

今日はWEBディレクターについて思うことを書いてみようと思う。一応自分はWEBデ...

u-ziq http://u-ziq.com/ 今日はWEBディレクターについて思うことを書いてみようと思う。一応自分はWEBディレクターという肩書きだけどもこの肩書きはいまいちピンとこないんだな。

]]> WEBディレクターとは

僕自身、大阪の規模の小さい案件を回している身なので、わかったような事を言うのもなんなんですが、この職務は特に深いWEBの知識が必ずしも必要ではないと感じています。

他業界からの転職でも十分やっていけると思います。求められる能力は" コミュニケーション能力 "と" 空気が読める能力 ”と” 情熱 ”がポイントかなと思います。

WEBサイトという商材をクリエイティブな物と捕らえるか、単なる商売のツールであると捕らえるかという、意識の違いだけをとってもまったく方向性が異なりますし、どちらが正しくて、どちらが間違っているという事がないだけに理想のWEBディレクター像を定義する事が難しいです。

ただ言える事は、WEBサイトが商材ならクオリティの高いものを作る事がWEBディレクターとしての最終的な評価の基準になるのかなとは思います。

WEBディレクターの仕事とは

特にこれといって決まってないと思います。会社のワークフローによってまちまちといった所ですね。一般的な主な業務としては以下の通り。

1. 企画立案
2. 要件定義
3. スタッフのアサイン
4. スケジューリング
5. 制作進行管理
6. 品質管理
7. クライアント対応
8. 公開・納品業務

僕が所属してる組織ではこれ以外にも写真を撮ったり、コピーを書いたりといった業務もWEBディレクターが担っていますので結構ハードな職種と言えるでしょう。

ある程度の社会経験を積んでいる人であれば、1,2,6の項目以外は問題ないと思います。1,2,6の項目にはクリエイティブな能力だったりWEBの知識が必要だったりしますが、情熱でカバーできます。

WEBディレクターの待遇面について

当たり前のことですが、組織によってまちまちです。

WEB業界は比較的3Kな環境なので技術職は特別な能力がないかぎりは仕事がきつかったり賃金が低かったりします。そしてWEBディレクターはどちらかというと技術職ではない事務作業が主な業務になってきますので、いわゆる一般的な企業の平均的なお給料です。なので、組織の規模によって福利厚生や基本給は変動します。

WEBディレクターになるためには

" WEBディレクターの仕事とは "の1,2,6の項目を重視する、いわゆるクオリティ重視の会社であれば、未経験はきびしかったりします。実務経験がないとなかなか雇ってくれませんが、不可能とまではいかないと思います。

又、1,2,6の項目をワークフローでがっちり定めている会社であれば、未経験でも問題なく入れると思います。しかし、1,2,6の項目がWEB業界で一番やりがいの感じる仕事だと思うので、ある程度の期間が経過すると物足りなさを感じるかもしれません。

WEBディレクターについて思うこと

これといった” WEBディレクター 像”を定義することが難しく、かなり業務内容や必要とされる能力があいまいな職種であると思います。ただし、物づくりが好きで全体を通して関わっていたいという方には向いてると思います。逆に物づくりが好きでないと苦痛を感じるのではないかと思います。

このように、定義があいまいな職種だから” WEBディレクター ”という肩書きにピンとこないのかなと自分では感じています。” WEBディレクターってどういう仕事？ ”って聞かれると真面目に答えようとすればするほど、なんて言っていいかわかりません。

]]> tag:www.u-ziq.com,2008:/blog//3.233 2008-03-26T11:48:54Z 2008-03-26T12:02:51Z

ローカル環境やUSBといった持ち運べるストレージ環境で簡単にMT開発できるIns...

u-ziq http://u-ziq.com/ ローカル環境やUSBといった持ち運べるストレージ環境で簡単にMT開発できるInstaMTをご紹介したいと思います。

]]> Movable Typeでサイトを開発するのに必ず必要なサーバー環境とMTOS4.1をセットにした物がInstaMTです。 以下はInstaMTに含まれるもの。

• Apache
• MySQL
• ActivePerl
• MTOS 4.1
• 起動するためのInstaMT.exe

InstaMT.exe を実行すれば、ApacheとMySQLのウインドウが立ち上がります。後は、ローカルホスト※http://127.0.0.1/にアクセスするだけでMovable Typeのダッシュボードを開けます。

また、InstaMTをUSBフラッシュメモリに入れた状態でUSBを再度差し込むと開くプログラムを参照するウィンドウが表示されるので「Run InstaMT」を選択すると同じようにローカルホストでダッシュボードを開くことができます。

RubyでいうInstantRailsみたいですね。サーバーにあげる前に複数人でデータのやり取りをしながらMTを使ってサイト構築するときに重宝しそうです。

参考サイト：InstaMT でかんたんデモ環境構築

]]>