どれぐらいスゴいかというと、「サーバーにインストールするだけで、あとは設定ファイルをちょちょっといじれば、かなり高速化できちゃう」というぐらいスゴいのです。しかも、どんなサイトでも、どんなCMSを使っていても「インストールするだけ」。 Webサイトを高速化すると、ユーザーに優しいし、場合によっては検索結果での順位にも良い影響が出るかもしれない……それはわかっていても、なかなか本格的にサイトを高速化するのは難しいものです。 サーバー側の高速化に加えて、HTMLのつくりや画像のファイルサイズ最適化、さらにはCSSを調整しての画像スプライト化やCSS/JSファイルの結合・最適化によるブラウザとサーバーの通信本数削減などなど、実はやらなきゃいけないことがたくさん。 グーグルの提供するmod_pagespeedは、そうしたことの、かなりの部分を自動的に行うものです。 mod_pagespeedはこん

※この記事は読者によって投稿されたユーザー投稿です：編集部の見解や意向と異なる内容の場合があります編集部は内容について正確性を保証できません画像が表示されない場合、編集部では対応できません内容の追加・修正も編集部では対応できません HTML言語の最新バージョンとして、Web標準化団体であるW3Cによって現在標準化作業が進められている"HTML5"。Web業界においてスマートフォン対応が進む中、これに合わせて"HTML5"という言葉もよく耳にするようになってきました。本コラムではこのHTML5について、技術者ではない方でもその特徴を理解しやすいようにご紹介します。 HTMLの概要・歴史まず、HTMLについて簡単な復習になりますが、正式名称はHyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）。Web上のドキュメントを記述するためのマークアップ言語に

どちらのほうが検索ユーザーの目に留まってクリックされやすいと思いますか？ 確かなデータはありませんが、パンくずリストのほうがクリックされやすそうですよね（特にWeb担のような無機質なURLの場合は）。 最近の検索エンジンは、サイト上でふつうにパンくずリストを出していれば、自動的に検索結果でパンくずリストを表示するようにしてくれるようです（「リッチスニペット」と呼ばれるもの）。しかし、Web担のように、おかしなこだわりでパンくずリストの区切り文字をふつうの「>」ではなく「«」にしていると、自動認識されずにさみしいことになります。 そこで、ページのHTMLに「microdata」という仕組みで手を加えて、グーグルに「ここがパンくずリストだよ」と教え、検索結果ページで使ってもらえるようにする方法を紹介しましょう。 ふつう、パンくずリスト部分のHTMLは次のような感じになっていると思います。 <a

今回は、Webサイトやサービスをメンテナンス中にする場合に、どのURLにアクセスしても「メインテナンス中です」の画面を出す正しいやり方を、人間にも検索エンジンにも適切にする作法を主眼に解説します。 この週末の土曜深夜～日曜早朝にかけて、データセンターの設備メインテナンスのため、Web担を含むインプレスグループのほとんどのWebサイトが、どのURLにアクセスしても「メンテ中です」という表示になっていました。 なのですが、その実装がちょっと気になったので、「正しいメンテナンス画面の出し方」を説明してみます。 ※2010-01-16　Retry-Afterを指定するHeaderの指定を修正しました（コメント参照） ※2009-06-17　RewriteCondから [NC] 条件を削除しました（コメント参照） ※2009-06-16　Retry-Afterの記述をGMTに変更しました（コメント参

今日は、Webサイトを作ったらまずやるべきことのチェックリストを紹介しましょう。サイトは作るまでも大切だけど、作ってからのアクションも同じかそれ以上に大切。 すでにサイトを運営している人は、やってないものがないか確認してみましょう。 サイト運営日記をスタートする（変更点を日付と一緒にメモしていく）XMLサイトマップを作って更新内容が含まれるようにするGoogleウェブマスターツールにサイトを登録する → https://www.google.com/webmasters/sitemaps/XMLサイトマップを登録するURLのwwwあり／なしの統一を指定するサイトリンクの表示をチェックして調整（以降随時）Yahoo!サイトエクスプローラーにサイトを登録してXMLサイトマップを登録する → http://siteexplorer.search.yahoo.co.jp/live Webmaste

今日は、ワイドディスプレイの普及とディスプレイの高精細化が進んでいることを考慮して、改めてWebサイトに適切な文字サイズを考えてみましょう。 あなたのサイトでは、本文の基本文字サイズを何ピクセルにしていますか？ その文字サイズは、訪問者にとって見やすいサイズですか？ 二昔前は、小さな文字のオシャレなページが流行っていましたが、ここ数年は「見やすい文字サイズ」を選ぶようになっていますね。ヤフーやアサヒコムなどの代表的なサイトでは、本文16ピクセルを基本としているようです。 実はこの「ピクセル」というサイズ指定は、絶対サイズではありません。というのも、どんなディスプレイでどう表示されるかによって、実際の表示サイズが変わるからです。 ちなみに、16ピクセルの文字は、XGA（1024×768ピクセル）の15インチ液晶では4.8mmの大きさになります。手元にあった新聞の本文文字サイズを測ってみると1

