福岡県宗像市にある仏壇と仏具の専門店「城山仏壇」様のコーポレートサイトです。

２ヶ月ほど前に、「サト研」でお知り合いになった城山仏壇の社長さんからサイト制作のご依頼をいただき、デザイン・コーディング・ＣＭＳ開発と全般的に担当させていただきました。

http://shiroyamabutsudan.biz

これまでは、ＭＴを使って店舗ブログを活用されており、担当の方が既にＷＥＢのリテラシーが高い方でした。
そのため、カテゴリや記事の見せ方や、機能についていろいろとご意見をいただき、カスタムフィールドと条件分岐を多用した多機能ブログとなっています。

プラグインもかなり多く使いました。

今回の開発で、やりたい事がテンプレートタグの組み合わせとプラグインでスマートに実装できるWORDPRESSの素晴らしさを改めて体感しました。開発団体の方々には本当に頭が下がります！

どんどん活用していただき、豊富なコンテンツで多くの人に役立つサイトにしていただけると、開発した私としても嬉しいです！

皆様、仏壇仏具のご相談は、城山仏壇まで！

今年の１月にご依頼をいただき、２月〜３月の土日を使って制作していたサイトが４月１日にオープンしました。

熊本の造園業 アース・グリーン様のコーポレートサイトです。

企画・ライティング・デザイン・コーディング・ワードプレス実装を担当しました。

ターゲットユーザーの年齢層は４０〜６０代と思われるので、判りやすい導線と、シンプルなコンテンツを心がけました。
目的はコンバージョンよりも、どちらかというと企業イメージアップです。

専門分野ではないデザインも担当したのですが、デザインを組みながら自然とインフォメーションアーキテクトとか、「どうHTMLを組むか」を意識するあたりで、自分がマークアップエンジニアであることを再認識できて面白かったです。
まー、そんなに複雑な構造ではないのですが。

ちなみに、企業ロゴも「この際だから」ということで新たに作成しました。
ロゴは、「一条 響」さんという書家の方にお願いしました。
躍動感のある筆文字がカッコイイですよね。

写真撮影も、熊本の広告関連で活躍する某プロカメラマンに依頼しました。
素晴らしい写真に、デザイン面で大変助けられました。

そして何より、土曜日しか打合せができない僕の都合にあわせて頂き、制作に関することは全面的に信頼してくださり、まだ浅いおつきあいにも関わらず かわいがっていただいたアースグリーンの山口社長に心から感謝しています。

撮影中のひとコマ。山口社長と僕。

いや〜、恐ろしい。10年もやってるんですね〜（その年月に見合うスキルがないのは「プロとしての経歴は３年だからネっ」という言い訳でスルーします）。

20歳の僕といえば大学生。とあるライブバーで箱バンドとして、定期的にライブ活動を始めた頃でした。そのライブを、できるだけ多くの人に見てもらいたいという一心で、告知の手段を考えていました。そこで・・

「インターネットってものがあるらしい」→「ホームページってものがあるらしい」→「Ｈなものばかりではないらしい」→「ホームページってものは、ワープロで作れるらしい」→「作り方の本が売ってるらしい」

というフローが完成し、「作ってみたい！」と一念発起。ちょうど「初代ボンダイブルーのiMac」がセンセーショナルなデビューをしたちょっと後でした。ミーハーな僕は二代目の266MHzのiMacを買って、「TextEdit」というエディタソフトを使って「HTML辞典」を片手にせっせと自分のバンドのHPを作っては、バンドプロフィールやライブ情報などを更新していました。

・・わ！　なんか　この「昔話し」の口調、オヤジ臭い！　でもこのペースで続きます！

・・その頃は、時間も腐る程あったし、独学で１日かけて１ページを作ったりしていました。タグをテキストで打ったらビジュアルとして反映される‥という工程が堪らなく楽しくて好きでやっていました。サイトが見られていようが、いまいが関係ありませんでした。１日のアクセス数が10未満だったかな〜。

そのアクションとは「WordPressを使ったサイトを社内開発しよう！」と訴えているということです。

・・・もうね、言うのも恥ずかしいんです。
こんなこと、日本中のWebデベロッパがすでに当たり前に手がけていることなんです。
でも弊社では案件の大きさゆえ、上流工程が保守的ゆえ、○○が○○○ゆえ・・こういったオープンソース系システムは使ってこなかったんです。

