当ホームページは、WordPress（ワードプレス）のテーマ方式で制作しています。よって、既存テーマ（XHTMLバージョン）を複製して必要な箇所を書き換え、新たなHTML5バージョンのテーマセットとする形で進めました。この方法であれば、テーマセットの差し替えのみでほぼ作業完了となりますし、不具合を見つけた場合もすぐ元に戻せるので、運用中のホームページでも低リスクで移行できます。

元々、ホームページを現行デザインにリニューアルする際に、HTML5化を意識してXHTMLの構造を設計していたため、移行作業は想像以上に少なくて済みました。

具体的には、以下のような作業を行っています。

1. head要素内の省略可能な部分を削除
2. IEでHTML5の新要素を使えるように、JavaScriptを設置（オープンソースのライブラリを使用）

   <!--[if lt IE 9]>
   <script
    src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
   </script>
   <![endif]-->
   

3. XHTMLのマークアップをHTML5用に修正

   <div id="header">...</div>
   を
   <header>...</header>
   
   <div id="sidebar">...</div>
   を
   <nav id="sidebar">...</nav>
   
   <div class="section">...</div>
   を
   <section>...</section>
   などに変更
   
   シングルページについては
   <div class="section">...</div>
   を
   <article>...</article>
   に変更
   

4. これらに応じてCSS（スタイルシート）を修正

   article, aside, dialog, figure,
   　footer, header, hgroup, nav, section { display:block; }
   

5. WordPressでHTML5バージョンのテーマに差し替え

その他、WordPress（ワードプレス）のページ機能で制作しているページについては、一部コンテンツ側でタグの変更を行いました。

ざっとこんな感じです。特に問題なく移行できました。

現在、HTML5についても、W3C Markup Validation Serviceのページから正しい記述であるかのチェックができるようです。

* 当ホームページ右下のリンク（ Valid HTML5 ）からの場合、IEだとうまくチェックできないようです。

当サイトでも幾つかのプラグインを使用していますので。参考にご紹介させていただきます。

• Disable Revisions and Autosave … これを使ってリビジョン管理とオートセーブの機能をストップしています。
• Google (XML) Sitemaps Generator … Googleサイトマップに送信するsitemap.xmlを自動で生成してくれるプラグイン。Yahoo!サイトエクスプローラーでも使えます。
• PXS Mail Form … お問い合わせのメールフォームで使わせてもらっています。Contact Form 7も有名ですが、jQueryを連れてくるようなので、PXSにしました。
• del.icio.us cached++ … ブックマークのページでdelisious（ソーシャルブックマーク）に登録しているデータを表示するためのプラグイン。
• WPtouch iPhone Theme … これだけでサイトがiPhone用にリデザインされます。すごい。
• WP Zen-Coding … ウェブ制作必須ソフトウェアでも触れさせてもらったZen-CodingをWordPressのエントリー入力欄で使えるようにするプラグイン。
• WP Super Cache … WordPressのパフォーマンスチューニング用プラグイン。サーバー上にキャッシュを保存して表示スピードを高速化。

さて、良いことずくめに見えるプラグインですが、デメリットがないわけではありません。

WordPressはセキュリティ対策その他の理由でわりと頻繁にバージョンアップされますが、過度にプラグインに依存したサイトの場合、そのバージョンアップの際にプラグインが正常に動かなくなったりする可能性もあります。肝心な機能が使えなくなったりすると困りますよね。

またプラグインは、その高度な機能を実現するために、プラグイン本体に加えて、JavaScriptライブラリなど、わりと容量の大きなファイルを自動でインストールすることがあります。

これからのサイト制作には、表示スピードアップなど、サイトのパフォーマンスについての配慮が求められますが、この「プラグインが連れてくるちょっと重いファイル」は、パフォーマンスチューニングの面からは困りものと言えます。

サイトの安定運用を最優先に考えた場合、本当に必要な機能のみプラグインの恩恵に預かる、といった考え方が大切かもしれませんね。

これ以外にParallels DesktopでWindows環境を用意したり、FireworksやPhotoshopなどのグラフィック系ソフトも使いますが、作業の大半はテキストエディタで行います。

