Design Diary: 2010

2010年12月13日月曜日

ウェブの作業を効率化するGoogle Chromeエクステンション×14

僕が常時使っている14個のGoogle Chromeのエクステンションを紹介。SEOに役立つツールが盛りだくさん！、ではなくてどちらかというと日常的なタスクを効率化するエクステンションが中心。でもどれも便利よｗ

- ウェブの作業を効率化するGoogle Chromeエクステンション×14 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

グリッドレイアウトのwebデザイン集「40+ Great Examples of Grid Style in Web design」

グリッドレイアウトのwebデザイン集「40+ Great Examples of Grid Style in Web design」: "グリッドラインを活かしレイアウトされたwebデザイン、すでに定番の形となりさまざまなシーンで展開されていますが、そんな中今回はグリッドレイアウトのwebデザイン集「40+ Great Examples of Grid S [...]"

WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS

WordPressの記事ごとに個別のCSS, JavaScriptを追加できるプラグイン -Custom CSS and JS: "WordPressの記事やページごとに、それぞれ個別のCSS, JavaScriptの外部ファイルやコードを追加できるプラグインを紹介します。 Custom CSS and JS Custom CSS and JSのイン [...]

商用利用も無料、高精細なグランジ風ペイントロールのPhotoshopのブラシ

商用利用も無料、高精細なグランジ風ペイントロールのPhotoshopのブラシ: "印刷デザインにも利用できるよう高精細（2400-2500px）で作成した、グランジ風のペイントロールのPhotoshopのブラシを紹介します。 Free Hi-Res PS Brushes: Rolled Paint S [...]

リンクなしの言及、“サイテーション”はウェブ検索のランキングにも影響するのか

リンクなしの言及、“サイテーション”はウェブ検索のランキングにも影響するのか: "

他のウェブページで言及されることを「サイテーション(Citation)」という。ローカル検索では、言及先へのリンクが張られていなくてもサイテーションさえあれば上位表示にプラスになると考えられる。では通常のウェブ検索ではどうなのだろうか？

- リンクなしの言及、“サイテーション”はウェブ検索のランキングにも影響するのか -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

Google、2010年の国内検索ランキング・急上昇ワードなどを発表：ニュース&トピックス(TOPICS)

Google、2010年の国内検索ランキング・急上昇ワードなどを発表：ニュース&トピックス(TOPICS): "

Google、2010年の国内検索ランキング・急上昇ワードなどを発表
グーグル（株）は、2010年にGoogleでもっとも検索されたワードや、検索ボリュームが急増したワードのランキングを掲載したWebサイト「Google Zeitgeis…

PSDで利用出来るフリーWEBパーツ集「Fresh and Useful Free PSD Web Elements」

PSDで利用出来るフリーWEBパーツ集「Fresh and Useful Free PSD Web Elements」: "WEBではそれぞれのパーツに意味があり、その用途に合わせて分かりやすくするデザインする必要があります。今日紹介するのはWEBの特定の部分に使えるパーツを集めたフリーWEBパーツ集「Fresh and Useful Fre [...]"

クリーンなイメージのwebデザインを集めた「35 Clean and Minimal Websites For Design Inspiration」

クリーンなイメージのwebデザインを集めた「35 Clean and Minimal Websites For Design Inspiration」: "webサイトにもさまざまなデザインがあり、特に重宝されるのはシンプル、そして情報を明確に伝えるために必要なものだけをしっかりと表示させることを目的としたタイプではないでしょうか。そこで今回紹介するのは、クリーンなイメージ [...]"

2010年12月7日火曜日

判明！、Twitterからのリンクはランキングに影響していた

判明！、Twitterからのリンクはランキングに影響していた: "

Twitterのツイートのリンクはnofollow属性が付けられるためランキングには影響しないと考えられるが、実際には影響していると思える事例がいくつもある。GoogleとBingが、Twitterのリンクを通常のウェブ検索のランキング要因として使っていることをついに認めた。ただし、ツイートしたユーザーのオーソリティを見ている。

- 判明！、Twitterからのリンクはランキングに影響していた -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