日本語で読めるSEO/SEM情報Yahoo! JAPAN向けSEOの3原則 （Sphinn Japan Blog）大手のSEM企業の現役社員によるSEOノウハウのヤフー編。ヤフーでは、 サイトのトップページ1キーワードに絞ったページ被リンク数が急増したページこれらの3つが重要な要素になる。 複数ドメイン名にまたがるコンバージョンをGoogle Analyticsで解析するには （SEO初心者のEvoブログ）Google Analyticsで、複数のドメイン名をまたがるアクセスを一連のものとして解析するための解析コード修正方法解説。 商品サイトとショッピングカートが違うドメイン名のネットショップ運営者なら知っておくべき設定。 ちなみに、同ブログでは、グーグルの検索結果に「○○とは」の検索結果が自動的に挿入される現象も報告しており、興味深い。 GoogleとYahoo!の期限切れドメインのリン

この記事は前後編の2回に分けてお届けしている。前回はURL正規化タグの基本的な解説と使いどころを説明したが、今回は検索エンジン各社から提供されている情報と、URL正規化タグについてまだ不明な点を見ていこう。 URL正規化タグに関して、各検索エンジンはどのような情報を提供しているか実際のところ、かなり多くの情報を提供している。まずはグーグルの発表から、重要な箇所を引用しよう。 「rel="canonical"」の扱いは参考材料なのか、それとも命令なのか？ 重視すべき参考材料として扱います。検索結果に表示する最も関連性の高いページを判断する際に、この設定を他のシグナルと併せて考慮に入れます。 <link rel="canonical" href="product.php?item=swedish-fish" />のように、相対パスを使用して正規URLを指定できるか？ できます。相対パスは、通常

ユーザーエクスペリエンス（UX）デザインの世界に身を置くわれわれにとっては、いまや心浮き立つような時代となった。UXの価値はますます広く認められるようになり、次々に生まれる新たなテクノロジーやメディアを超えたトレンドは、UXデザインの実践面で飛躍的な進化を生み出す土壌を整えつつある。 私自身、新たなチャレンジの数々に見舞われてあやうく安全圏から押し流されそうになりながらも、インフォメーションアーキテクトとしてはそれらを大いに楽しんでいる。これまでに、ソーシャルソフトウェアやリッチユーザーインターフェースをデザインしたり、モバイル検索の未来についてのシナリオを描いてみたり、いろいろなチャネルやアプリケーションにまたがるようなUXを設計してきた。するとそのうち、VIPルームの“エラい人たち”に自分のアイデアをご理解いただこうと苦心する場面が次第に増えつつあることに気づいた。 そんなわけで、私は

これまでSEOmozで僕らが書いてきたものの中に、コンテンツ最適化の基礎についてしっかりと段階的に説明したものがなかったとは意外だ。今回はその穴を埋めることにしよう。 まず、ここでいうコンテンツとは、キーワードの使い方やキーワード最適化のことではない。これから話すのは、テキスト、画像、マルチメディアといったコンテンツの表示とアーキテクチャを、どう検索エンジン向けに最適化するかについてだ。 ここでお勧めする内容について特筆しておくべきは、その多くが二次的な効果だということ。書式や表示を正しく整えたからといって、ただちに検索順位が上がるとは限らない。だが、それによってリンクを獲得でき、そこからクリックして来る人が増えて、結果的に検索順位を押し上げてくれる可能性は高い。これから説明するやり方を日常的に利用すれば、検索エンジンからの評価が向上するだけでなく、検索アルゴリズムに影響を与えるウェブユー

端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト（以降“モバイルサイト”）の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で

Web担のサイトを少しずつ改善するなかで、久しぶりにサイト全体にわたってHTMLが正しく使われているかをチェックしてみました。結論としては、やっぱり、ちゃんとHTMLチェックとかしないとダメですね……。 というのも、先日、Operaでだけトップページの表示が崩れるという現象があったのです。Web担では、記事ごとのHTMLは基本的にすべてHTMLチェッカーを通して確認していて、記事本文のHTMLは公開前にチェックされています。しかし、一覧ページに表示されるHTMLの部分（「ティーザー」と呼んでいます）がそのチェックフローから漏れていたことが判明したのです。早速、社内で使っている記事HTMLチェックの仕組みを修正して、ティーザーもHTMLチェックされるようにしました。 そういうことがあったので、サイト全体のテンプレートなどもHTMLチェックを通してみました。もともと、Web担のテンプレートのH

