WEBデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを集めたWEBデザイナーのためのWEBデザインリンク集。WEBデザインの参考にどうぞ

ども、おひさしぶりです連休中は鉄道三昧だった忠犬hashikouです。
犬も歩けば鉄道に当たるレベルで乗り倒してきました。

ところで、連休中にWEBデザインをちょこっとやったりもしていたのですが、
頭を空っぽにしてデザインを組むと、どうしてもロゴが左上、ローカルナビは左、
というパターンになってしまいます。
しかしこれ、やっぱり理由あってのものなんですね。。

ユーザビリティの権威、ヤコブ・ニールセンがアイトラッキングを使って
あらためて大々的な調査を行ったらしく、それに関する記事が発表されています。
Alertbox: 水平方向の注目は左に寄る(2010年04月06日）

結論から言うと、下記の通りのようです。
・ページの右側に比べて、ページの左側が見られていた時間は2倍以上長かった：
　→画面の左半分：閲覧時間の69%/画面の右半分：閲覧時間の30%
・ナビゲーションは左側に残そう。
　ここが人々がその時点での選択肢のリストを見つけようとする場所である。
・メインコンテンツは左端からちょっとだけ離したところに置いておこう。
・最も重要な内容はページの左3分の1から半分までの間で提示されるべきである。
　こここそがユーザーが最も意識を集中する場所である。
・あまり重要でないコンテンツは右側に置いておこう。
　それほどよく見られる場所ではないだろうが、それは問題ない。
　なにもかもが主役になれるわけではないし、重要さに劣る材料を置くための場所は必要である。

個人的には、左端に置けばいいってもんじゃない、ってのが意外と盲点でした。
ど真ん中でもなく、左1/3から真ん中にかけての微妙なエリアが大事なようです。。

今年もネット世界はエイプリルフールで盛り上がりましたね。 どうも、たか爺です。

さて、4/1にXperiaが発売されました。

au初のAndroidスマートフォンの発表もあり。
今後は益々スマートフォンの市場が伸びていくのでしょうか。

ウェブを制作するにあたって個人的に一番面倒だと思うのが、
OSやブラウザに依存するものであったり、CSSのハックなどなど。
制作作業自体は随分前から離れているので、わからないことも多々あり。。。

さらに面倒なのが、携帯サイト。
ほんとに検証していると各キャリアの各世代で色んなことが起こります。

少し話はそれていきましたが、
今後WEB制作はスマートフォンをどこまでフォローしていくのか？
そんなことを考えると、少し面倒だなと思ってしまいます。

まだまだ市場としては大きくないですが、
iPhoneの拡大から無視もできなくなってきたスマートフォン。
safariでサイトが見れるといってもiPhone用に作成されたページの方がやはりきれい。

スマートフォン用の設計というのも考えていく必要が出てくるのでしょうね。
今日はいつも以上に独り言のような記事となりましたが、今後のスマートフォン事情が楽しみです。

ども、忠犬（と書いてただのいぬと読む）hashikouです。

つーいーに、IE9の全貌が見えてきましたね…！
はてブでもホッテントリに上がっていますが、
ラスベガスで開催中のMicrosoftのイベント、MIX10でIE9について発表があったようです。
［速報］IE9プレビュー版が公開！ HTML5準拠を約束、マルチコア、GPU対応で高速動作へ － Publickey

つい先日までIE6をメイン（検証）ブラウザで使っていたhashikouにとっては、
IE9なんて未来のまた未来の（というかIEの話はもうやめてくれ的な）話題でしたが、
いよいよ本気出してくるらしいですよ。

・ニューJSエンジン「Chakra」搭載で動作速度アップ
（といってもChrome4＞Safari4＞IE9＞Firefox 3.6の順）

・他のブラウザとの表示・動作互換性もお約束
（7000サイトの調査をしてソースの記述され方などから見ているらしい）

・WEB標準に準拠！HTML5、CSS3、DOM、SVG対応…
（現在Acid3テストでのスコアは55らしいので、もっと頑張ってくれい）

・WIndowsハードウェアを使ったレンダリング速度アップ
・HTML5ビデオの対応
（あれ？FLASHは？）

というわけで、気になって仕方ない方は、
Internet Explorer 9: Platform Demosで体験版を落とし、
Choose Your Own HTML 5 AdventureやHTML5 GalleryをIE9で動かしてニヤニヤしてみましょう。
※要Windows Vista以上ですぜ、旦那…
　　開発者はXPなんかもうメインで使ってんじゃネーヨという、MSからの無言の圧力でしょうかね？（笑…えないっすorz

ども、忠犬（といいつつ実体は駄犬の）hashikouです。

芸能人は歯が命とは言いますが、WEBサイトは速さが命だったりします。

1.トロいページはすごい損してる
スローライフとか真っ盛りなこの現代に、遅いことは悪なのか。
それはわかりませんが、少なくとも表示速度が遅いことによる機会損失はなかなか凄まじいみたいです。

・アマゾンはページの反応が0.1秒遅くなると、売り上げが「1%ダウン」する
・グーグルのページ反応が0.5秒遅くなると、アクセス数が「20%ダウン」する
・一般的に表示スピードが1秒遅くなると、PVは11%、コンバージョンは7%、顧客満足度は16%ダウンする
（Aberdeen Group Reportより※PDF）

ブロードバンド回線の普及により、表示速度ってそこまで意識しなくなりましたが、
むしろ「速いのが当たり前」だからこそちょっと待たされるだけで離脱率が上がるのかもしれません。

2.Googleよ、お前もか
しかも最近話題になりましたが、googleもサイトの表示速度を検索アルゴリズムに組み込みたいとのこと。
最近のイベント、SMX West 2010でもGoogle自身がそのことについてセッションを行ったようです。
※順位を下げるということは考えていないそうですが、インデックス数は速度で変わる見込みだとか。
SMX West 2010 : サイトの表示速度で検索順位が決まる？！Googleが語るその真実 » SEO Japan

3.何したらええねん
HTML5の普及などでWebアプリケーションも増加することですし、
今後ますますWEBサイトのレスポンスの速さというのは重視されるようになるのは間違いなさそうですね。
制作者側で、実際にどんなことをすればいいかは下記の記事が詳しいです。
ASCII.jp：30分でできる！Webサイトを高速化する6大原則
Web ページを高速化する

また、couldのヤスヒサさんも様々な意味をもつWebサイトのスピード : couldで
「こうした技術的なアプローチだけではなく、情報の整理の仕方や心理的な部分からスピードを表現することが可能です。」と書いています。
ローディング画面など、あるとないとじゃ体感速度が全く変わったりしますよね。。

4.みんなでやれば怖くない！？
正直、表示速度が遅くっても目の前でお客さんが逃げるところを目の当たりにするわけでなし、
普通に表示できればいいかなー、となってしまう分野ですが、
Googleの検索アルゴリズムなどが絡んでくるとそうも言ってられない気がします。
ディレクター、デザイナー、コーダーとできることはそれぞれあるので、
情報共有しつつ機会損失をできるだけ防ぎたいところですね。。

ウエイトトレーニングしたので、体がだるいTAKA-Gです。
今回は少しだけディレクター目線な話をしたいと思います。

ワイヤーフレーム・画面設計・ストラクチャ呼び方は様々あると思いますが、
コンテンツ設計した後には、具体的にページに掲載する情報をレイアウトしていきます。

いつも、これで本当に意図しているページになっているのか？
など疑問を持ちながら作業をしているわけですが、よく自分が失敗するのが

「解説不足、導線不足」です。

どうしても、この業界にいるため暗黙のルールを作り上げてしまっていたり
企画から携わっていると、情報が足りているように錯覚することがしばしば。
そうなると、どうしても使いにくかったり情報不足で訴求できなかったりします。

本当は設計の時にユーザー目線で見られるといいのでしょうが、
自分は苦手なので、チームメンバーにどうよ？と確認してみます。
思いもよらないところを突っ込まれたりして、なるほど！と思ったりできるのです。

設計に正解はないと思いますが、色々な経験して
ユーザー目線、企業目線、様々な目線から物事を見れるようになりたい今日この頃です。

みなさん、ミスしてますか！恥ずかしい話、hashikouはバリバリですぞ。
ミスるたびに毎回「もうしません」って誓うんですが、その数日後にはケロリと同じミスをしたりします。やっぱり検証って大事ですよね…。
しかしながら皆考えることは同じのようで、Firefoxでは制作チェックに便利なステキアドオンがもりもり出ています。
どれも一長一短ですが、案件の特性によっては超絶使えたりするので、個人的によく使うアドオンをご紹介します。

Auto Validator
ステータスバー付近に張り付いてそのHTMLがValidateかそうでないかを教えてくれます。同居している姑みたいな感じ。
運用とかシステムがらみとかでいつもキレイキレイなHTMLではいられないので、
正直うざったい時もありますが、タグの閉じ忘れなど人的エラーも教えてくれるのがでかい。
ダブルクリックでどこが間違ってるのか教えてくれるので、エラーがあるよと赤くなったらまずは確認してみましょう。
Html Validator :: Add-ons for Firefox

Link Checker
HTML内側のハイパーリンクを一括チェックし、外部リンクやリンク切れなどを色で教えてくれます。
これも念のため系（リンク先が間違ってるかどうかはわからないため）ですが、
サイトマップやリスト系ページなどリンクが大量にあるページ、外部リンクでアイコンを変えたりするようなページの検証に役立ちます。
LinkChecker :: Add-ons for Firefox

分割ブラウザ
Firefoxのタブを縦や横に分割できるアドオン。
スクロール同期もついているので、本番環境とテスト環境を横に並べて、
作業前と作業後を比較し抜けや漏れがないか確認したりするのにちょう便利。
運用などで、既存のページを修正する際などに役に立ちます。
分割ブラウザ (Split Browser) :: Add-ons for Firefox

Launch Clipboard
クリップボードにコピーしたURL列を、タブで一気にひらけるアドオン。
コピー元テキストが複数のURL＋文字列であっても、自動的にURLだけを認識してタブがぐわっとひらきます。
複数ページの検証時に、いっこいっこコピペしてタブで展開するのがめんどくさい時に。ぐわってひらくとなんか感動する。
※ただし10個以上とか一気にひらく際は多少動作が重くなりもする
Launch Clipboard :: Add-ons for Firefox

あとはアドオンではないですが、Windows系フリーソフトの「ちゃうちゃう」や「WinMerge」をよく使います。
お客さんから来たテキスト原稿と作業を行ったHTML上のテキストを比較するのに超絶べんりで、ないとたぶん死ねる。
どちらもほぼ同じ機能ですが、結果の表示や細かい設定が異なるため、
ちゃうちゃうは短いテキスト比較用に、WinMergeは長いテキストやフォルダ単位での比較にと使い分けています。

にんげんだもの、ミスは絶対になくなることはありません。
そのために制作後チェックを兼ねて検証をするのですが、検証も適当にやってるとやっぱり見逃します。
やはりできるだけツールを駆使するなどして、
ミスを少しでも減らせるしくみを作っていきたい、今日このごろです。。