「選択肢のひとつとする」という条件で、勝手に「WP推進チーム」を立ち上げ（僕だけですが）、しばらくの間、上流への提案を頑張ってみたいと思います。

提案する以上は勿論、期待通りの技術的バックアップができなければいけません。

今までは(X)HTML+CSS、JavaScript、デザイン などのフロントエンド技術ばかりを専門で担当して来ましたが、これからはWP実装・プラグインの情報収集・さらにはPHPなどのサーバサイド技術も学んでいかなければいけませんね。

しかし、この勉強が楽しい。10年前に初めてHTMLを書いたときの事を思い出します。

【現在】WPのテンプレートタグの使い方をひとつ理解する＝【10年前】HTMLタグの使い方をひとつ理解する

といった感じでしょうか。
落ち着いたら、自分のブログをどうにかせなイカンねw。

郷ひろみさんをはじめ、様々なアーティストのライブを支えるセッションミュージシャンであり、アコースティックギターで繊細な楽曲を奏でるソロギタリストであり、ド派手なギターを弾きまくるロックスターなのです。

そんな麿さん、僕の義理の従兄弟なのです。僕もギター弾きだということもあって、可愛がってもらっています。そして今、麿さんのホームページを僕のデザインでリニューアルする計画を進めているのです。

現在、郷ひろみさんのツアーで全国を回っている麿さんが、その合間の21日に佐賀市にあるライブハウスガイルスでソロとしてライブ出演されたので応援に行きました。

佐賀のアマチュアバンド３組が出演するライブの、なんとトップバッターとして、アコースティック形式でのソロライブ。アコギ１本だけで、広がりのある世界感を創りだします・・・吸い込まれます・・

その後、麿さんが佐賀で生活していた時にゆかりのある方のバンド”Groove Sounds”にエレキでゲスト参加！
Acid-JazzやSoul、AORが大好きな僕としては「ツボ」でした。リラックスして楽しそうにプレイされてました。

そして、ヴォーカリストとして熱唱！！曲は「FANTASY / Earth Wind&Fire」！激レアですw
メンバーの方が「郷ひろみのコンサートでは絶対に見れません！」と言っていました。そりゃそうだ！

バンドの皆さん。写真はキーボーディスト・沼井雅之さんのブログより拝借しました！

その後、ホームページリニューアルの打合せも兼ねて、バンドメンバーの打ち上げに参加させてもらいました。バンドの間ではデジタル一眼レフが流行っているらしく、沼井さんも麿さんもいつも持ち歩いているそうです。その写真をデザインの素材として使えたら面白いなと思います。

結局、麿さんも僕も飲み過ぎて打合せは一切できませんでしたがｗ・・楽しい二日間でした。

麿さんの音楽に興味をもったり、サポートしているアーティストからの流れで麿さんのホームページを見る方の年齢層は広いと思います。それゆえ、誰にでも直感的にブラウズしてもらえるようなユーザビリティ・落ち着いたデザイン・整理されたコンテンツを意識してデザインしていこうと思います。

ステージ上の麿さんを見た直後は「パッと華やかなデザイン」にしたくなっちゃうんですけどね。そこを抑えてｗ

1. サイト内の文言には、商品名が多く記載されている。それを全てアンカーテキストにして、商品詳細ページにリンクさせる。（つまりサイト内導線の強化）
2. そのアンカーテキストの横に「商品詳細ページへ」という画像を配置したいが、そうするとデザイン的に「やかましい」ことになってしまう。
3. なので、アンカーテキストにマウスオーバーした時に画像がポップアップし、その画像もアンカーとする

つまり、結果的にこういうこと↓

で、着手前に考えたのが「jQueryでなんとかなるだろう」ということ。最近jQueryの実装にハマっていて「すげー、何でもできちゃうじゃーん」と盛り上がっていたから。もちろんディレクターには「できまーす」との安請け合い。

そうして都合のいいPluginをサクっと見つけようと「jquery」「マウスオーバー」「ポップアップ」のKWでググってみますと・・・やはり、あるある！　だけど・・・あれ？　ナンカチガウ。。

見つかるのは、リンク先の画像をプレビュー的に表示するものだったり、A要素のtitle値のテキストを表示するものだったり・・

よくお世話になる本家サイトでも見つからず。

そんなこんなで「そうじゃない！シンプルにimg要素をポコっと表示してくれればいいのに！」と焦り始めました。

