SEOについて調べたこと

ホームページ作成の仕事をしていながら、なんとなくしか理解していなかったSEOについて、少し調べてみました。

で、分かったことは自分の作ったホームページは思っている以上に人に見られていないということ。実際には新しく立ち上げたばかりのホームページはそういうものらしいです。

ではどうしたら改善できるかというのが今回のテーマです。まず原因は次の２点でした。

・ページ数が少ないため検索に引っかからない。
・外部からリンクされている数が少ない。

これで分かったことは、ホームページは焦らずに時間をかけて運営していくしかないということでした。時間をかけて少しずつページ数と外部からのリンクを増やしていくしかないような気がします。


また、最低限SEOで押さえておくのが次の6点。

1. キーワードの選び方
2. Titleの付け方
3. ページ数とページのボリューム
4. 外部からのリンク数
5. ヤフーのインデックス登録
6. ライバルサイトのデータ


がんばって作っても、アクセスが少ないと寂しいですからね。これからは、このへんにも気を使ってホームページの作成をしていきたいと思いました。

ホームページ制作

新しくホームページを制作しました。

ST-WEBDESIGN.com

よろしくお願いします。

【 jQuery】メニューを階層表示できるドロップダウンメニュー droppy

ナビゲーション メニューにマウスオーバーした際にドロップダウン式にサブメニューを表示させる jQuery のプラグインです。

HTMLの記述もシンプルで、SEO的にも良さそうです。設置方法も簡単でulタグを入れ子にしているだけです。CSSで色や画像を使う事ができるので便利です。

種類も豊富にそろっています。サブメニューの表示方法（アニメーション）が微妙に違うぐらいなので、デモを見て気に入ったものを利用してみるのがいいかと思います。



ダウンロード&デモ
droppy
Superfish
SimplejQueryDropdowns

【jQuery】画像をスライド(スクロール)させて表示を切り替える slider スライダー

画像をスライド(スクロール)させて表示を切り替える jQuery slider スライダー。

アニメーションを実装すると画面に見栄えがでてきます。

配布されているプラグインには、「アニメーションのパターン」と「ナビゲーションの方法」などで差別化されています。あとは、「プラグインの実装方法」でしょうか。

各プラグインのデモを見て、使いたいものを選んでみるのがいいと思います。


ダウンロード&デモ
Nivo Slider　デモ
Easy Slider　デモ
coda-slider　デモ

【jQuery】 タブを実装する tabs

スペースを有効に利用して、情報を表示できるtabs(タブ)。

Yahooのトップページなど至る所で使用されています。jQueryプラグインを使えばこのタブ表示も簡単に実装できます。

インターネット上にはいくつも同じようなjQueryプラグインが存在しますが、
「idTabs」は名前の通り無駄な機能もなく、使いやすいプラグインだと思いました。

情報量の多いホームページではタブを使って情報を分散表示させることで、すっきりと見やすいいレイアウトが可能になります。

idTabsはjQueryのプラグインのため、動作にjquery.jsが必要です。

ダウンロード
jQuery idTabs

jQueryについて

jQueryについて、これからこのブログで書いていこうと思います。

これを知ってるのと知らないのでは、できることに差がでてくるので。
僕もそこまで詳しくはないですが、調べた内容を自分なりにまとめていくつもりです。
箇条書きにしてみると以下のような感じになります。

・タブやドロップダウンメニュー、スライダーを自分で作らなくてもサイトに実装することができる。
・XHTMLとCSSとjavascriptで構成されている
・jQueryにも用途によって種類があり、デザイン面で使えるのはjQuery UIと呼ばれるユーザインターフェイス(User Interface)に関連するライブラリ。ライブラリというのも詳しく分かっていませんが、簡単に言うと「誰でも利用できるようにまとめられたプログラム」みたいなこと。

言葉で説明するのは難しい・・・。やっぱり実際に使うのが一番わかりやすいですね。
とりあえず、次回はタブ(tab)について書いてみたいと思います。

アボカドの種 栽培2

以前に紹介した「アボカドの種」の観察記録２回目です。たしか２週間ぐらい前だと思うんですが「アボカドの種を発芽させてみよー！」ということになりました。で、今でもしっかりと続いております。そして最近、気のせいかもしれませんが、さきっちょが尖ってきました。ただ、ちょっと飽きてきています。早いとこ芽よ、出てきておくれ。

吉祥寺 井の頭公園のサクラ

週末に井の頭公園に桜を見に行ってきました。その時の写真がこちらです。池の周りに桜が満開でとってもキレイでした。さすがに花見の名所ということで人も多く、おそろしく活気がありました。普段はまったりとした雰囲気の井の頭公園ですが、この季節はお祭り騒ぎになるみたいですね。たまになら大勢の人で賑わっているのも悪くないです。こんどは平日にでも行って、ゆっくりと楽しんでみたいと思います。