手元の画像ファイルからカラーパレットを作成できるサービス -imgr

手元の画像ファイルからカラーパレットを作成できるサービス -imgr: "手元のjpeg, gif, png画像ファイルからカラーを抽出して、カラーパレットを作成できるオンラインサービスを紹介します。 imgr Image Color Tool 画像から抽出する際は、デルタ、色数、明るさやグラ [...]

FeedのデータをPDFに変換できる無料サービス「feed2PDF」がとっても便利

FeedのデータをPDFに変換できる無料サービス「feed2PDF」がとっても便利: "日本語でも文字化けすることなく、RSS FeedのデータをPDFファイルに簡単に変換できるオンラインサービスを紹介します。 feed2PDF 上記は当サイトのFeed(http://feeds.feedburner.jp [...]

意味のない“SEO”にお金を払っていませんか？ - ブラックハットSEO大全番外編2 [ブラックハットSEO大全] | Web担当者Forum

意味のない“SEO”にお金を払っていませんか？ - ブラックハットSEO大全番外編2 [ブラックハットSEO大全] | Web担当者Forum: "

» ブラックハットSEO大全のバックナンバーを見る

ブラックハットSEO（悪質なSEO）を知り、避けるためのこのコーナー。記事を読んで理解した内容は、SEO会社への発注時に具体的に聞いたり、自社サイトの対策状況をチェックしたりといった使い方をしてほしい。

ブラックハットSEO大全として「ルールに外れたブラックハットSEO手法」をお届けしてきましたが、今回は番外編として、「やっても意味のない“SEO”手法をお届けします。

「metaタグを設定します」というSEO

「キーワード出現比率を5%にしましょう」というSEO

「validなHTMLにしましょう」というSEO

「ページフッターに自社関連サイトへのリンクを並べる」というSEO

「サーバーのIPアドレスを分散する」というSEO

「metaタグを設定します」というSEO

「metaタグ」とは

htmlのhead部分で使用するタグ。SEO上一般的なタグである「keywords」「description」以外にも「robots」などがある。

例：

<meta name="keywords" content="母の日,ギフト,カーネーション">

<meta name="description" content="母の日プレゼント用のすてきなカーネーションの花束を取りそろえています。">

<meta name="robots" content="index,follow">

meta keywordsはすでに検索エンジンは評価に利用していません（Googleのmeta keywords評価に関する参考記事、Yahoo!のmeta keywords評価に関する参考記事）。meta keywordsにキーワードを入れても順位には関係はありません。

※ただし、ヤフー（YST）はmeta keywordsをインデックスしているため、ペナルティ回避などの目的で変更が必要になる場合があります。

meta descriptionにキーワードを入れても、以前に比べて評価が向上しなくなってきています。ただし、meta descriptionの内容は検索結果でページタイトルの下に表示される「スニペット」として使われる場合があるため、検索結果でのクリック率を高めるという意味のSEOにおいても意味があります。

※「スニペット」とは、抜粋・断片という意味を持つ単語で、検索結果ページで、該当ウェブページのタイトルとURLとの間に表示される説明文のこと。スニペットを生成する方法は検索エンジンによって違いがある。

meta robotsに関しても、指定することで順位が上がるということはありません。検索エンジンのクローラーに対してインデックスしないように伝える場合には指定することは有効ですが、何も指定しなければインデックスされますので、わざわざ<meta name="robots" content="index,follow">を指定する意味がありません。

「キーワード出現比率を5%にしましょう」というSEO

「キーワード出現比率」とは: ページ内の任意のキーワードを、同じページ内で使用している単語の総出現回数で割った値。ページ内で特定の単語が全体のどの程度を占めているかの指標として見る指標だといわれていた。

以前は、SEOの内部対策の1つとして、次のようなことが言われていました。

上位に表示したいキーワードのページ内での出現比率は5%前後が適正値なのでそこに向けてキーワード数を調整するべきである。

しかし、実際に上位のサイトでデータをとってみるとこれが間違いだとわかります。重要なのは「5%」という数値ではなく、「全体のワードの中でそのワードの出現比率が相対的にどの位置にいるか」ということです。

