サイトデザインで気をつける点

この仕事で気をつけようと思った点をいくつか書いておきます。

• 操作方法を色だけで判断させない。赤と黒が同じように見える人がいるため、黒いテキストの中でリンクの文字色を赤にするには下線が必要、など。
• 単に色の違いが判断できればよい、という場合は明度差をつける。赤と緑が同じように見える場合も、どちらかを明るくすると違いがわかる。または色の境目にラインを入れる。
• 黒背景に赤を置く場合はオレンジ寄りにすると見やすくなる（本の中の事例ではほとんどがこれで解決してました）。
• Adobe Illustratorの「表示＞構成設定＞」で色弱の見え方をシミュレーションできる。Photoshopでもできる。

高齢者の見え方

高齢者の場合も色の見え方に変化があるそうです。全体に黄色みがかる、青が捉えにくい、まぶしさを極端に感じるなど。
視界の一部にまぶしいものがあるとそれが際立ち、周囲のコントラストがわかりづらくもなるそうです。

色の誘目性

これは色弱の方に限りませんが、おもしろかったのでご紹介。
背景色により色の誘目性（目を引く）は変化します。下の図は、赤、オレンジ、黄色を例に背景色を変えたもの。数字は誘目性の高い順番です。

「赤」は白の上では一番よく目立つのに黒に置くと一番目立たない。黒とグレーの背景では「黄色」が一番よく目立つ。

実際にはデザインする上で自然と気づくことで、特に必要な知識ではないと思いますが、これを見て「グレースケールは尺度的な色」という先入観がなくなりました。白も黒も周りとのバランスで立ち位置変えますね。

念のため手順と問題のあった点など書いておきます。

最短のパーマリンク設定方法

WordPressの管理画面＞設定＞パーマリンク設定で「カスタム構造」を選択し、「/%post_id%」と入力します。設定はこれだけ。ただ文字通り変化しないことが前提のパーマリンクなので変更する際は慎重に。

パーマリンクの仕様、それによる問題点

以前はパーマリンク「日付と投稿名（以下、a,b）」を使用していたので、上の修正をするとURLは下記「a→A」のようになります。同時に日付アーカイブも「b→B」のように変化します。

a: http://hasegawahiroshi.jp/2012/02/01/hello-world/
b: http://hasegawahiroshi.jp/2012/02/
　↓
A: http://hasegawahiroshi.jp/2518
B: http://hasegawahiroshi.jp/date/2012/02

この場合、投稿ページ「a→A」の変化については、WordPressが勝手にリダイレクトしてくれるのでほぼ問題なし（マルチバイトで長すぎる場合など一部例外あり）。

ただ、それより問題なのは「http://hasegawahiroshi.jp/2012」というリンク。今まで日付アーカイブ（b）だったところ、今度は投稿ページのパーマリンク（A）として認識されてしまいます。

対処方法

日付アーカイブの「年」「年月」「年月日」で対応が分かれます。このサイトでは「年月」アーカイブのみを利用していたので「年月」用の対策だけ行いました。
「.htaccess」に下記を追加します。「年月日」の場合も同様に対処できると思います。ちなみにさくらのレンタルサーバ スタンダードを使っています。

RedirectMatch permanent /20(..)/(..)/$ http://hasegawahiroshi.jp/date/20$1/$2

「年」アーカイブの場合はもう少し強引な方法（ケースバイケースなので一例だけ）。まず「年月」などと同様に、年アーカイブリンク（〜/2012）でのアクセスはリダイレクトします（〜/date/2012へ）。すると「2011」などのポストIDが使えないということになるので非公開記事でフタ。それらを新たな記事として再作成するなどで対処できそうです。

変更後のフォロー

変更した後、対処に漏れがないか「Googleウェブマスターツール」でチェックします。一日ほど経つとアクセスできないURLが「クロールエラー」として表示されるので、重要なものがあれば「.htaccess」にリダイレクトを追加していきます。

一つは、使用しているテーマ内のfunction.phpに下記を追記する方法。