ゲストハウス・ルームシェアの部屋探しサイト

自分は現在「ゲストハウス」というところで生活しています。部屋は個室でリビングやキッチンを住人同士が共同で利用する、という少し変わった環境とでもいいましょうか。この数年、都内でもだいぶ物件が増え、徐々にですが認知度も上がってきているみたいです。居住スペースが広く、人との出会いもあるので、ワンルームに住むよりかはこっちのほうが快適で気楽でいれます。

ただ、そんなゲストハウスでの生活も半年がすぎ、生活がマンネリ化してきてしまいました。引っ越してきた当初の刺激がすっかりうすれてきています。そこで新たなゲストハウスを見つけようと検索したところ、面白そうなサイトを２つ見つけました。

ひつじ不動産とシェアノサイト

ゲストハウスやルームシェアの情報は探すのにけっこう苦労します。物件の情報をまとめてくれているサイト自体が少なく、あったとしても作りが粗い。。。

でも、この２つのサイトは優秀でした。しっかり写真もあるし、何よりも魅力的な物件がたくさん掲載されていました。移動に向けて、しばらく検討してみたいと思います。

flickr 写真追加

以前にこのブログで紹介したflickrに写真を追加しました。

ニュージーランドやタイ、ラオスで撮った写真を掲載しています。無料登録のユーザーは一ヶ月に200MBまでしかアップロードできないようで、もう容量がほとんど残っていません。また来月に追加する予定です。

よかったら見てください。
flickrの写真

ページの横スライド移動 javascript ＆ CSS

クリック時にページを横方向にスライドさせるスクリプトです。サイト制作の際に利用したものをテンプレート化しておきました。

この種類のスクリプトは検索してみるといろいろあります。今回はその中から簡単に利用できそうなものを選んで使わせていただきました。

設置する際のポイント
・ページの幅を設定する
・body要素に「onload="Init()"」を追加
・ページ自体にpaddingを設定しない。ブラウザによってはスライド幅がずれてしまうおそれがあるので。ページ内にボックス要素(div)を作って、そこに設定をする。


テンプレートのダウンロード
ページの横スライド移動

参考サイト
初めてのホームページ講座　紙芝居（横）

ホームページの制作後にすること

ホームページの制作後にすることをまとめてみました。

サーバーは「無料サーバー」か「有料サーバー」か

無料のサーバーではFC2レンタルサーバー
有料のサーバーではロリポップ！orさくらのレンタルサーバーが料金的には良さそうです。

FC2ではPHPやCGIといったスクリプトが使えません。そのため、メールフォームを設置したりデータベースを利用したホームページには向いていません。趣味的な内容のホームページでしたら無料のサーバーで充分です。コメントを書き込めるようにしいたい場合はblogという方法もあります。

有料サーバーの利点は以下の３つではないでしょうか。
・スクリプトやデータベースが利用可能
・自分のドメインを持っていれば、ホームページのアドレスをそのドメインで登録できる
・メールアドレスが与えられる。

サイトの規模や用途によって料金プランを選べます。商用でホームページを持つ場合はこちらが適しています。



本題に戻ります。ホームページの完成後、ファイルのアップロード後にすることのまとめです。

必須ではありませんがアクセス数を気にする方は、以下のGoogleの2つのサービスに登録することをおすすめします。

Google Webmaster Tools / ウェブマスターツール
検索された際のキーワードなど、ページの表示に関する詳細なレポートを確認できます。


Google Analytics / アナリティクス
アクセス数など、ページの表示に関する詳細なレポートを確認できます。


次に、

Yahoo!検索 サイトエクスプローラー
こちらも、ウェブマスターツールみたいなものです。アクセス数を気にする方はこちらも登録してみてください。


ここまでは無料で利用できるサービスです。


ここからは有料のサービスです。商用サイト向けになります。

「Google AdSense(アドセンス)」と「Yahoo!アドパートナー」
それぞれの検索サイトに文字広告を出すことができます。料金はホームページごとに設定されていきます。競争率が高くて人気のある分野の広告は高くなる仕組みになっています。また、クリックの回数に応じても変わってきます。詳しい内容は各ページで確認してみてください。


Yahoo ビジネスセンター
Yahooのカテゴリーに登録するための審査サービスです。審査料金が52500円から。登録されればアクセスは確実に上がります。商用でサイトを運営していくには登録しておきたいところです。初期費用はかかりますが維持費などはないので早いほうがお得です。さらに、Yahooカテゴリーに登録されるとGoogleでの検索が上位に表示されるようにもなります。これはそれだけ信頼があると認められた結果らしいです。


