泡沫webディレクターお仕事日記

アクセス解析イニシアチブin名古屋に行ってきました

Sponge Design — Mon, 30 Apr 2012 15:16:03 +0000

先週末、「アクセス解析イニシアチブin名古屋」に行ってきました。
初めて名古屋で降りました。東京に比べてなんと近いことか〜。そして大都会でビックリ。
東京以外での開催は初とのことですが、そろそろ関西での開催もあるのかと期待は膨らみます。

以下、さらっとですが感想を。

第1部：
組織を巻き込むWebマーケティングの位置づけと取り組み方講師：村上　佳代氏

主な対象は企業のwebマスターかな。
webマーケティングとはなんぞやとか、業績改善へどういう風に取り組むべきか、上司や他部署との向き合い方、といった内容。
解析の具体的な手法ではないです。

自分の立場は外部の制作者ですが、自社サイトの管理をしていたこともあるので私のお客様である中小企業のwebマスターのお悩みは理解できます。
縦割り・横割りという風に割れない規模の会社でも、そういう体制なりの問題があり、組織の理解を得るのは大変です。
こんな風にやってみたらどうでしょうね、という風なアドバイスに活かせればと思いました。

第2部：
ベネッセの取り組み　分析から改善のアクションへ川崎　洋　氏

以前参加した「アクセス解析サミット2010」のパネルディスカッションで村上氏と川崎氏のお話は拝聴したのですが、今回はじっくりと聴けました。

「自社ではこうやっています」という具体的な事例と説明で、大変わかりやすかったです。

また、分析・改善するには必ずゴール設定が必要なわけですが、ゴール設定が難しいコーポレードサイトやポータルサイトについて、当初のゴール設定はこうだったが、その後はこういう風に変更していった、というお話はなるほど、という感じでした。

第3部：
明日から実践！成果を出す「Webサイト最適化」のあれこれ松井　健氏

松井氏のお話は、前セッションが「自社の事例」だったのとは対照的で、
「どのサイトでも使える具体的なゴール設定や解析のTIps」という内容。

「訪問させる」→「離脱させない」→「ゴールに誘導」→「ゴール完了へ」の4ステップ別に、チェックする指標やグラフの作り方、改善への考え方、などでした。

改善施策はクリエイティブで対応するところが多く、確かにどんな企業でも「明日から実践！」できる内容だと思いました。

第4部：
新機能と事例で解説　Googleアナリティクスの進化講師：大内　範行氏

以前、2度ほど解析系のお話を伺ったときには、ひとつのサイトを例にした具体的な解析／改善のお話だったのですが、今回は主にGAの新旧機能と、その機能からはこういうことがわかる、ということをさらっと説明されたという感じでしょうか。

さらっと、ですが、ところどころでは具体例もありました。
たとえば、ビジュアルフローで、トップページで商品検索が多く利用されている場合の改善ポイントは？（※1）、また商品検索からまたトップページに戻る人が多い場合の改善ポイントは？（※2）　といったような。

改善施策例）
※1　メニューをわかりやすくする
※2　検索精度をあげる

他力本願かもしれませんが、もう少しこういうところを聴きたかったです。

まとめ

皆様、分析／解析／改善に対する考え方は同じだと思いますが、違う切り口でのセッションでした。
大変面白かったです。

プロじゃない人がイラストレーターでwebデザインを作るときチェックして欲しいこと

Sponge Design — Mon, 27 Feb 2012 07:55:05 +0000

ときどき「社内でデザインを作るので、コーディングだけお願いしたい」という仕事をいただくのですが、会社は違うのにみなさん同じような作りのデータを送ってこられます。
できれば事前にこれだけチェックしておいていただけると助かるなーと思うことをまとめました。
また、イラストレーターでのwebデザイン制作で悩んでおられる方に、少しでもお役に立てれば幸いです。

お客様の事情（勝手な想像を含む）

社内にデザイナーがいるのではなく、社員さんがデザインをまかされている
ふだんはチラシなどの印刷物を作っていて、webデザインは単一ページぐらいなら経験あり
デザインにはイラストレーターを使っている

ということで、イラストレーターでデザインを支給する場合のチェック項目です。

まず、

書類のカラーモードはRGBで！