<?php
function wp_admin_textarea() {
echo "\n" . '<style type="text/css">textarea.wp-editor-area{font-size:16px !important;line-height:1.8em !important;}</style>' . "\n\n";
}
add_action('admin_head', 'wp_admin_textarea', 100);
?>

もう一つはブックマークレット。下記「WPFontL」をブックマークに入れて（ブックマークバーにドラッグするなど）、入力時に毎回押します。function.phpを触りたくない人用。

WPFontL

参考：http://bookmarklet.web.fc2.com/bookmarklet_057.html

カラーミーショップの「カート」がつい先日スマホに対応したので、これを機にマクロビマートでも対応しました。
カラーミーショップの中にスマホ専用テンプレートは以前からあったんですが、テンプレートが二重管理になるのでこちらは使っていません。カラーミーショップの機能として使っているのは「スマホ向けカート」のみ。それ以外は、PCサイトのCSSを上書きしてスマホ用サイトにしています。

カラーミーショップ内での分岐処理

HTML（テンプレート）をほぼ変更せず、「iPhone、iPod、Android」の場合だけ、スマホ用のCSSを上書きします。厳密にはjQueryでHTMLを書き換えていますが、PCサイトを汚すこともないのでチェック工数もスマホ側だけで済みます。
またカラーミーショップの新しいカートシステムを採用すると、PC用とスマホ用に自動で分岐してくれるようになります。スマホ側のカートはカスタマイズできませんが、十分きれいにレイアウトしてくれます。

PCサイトが既にある場合、新たにHTMLから設計するのは大変です。カラーミーショップのスマホ用テンプレートはその重複作業を強いることになるので、PC用テンプレートの側にも「スマホ用上書きCSS」が書けるようになればと思いました（→お願いカラーミー）。

PC用のサイトをそのままスマホに対応

PCサイトのスマホ対応について、少しまとめておきます。

マークアップ

普段のマークアップでも、セレクタだけで全ての場所を特定できるようにしておくことは必要な気がしました。
スマホサイトでは見せなくても良いという情報をCSSで簡単に消せるようになります。スタイル上は不要でも、一定のパーツ毎にIDを付けるぐらいはしてもよさそうです。

カラム・
画像サイズ

基本１カラムにすることになります。例えば、PCサイトではメインとサイドメニューの２カラムあった場合、それぞれが同じ幅になるイメージ。
特に画像の扱いは注意。WordPressの画像挿入ではサイズ毎にクラスが指定されるのでこういう時にとても便利。

文字サイズ

ブラウザ側でデフォルトサイズを規定されるのでCSSでオフにしておきます。
（-webkit-text-size-adjust: none）

画面の向き

JavaScriptで向きを判断して、bodyのクラスを切り替え。それぞれにスタイルを用意します。Android携帯は端末によっても縦横比が違うので、幅の指定に「%」がよく使われるようです。ただ構成が複雑な場合、完全に揃えるのは難しそう。

チェック環境

iPhoneでのチェックは4Sのみ。Androidはエミュレータをインストールして、いくつかのバージョンでチェックします。細かい動作をきちんと確認するにはこれが一番現実的、と今は判断しています。

iPadなどタブレットは今後も解像度が上がり、PCサイトのままで十分閲覧できると思いますが、スマホ対応については今後も必要になりそうです。
理想はPCとスマホを同レベルで設計することですが、既存サイトがきちんとマークアップされていれば、CSSの上書きで十分きれいにレイアウトできると思います。「うちのサイトをiPhoneでも見やすくしたい」という時は是非ご相談ください。

世界中の写真が集まる flickr。その中から営利目的でも使用できる Creative Commons の写真だけを検索できます。ウェブデザイン、フライヤーの制作などにご利用下さい。ただし撮影された内容に著作権、肖像権等を含む可能性があります。利用方法につきましては Creative Commons Japan FAQ をご覧下さい。

クリエイティブコモンズという権利はアップした本人の判断なので、実際は撮影されたものに問題を含むことがあるかもしれません。ご使用の際は十分ご注意ください。景色に含まれる建造物などは基本的に問題ないようですが（参考「建物の写真の著作権 All About」）、人が写っていれば肖像権などの問題もあり難しいところです。自身の判断で上手くご利用下さい。

