スポンサーサイト

-- --, --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ソーシャルブックマークする。
Yahoo!ブックマークに登録 はてなブックマークに追加 このエントリをlivedoorクリップに登録 BuzzurlにブックマークBuzzurlにブックマーク @niftyクリップに追加

Webサイトをリリースする前にチェックしたい15項目

12 16, 2009

Webサイトをリリースする前にチェックしたい15項目

以前書いた「人よりもはやくサービスを出したほうがいい」は本当か?これから参入するべきマーケットを見つける 2つの方法 などにあるように自分が目指すWebサービスを決定し早速Webサービスを作り上げたら、次はどうするか?

15 Essential Checks Before Launching Your Websiteでは15個のチェック項目を確認しましょう、と提案しています。



Webのデザインも完成しCMSも問題なし、コンテンツも入れた。
早速リリース?
Webサービスをリリースする時に、チェックし忘れがちな項目というのがある。
この記事ではWebサイトが正式リリースする前のいくつかの重要なチェック項目を挙げている。
小さな事は結構見過ごされがちだが、ユーザエクスペリエンスを向上することにもなるし、いらないコストを削減する効果もある。

ファビコン
ファビコンはブラウザを開いた時にタブやウィンドウに表示される。
またブックマークした時にも表示されるので、ユーザはWebサイトを認識しやすい。
いくつかのブラウザはルートディレクトリに「favicon.ico」を置いておけば表示されるようになるが、いつも表示されるようにするために以下のコードをヘッダーに入れておこう。
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
iPhone用は
 <link rel="apple-touch-icon" href="/favicon.png" />

9rules.jpg


タイトルとメタデータ
タイトルはSEO的にはもっとも大事な項目の1つであり、ユーザがWebサービスを知るのにも重要な項目だ。
ページごとに適切なタイトルをつけることを心がけよう。
 <title>10 Things To Consider When Choosing The Perfect CMS | How-To | Smashing Magazine</title>

メタデータ情報はタイトルほどSEO的には重要ではないが(少なくとも代表的な検索サイトでは)、書いておくのがよい。
ページごとに説明文をかえることで、Google検索結果に表示される説明が変わる事がよくある。
 <meta name="description" content="By Paul Boag Choosing a content management system can be tricky. Without a clearly defined set of requirements, you will be seduced by fancy functionality that you will never use. What then should you look" />

b-desc.jpg


クロスブラウザチェック
デザインがうまく出来て、ピクセル調整も完璧。
IEでそれを見てみると、全部が壊れて見える。
そんな事があるので、正しく表示されているか複数のブラウザで確認することが重要である。
ピクセルまで完璧である必要はないが、正しく動作する必要はある。
チェックすべきブラウザは Explorer 6, 7 , 8, Firefox 3, Safari 3, Chrome, Opera そして iPhone だ。

checks.jpg

Cross-Browser Checks: Services and Test Suites(英語のサイト)
7 fresh and simple ways to test cross-browser compatibility(英語のサイト)


校正
すべての内容を読みなさい。
1回読んでいても、もう1回読む。
誰かに読んでもらう。
必ずどこかおかしいところがあって、修正が必要なケースがほとんどだ。
伝えたいことを明確にすることで文字を減らせないか検討する。
長いかたまりを短いパラグラフに分ける。
見出しをつけ、ユーザがパッと見て内容を理解できるようにする。


リンク
すべてのリンクがうまく動いていると思ってはいけない。
必ずチェックする。
“http://”を付け忘れていることがよくある。
サイトのロゴはトップページにリンクされていることも確認する。

また、どのようにリンクが動いているか考えよう。
初めてサイトを訪れたユーザにとって、リンクであることがすぐ分かるか?
普通のテキストとは違うものにしなければいけない。
紛らわしいのでリンクではないものに下線をつけない。
リンクを押した後はどうなっている?

b-links.jpg


機能チェック
すべての機能をテストする。
コンタクトフォームがあるなら、実際にやってみる。
他の人にテストしてもらう。
家族とか友達ではなく、ターゲットユーザにテストしてもらうようにする。
ユーザがどのようにWebサービスを使うのかを観察すると、自分が思っていた使い方と違った使い方をユーザがすることに気づくだろう。
チェックする代表的な物としては、コンタクトフォーム、検索機能、買い物かご とログインまわりの機能だ。

Silverback – guerrilla usability testing


Javascript
Javascriptがオフの状態でも動作するように考慮する。
ユーザはセキュリティ対策としてJavascriptをオフにしていることがあるので、それに対応しておくのだ。
フォームもAjaxもJavascriptが使えない時のためにサーバサイドでも対応できるようにするのがよい。

b-js.jpg