• TextMate … XHTML、CSSを書くのはこれしか考えられない、というぐらい強力なエディター。Bundlesと呼ばれるプラグインで、様々な言語を略語ベースで入力、補完することが可能です。
• Zen-Coding … TextMate用Bundlesの一つで、XHTMLとCSS用があります。略語ベースの入力をさらに拡張して、さらに強力にしてくれます。
• TextExpander … Zen-CodingはTextMate上での利用が前提になりますが、こちらはインストールしたMac上でいつでも略語ベースの入力が可能に。エントリー入力欄なんかでもオーケーですが、Zen-Codingほど強力ではないので、併用が吉ですね。
• Jedit X … これもエディターです。日本語入力、エンコード絡みなどでTextMateと併用。
• Coda … エディターはこれ一本で、といかないところが悲しいところ。足らない部分を補う形でこれも使います。
• MultiTextConverter … Windowとのファイルのやりとりで文字化けに困ったときに。文字コード変換ツールです。Windows用もあり。

• Transmit … FTPソフト。ほとんどトラブルを経験したことがないぐらい安定しています。
• MAMP … Macのテスト環境を構築。WordPressもローカルでテストできます。
• Color Schemer Studio … カラースキームの検討に。ソフト上から豊富なギャラリーをブラウズすることも可能です。
• Wallet … パスワード管理ソフト。マスターパスワード一つで膨大な数のパスワードを管理できます。ソフト上からURLを開いて、ID、パスワードの自動入力が可能。

これらに加えて、先のエントリーで触れたFirefoxのアドオンも必須ツールとなっています。

蛇足ですが、現在Zen-Codingがちょっとしたムーブメントになっている様子。Zen-Codingは実はTextMate以外のエディタでも使えたりするので、興味のある方は“TextMate Zen-Coding”などで検索して調べてみてください。

参考：EmEditorでZen-Coding、TEA for Coda（Coda用Zen-Coding）

Firefox自体の動作が遅くなるものは極力無効にしたり、新しいものを試してみたりと、割と常時変動します。

膨大な量のFirefoxアドオンでじっくり探せば、皆さんもきっとニーズに合ったものが見つかります。（一応、ウェブ開発に関するものと、そうでないものを分けておきます。）

• Add Bookmark Here ² … ブックマークの場所を選択
• FireGestures … マウスジェスチャーで色々な操作が可能
• Easy Youtube Video Downloader … Youtubeのページにダウンロード用リンクを
• Gmail Notifier … Gmailの着信通知
• Google Redesigned … Googleサービスの見た目をガラっと変更
• Xmarks … 複数のパソコンのFirefoxでブックマークを同期
• NoScript … とにかくウィンドウをリサイズされるのがイヤな人はコレ
• 1Password … 覚えるのはマスターパスワードひとつでオーケー（これのみ有償）
• Greasemonkey … AutoPagerizeは手放せませぬ
• tombloo … 色々なサービスへ簡単にポスト
• SQLite Optimizer … Firefoxの動作が遅くなってきたと感じたときに

• Web Developer … ウェブ開発用ツール一式
• Firebug … こちらも定番ウェブ開発ツール
• Google Page Speed … パフォーマンスチューニング用ツールGoogle版
• YSlow … パフォーマンスチューニング用ツールYahoo!版
• ColorZilla … ウィンドウ内の色をピックアップ

当ホームページでも、オープンソースのブログ構築ツール、WordPress（ワードブレス）をCMSとして使用しております。

イーシフトでは、更新のしやすさ、SEO効果の高さに着目し、WordPressをCMSに使用したホームページの構築をご提案しております。自社ホームページへの導入をご検討の方は、ぜひご相談ください。

また、検索エンジンの利用者は、検索結果の最初の数ページに掲載されているサイトしか見ないとも言われています。ここで重要になるのは、出来る限り検索結果の上位に表示されるようなサイトであること。

そのためには、検索エンジンロボット（情報収集プログラム、クローラー）がサイトの「情報」を収集しやすく、かつ、その「情報」が重要であるとランク付けしてくれるような状態にサイトを最適化する必要があります。これが、SEO（Search Engine Optimization、検索エンジン最適化）と呼ばれる技術です。

根本的なSEO

SEOには、様々なアプローチが存在します。以下はその主要例です。

1. キーワードの出現位置、出現頻度、近接度の最適化
2. XHTML（HTML）の適切なマークアップ
3. 巡回しやすいサイト内リンク構造（クロスリンク）
4. テーマに即した外部サイトリンク（アウトバウンドリンク）
5. 明確なページテーマ
6. 被リンク（外部サイトからのリンク）数のアップ
7. キーワードを含むリンクテキストによる被リンク
8. 良質なサイトからの被リンク
9. 同じテーマのサイトからの被リンク

1 – 5はサイトの内部要因に対する最適化、6 – 9は外部要因に対する最適化を示しています。