ちなみにFlickr内にもこれと同じ機能はありますが、目的が合えば若干こちらの方が使いやすいかなと思います。

今回の変更点

URLのハッシュ「#」に続けてキーワードを表示するようにしました。後でページを表示する時に一手間減らせます。ただブラウザの戻るボタンには未対応。この辺の処理、難しいです。

またクリエイティブコモンズの種類がいくつかありますが、拡大した際に種類が表示されるようにしました。表示しているのは下記の３種類。全て商用利用できるもの、とされています（実際は個々にご判断ください）。

CC BY 2.0

表示：あなたは原著作者のクレジットを表示しなければなりません。

CC BY-SA 2.0

表示：あなたは原著作者のクレジットを表示しなければなりません。
継承：もしあなたがこの作品を改変、変形または加工した場合、あなたはその結果生じた作品をこの作品と同一の許諾条件の下でのみ頒布することができます。

CC BY-ND 2.0

表示：あなたは原著作者のクレジットを表示しなければなりません。
改変禁止：あなたはこの作品を改変、変形または加工してはなりません。

それから、ライブラリをPrototypeからjQueryに変更。変数の使い方などまだまだ改善できそうですが、とりあえず動くというところまで来ました。このツールを使ってJavaScriptの処理スピードなんかもテストしていこうと思います。画像が後からやって来るところももう少し上手く見せたい。
JavaScriptはPHPとは違って変数の中身が動的に変化していくので嫌でした。が、その辺もようやく慣れた気がします。アプリ開発ってこういうことなんですね。
ただ当分は自分が書いたコードで仕事ができるとは思っていないので、この辺で協力してくれる人を探しておきたいとつくづく思いました。良い人いましたら、ご紹介下さい。

XREAが大規模な増強メンテナンスを行います。数字の上では回線速度やメモリなどかなりの増強がされるので、安定してくれれば今まで以上に人気も出そうです。

ただこのメンテナンスのネックはIPアドレスが変わる点。通常のサーバメンテナンスではありません。

利用者全員への影響

まずサイトが見えない、メールが届かないという現象が、一瞬か一時間か一日かわかりませんが、必ず発生すると思います。これは数日経てば解決しますが、その移行期間に起こったトラブルへの対処だけは覚悟しておきましょう。

またおそらくサーバそのものが変わるのでデータの移行方法によっては、データの欠落もありそうです。事前にバックアップや、直前の更新内容など把握しておく必要があります。
移行の後、旧IPアドレスに届くメールがどうなるか（旧サーバを起動したまま残すのかどうか）を、今サポートに確認中です。

【2/24追記】
以下、サポートへの質問とその回答。サイトもメールも少なくとも数時間は止まると思った方が良さそうです。

他社ネームサーバを利用している場合

他社のネームサーバ（ムームードメインなど）を利用している場合は、メンテナンスが行われたタイミングで設定変更が必要です。ただ事前に発表されるタイミングで必ず移行されるという保証もないので、準備していても混乱はありそう。

と、いろいろ不安の多いメンテナンスです。全く問題無く通り過ぎるケースもあるとは思いますが、少なくともサーバからのアナウンスメールがきちんと届くようにしておきましょう。

移行のトラブルを回避する

移行のトラブルを防ぐには、事前に他の会社のサーバへ避難して、もう一度戻す（かそのまま引っ越す）形しか浮かびません。IPアドレスが変わる点は同じですが、前後の挙動が把握できるので対処ができます。ただ手間はかかるので手順を間違えばトラブルは起こりますし、当然コストもかかります。

移行する場合、料金的にはロリポップやさくらのレンタルサーバでしょうか。長谷川のおすすめはさくら。
ただ冒頭に書いた通り、移行後のXREAはちょっと魅力。今では業務用として薦めることはあまりありませんが、テストサーバなどとしてはとても便利なので気になるサーバです。

