Smashing Magazineの「アクセシビリティに関する記事」を読んで、やってみようと画策中なのがタイトルのそれ 。

SEOというよりは、アクセシビリティに配慮したマークアップをしようよ。ってことなので、タイトルは釣りに近いです。すんません。

早速その方法。Smashing Magazineで紹介されていた例を以下で紹介します。

たとえばロゴなんかをマークアップするとき、画像にalt属性を付けて記述したりする。
だが、これはアクセシブルでないので、テキストを含んだマークアップにしましょうよ、とまあそういうこと。

以下、マークアップ例。(サンプルはこちら

1) アクセシビリティがよくないマークアップ

<h2><img src="logo.gif" alt="エアロパス" /></h2>

2) アクセシブルなマークアップ

<h2><img src="logo.gif" alt="エアロパス" />エアロパス</h2>

3) 2のままだと表示があれなので、ちょっと改良

.alternate{
	position:absolute;
	text-indent:-1000em;
}
<h2><img src="logo.gif" alt="エアロパス" /><span class="alternate">エアロパス</span></h2>

この方法なら、CSSオフ・画像オフの環境でも内容が読み取れるし、スクリーンリーダーもOK。おまけに検索エンジンにも優しいので、試してみる価値はあるかも。

最近、「SEOが...」と言われることが増えて色々とやってるけど、そういう細かい部分より、コンテンツが一番重要だということを忘れないでいたいものだ。

(参考記事):
10 Ways To Make Your Site Accessible Using Web Standards | How-To | Smashing Magazine
ALT属性に記述したテキストとヤフー SEOを研究するブログ
検索結果でウェブページの表示順序を上げるには - インフォセンター - Yahoo!検索
テキストと画像のalt属性でリンクの効果に違いはありますか? | Web担当者Forum

最近、ちょこちょこお世話になってるjQuery
便利なのはいいんだけど、読み込み時間が気になる。ってことで、jQueryの機能が必要ないページで読み込むのを控えてたら、JavaScriptエラーでつまづいたので自分用にメモ。

たとえば、ロード完了時にアラートを出す以下のコード。

このケース、jQueryが読み込まれてないと、「$ってナンデスカ?」っていうエラー「$ is not defined」が発生してしまう。

ってことで、jQueryの読み込みを判別するため、以下のif文を追加した。
サンプルページ1 / サンプルページ2

これでめでたくエラーとはおさらばです。

博多のおいしいものを紹介するグルメサイト「博多うまいもん.com」のリニューアルがやっとこさ終わりました。

博多うまいもん.comのサイトキャプチャ

今回のリニューアルのポイントは以下の3つ。

1) 可読性を高めるため、テキスト中心のデザインに。
前のデザインが前衛的過ぎて、理解されにくい感じだったので、とりあえず分かりやすい感じにした、ということです。
2) メンテナンス性を高めるため、WordPressで再構築。
前のコーディングが、危ういバランスで成り立つトリッキーな感じだったので、web屋っぽい方法を採用してみたとです。
3) キャラクター登場。
イラストを描く練習の一環。ああ、ペンタブレットが欲しい。やっぱWacomがいいのかな?

まあ、そんなわけで、1年前から計画していたリニューアルがなんとか無事完了。

「やっとできた・・・」という安堵感にひたっている今宵ですが、せっかくWordPressで構築したことだし、これからは精力的に更新していきます!(という意気込みです。)

WordPress関連のエントリーも、そのうちまとめます(・・・多分)。

福岡の街並みを歩いて巡る「福岡景観よかとこガイドツアー」なるものに参加してみた。

よかとこガイドツアー集合

このイベント、先月の市政だよりで紹介されていて、軽い気持ちで申し込んだのだが、参加してみてビックリ。ほぼ半日かけて、天神・百道・博多という3エリアの街並みを巡るという、盛りだくさんの内容。

まあ、そんな訳でいろんなとこに行きました。その中でも印象深かった場所をピックアップしてご紹介。

赤レンガ館

まずは、天神の昭和通り沿いにたたずむ「赤煉瓦文化館」。なんかレンガ造りの古い建物があるなあ、という感じで今まで見てたけど、この建物、東京駅の設計で知られる「辰野金吾(たつのきんご)」の作らしい。