初回はCMYKのデータがやってきます。もちろん写真もCMYK…。
ふだん印刷物のデザインをされているのかなーと想像する所以です。

確認を取って「RGBに変更するだけでいい」と言われればこちらで変換しますが、写真やオブジェクトのひとつずつ色調整したりはしていません。書類のカラーモードをRGBにするだけです。
ロゴなどで微妙な色を使われているときは「ほんとーにいいんですね？」と念押しします。

写真は配置で

コーディングしか請け負っていないとはいえ、写真はwebできれいに見えるようにこちらで補正することも多々あります。（プロのデザイナーが作った場合はしませんよ！）
ですが、時間がないときに埋め込みでやってくるとそのまま切り出したり…。

写真サイズは、印刷データでは原寸350dpiが基本ですが、webデザインには100dpiもあれば十分だと思います。
何10MBもある写真を何枚も埋め込んであったりすると、イラレ開くのも重くて作っている人も大変ではないかと。

できればイラレ上には配置、写真は別途支給、さらに保存形式はEPSではなくPSDにしていただけると助かります。

オブジェクトの単位はpixelかつ整数で

web制作の単位はpixelです。
mmで作られていると、pixel変換したときに整数にならないので、アンチエイリアスがかかってエッジがぼんやりします。
こちらでいっこいっこサイズ修正することもありますが…　エーイ、気が狂う！

CS5で新規ドキュメントを作るとき（5.5は持ってないのでわかりません、スミマセン）、「新規オブジェクトをピクセルグリッドに整合」にチェックしてから作るとカチッと作れます。らしいです。
ただし、拡大・縮小などで小数点以下のサイズが発生したときは、形が崩れたりするようです。私自身はwebデザインにイラレを使わないので、詳しく検証はしていませんが…。

フォントサイズは大きめで

印刷物では本文が6〜7ptなんていうのはよくありますが、webではまず読めません。
個人的には本文は13pixel以上、メニュー項目なら16pixel以上は欲しいところです。

小さめフォントサイズでかっちりデザインされている場合、フォントサイズを拡大するとテキストが溢れたりなど、デザイナーの意図しないレイアウトになる可能性があるため、コーディング前に確認を取りますが、該当箇所が多過ぎて…　という場合はいったんデザインデータをお返しして見直していただくこともあります。

※ポイントとピクセルの違いについては、興味のある方はググってみてください。

背景とフォント色はコントラストをつけましょう

白背景に薄いグレーの文字とか、印刷物では読めてもwebでは読めない・読みづらいということがあります。

まとめ

色々書きましたが、チェック方法は簡単です。
イラストレーターでデザインを作ったら、JPG形式などで書き出してブラウザで開いてください。
思ったより「こぢんまり」なデザインになっていて、あらっ？　と思われるかもしれません。
文字が読めないところもわかります。

それではどうぞよろしくお願い致します。

「【中級者向け】新Google アナリティクスの主要機能と活用方法」に参加しました

Sponge Design — Sat, 18 Feb 2012 11:13:11 +0000

第58回勉強会のお知らせ：「【中級者向け】新Google アナリティクスの主要機能と活用方法」

タイトル通り、新しくなったgoogleアナリティクスの主要機能と活用方法がテーマで、講師は小川卓氏。
関東でのイベントで拝聴したこともあり、もちろん著書も購入済み（感想を書いたページに小川氏のブログからリンクしていただいているようで…　GAで流入確認ー）。

大阪で開催されるというのにアクセス解析イニシアチブのサイトで知りました。
いかに私の交際範囲が狭いのかと思い知りましたが…。

さて、内容はというと、とても良かったです。
一番前だったのでスクリーンがよく見えましたし、話し方もとてもわかりやすくて、メモを取っている間にスクリーンから目を離していてもよく理解できました。

今日説明していただいたGAの機能については、自分で操作して知ってはいましたが、では、その機能をどのように使うのか、どう分析に活かすのか、まさにタイトル通りの「活用方法」のヒントを色々いただきました。

例えば、
・ユーザーフローは漠然と全体を見るのではなく、調べたいページを最初に決めてから前後の流れや離脱などを見る

・指標の数値を見るときは、サイト全体を見るのではなく細かく分ける
例えば、直帰率を見るならサイト全体で比較せずにランディングページの上位内で比較すると問題点がわかりやすい