つまり、対策しているワードAの出現比率が5%であっても、同じページでほかに出現比率が10%のワードBや15%のワードCがある場合、そのページに対して検索エンジンは「ワードCに関するページ」だと解釈します。

また、対策しているワードAの出現比率が3%であっても、同じページのそれ以外の単語の出現比率がすべて1%未満の場合、検索エンジンは「このページはワードAに関するページだ」と解釈します。

さらに言うと、実際に検索エンジンがページの内容を解釈する際には、最も出現しているワードのみに着目しているわけではなく、ページ内での単語の共起尺度や、リンクのアンカーテキストなど、さまざまな要素を考慮していますので、単にキーワードの出現比率に着目して特定のパーセンテージを目指してコンテンツを調整することに意味はありません。

あくまでも、ページの内容は、そのページを読む人にとってわかりやすい有益な情報となるように作成するべきなのです。

「validなHTMLにしましょう」というSEO

「validなHTML」とは: HTML（XHTML）の構文としてW3Cが定めている文法仕様に則った書き方をしているHTMLソース（ファイル）。

かつては検索エンジンの精度も今ほど高くなかっため、W3Cの提唱するルールに則ってファイルを作成しないと正確に検索エンジンから評価をされないことがありましたが、現在では検索エンジンの性能も上がり、多少ソースが崩れていてもブラウザで表示がされる限りはソースによって評価が下がるということもなくなってきました。

HTMLが仕様に完全に準拠している（validである）からといって評価が上がることはありませんし、逆に仕様に準じていないからといって評価が下がることもありません。HTMLの書き方に関しては、あくまでも「さまざまなブラウザで正しく表示されるか」の観点から判断するべきでしょう（もちろん、仕様に準じているほうが、あとあと問題が起こりにくいだろうことは想像できます）。

「ページフッターに自社関連サイトへのリンクを並べる」というSEO

「ページフッター」とは: ページの最下部の領域のこと。

運営しているサイトが複数ある場合、その各サイトへのリンクをページのフッターに並べる手法があります。特に、各サイトのすべてのページで自社の関連サイトへのリンクを並べると、全体として各サイトの被リンク数が増えるとしてSEO目的で行う場合がありますが、現在はそうしたリンクの評価は下がっていますので、ほとんど効果がありません。

検索エンジンはページ内のリンクをすべて同等に評価しているわけではなく、「ヘッダー部分」「ナビゲーション部分」「コンテンツ部分」「サイドバー部分」「フッター部分」のように、リンクの場所に応じて評価を変えています。もちろん最も評価が高いのはコンテンツ部分からのリンクです。そして、フッターなどの共通部分に置かれているリンクはほとんど評価されていないといわれています。

「サーバーのIPアドレスを分散する」というSEO

「IPアドレス」とは: インターネットに接続しているコンピュータや機器のアドレス。たとえばWeb担当者Forumのサーバーには現在「202.218.13.218」というIPアドレスが割り当てられている。

検索エンジンは、被リンクを評価する際に、単一のサイトから大量のリンクを得ている場合よりも、数多くのサイトから1本ずつリンクを得ている場合のほうを高く評価するといわれています。その際の同一性/分散性の判断にIPアドレスも使われていることから、「IPアドレス分散」をうたっているサーバーがあります。

ただし、前述のようなIPアドレスの分散性が問題になるのは、大量の被リンクに関する場合です。たとえば、自社サイトが5つあってそのサーバーのIPアドレスを分散することには、ほとんど意味はありません。

被リンクに関しても、自然に被リンクを獲得していればIPアドレスは分散するものです。IPアドレス分散が大きな意味をもつのは、自作自演のリンクを大量に作ったり、リンクを大量に獲得したりする場合ですから、管理しているサイトの被リンクのドメイン数が少数であるときには、IPアドレス分散に関しては意識する必要はないはずです。

まずは、自らが管理するサイトにおいてどんなSEO施策を行っているかを確認することから始めましょう。

株式会社イトクロ＋Web担編集部