今回、調べてみていろいろ勉強になりました。yahooカテゴリーへの登録が一番効率のいいアクセスアップにつながります。次に必要なのがSEO対策ではないかと。商用でサイトを運営していくなら必須みたいです(審査に通る一般的な内容のサイトであることが条件です）。成果が出るまでの期間を考えるとこれが一番わかりやすい近道であり、一番安い投資でした。

ただ、、、この辺までは大抵のサイト運営している会社では当たり前なんですよね。。。きっと。ここからさらに、細かいSEO対策や、サービス（アフィリエイトはこの分類に入るのでしょう）を行ってアクセス数をとっているんだと思います。これまでホームページを作ってはきましたが、この辺のことまったく考えていませんでした。大切ですね。こういう分野も。

jQuery 「Lightbox2」の使い方

サイト制作した際にlightBox2を使ってみました。用途としては、ページ内にサムネイルを使って写真や画像を閲覧させたい場合にむいています。(テキストを表示させたい場合は「leightBox」が良さそうです。)

他にも類似機能を持ったスクリプトが多数存在します。用途はどれも似たようなものです。今回は好みで「lightBox2」を選んでみました。

設置には多少のcssとjavascriptの知識さえあれば難しくありません。自分用にまとめた設定ファイルを公開しておきます。ファイル内にコメントを入れておきましたので簡単に設置できると思います。そういうことで、設置方法や解説は省略させてください。

【ダウンロード】
lightBox設置ファイル

Lightbox2

ホームページ完成

自分のサイトが完成しました。長い間ホームページの制作に携わっておきながら自分の好きなように作ったのは初めて。恥ずかしい話です。ぼんやりとしか関わってきませんでした。

徐々にですが動き始めました。まだ本格的にいけるとは思えないので自分のドメインを取ってません。サーバーもフリーのFC2です。本当は屋号とかドメインとかきちんと決めてから動き始めるのが理想的なんだろうけど。。。まだ時期尚早です。サイト名も仮でつけてしまいました。そのへんも少しずつ慣らしていかないと、です。

いくつかやりたかった事を試しました。自分のレベルも再確認できました。まだまだこれからです。

Brick Creative

Ajax、jQuery、mootoolsなど

動きのあるホームページ制作について。制作中のサイトにページをスライドして移動する機能をつけたいと思っていろいろ探してみました。以前から使ってみたかった仕掛けです。

Ajax、jQuery、mootoolsと調べてみるといくつか解説ページは見つかりました。が、僕にはどれも難しく感じました。基本的な仕組みよりも、実装方法だけが知りたかった。。。

実用的ないくつかの仕掛けと実装方法をまとめたサイト。そんなサイトがあれば理想的です。。。４年ぐらい前から出始めた技術みたいですが、いまだに手軽に実装できるようにはなっていないようです。今でも専門知識のない人には敷居の高い分野なのでしょうか。

「もっと簡単な仕組み」もしばらくすれば出始める気がします。今は勉強するより、そんな日が来るのを待ちたいと思います。結論としては、背伸びしないで自分の分かる範囲で作るのが良さそうです。

今回、参考にさせていただいたサイトです。内容が濃そうなので時間があったら勉強してみます。

・CodeZine 「jQuery入門」
・ASCII.jp 「Web制作の現場で使えるjQuery　UIデザイン入門」

Macのアイコン変更方法 ツール&ダウンロードサイト

Macのアイコンを自分の気に入ったものに変えたい。そう思ってネットで検索してみたところ、いくつか役に立った情報がありましたのでまとめておきます。


まずは、ツールを使って一括で変更する方法。
「LiteIcon」というソフトが無料で使用できます。有料のものでは「CandyBar」というものがありました。使い方は簡単でLiteIconのウィンドウへドラック＆ドロップするだけで変更できます。元に戻したい場合は「File」>「Restore all icons」でいけます。


次に、手動でアイコンを変更する方法。
あらかじめphotoshopなどでアイコンにしたい画像(PNG)をひらき、クリップボードにコピーをしておきます。次にアイコンを変えたいファイルを選択して「情報を見る」。アイコン画像を選択てペーストするだけで変更できます。ただしこの方法では、元に戻す事ができません。アイコン画像のバックアップをとっておいた方が良いでしょう。


アイコンの配布サイト
以下のサイトでアイコンをダウンロードすることができます。他にも検索してみると似たよなダウンロードサイトはたくさんあります。
・Pixelgirl
・Interface LIFT
・iconfactory


おすすめのアイコンセット

The Vinyl Collection


Loco Roco


Camouflage Drives

自分のためのホームページ制作

フリーランスで活動するに向けて自分のサイトを作り始めました。これまで自分のサイトって欲しかったけど。。。なかなか作ろうとは思えませんでした。

作りたいのは「シンプルで自分らしいサイト」です。ウェブデザインの「ルール」みたいのは気にしないで作ってみたいと思います。人のために作ってないから妙なプレッシャーもなく、存分に楽しみながらコツコツと制作に取り組めています。今月中には完成させます。

コケのテラリウム

部屋にみどりを増やしたくなったので「コケ」を飾ってみることにました。なぜコケなのか。。。ネットでこんな記事を見たのがきっかけです。（ガラスに閉じ込められた小さな緑、空き瓶とコケを使った簡単テラリウムの作り方）この記事を読んで、いっきに刺激されてしまいました。

さっそく散歩に行った際に、近くの公園でコケを発見。人の目を気にしながらもガシっと土ごと取ってきました。あとは部屋にもどってびんのフタの上にちょこんとおくだけ。

かんたん（笑）。でも、やっぱりコケです。。。あんまりありがたみないです。欲張って取りすぎたせいかもしれません。しばらく様子をみることにします。

こんな記事もありました。
ワインボトルの中で植物を育ててみた
こっちは時間がかかりそうです。

flickr フリッカー

最近、flickrという写真サイトにハマってます。

内容は次のとおり。

・ネット上に自分のアルバムを作ることができる。
　（容量は１ヶ月に100Mまで無料で利用できます。）
・人が撮った写真の閲覧。
・キーワードで写真を検索。
・写真にコメントを書きこめる、書いてもらったりできる。

参加者が多いので携帯で撮った写真、プロの綺麗な写真、トイカメラの写真など様々なタイプの写真が楽しめます。気に入った写真があればお気に入りに登録しておくことも可能です。

個人的には、ひまつぶし、気分転換、アイデア探しなどで利用してます。人のアルバムを眺めてる感じに近いです。で、自分の写真を見てもらえると単純に嬉しいです。ムズかしく考えないで参加すると楽しめるんじゃないでしょうか。アップロードしておけば「誰かが見てくれるんじゃないか？」ぐらいで。

英語のサイトですが日本語で分かりやすく解説してあるサイトがあります。たいへん参考になりましたので一緒に紹介しておきます。

flickr
http://www.flickr.com/

Flickr日本語ガイダンス
http://www.geocities.jp/flickr_jp/index.html

アボカドの種の栽培

朝ごはんにアボカド丼を作っているときに、ふと、ひらめきました。もしかしてこの種、「育つのでは？」と。さっそくネットで検索してみたところ、意外とかんたんにできるらしい。

方法は種を洗って水につけておくだけ。その際に種が呼吸できるように爪楊枝をさしてしておくと書いてありました。あとは毎日水を取り替えるだけです。このまま1〜6週間で種が割れて芽がでてくる、とのこと。

「本当に？」と思いますが・・・。植物ってこんなに簡単に育つものなの？
なにはともあれ、日々の小さな楽しみが１つできました。早く芽よ出よ。

今回、参考にさせていただいたサイト。
アボカド好き
http://www.hat.hi-ho.ne.jp/heart_thoughts/avocado/

代々木公園フリーマーケット

お昼から代々木公園のフリーマーケットへ行ってきました。強風が吹いているにもかかわらずたくさんの人で賑わっていました。戦利品は以下の３点。

・ジャーナルスタンダードのパンツ　300円
・ユニクロの茶色パーカー　300円
・ギンガムチェックのシャツ　150円

なんとなく値段と人柄で買ってしまうことが多い。そこまで気に入ったわけでもないけど買ってしまう。２着で３００円のシャツを隣にいた人と協力して購入。お互い150円ずつで。こんなやり取りもフリマの楽しいところです。買い物もいいんだけど、人との交流もあります。

花粉症なので、今の時期はマスクの下に鼻栓を着用。おかげで鼻水はそこまで出ないものの、家に戻ると頭痛が・・・。鼻水よりは頭痛のほうがまだいい。

アムリタ食堂@吉祥寺

吉祥寺の「アムリタ食堂」に友人と男２人で行ってきました。前を通るたびにいつか入ろうと思ってたお店です。店の雰囲気はアジアな感じでまったり。客は女子ばかりで男1人はちょっと厳しそうな感じ・・・。2人で行ったのは正解でした。注文はレッドカレーとマンゴー抹茶。味はそこそこおいしかったので満足。食べ物を前にすると写真のことを忘れてしまい、残念なことに料理の写真を撮り忘れる。次から気をつけたい。

Blogスタート

Blogをスタートしました。
皆様、今後とも宜しくお願い致します。