などなど。

やっぱりweb解析は面白いな〜。
今年のアクセス解析サミットに行きたいなーと思ったです。

主催の板羽さん、森岡さん、ありがとうございました。

ところで、小川氏がGAを操作しているのを見ていて、初めて知ったことが。
サマリーに出てるちっちゃい折れ線グラフってクリックできるのか…。

Acrobat Proが起動しないトラブル

Sponge Design — Mon, 06 Feb 2012 18:21:06 +0000

新しいMacに環境以降してから、初めてAcrobat Proを立ち上げたら「他のsuite製品のライセンス認証が必要です」と出た。
Photoshopを起動しろというので、してみてもアラートは消えず終了させるしかない。

はて。

Acrobat Proをアンインストーラから削除してインストールし直し　→　ダメ。
メッセージは「この製品のライセンシングが動作していません」に変わり、取りつく島もない。

初期設定ぽいものを（ぽいって？）捨てて　アンインストール＆インストール　→　ダメ。
CS4と5を一緒に入れてるからダメなのか？　とCS4削除　→　ダメ。

ここら辺で気がつくべきだった。
最初にAcrobat Proを入れたのはいつだったのか。そう、CS4のインストール時に入れたのだ。
で、CS5のアップグレード版を買ったときに、特にAcrobat Proをどうかした覚えはなくてて、そのまま使えていたので忘れていた。

そして今回のインストール（ディスクからアプリケーションフォルダにコピー）はCS5についてたディスクから入れていた。

ライセンス登録が消せれば入れ直せたのだろうけど、何度アンインストールしてもシリアル入力の画面が出ないので、私が捨てたファイル以外のどこかに設定があったのだろう。
でも、Adobeのヘルプを見ても、同じ名前のファイルが見つけられなかったので、どうしようもなく。

で、最終手段でCS5も全部アンインストールした　→　再インストールで1時間以上かかった　→　Acrobat ProをCS4のディスクからインストールした　→　やっぱりダメ
でムキーッ！！

だが待て、メッセージは最初の「他のsuite製品の〜」に戻っているじゃないか。

ここでやっと気がついて、CS4のPhotoshopをインストール、
「他のSuite製品の〜」のメッセージのときにCS4のPhotoshopを起動したら、あっさり解決。

私の4時間をかえしてほしい。これからやっと仕事って…　泣ける。（am 3：20）

MacBook Pro買いました

Sponge Design — Fri, 27 Jan 2012 17:11:14 +0000

制作に使っていたiMac Mid2007、発売直後に購入してからずっと何のトラブルもなくご機嫌だったのですが、12月から作業してると急にレインボーカーソルがくるくるして何分も止まったり、そのままフリーズしたりということが続くようになりました。

ネットで調べると、どうも最近同じ機種の不具合が増えているようで、うちのもHDDの寿命なのかその他のタイマーが発動したのか。

修理云々の経緯は省略しまして、結局新しいMacを買うことにしました。
OS10.7はCS5の動作に一部不具合があると見たので、できればCS6か7を（いつか）購入した後に買い替えたかったのですが。

iMacを持ち運ぶのにかなり苦労したので、今度はノートにしました。
iBook Firewire以来の久々ノートです。

急な出費なのでスペックはあまり欲張らず、しかしAirでは私の仕事的にはちょっと無理っぽい、ということで
MacBook Pro 15インチ　2.2GHz で高解像度光沢ディスプレイ＋個人的な好みでUS-KEY ＋メモリ8GB
としました。
SSDにはとってもひかれていたのですが、必要な容量を確保するだけの予算がございませんでした。

ついでに、これまでVMware Fusion2＋Windwos Vsitaを使っていたのですがLionでは動かないみたいなのでVMware Fusion4とWindows7も購入しました。

購入店は「Apple製品正規販売店　キットカットオンラインストア」さんです。

なんだかんだでけっこうな出費になってしまったので、これでCS5が動かなかったら5.5買わないといけないのだろうか…　と恐れていたのですが、2日仕事してみて今のところ快調に動いています。

iMacが24インチだったので解像度は少し小さくなりましたが、まぁ不自由ないかな、というところ。
動作が速くて嬉しいですが、何よりトラックパッドの便利さにやられっぱなしです。
急な購入でLionについて事前に何も調べてなかったので、予想外の驚きというか。
今まで使ってたキーボード＆マウスと併用していますが、トラックバッドがあるとすごく作業効率があがります。