SEOといえば、キーワード出現率を増やす、被リンク数を増やす、というアプローチ主体でとらえられがちですが、それ以前に、「検索エンジンが情報を収集しやすい」という点を重視すれば、2の「XHTML（HTML）の適切なマークアップ」が最も重要であり、根本的なSEOと考えられます。

そして、この「XHTML（HTML）の適切なマークアップ」とは、Web標準に沿ってサイトを制作し、かつ、正しく構造化を行うことに他ならないのです。

関連リンク

• Wikipedia: 検索エンジン最適化

関連ページ

• XHTML（HTML）の構造化
• Web標準（XHTML+CSS）

構造化について

「構造化」とは耳慣れない言葉ですが、元来XHTMLは、文書構造をあらわすための言語であり、ひとつのページに記述された文書は、XHTMLタグの用途に沿って、正しく意味付けを行い、文書構造を明確にする必要があります。

例えば、意味付けには、以下のようなタグを使います。

<h1>大見出し …</h1>

<h2>中見出し …</h2>
<p>段落 …</p>
<p>段落 …</p>

<ol>
<li>番号付きリスト 項目1</li>
<li>番号付きリスト 項目2</li>
</ol>
<ul>
<li>番号なしリスト 項目1</li>
<li>番号なしリスト 項目2</li>
</ul>

<address>連絡先</address>

逆の例として、同じタイプの項目が並ぶ場合に、以下のようなタグが使われていると、構造化が意識できていない、ということになります。

パターン1（項目すべてが別の段落）
<p>同じタイプの項目1 …</p>
<p>同じタイプの項目2 …</p>
<p>同じタイプの項目3 …</p>

パターン2（項目すべてをひとつの段落として改行で分ける）
<p>同じタイプの項目1 …<br />（改行）
同じタイプの項目2 …<br />（改行）
同じタイプの項目3 …</p>

構造化はなぜ必要か

正しく構造化された場合とそうでない場合で、一体何が異なるのでしょう。

Web標準では、「デザイン」をCSSで行います。CSSによるデザインは柔軟性が高く、構造化されていな場合であっても、文字の大小や色を変えることで、見出し風やリスト風に見せることは可能です。

では、訪問者にとって、デザイン、見た目が関係ない場合はどうなるのでしょうか？

その最たる例が検索エンジンロボット（情報収集プログラム）です。これらのロボットは、XHTMLタグによる意味付けを参考に、サイトのページに書かれた「情報」を読み取って収集していきます。XHTMLが正しく構造化されていれば、収集する「情報」は、当然精度が高くなります。

インターネットを利用するほとんどの人が、検索エンジンを利用して自分のニーズにあったサイトやサービスを探しています。その最も重要なサイトの入り口である検索エンジンに、精度の高い、正しい「情報」を収集してもらうためには、「XHTMLの構造化」が必要不可欠と言えるのです。

イーシフトでは、Web標準化の一部として、「XHTMLの正しい構造化」を意識したサイト制作を行います。

関連ページ

• 最も根本的なSEO
• Web標準（XHTML+CSS）

イーシフトでは、特に支障のない限り、Web標準（XHTML+CSS）でサイト制作を行います。

Web標準化

これまでのサイトは、「情報（文書表現）」と「デザイン（視覚表現）」がひとつのページの中に入り組んだ状態で記述されており、ブラウザや見る側の環境によっては、「デザイン」部分が悪影響を及ぼし、大切な「情報」部分が正しく伝わらない、といった弊害を生じることがありました。

Web標準化は、この入り組んだ状態を整理し、まず「情報」と「デザイン」を分離することが基本となっています。

具体的には、XHTML（HTML）には本来の「情報」をあらわす部分のみを記述し、「デザイン」はCSS（スタイルシート）で行うことになります。

標準化のメリット

Web標準化により、以下のように様々なメリットが生じます。

• SEO（Search Engine Optimization、検索エンジン最適化）の効果
• 高齢者、障害者などの多様なアクセス環境への配慮を示す「アクセシビリティ」の向上
• 使いやすさを示す「ユーザビリティ」の向上
• メンテナンス性の向上

関連リンク

• Wikipedia: W3C
• Wikipedia: Web標準

関連ページ

• 最も根本的なSEO
• XHTML（HTML）の構造化

作業内容

ディレクション、デザイン、コーディング、WordPressカスタマイズ、ASPショッピングカート連携

仕様

XHTML + CSS

システム

WordPress（CMSとして使用）

作業内容

ディレクション、デザイン、コーディング、WordPressカスタマイズ

仕様

XHTML + CSS

システム

WordPress（CMSとして使用）