そして、検索範囲を広げようと、KWを「マウスオーバー」「ポップアップ」「画像」に変更。そこで見つけたのがこのページ。↓

CSSだけで画像のポップアップ

難しく考えすぎていた僕を助けてくれたページです。もうね、やってることがシンプル！そうなんです。考えてみりゃこれでいいんです。フェイドインなどのアニメーションも必要じゃないので、jQueryなんていらないのです。

もちろん実装も簡単でした。この案件はサイト内のほぼ全ページが対象となりますがこれだと簡単に導入できそう。よく考えたらそんなたくさんのページにjQueryのpluginやconfigファイルをインクルードさせるのって大変だよな・・

良い勉強になりました。「難しく考えずにシンプルでラク〜に実装する方法を柔軟な思考で探してみよう」ってことですね。

そんな気持ちもあり、「せっかくの連休だから何か作っちゃおうかな」という気持ちもあり、自分が参加しているバンド「コサック」のWEBサイトを作ってみました！

http://cossack.grooweb.jp/

お暇なかたは見てみてくださいね。YouTubeへリンクして、ライブ動画なども見れます。５月１６日にライブやりますので、興味があって来てくれたりなんかすると泣いて喜びます。

そして何より、「自分でデザインしたものは、コーディングがしやすい！！」という事を感じました。やっぱりレイアウトを考える時点で、どうマークアップするか？を自然と考えているからでしょうか？

ちなみに自宅で（焼酎飲みながら）作ったのでまだIE6/7での確認ができていません（自宅にwinが無いので‥）。めっちゃ崩れてたりすると、やだなー（笑

弊社内で進んでいる（僕は絡まない予定だった）案件（いつものことながらタイトスケジュール）の制作ミーティングに「外部パートナーさんとお友達でしょ」という理由で参加したところ、「短納期で、こまかいやり取りが頻発しそうなのでバックログを使いましょう！」という提案がパートナーさんから出ました。

そのパートナーさんというのが、CGFMの我流さん。すでにバックログは活用されているとのこと。こりゃ頼もしいってことで、自分もこの案件に乗っかってみることに。

詳しい機能などはバックログのサイトを見てもらうとして．．以下、まだ使い込んでいない僕の感想。

とっつきやすい！

進捗管理システムのインターフェイスというと、いかにもシステム的で殺風景なものが多いような気がするけど、これは人に優しい感じがします。緑が多いし。メニュー選択も直感的で、半日見てるだけで大体の機能は使えるようになりました。

かゆいところに手がとどく！

「課題」（つまりやらなきゃいけないこと）の種別や属性がタスクにフィットしていたり、Subversionページの右下にリポジトリURLを掲載してくれていたり（案件に途中から参加した人ってこういう情報をもらえていなかったするしね）・・機能に「現場のあるある」が反映されています。

直感的に進捗が感じられる

社外の方と共同で進める案件や、大きなプロジェクトでは、下流行程のエンジニアやデザイナーが進捗状況をうまくつかめない事がしょっちゅうだと思うのですがガントチャート/バーンダウンチャートのおかげで直感的に掴むことができます。

ポイントは「波に乗れるか否か」かな

実際に使ってみると、特に作業ピークの日には自分が関わる／関わらないを問わずすごい数のメールが飛んできます（メールの飛び先は管理者が設定できるのかも？）。この進捗の流れに乗れなかったら いざ自分の出番となったときにアタフタしますが、上手く乗れると快適です。

プロデューサーやディレクターの立場の人がどう感じているかは分かりませんが。現場としてはすごく便利なツールだと思いました。今後進捗管理がシビアな案件のときには、こっちからプロデューサーに「バックログ使いましょう」と提案してみようかな。

Backlogをプロジェクトに導入する時に最初にする事｜我流天性

http://blog.cgfm.jp/garyu/archives/1069

お仕事とBacklogと私｜Backlog開発者ブログ

http://www.backlog.jp/blog/2009/03/backlog-1.html

数十人規模の会社ですが、マークアップエンジニアは僕１人（と試用期間が１人）。僕の入社により社内にできた専門職なので半年程前までは「自分の技術（や方針）が会社の基準になって良いのか？」という疑問がありました。

しかし、WEBの技術なんて世の中に溢れ返っています。ある程度スタンダードな技術を身につけたらあとは自分のスタンダードを信じよう（もちろん仕様は順守してね）。と納得するに至りました。