ちなみにUSキーボードはWindows上でアンダースコアを出せないので、ログインパスワードになんかに使ってしまうと（それは私！）、次回の起動からちょいと面倒です。
インストール後、最初に起動したときに設定しておくと良いです。

▽参考にしたサイト
usキーボード+Fusion+Windowsでアンダースコアを表示

環境移行はTime Machineのバックアップから3時間位で終わりました。
Rosettaで動いてたアプリは最新版に入れ替えて動作確認。
長年つけてた家計簿データがなくならなくて良かった…。

→愛用アプリ　サバノワ

移行中

そしてひとつだけ問題があったのがMail.app。
ためてたメールが3000通近くあったせいか、gmailアカウントは受信には使わず（バックアップも兼ねてmac.comのメアドに転送して受信）送信にのみgmailのIMAPを使っていたせいか、それともアプリの仕様が変わったせいか、何度起動してもメッセージビューワーウィンドウが表示されません。
動いている気配はあって新着メールの数は着々と更新されていくのですが。

ググってみるも、Lionでの同様のトラブルを見つけられず、結局、ライブラリのmailフォルダとpreference関連を全て削除してアプリを再起動、アカウントやメールボックスは初期状態ですが正常に動作していることを確認してから、iMacのメールボックスをエクスポートして取り込み直し、アカウントも再設定しました。
いらないメールもたくさんあったので、整理できて良かったかもしれません。

preferenceを削除しようにも、Lionではライブラリフォルダが不可視になっていたので検索でファイルが見つからず、ちょっと悩みました。
（ライブラリはFinderの移動メニューを表示させるときにoptionキーを押したままにしていると出ます）

そして、Growl。
最初にMailを起動したとき「プラグインのバージョンが古いので〜云々」とアラートが出たので、だいぶ前にメールプラグインを入れてから設定解除したのを思い出しました。

他のアプリでは使っていましたが、まぁなくても困らないので環境設定から削除しましたが、アラートは変わらず。
サードパーティ製だったっけ…（記憶の彼方）。
Mac上のGrowlと名のつくファイルを検索して全て削除しても変化なし。うっとうしいことこの上ない。

解決方法を見つけられず2日間悩みましたが、やっとこの記事をヒントにアンインストールのスクリプトを見つけました。

growlmail – a plugin for Apple's Mail.app that posts Growl Notifications – Google Project Hosting

スッキリ！

ところで、iMacはアップルストアに一度持ち込みしたいのですが、なにせ24インチなので、とてもじゃないけど電車で運ぶのは無理。
デカすぎてスクーターに乗せることもできず、車はペーパードライバーのわたくし。というか、自室から玄関に持って降りるだけで大変だったぐらいなので、どうしたものやら。
たぶんマザーボードの故障じゃないかと修理屋さんに言われ、費用もコワイ。

いつも思うけど、なんかシュールなwindows画面。
夜中にインストールしてたのでめっちゃ照明（と発泡酒）が写り込んでます。

「デザイナーのためのAndroidアプリレイアウト勉強会 in 大阪」に参加しました

Sponge Design — Sat, 17 Dec 2011 12:46:45 +0000

デザイナーのためのAndroidアプリレイアウト勉強会 in 大阪

休憩を2度はさんでの、4時間の長丁場。

前半というか3時間半は日本Androidの会関西支部の赤井忠昭さんの「基礎編」「応用編」の講義、最後30分は「具体例」ということで秋葉ちひろさんの講義でした。

いや〜　大変有意義でした。これで無料なのは申し訳ないぐらいです。
懇親会にも参加したかったのですが、はずせない用事があったので失礼させていただきました。

アンケート用紙等がなくどこにフィードバックしたら良いかわからなかったので、自分のブログに書かせていただきます。

今日は環境のインストールについてはさらっとお話しされていましたが、実はここがデザイナーが一番最初につまづくところなんじゃないかとも思ったり…。

デザイナーでターミナル使ったことがないっていう人はけっこういると思います。
恥ずかしながら私もめったに使いませんし、何かのサイトを参考にコピペして実行するだけです。