ウェブの標準仕様を定める団体W3C（ワールドワイドウェブコンソーシアム）が、Webコンテンツのアクセシビリティに関するガイドライン「WCAG（Web Content Accesibility Guideline）」のバージョン2.0を12月11日にW3C勧告として発表しました。 高齢者や障がい者など、何らかの理由で通常のWebサイトではうまく利用しづらい人にも、こうすれば利用してもらいやすくなるというアクセシビリティの具体的なサイトへの適用の仕方や、正しくできているかの検証の仕方などが説明されているドキュメントです。 ちなみに、「W3C勧告」とは、その文書がW3Cによって承認され、内容が（いったん）確定したことを意味します。一般的な表現を使うと「正式版のリリース」ですね（ちなみに、その前の段階のものは、順に「ワーキングドラフト（草案）」→「最終草案」→「勧告候補」→「勧告案」と呼ばれます）

去る2008年11月7日、国内外のWebに関する著名人によって繰り広げられるイベント「Web Directions East」が開催された。「Web Directions」は、2004年オーストラリア・シドニーでの開催を機に、主にオーストラリアを中心とした「Web Directions South」、カナダ・バンクーバーでの「Web Directions North」と世界規模で行われてきた。主にWebデザイナーを対象としたイベントで、デモを交えながらWeb関連の最新情報やエキスパートの知識・アイデアを共有できる場として知られている。 今回はSouth、Northに続く試みとして、アジア発上陸となる東京での開催を果たした。3日間の期日のうち、初日は「ユーザーに優しいウェブサイトの提供」をテーマとしたカンファレンス、翌日から2日間にわたって、講演者によるワークショップが執り行われる。ここでは

僕は、普段はインフォメーションアーキテクトとして情報アーキテクチャ設計やユーザー経験デザインのプロジェクトに関わったり、プロデューサーとしてプロジェクトを統括する立場に立ったりしています。このコラムでは、僕自身の経験や情報アーキテクチャ分野での議論から、主にWebプロジェクト一般に関わるような課題や考え方を紹介していきたいと思います。 まず、第１回のテーマとしては、僕が代表を務める株式会社コンセントの体制を例にしながら、「情報アーキテクチャ」という考え方がどういうものなのかを紹介します。 そもそも情報アーキテクチャとは何か情報アーキテクチャは、簡単に言ってしまえば情報のつなぎ方のデザインです（図1）。世の中には、平面上のデザイン（グラフィックデザイン）、操作画面のデザイン（GUIデザイン）、主に製品の形のデザイン（プロダクトデザイン）など、さまざまなデザインが存在しますが、情報アーキテクチ

40分でできるホームページ運営体制チェック より良いサイト運営を実現する 40項目のセルフチェックシート［Web担当者編　2008年版］ 好評だった「40分でできるホームページ診断 ～訪問者目線編～」に続き、第2弾のチェックシートをお届けする。今回は、表側には現れない、ウェブサイトの裏側にある運営体制に関するチェックだ。 第1弾の「40分でできるホームページ診断 ～訪問者目線編～」も一緒にどうぞ TEXT：編集部 協力：株式会社 環 今回は運営体制をチェックWeb担では以前に「40分でできるホームページ診断」を掲載し、好評を得たが、前回のホームページ診断では、サイトが訪問者にとってどれぐらい使いやすいかをチェックするための要素に絞っていた。 今回は、企業のWeb担当者が、日々のサイトの運営を行ううえで意識しておかなければいけない点や、企業としてウェブサイト運営をする場合に必要になる要素を対

この特集で挙げた57の要因に関して、Yahoo! JAPANに限定して集計した重要度のランキングを示す。 プラス要因トップ20（Yahoo! JAPAN）titleタグ内でのキーワード使用被リンクのアンカーテキストサイト全体でのリンクポピュラリティ本文でのキーワード使用Yahoo!ディレクトリへの登録サイト内部構造としてのリンクポピュラリティリンク元サイトのサイト全体でのリンクポピュラリティサイト開設からの経過時間被リンクの話題関連性サイトの主要テーマと検索の関連性リンク元ページとの話題の関連性被リンク増加率本文のコンテンツとキーワードの（トピック分析による）関連性インデックス可能なテキストコンテンツの量h1タグ内でのキーワードの使用話題コミュニティ内でのリンクポピュラリティリンク元サイトとの話題の関連性リンク設置からの経過時間文書公開からの経過時間リンク周辺のテキストマイナス要因トップ5

9か月前、最初にSEOmozで働き始めたとき、僕はウェブ制作のインターンだった。それ以前の経験といえば、コードを書いたことがあるくらいだった。 SEOmozに参加してから、それこそ何百時間もかけて、いろいろな分野の知識を広げていった。特に、定番のSEO手法と中小企業向けの実務は力を入れて勉強した。この間投稿したSEO初心者のためのチェックリストは、僕が新しく手に入れた知識の結晶なんだ。 原点に立ち帰るために、SEO技術のトラの巻の母体となるべきものを丸1日かけてまとめてみた。このトラの巻は、ブログ記事として読むよりもPDFで印刷して読んだ方がいいよ（ブログ記事は印刷しにくいからね）。 ダウンロードする前に内容を確認できるように、簡単な説明をしておくよ。じゃあね！ SEO基本技術のチートシート（トラの巻）――表面

その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能