んで、最近の疑問は
『自分はデザイナーをガッカリさせてはいないか？』
ということ。

WEBサイトを制作する工程ではまず、デザイナーが 画や導線、つまり「ビジュアル」を創ります。マークアップエンジニアとは その「ビジュアル」を一度バラバラに「分解」し、「XHTML+CSS+JavaScript」という技術を使って「機能をもったWEBページ」に造りかえる「マークアップ」を担当します。

数年前は（というか、今も殆どの現場で）、デザインとマークアップは同じ人が担当していました。近年WEB技術の進化によりこれらの工程が分離しつつあるのですが・・もともと１人で担当していた作業である以上、「デザイナーとマークアップエンジニアの方向性確認や意識の擦り合わせ」は必須工程であるべきです。

しかし、残念なことに現在の自分はこのコミュニケーションが全くと言っていい程とれていません。

僕が担当する案件の殆どは「社外のデザイナーさんに発注し、マークアップとシステム実装は社内で」という状況です。企画（上流工程）でスケジュールが押し、デザインやマークアップという下流工程ほど、タイトなスケジュールとなってしまうからです。

それゆえ、

• デザイナーやライターと意見交換が行えずサイトの方向性がみえないままの作業となる
• デザイン原稿を見るとズレてるんだけど、このズレはミス？意図的？？などの惑い
• サイト全体を見通して包括的設計を行いたいが、流れ作業に巻き込まれ、コンテンツ単位の設計になってしまう

その結果、

『完成したサイトを見たデザイナーさんをガッカリさせていないか』という疑問がつきまとってしまうのです。「こんなはずでは無かったのに・・」と思われていないかと心配になってしまうのです。

さて、文句ばかり言ってても仕方ないので、この心配を少しでも解決するにはどう動こうか？

自分がディレクションまで担当する？（無理。死んでしまいます。）

ワークフローに無駄がないコンパクトな制作現場に身を置く？

・・それもひとつの手段ですが、
「デザインファイルからデザイナーの意図を読み取るスキル」を身につけてみようかと思います。

つまり「デザインをイチから勉強」ではなく、自分でデザイナーとしていくつかサイトをデザインしてみてレイヤの組み方を勉強してみるという方法です。

いや、これが効果的かどうかは分からないけど、PhotoshopやFireWorksとは切っても切れない職業なので無駄では無いかなと。

もちろん、「デザイナーさんとのミーティングをさせてくれ！」という社内での働きかけも忘れてはいかんですけどね。

もうすぐ三十路。仕事からプライベートから、勉強すべきことが山積みです。

番組中で宮内氏は『宮内が建てるのは千年以上続く日本古来の大工技術を継承した木造の家。伝統的な工法や技術を応用しながら、あくまで現代人のライフスタイルや環境に合わせた家造りにこだわる。』と紹介されています。

施工現場での宮内氏の姿は真剣そのもので、ついつい見入ってしまいました。弟子の一人が作ってしまったわずか1.5mmのズレを見抜き叱責し、自らノコで微調整するシーンや、不注意で高所から転落しそうになった弟子に対し「工事中に死人がでた家に、施主さんは幸せに住めるか！」と声を荒げる姿を見て、「この人、自分の仕事に本当にプライドを持ち、真剣に仕事をしているんだなあ」と感動を覚えました。

僕はWEBの制作現場で、「マークアップエンジニア（以下、ME）」という職に携わっています。

ひとつのWEBサイトが完成するまでには多くの工程がありますが、最終的にWEBサーバからそれぞれのパソコンに送られるデータは「HTMLソース」であることが殆どです。（IEなどのブラウザで「ソースを表示」をクリックすると、文字列がズラーっと並んだウィンドウが開くかと思いますがそれが「HTMLソース」です。）これらを構築する「コーディング」という作業がMEの主な仕事です。

◆

「MEは、WEB業界の大工だ。」僕は以前からこう思っていました。

• 建築家が施主の要望を元に建築デザイン・設計を行なう、大工はその設計を元に忠実に家を組上げる。
• WEBデザイナーがクライアントやWEBプランナーの要望を元にWEBデザインを行なう。MEはそのデザインを元に忠実にWEBサイトを構築する。

• 丈夫でしなやかな家を作る為に、大工は基礎や構造設計など、様々な手法の組み合せからベストな方法を選択し、丁寧に施工を行なう。
• 正しい文書構造で拡張性あるサイトを作るために、MEは様々なマークアップ手段から無駄のない方法を選択し、ミスなくコーディングを行なう。