ところで、私はたまたま3〜4ヶ月ほど前にネットの情報を参考に開発環境をMacにインストールして、サンプルアプリをエミュレーターで動かしてみたりソースを見たりしていました。
その際、「.bash_profileを編集(作成)して、toolのパスを通す」の意味がわからず、ググりまくりました。
「ファイルが存在しない場合は作成してください」と言われても、どうやって作ればええんかいな、と。
（適当にエディタで中身空のファイルを作ったと思いますが…　なんか試行錯誤しすぎて忘れました）

▽その時参考にしたサイト：

世界を目指せ！Androidアプリ開発入門
↑「第5回　アクティビティの制御と明示的インテント」ぐらいで挫折しました。
App Inventorでアプリ開発はどこまでできるのか
↑挫折後、これも試してみましたが、やっぱりわからん、とそのまま中断…

ということで、事前に少しやってみたことがあったので今日のお話を聞いていて「ああー　この作業はそういう意味なのか」と納得できたところもあったのですが、そうじゃなければ環境構築の説明は「？？？？？」だったに違いないです。

全てのデザイナーがそうだとはもちろん言いませんが、少なくとも私には開発者としての基礎知識がないので、インストール自体は手順さえあればその通りにやることはできても、なぜその作業が必要なのかまではよくわかっていません。
今日はそこを初めにもう少し説明していただけたら嬉しかったです。

—–

環境構築以降は、実際の表示例も多くて大変わかりやすく参考になりました。

画像やテキスト等は外部のxmlファイルに各設定を記述してからmain.xmlで呼び出す、ということがわかったとき、なるほど〜！でした。
だからサンプルコードのmain.xmlを見ても全然わからんかったんや…と。

「完全初心者向け」ということでしたが、すごいボリュームでしたし、応用編にいたっては、「これで初心者向け？」というぐらい。
マルチデバイスへの考慮まで説明つきで、レイアウトやオブジェクト（シェイプ？）設定の具体例をこれだけ見せていただいたら、何とか画面のひとつぐらいは自力でできそうな気分になりました。

—–

「具体例」は、実際に画面をコーディングされた秋葉さんの発表。
赤井さんから数時間レクチャーを受けたのみで作られたようです。さすがでした。

htmlやcssと比べてAndroid SDKではこうだ、というような説明の仕方だったので、大変わかりやすかったです。
スライドも見ていて飽きさせないようになっているのも、ちょっと感動でした。

そういえばCSS Nite系のイベントで何度かお顔は拝見していましたが、お一人で発表されているのを聞いたのは今日が初めてでした。

お二人とも、後日スライド資料の配布をしていただけるとのことで、楽しみです。

日本Androidの会関西支部赤井忠昭さん、秋葉ちひろさん、協力団体の方々、ありがとうございました。

お友達価格やめました

Sponge Design — Thu, 20 Oct 2011 18:02:59 +0000

こういう仕事をしていると、仕事上の知人や仕事とは関係ない知人や、その知人を通してほかの誰かからや、何かの制作物を依頼されることがよくある。

そこで出てくるお決まり文句「お友達価格」、今年からやめました。

「お友達価格」といっても、相手がいわゆる素人（広告物をどこかに依頼した経験がないという意味で）だと、まったく金額の検討がつかないので、こちらがどれだけ値引きしたとしても「お友達価格」かどうか判断ができないわけで。

最初はニコニコと「こんなん作って欲しいねんけど〜」と言っていた相手が、私が「これぐらいはかかるかなぁ」と言ったとたん友好的な空気が激変したりして。（ちょっと悲しい）
さらにアレレなのは、メールでやりとしていて価格を伝えたとたんにノーレスポンス。のパターン。
もう一度メールしても無視され、そのままフェードアウトされてしまう…。
不思議なことに、私の経験上ではフェードアウトするのは男性だけで、女性は「想像より高いからやめる」とかちゃんと理由入りで断りの連絡をくれる。

話がそれました。

価格の折り合いがついて制作を開始しても、双方に「知り合い」という甘えがあって、何かうまくいかないこともある。
お互いの不満は言わなくても相手にわかってしまう。

学習しない私が悪いのだけれど、何度かそういうことがあって、やっと今年からは「正規料金か無料」と言うことにした。
というか、もう2回言った。
すごくスッキリ〜。