バリデーション
100%バリデートされたサイトを目指すべきだが、なぜバリデートされないか理由を知ることも大切だ。
よくあるものとしては、altタグがない、タグを閉じていない、"&"をつかっている、などだ。

b-valid.jpg

W3C validator


RSS リンク
もしWebサイトがブログやニュースサイトであれば、ユーザが購読できるようにRSSリンクを持つべきだ。
ユーザに簡単にRSSフィードを見つけられるようにする。
ブラウザのURLに小さいアイコンをおくのがよいだろう。
 <link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

b-rss.jpg


アクセス解析
Webサイトに解析ツールを入れて、どれぐらいのアクセスがありどのくらいのコンバージョンがあるのかを知るのは重要なことだ。
日ごとにどれくらいユニークユーザがいるのか、月ごとのページビュー、使用ブラウザなど必要な情報をリリースした日から収集する。

clicky.gif

Google Analytics
Clicky
Kissmetrics(ベータ版)
Mint
StatCounter


サイトマップ
ルートディレクトリに sitemap.xml を置くことで検索エンジンからインデックスされやすくなる。
XML-Sitemapsは自動でsitemap.xmlを作成してくれる。
作成したらルートディレクトリにそのファイルを置く。(www.mydomain.com/sitemap.xmlというアドレスとなるはずだ)

もしWordPressを使っているなら、Google XML Sitemaps plug-inをインストールすれば、もし新しい記事を投稿した場合に自動で追加してくれる。
また、Google Webmaster Toolsにもサイトマップを追加しよう。
Googleにサイトマップがあるということを知らせ、いつどのようにインデックスされたかという情報が分かる。

xml.gif


ディフェンシブ・ウェブデザイン
もっとも見落とされがちなディフェンシブ・ウェブデザインの要素といえば、404ページである。
存在しないページにアクセスした時に、404ページは表示される。
これは色んな原因で表示される。(例えば他のページが間違ったURLをリンクしていたなど)
ユーザをホームページや見ようとしていたと思われるページへ導いてあげるような使える404ページを用意する。

もう1つのディフェンシブ・ウェブデザイン テクニックは、フォームのバリデーションをチェックすることである。
フォームに通常では使われないような文字(大量の文字や、数を入力する場所に文字など)をいれてサブミットする。
エラーが表示されたら、間違いを訂正できるような情報があるかどうかを確認する。

b-404.jpg


最適化
Webサイトがよいパフォーマンスを出すためには、リリースした後から継続して最適化作業をする必要がある。
ただし、リリースする前にやることもある。
HTTPリクエストを減らす、CSSストライプをつかう、イメージを最適化する、JavascriptとCSSファイルを圧縮するなどは処理速度をはやめ、快適にブラウジングするのに有効だ。
また、使っているツールにより異なる項目も最適化する必要があるかもしれない。(WordPressなどを使っている場合は、WordPress用の最適化項目がある)


バックアップ
もしデータベースを使用しているなら、バックアップは必要だ。
さもなければ、その日がきた時にきっと後悔するだろう。
もしWordPressを使っているなら、自動でバックアップメールするWordpress Database Backupを使うといいだろう。


印刷ページ
もし自分のページで印刷したい場合は、サイドバーなどは必要なくメインの情報だけの場合がほとんどだ。
このような場合は、印刷用のCSSを作るのがよいだろう。
CSS要素の中には(floatなど)うまく印刷できないものもある。

印刷用のCSSは次のように指定してheadの中に入れておく。
 <link rel="stylesheet" type="text/css" href="print.css" media="print" />



ソーシャルブックマークする。
Yahoo!ブックマークに登録 はてなブックマークに追加 このエントリをlivedoorクリップに登録 BuzzurlにブックマークBuzzurlにブックマーク @niftyクリップに追加

0 CommentsPosted in Webサービス
-0 Comments
Leave a comment
管理者にだけ表示を許可する
-1 Trackbacks
WEB Drawer -WEB制作に関するメモサイト-07 22, 2010

制作するにあたり事前に潰しておけるミスや、制作後に確認したい事柄を載っているサイトをまとめました。 どういう確認事項があるのかなどがわかって参考になりますね。 ちなみに自分が前にいた会社では、チェックシートがあってそれを使って品質管理をおこなっていました...

Top


プロフィール

スズキ ロイ

Author:スズキ ロイ
プライベート Web クリエーター。
海外のWebアプリ、ソーシャルアプリを中心に情報収集してます。

RSSリンクの表示
最新記事
全記事(数)表示
全タイトルを表示
人気エントリー
あわせて読みたい
あわせて読みたいブログパーツ
月別アーカイブ
最新コメント
最新トラックバック
カテゴリ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。