そう聞くと、なんだか重厚で荘厳な感じがするから面白い。しかもこの辰野氏は佐賀の唐津出身で、田舎ものなところが僕の心に◎。

福岡市役所

お次は福岡の真ん中に居座る「福岡市役所」。これまた著名な菊竹清訓(きくたけきよのり)の作。

菊竹氏が久留米出身という情報はまあさておき、菊竹さんの弟の彫刻作品がアクロス正面にディスプレイされてるというのが、因果関係も含めなんとも面白いところ。くだんの彫刻は撮影失念・・・ああ。

福岡銀行本店の外観

で、天神エリアの最後は「福岡銀行本店」。何度も前を通ってるけど、通りかかるそのたびに見とれてしまう存在感はさすがの一言。

数年前の東京都知事選に出馬して名が広まった黒川紀章の設計だけど、中庭というか、 広場というか、敷地内に広がる大空間が見ているだけで気持ちよい。

ガイドの先生いわく、これは私的な空間・公的な空間のどちらでもない「中間領域」と呼ばれているらしく、日本古来の縁側などにも通じる考え方なんだと。

ここで黒川紀章本人の言葉を引用してみる。

もし容積率が決まっているのなら、それをフルに使い、それ以上建てられない部分はくり抜いたらいいのではないか、そう考えてつくった「福岡銀行本店」(1975年)です。

「くりぬく」という大胆な発想、それ自体がすごいのはもちろんだけど、それに意味を付けていく作業というか、肉付けしていく力。そんなものを、これから身に付けたいと思った「よかとこガイドツアー」でした。

あ、百道のことも博多のことも書いてないけど、綺麗にまとまったようなので、今回はここで終了。余力があれば第2回レポ書きます・・・

博多の街並み

参考リンク:
【福岡景観よかとこガイドツアー】博多、天神、百道浜を「ぐりーん」で巡ります

福岡のweb制作会社をまとめた以前の記事の第2弾。
制作実績とか調べたいときに、いちいちgoogle先生に頼るのもあれなので、それ用に追加。
早速、制作会社一覧をどうぞ。

paperboy&co.
レンタルサーバ界で有名な「ペーパーボーイ」。本社は東京みたいだけど、ここ福岡発の会社。頑張れ、地元企業!
[主な実績] ロリポップ!, heteml
ユーステーション
最近、いいサイトを連発している模様。オフィスは市役所裏。
[主な実績] 「博多町家」ふるさと館, 北九州港開港120周年
ジャパンイズム
博多駅の全日空ホテル裏。なんか手広くやってる。
[主な実績] ユーコーラッキーグループ, ラブコレ福岡
トランスメディアGP
制作実績が載ってないけど、昔は自社メディア以外もやってた気が。大名の(旧)沼田病院裏。
[主な実績] 懸賞ドリームプライズ, もんじろう - 言葉・方言変換サイト
デザイントランスメディア
大名のトランスメディアといつもごっちゃになる。こちらは百道。サイトは白!
[主な実績] ビューティープロショップ, 株式会社Rcore
利助オフィス
「てっとりばやし」がいい仕事する。那の津にあったはずが、いつの間にか天神の福銀本店そばに移転。
[主な実績] 聖マリア病院, 岩田屋AZ-NET
アドライズ
オレンジ色のサイトが印象的。オフィスは西通りのそば。
[主な実績] 戸上電機製作所, 東野産婦人科
ドットイメージ
福岡サンパレスの近くの制作会社。「福岡 web制作」で検索するといつも上位に表示される。
[主な実績] 格安航空券専門店のリアルチケット, 株式会社ジュバンス
ピクセルプラス
なにかとお世話になったりする野間の制作会社。「大量コーディング受付」バナーはいつまで続く?
[主な実績] RV ウエスタン, KBCメディア 人材派遣
Fusic
地下鉄赤坂駅そば。なんか、知り合いがお偉いさんになってるらしい。
[主な実績] 九州大学芸術工学部

以上、制作会社を10個付けたしてみた。
ここに書いてない会社でも、いいサイトを作ってるとこがたくさんあるはず。
「ここはオススメ!」って制作会社があれば、情報共有のためにも是非ご教授ください。

『福岡のweb制作会社』の第3回まとめがあるかも?