普通は無料を選びますわね。それでいいのだ。
もちろん、こちらは手を抜かないで仕事と同じように制作します。喜んでもらえれば私も嬉しい。仕事と同じように。

※知人などの依頼で料金の話をするのは、営利を目的とした制作物の場合です。

IS03でくら寿司の予約ができる？

Sponge Design — Sun, 14 Aug 2011 16:28:53 +0000

くら寿司の予約システムがいつのまにかスマホ対応し（始め）てた！
あれー　いつからできるようになったんだろう。今年の初め頃、なんとかしてできないかと色々調べてて、結局諦めたような気がするんだが。

今日、家族とくら寿司行こうとなって、いつも通りにガラケーにICカードを差し替えて予約したんだけれど、なんとなくさっき「くら寿司　予約」で検索したら、IS03で予約できたという方のブログがいくつかヒット。

ある方のブログに「EPARKのサイトでWi-fiでは使えないと書いてあるものの予約できた」とある通り、私もWi-fiでログインできたので、たぶん予約もできる気がする。
Wi-fiでは使えないつーのは、会員登録ができないってことかな。キャリアメールのアドレスがIDになるので。

まぁ、今日行ったばかりなので試してみるのは少し先になるでしょうが、IS04を使っているダンナ氏に教えたら無事に登録できたようで。（Wi-fiってなに？　な人なので3Gで登録したと思われ）

（2011-10-21追記）
先日、無事に予約できました。
ただし、携帯用サイトとは違ってスマホで見るページはサイトの文字サイズが小さくて、予約状況の更新リンクがひじょーにタップしにくかったです。

HCDの理解2011 in 京都 Vol.2

Sponge Design — Wed, 20 Jul 2011 06:03:23 +0000

今年2度目、京都のHCDワークショップに参加してきました。
　→1月に参加した1回目

「ユーザー評価」は通常2日でやるということですが、それを1日でギュッと。
http://kokucheese.com/event/index/12817/

ワークショップ内容は浅野先生のブログに詳しいです。
サイバーエージェントHCDワークショップ　ユーザ評価（観察法）

前回同じチームだった方と懇親会でお話しした方が同じチームにいたので、始めからスムーズに会話できました。
会話が始まるのが早いと課題こなすのも速くなる気がする…。

「ユーザー評価」は、事前にグループごとに割りふられた課題サイトがあり、そのサイトが最も役立つと思われるタスクと答えを作ることから始まります。

しかし、しかし、だ…。
その課題サイトが…　色んなところにかなり問題があって（あくまで個人的な認識）タスク設定にはなかなか苦労しました。

問題だらけなら問題点と改善点は出しやすいはずですが、グループ内では「そのサイトの役割が最もわかる使い方＝タスク」という言葉を「そのサイトを有用だとする」「コンテンツそのものの良し悪しには言及できない」と理解してしまったので、問題点も改善点も、主にナビのラベルと位置変更にとどまってしまいました。

他グループの発表を聞いているときに、中身もどんどんつっこんでいいんだな、というのに気がつきましたが、すでに遅し。
同じ内容のセミナーに参加する機会があれば、やり直したいところです。

あと、録画機材が1つだと書き起こしを1人で順番にやるしかないので、複数人で録画しておけば良かった、というのは大きな反省点でした。

書き起こし（てもらい）中

ほかの写真がピンボケだった…　発表シートの制作途中

先日、タブレット型PCを端末にするアプリの画面デザインをご依頼いただいたところなので、今回はタイミング的にもワークショップをとても楽しみにしていました。
終わってみれば反省だらけですが、作業中はグループ内で話しているだけで自分と違う視点をもらって面白かったです。

クライアントにお願いして、せめて社内で1回はテストやってもらおうと思っています。
結果が数値で見えるというのは誰にでももわかりやすいのでは。
NE比見てガックリするのは私だけなんかもしれない。

講師の浅野先生とモンキーワークス株式会社様、チームでPC貸してくださったWさん、作業をほとんどやっていただいたKさん、ありがとうございました。

ところで今回からタイトルに「2011」が入っている。ということはVol.3も今年中に…？

おまけ

自サイトスマホ版

Sponge Design — Wed, 22 Jun 2011 14:13:07 +0000