株式会社イトクロは、高度なSEO・SEMノウハウを社内に蓄積し、それを活用して多くのお客様に、より正確で価値のある情報を提供しているウェブコンサルティング会社。

大手企業からベンチャー企業まで現在数百社を対策中のSEOサービス「とにかくあがるくん」は、検索エンジンからペナルティを受ける可能性のある危険なSEOは行わず、安定して上位を目指すサービス。

株式会社イトクロコーポレートサイト

イトクロのSEOサービス「とにかくあがるくん」

この記事に関連する他の記事を見る

内容カテゴリ：SEO

記事種別：解説／ノウハウ

コーナー：ブラックハットSEO大全

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：意味のない“SEO”にお金を払っていませんか？ - ブラックハットSEO大全番外編2 [ブラックハットSEO大全] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.

[CSS]フォームのボタンのクリック時の点線を消去するスタイルシート

[CSS]フォームのボタンのクリック時の点線を消去するスタイルシート: "Firefoxで、フォームのボタン（submit, button）のクリック時に表示される点線を消去するスタイルシートを紹介します。 Remove Dotted Outline For Buttons in Firefo [...]

2010年12月6日月曜日

ビートレンド、Ustreamで「モバイル活用入門講座」を配信開始 [ニュース] | Web担当者Forum

ビートレンド、Ustreamで「モバイル活用入門講座」を配信開始 [ニュース] | Web担当者Forum: "

モバイルソリューションのビートレンドは、同社の運営する「モバイル活用入門講座」に、「モバイルWebデザイン」と「モバイルアクセス解析」を追加し、動画配信プラットフォームUstreamでの配信を開始した、と12月2日に発表した。

モバイル活用入門講座は、同社の提供する携帯向け総合販促SaaS「betrend」のユーザ向けに無償で開催していたもの。サイトデザイン・集客・効果分析などのノウハウを、各業界の第一線で活躍する講師陣が解説する。配信コンテンツは追加分を含め、全6講座を用意。

ビートレンド

http://www.betrend.com/

この記事に関連する他の記事を見る

内容カテゴリ：モバイル

タグ：ustream

タグ：講座

タグ：配信

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：ビートレンド、Ustreamで「モバイル活用入門講座」を配信開始 [ニュース] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.

自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular

自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular: "

Webサイトの背景をリピート再生するYoutube

の動画にしてしまおう、というjQueryプラグイン

・jquery-tubularのご紹介です。なかなか斬新

では無いかなと思います。ユニークなサイトを

作る際に参考にしたいですね。導入も極めて

簡単なのでぜひチャレンジしてみてください。

jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。

jquery-tubular

このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。

サンプル作った

面白かったので暇を見て適当にデモサイトを作ってみました。

サンプル

ちょっと重いかな？とは思ったんですが、どうでしょうかね・・

使い方は凄く単純で、以下のようにhead内に記述すればいいだけ。

Step.1

まず、jQueryと、プラグインのパスを記述

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.js"></script>

これでプラグインはOKです。

Step.2

次に再生させる動画の指定をします。

$('body').tubular('YoutubeのID','ページ全体を指定しているID名');

先程のサンプルページではページ全体に指定したdivにwrapperというIDを付け、http://www.youtube.com/v/2_HXUhShhmY?fs=1&hl=ja_JPという動画なのでID名である「2_HXUhShhmY」を書きました。

<script>
$(function(){
$('body').tubular('2_HXUhShhmY','wrapper');
});
</script>

完了です。

IE6以外は動作しますので、使いどころも無くはないかなと思います。配布先には動画を止めたり再生させるデモもあるのでチェックしてみてください。プラグインのダウンロードは以下から可能です。

jquery-tubular

この記事と合わせて読まれてる記事:

2010年12月2日木曜日

[JS]スクラッチカードみたいに削って下の画像を表示するスクリプト -Scratchie

[JS]スクラッチカードみたいに削って下の画像を表示するスクリプト -Scratchie: "画像をスクラッチカードみたいに削って、下の画像を表示するjQueryのプラグインを紹介します。

jQuery Scratchie
デモ

元の画像は下記のように表示されています。