• 職人気質の大工は仕事の至る所にこだわりを込める。しかしこのこだわりは人目に付いて、喜ばれることを目的としていない。
• 職人気質のMEは、仕事の至る所にこだわりを込める。しかしこだわりを込めたところで、サイトの見た目が良くなるわけでもなく、クライアントも特に喜ぶことはない。

また、「コーディングはWEB業界の肉体労働だ」と言われることがあります。確かに、頭と指先を使った肉体労働といった印象もあります。

番組の最後で、宮内氏はこう話していました。「こだわればこだわるほど、工期がかかり儲けにもならん。せやけど、自分のこだわりが込もった家がこの先100年、200年と残って住む家族を幸せにする。その思いが何よりも儲けですわ。」

この言葉に、心から共感しました。

◆

僕を含めた一部のWEB制作者は「デザインとコーディングの分業と専門化」を理想としています。しかしWEB業界で加速する、低価格化と短納期化が、高い壁となっています。「低料金で高品質なHTMLを構築します」と、考えられないほどの破格でコーディングを行なう専門業者も多くありますが、どうも「低価格＝安かろう悪かろう」が現実のようです。

◆

HTMLの品質がサイトの付加価値となり、ビジネスに繋がるということは、この先も少ないでしょう。しかしクライアントやインターネットユーザーが気づかないサイトの裏側で、その品質は大切な意味を持つと信じています。

WEB業界において、大工の宮内氏のように「こだわりを込めて、妥協の無い仕事をし、それが自らの喜び」といえる職人気質をもったMEでありたい。と常々思います。

ひっくるめて言ってしまえば「WEBサイトを作る仕事をやってます」となるわけですが。

しかしもし、とあるホテルで色んなスタッフに仕事を訊いてまわったところ、ポーターが「ホテルで働いています」と言い、ソムリエが「ホテルで働いています」と答え、コンシェルジュも「ホテルで働いています」と答えたら、冷めます。

もしとあるビッグバンドのメンバーに「何をやってますか？」と聞いて回ったところ、ピアニストが「楽器を弾いています」と答え、トランペッターが「楽器をやってます」と答え、ドラマーが「楽器をやってます」と答えたら、そのバンドはロクなバンドじゃないと思います。

そこで、自分の職業についてですが、日常業務の中では「コーダー」だったり「オペレータ」だったり「運用エンジニア」だったり「マークアップエンジニア」だったり、考えてみたら色んな事をやって、そんなこんなで夜になるわけです。

そんな中僕は「自分はこうありたい」という気持ちも含め、自分の肩書きを「マークアップエンジニア」としています（勝手に）。

さて、問題はこの「マークアップエンジニア」の仕事内容が「他人に伝わりづらい」ということ。WEB関係の仕事をしている人にも「は？なにそれ？」と言われる率が高いです。「WEBデザイナー」とか「SE」だったら一般の人にも伝わりやすいんですけどね〜。

さて、もっと問題なのはこの仕事内容が「祖父に理解してもらえない」ということ。

盆と正月に会う田舎の祖父。９０歳近くになります。

まず、会うたび のっけから「お前はダイスケじゃったかのぉ」と言われるのがお約束。ちなみにダイスケには「お前は洋平じゃったかのぉ」と言う。孫が多いので仕方ないけど。

この祖父に自分の仕事が何かを理解してもらうなんて、無理。まず「インターネット」が何かを説明するのが不可能。「モールス信号のスゲー速いヤツ」とかで伝わらないかな・・あながち間違ってはいないよな。

他の孫は「中学校の先生」とか「消防士」とか分かりやすい職業ばかりなんだけどな・・

今年の正月に、祖父に自分の仕事をどう伝えればいいのか、まごついていると「おじいちゃん、洋平の仕事は計算機を扱う仕事ですよ。」と母が一言。

「あぁあ〜、役場の出納係かぁ、立派じゃのう」と祖父。分かってくれたようです。
（いやいやっ、分かってないって！）

WEBサイトがサーバからユーザのブラウザに送信される際には「HTMLデータ（文書情報）」と「CSSデータ（視覚情報）」になって送られます。WEBサイトを構築する際の最後にそのHTMLとCSSを設計して、書く人。けっこう地味。そして孤独。