遅ればせながら、Dreamweaver CS5.5とjQuery Mobileを使って、仕事用サイトのスマホ版を作っています。

制作の参考にしたのはこちら。

CS5.5はまだ購入していないので、とりあえず試用版をダウンロードして制作開始。
静的なページを制作するには上記サイトの情報で十分でした。

ところで、仕事用サイトはMODxで作っているのですが、動的に生成するコンテンツはなくてトップページのNews部分も、テンプレート変数だけ設定してhtmlを直接編集して更新しています。
というのは、その時々によりリンクがあったりなかったり、更新日以外の日付を表示したかったり、並び替えもしたかったりで、条件を考えて動的に生成するようにするよりhtmlを書く方がチャチャッと簡単に更新できるから、あえてそうしていたのです。

が、スマホ用サイトのトップページにPC用と同じhtmlコードをまた書くっていうのは…　さすがに「素人やないんやから」つー話です。

仕事サイトトップページにはこのブログの最新記事も表示していますが、Google AJAX Feed APIでRSSを取得しています。
この部分はそのままスマホ用トップページで使えたので、NewsもMODxからフィード出力さえできれば同じように取り込めるな、と。
で、トライ！

ニュース部分だけ管理画面から更新できるように変更する

MODｘで新着情報更新システムを作ってみるを参考にさせていただきました。

うちのnews_tplはこんな簡単なコードです。
一応動いてるようですが、間違ってたら誰か教えてください…。

1 2	[+news_disp_date+] [phx:if=`[+news_link_url+]`:is=``:then=`[+news_body+]`:else=`[+news_body+]`]

もともとYuga.jsを使ってリンク先が別ドメインの場合は自動的に別ウィンドウを開くようにしているので、参考サイトにあったリンクターゲットに関するテンプレート変数や条件分岐は入れていません。
テンプレート変数の名前を一部変更して表示日付のフォーマットは変更しました。

また、参考サイトで使ってらっしゃるらしいManagerManagerは入れていません。自分が更新するので別にえーわ、と。
Ditto2.1は以前から入れるだけは入れていたので（使ったことはなかったけど）、特にスニペットは追加していません。
PHｘはDitto2.1に含まれているとのことです。

ニュース部分をRSSで出力する

こちらを参考にさせていただきました。
RSS 2.0を出力する

上記記事で出力するのはサイトマップですが、フィードを作りたいのでコードをフィード用にします。
また、あくまでGoogle AJAX Feed APIで日付と本文を拾えればいいだけで公開するつもりはないので、コードはてきとーです。

テンプレート：rssFormat

 

 
 
  [(site_name)]
  [(site_url)]
  [(site_name)]
 
 
[*content*]

チャンク：rssTpl


      [+news_body+]
      [+news_link_url+]
      [+news_disp_date+]

通常のフィードなら〜は記事があるページにすべきだと思いますが、本文が1行しかないページを表示しても仕方ないので、記事内のリンク先[+news_link_url+]にしました。
リンクないときはどうなるんやろ…。（テストしてません…）

あと、Google AJAX Feed APIで取得するrssファイル用にリソースを新規作成します。
上記rssFormatをテンプレートとして指定し、コンテントタイプをtext/xmlに。
そして本文[*content*]）は以下のようにしました。
各変数と値についてはMODxの関連サイトで見てみてください。その他にも指定できます。

1	[!Ditto? &parents=`24` &tpl=`rssTpl` &display=`5` &language=`japanese-utf8` &sortBy=`news_disp_date`!]

これで無事にフィード出力→取得できたのでよしとします。

Safariで確認したスマホ用「更新情報」ページ

レスポンシブデザインとかモバイルファーストとかを意識してサイト全体を作り直せば、わざわざモバイルサイト用にフィードを出力する必要はないのでしょうけれどね…。
GAを見ると去年まで多かったIE6〜7ユーザーがだいぶ減ってきてるので、そろそろやらんとあかんですね。

完成したら公開します。

（2011-08-31追記）
　やっとアップしました。
　スマホでPCサイトのトップページにアクセスするとアラート画面が出てスマホページへ誘導されます…　たぶん。
　振り分けのjsは以下のサイトより使わせていただきました。

JavaScriptで振り分けてスマホサイト完成！

泡沫webディレクター お仕事日記