カードを削る前
マウスのクリック・ド [...]

web上でクリスマスカードを公開「Christmas Peaceful message〜みんなでつむぐしあわせのストーリー」

web上でクリスマスカードを公開「Christmas Peaceful message〜みんなでつむぐしあわせのストーリー」: "明日から12月ということもあり、街はクリスマスムードが一段と濃くなっていますが、今回は、web上でクリスマスカードを作り公開することができるサイト「Christmas Peaceful message〜みんなでつむぐしあわせのストーリー」を紹介したいと思います。

通信販売やネットショッピングで大人気の「フェリシモ」のクリスマス用スペシャルサイトとなっており、可愛らしいサンタの世界が広がる、見ているだけでもクリスマス気分を味わえるコンテンツとなっています。

詳しくは以下

「メッセージを書いてみよう！」をクリックすると宛名とメッセージが入力でき、飾り付けのサンタさんやスタンプを豊富な種類の中から選ぶことができます。カードとなる背景もたくさん用意されており、子どもから大人まで贈る相手により好みのデザインを選ぶことができます。全てを選択してレイアウトすれば、あとは公開を待つだけ。ツイッターやフェイスブックとも連動しており、相手に直接カードの公開をお知らせすることもできます。

web上でお世話になっている方々へ、また日ごろなかなか伝えられない感謝をこんなカタチで気持ちを伝えてみてはいかがでしょうか？

「Christmas Peaceful message〜みんなでつむぐしあわせのストーリー」

関連記事

「Yahoo!JAPAN インターネットクリエイティブアワード2010」受賞作品発表
最近の新しい家族のカタチを徹底調査 TOYOTAラクティス「イマドキ家族.com」
一眼カメラをオシャレに持ち歩くsony「α For you。一眼を着こなそう。」
言葉が光と音になる sonyのツイッター連動サイト「VAIO ASSIST TORCH PROJECT」"

判明！、Twitterからのリンクはランキングに影響していた

判明！、Twitterからのリンクはランキングに影響していた: "

- 判明！、Twitterからのリンクはランキングに影響していた -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

2010年11月29日月曜日

すぐに試せる便利なTips＆フリーソフト集（Firefox、Chrome編）

すぐに試せる便利なTips＆フリーソフト集（Firefox、Chrome編）: "これまで「IT業界を生き抜く秘密10箇条」に掲載された記事の中から、特に即効性の高い「裏技」「フリーソフト」の紹介記事をプラットフォーム別に集めてみた。この記事では、人気のウェブブラウザである「Firefox」と「Chrome」lに関するものを紹介する。

2010年11月28日日曜日

WordPress 3.0対応のとっても便利なプラグイン集

WordPress 3.0対応のとっても便利なプラグイン集: "当サイトで利用しているWordPress 3.0対応のとっても便利なプラグインを紹介します。

下記のプラグインは常に使用しているものをはじめ、適宜使用するものや以前使用していて別の機会に使用しそうなものも含まれていま [...]

アドビシステムズ、オンラインブラウザ検証サービス「Adobe BrowserLab」をアップデート [ニュース] | Web担当者Forum

アドビシステムズ、オンラインブラウザ検証サービス「Adobe BrowserLab」をアップデート [ニュース] | Web担当者Forum: "

アドビシステムズは、Webデザイナーや開発者が異なるブラウザやOS上でのWebサイトのプレビューを簡単に行えるオンラインサービス「Adobe BrowserLab」をアップデートした、と10月12日に発表した。

今回のアップデートではMozilla Firefoxブラウザのユーザーが開発ツール「Firebug」を使って編集した結果を簡単にプレビュー、ほかのブラウザでどのように維持されるかを検証できるアドオン機能が搭載された。また、ページの位置決め方法が異なるブラウザ間でも、スクリーンショットを重ねてページの特定の位置に揃えることのできる新しい比較ツール「Smart Align」のほか、アップルのブラウザSafari 5のサポート、Web作成ソフト「Dreamweaver CS5」との統合機能などが強化された。

アドビシステムズ

http://www.adobe.com/jp/

この記事に関連する他の記事を見る