マクロビオティック マクロビマート
販売する商品は、本格的にマクロビオティックを実践されている方にもご利用いただけるものですが、よく見ると誰もが食べ慣れた当り前の食品ばかりです。
有機農法で作られたものが多く、不要な添加物も使われていません。そのためむしろ食事法を意識していない方にこそ、普段使いとしてご使用頂きたいとマクロビマートは考えています。

以下、技術的なお話

トップページなどカラーミーショップ以外のページは今回WordPressではなく、PHPでCMSらしきものを自ら作りました。管理は長谷川が行うということもあってファイル操作で簡単に更新ができるようになっています。構造はWPのテンプレートに似せているので移行も比較的容易。

こんな意図でデザイン

カラーミーショップも必要十分な機能を持っています。これ以上複雑になっても使う側が迷うだけという気もするので、あとはいかに使う側の邪魔をしないかというところ。メニューが同じ場所にあること、読む場所とクリックする場所がわかること、写真や文字を大きく表示できるレイアウト、行きたい場所や戻りたい場所へのリンクがカーソルの近くにあること。まだまだ改善できるところはありそうですが、これらを意識してデザインし直しました。結果、よくあるショップサイトになりますが、それで良いと思います。

商品一覧はいつも悩みます。jQueryの処理量のバランスや、元画像が一定サイズでない場合の処理などお店の事情によっても変わってきます。今回はがっつりjQueryで操作。若干、画像の加工処理が遅れますが処理量も多いので隠す処理はやめました（処理の順番かも。今後の課題とします）。

携帯・スマホ対応

それから、カラーミーショップには携帯サイト機能があります。今はまだ携帯利用者も多いので、決済方法に問題がなければ有効にした方が良いと思います。とりあえずデフォルトのテンプレートで十分なんですが、今回マクロビマートサイトでも少し手を入れてみました（今は実機が一切ないので携帯サイトの制作は承っておりません）。

今回わかったのは、とても見えにくい制限があるということ。PC向けのデザインテンプレートも同様ですが、使える変数がテンプレート毎に偏っている点は特に注意が必要です。なぜかトップページにしか使えない変数がとてもたくさんあります。携帯サイトも必ずしもトップから入るとは限らないと思いますが、携帯にはトップを重くするという文化があるのかも。いずれ携帯サイトも限られた環境で特殊な使われ方をしていくと思うので、CSSなど使わずシンプルなHTMLデザインで十分だと思います。

代わりにこれからスマートフォン用のサイトデザインに着手します。iPadでは今のままで十分ですが、iPhoneからはまだ見づらいので。カラーミーショップにはスマートフォン用にもテンプレートが用意されていますが、デフォルトのままでとても無機質。リデザインしていこうと思います。

良いお正月を迎えられました。昨夜帰省から戻り、今日が仕事始めです。今年もよろしくお願いいたします。リマインダーなど整理しながら、順番にお仕事進めております。
ただ明日５日、半日ほどお休みをいただきます。どこに行くか決めていませんが、東京でも初詣をしてこようと思います。ご迷惑をおかけします。

今月31日から新年1月3日までお休みをいただきます。この間は作業等できませんが、何かありましたらメールにてご連絡ください。

今年は辛い年になりました。まだまだ大変な思いをされている方も多くいらっしゃいますが、ともかく今は無事に年を越せることを喜びたいと思います。

来年に向けて考えていることをいくつか。まずGoogleの20%ルールのように自由な研究開発にもう少し時間を割こうと思っています。今年は手がふさがってできなかったことがたくさんあるので、少しずつ消化して通常業務にもつなげていきます。このサイトのリニューアルにも着手しました。

それから、これまでは効率を考えて一人で仕事が完結するように努力してきたんですが、他の方とも工程の一部を共有するような良い方法がないかと考えています。コストや時間に跳返ってはあまり意味がない点と、問題点の共有には守秘義務も必要になるなど解決すべき点は多いんですが、納品物のクオリティを上げるため一人だけど一人じゃないという形を模索していこうと思います。

まだ一週間ほどありますが、皆様よい年をお迎えください。