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

ども、基本的にAppleの犬でもある忠犬hashikouです。
先日もiPhone4の発表がされたばかりですが、
毎年のように出る新製品によだれが止みません…わんわんわん

しかし、気がついたら2010年ももう半分過ぎました。早すぎです。
そんな気分を代表するかのごとく、SmashingMagazineが
いきおいよく2010年上半期のWEBデザイントレンドをまとめています。

1.楽しませるデザイン
JTが昔CMでdelightっていってた、あれです。
少しニヤっとできるような要素を入れてあげる。意外性、でもいいかも。

2.キーボードを使ったナビゲーション
これは正直あまり見なかったのですが…知らないところでアツいのかもしれません。
ターゲットが結構限られそうですね。

3.印刷物の影響を受けてるデザイン
雑誌とかポスターっぽい、精緻な感じのアレですよ。。
印刷物みたい、というよりかはWEBにデザイン上の制約がなくなってきてて、
垣根がなくなってきてる感じですよね。実装するとなるとヒイヒイ言うんだけどもw

4.水平主義
横長だっていいじゃねぇか！とばかりに横長が流行って来てるようです。
前から一部のサイトでは扱ってましたが、トレンドになるほど増えてきたのでしょうか。
しかしデザインするにあたっては、横方向にコンテンツがあることを
ファーストビューで直感的にわかってもらう必要があるため難易度は意外と高いかもです。

5.リッチでストロングなタイポグラフィ
これは2009年のからの流れをついでますね。
@font-faceの話もありますし、文字表現は今後より多彩になってきそうです。

でも、なんで流行っているデザインってオサレに見えるんでしょうね。。

原典：
The Current State of Web Design: Trends 2010 - Smashing Magazine
日本語訳：
2010年上半期Webデザインのトレンドまとめ
- 海外デザイン事情第9回
- MdN Design Interactive

ども、最近サボっていてziraiさんにしばかれた忠犬hashikouです、こんばんは。
今後とも生暖かい目で見守ってやってください。

ところで、iPadも発売された昨今ですが、ついにサイボウズもiPhone用アプリを出すそうです。
現在アプリはApp Storeに申請中で、無料で利用できるとのこと。
iPhone1台持ちの方には、朗報ではないでしょうか。
同期データはiPhone内に保存されるので、オフライン状態でもスケジュールを確認することが可能、
というのも心強いですね。

あのうす緑とブルーの画面からは想像できないシンプルな画面で、
外出先でも予定がクールに確認できますぜ。（下のリンク先に画面イメージ有り）
その名も「KUNAI」だそうです。
…クライアントを一撃必殺せよ、というサイボウズからのお達しでしょうか。。
いや必殺しても困るか。

参考：
グループウエアとスケジュールが同期できるiPhoneアプリ
「サイボウズモバイル KUNAI Lite for iPhone」
- MdN Design Interactive - Webデザインとグラフィックの総合情報サイト

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

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

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

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

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

随分と前回から時間が空いてしまいました。
GW最終日から、タカジーです。

何となくおもろいことがなかったので書いていなかったという言い訳をしつつ
最近、仕事上でよくお客さんに聞かれるのがスマートフォンとtwitterについてです。
正直色々と考えるのですが、自分自信がピンときていないのでどうにもこうにも。。。

前回スマートフォンの話をしましたが、今年度は様々な動きがありそうですよね。
〇〇アナリストとかではないので、将来の動向とかはわかりませんが、
様々なメーカーから商品が出て活性化していくと生き残るもの残らないものがでてきます。
また、携帯からスマートフォンへの切り替えが全体的に行われるのはいつか？とも考えます

最終的には企業目線で見てどこから対応していくのか悩むタイミングだなーと他人事のように思ってしまいます。

ただ、新しい端末がでれば私たちの飯の種にもなるので、
やはり最新の技術と動向はチェックする必要がありますよね。
随分昔携帯サイト作成で苦しんだ時代を思い出してしまいます。

長々と独り言を書いてしまい申し訳ないです。

スマートフォンといえばリアルタイムコミュニケーションとも言えますよね。
次回はそこらへんを書いてみたいなと思いながら、失礼します。

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

さて、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

このタイミングで新しいエントリーを追加するか迷いました。（1つ前のエントリー参照）
ただ、折角15日から始まった新しいサービスがあるので紹介しようと結論付けたTAKA-Gです。

突然ですが、自分の部屋にはTVがありません。
いつの頃からあまり見なくなったので、独り暮らしのタイミングで購入してないんですね。
「TVが無い」と人に話すとだいたい「家で何すると？」と聞かれてしまいます。
やることなんていくらでもあると思うのですが。。。

そんな私は学生時代からですが、音楽そしてラジオが好きなんです。
そして、本日こんなニュースが飛び込んで参りました。

インターネット上での地上波ラジオ同時放送「IPサイマルラジオ」が15日、試験配信を開始したそうです。
14日夜から配信が始まっていたみたいですが、アクセス集中でつながりにくい状態が続いたりもしているそう。
このエントリーと書いているタイミングでは途切れることなく聞こえています。
昔、ラジオのアンテナ伸ばして電波を探していた時代とは異なり、非常にクリアな音でラジオが聞けます。

WEBの制作者は音楽聞きながら作業したりする人も多いですよね。
たまには気分転換にラジオを聴いてみるのもいいと思います。

期末で忙しい方も多いでしょうが、身体には気をつけてください。
ごきげんよう

Twitterでは13日26時頃ご報告させていただきましたが、12日に登録したINFOBAHN（インフォバーン）のWebサイトが不正アクセスにより内容が改ざんされていたとの報告がありました。（現在は復旧し安全なサイトとなっているようです）
現在はikesaiからINFOBAHNのサイトを削除しておりますが、「2010年3月13日 （土）15時～3月14日（日）19時まで」にINFOBAHNサイトへアクセスされた方は感染している恐れがありますので、大変申し訳ございませんが、最新のウィルス定義でスキャンをしていただくか、トレンドマイクロ社のオンラインスキャンを実行していただければと思います。
また、私自身もウィルス感染しPCが制御できない状態となり、ご報告が遅れたことをこの場をかりてお詫び申し上げます。
なお、INFOBAHNからこの件についての経緯や報告、お問い合わせ先が掲載されておりますので、ご確認いただければと思います。（http://www.infobahn.co.jp/news/3073[安全を確認しております]）（http://www.infobahn.co.jp/news/3075[安全を確認しております]）

間接的とはいえ当サイトが皆さまにご迷惑をおかけしたことを改めてお詫び申し上げます。
なお、ikesai.com自体はウィルス感染はしておりませんのでご安心ください。今後もご利用よろしくお願いいたします。

ども、忠犬（のわりに近所の犬には吠えられる）hashikouです。

雑誌という媒体が大好きで、Web designingとWeb creatorsはよく読んでいたのですが、
海外ではいったいこういう雑誌があるのか、あるとしたらどんな内容なのかずっと気になっていました。
旅行にいくと、現地の本屋に行って息をスーハーするのが好きなのですが、
ギリギリ英検3級のhashikouにはどうもweb制作系の雑誌が見つけられなかったのです。。

そしたらちょうどSmashing Magazineで
海外の制作系雑誌（web系以外も）の紹介記事が上がってるじゃないすか。普通にあるじゃん、雑誌。
というわけで嬉しかったのでWeb系のみ一部ご紹介。あ、たぶんこれUKのみです。
Via: Print Magazines for Web Designers, Digital Artists, and Photographers - Smashing Magazine

.net Magazine / Practical Web Design
世界で一番売れてる、Web制作者・Webデザイナー向けの雑誌（注：ほんとかよ…）。
チュートリアルやエラい人のインタビュー、今日のインターネットに影響を与えそうなホットなニュースを取り扱っている。
もしWebデザインにマジならこの雑誌がベストらしい。
webを仕事にしている人にはとっても重要な雑誌だけど、「現場向け」だということだけ注意。だって。

.net magazine
※どっちかっていうと、Web designingよりWeb creatorsっぽいのかな。

Web Designer
この雑誌はあなたがステキWebデザインを作るのを助ける。
オリジナルなインタビューがあったり、プロのアドバイスがあったり、
ホットトピックスやステキサイト集、制作のノウハウやtipsが掲載されている。

Web Designer - Defining the internet through beautiful design
※初期のWeb designingみたいな感じかなー。キレイ目デザイン重視系か？

以下デザイン、Photoshop、3D、写真系の雑誌が続きます。おもすろい。
ちなみに.net Magazineはオンラインで買ってみたので（約10ユーロ、1260円くらい？）、
届いて良さそうなら中身ご紹介します。。

ども、忠犬（といいつつ実体は駄犬の）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の検索アルゴリズムなどが絡んでくるとそうも言ってられない気がします。
ディレクター、デザイナー、コーダーとできることはそれぞれあるので、
情報共有しつつ機会損失をできるだけ防ぎたいところですね。。

最近なぜかUstを利用したくてたまらないTAKA-Gです。
自分が持っているビデオカメラだと利用できないようなので、WEBカメラの購入を検討しています。
というわけで、本日はオンラインショッピングについて書きたいと思います。

いつの頃からでしょうか。何か物を買おうとするとネットでまず調べます。
オンラインショップやら比較サイトやらレビューやら情報が溢れていますね。

突然ですが、ファッション通販サイトZOZOTOWN利用者数推移と平均利用時間推移のグラフを

利用者数推移（千人）

サブドメイン	09年11月	09年12月	10年1月
zozo.jp	1282	1717	2664

Source：Nielsen Online NetView
2009年11月～2010年1月 家庭と職場からのアクセス

1訪問あたりの平均利用時間推移（分)

サブドメイン	09年11月	09年12月	10年1月
zozo.jp	9	8	18

Source：Nielsen Online NetView
2009年11月～2010年1月 家庭と職場からのアクセス

ファッション通販サイトZOZOTOWNが躍進！！

自分はなんだかんだでアナログな人間なので、この情報を見るとすごいなーと正直に思います。
CD/DVDや本などは理解できますが、、服の場合は実際に着てみないとわからないでは？と疑問です。
そこにはサイトを構築する上で、色々と考えられているのでしょう。

そもそも、実店舗と仮想店舗の利用についての違いを考えた場合
やはり一番はユーザーのモチベーションなのかなと思います。
オンラインショップに来る人は欲しい商品を探している人が多い気がします。

それでは、同じ商品を販売しているライバル店にはどのような差を付けていくのでしょうか。
そこは実店舗と同じ接客が大切になってくるのだと思います。

オンラインではもちろん人が直接接客することができません。
自分が思うオンラインの接客では以下の4点だったりします。

1. FAQの充実
2. 更新頻度
3. サポート体制
4. 商品の包装

どれだけオンラインであっても最後は人がしっかりとしていないとダメでしょう。
具体的な数値をもとにした話ではないので、あくまでも私見となります。

今後のオンラインショッピングがどう発展するのか気になります。
ふと思いましたが、オンラインショップって一瞬で自分の家がショッピングモールになっているようなものですね。
無限の広がりを感じます。

それでは無事WEBカメラ購入したら、Ustしておもしろいことがあればここでも書いてみたいと思います。

ごきげんよう。

文章を書いている途中にフリーズして心が折れかかっているTAKA-Gです。
日付が変わり昨日3/1のニュースリリースで気になるものを紹介します。

ソフトバンクテレコム株式会社は、2010年3月1日の株式会社ファーストリテイリング（以下、ファーストリテイリング）の東京本部移転にあわせ、約1,200台の「iPhone™ 3GS」（アップル社製）を、同社に納入しました。
ファーストリテイリングにiPhone 3GSを1,200台納入

新しいもの好きが多いためか自分の周りはiPhoneユーザが多いです。
世界的に見てもiPhone含めスマートフォンの市場は伸びてきていますね。
とはいえ、移転のタイミングで1,200台導入とは思い切りが好きです。

ニュースリリースを見る限り今後は日本以外の国でも導入していくのでしょうね。
そうすると今度は消費者向けのコンテンツやアプリの展開があるのか？？
『UNIQLOCK』はiPhoneアプリになっていますが、もっとユニクロらしくiPhoneならではアプリが出てくることを期待しつつ。

おやすみなさい。

ども、忠犬（ではなく中堅と呼ばれたい万年見習い）hashikouです。
本日は海外SBMで話題になってた、tableのUIパターンについての記事をご紹介します。
といいつつ超テケトーなサマリのみなので、「内容が違うぜ！」とあまり怒らないでくださいね。
不安な方はレッツ原文！

原文：Ultimate guide to table UI patterns
※図もぜんぶここからだよ！

--
tableってユーザ―インターフェイスの大事な要素だよね！でもわりと見過ごされがちなんだ。
データを読みやすくしたり解析しやすくりしたりするためのものなのに、退屈でひどいものが多い。
そういうくだらないtableを少しでも減らせればと思って、tableのパターンをいくつか紹介するよ。

1.交互に行のスタイルを変える
奇数行と偶数行で色変えてみやすくするアレ。背景色や背景色を使って、複数の列や行を認識しやすくする。
ヘッダーなどは濃い色を使うなどしてそれと分かるようにする必要がある。

2.全体を選択できる行
行全体をクリックできるようにすると、ちまちまクリックしなくていいから楽だよね的な感じ。
jQueryでかんたん導入できるよ！

3.sectionを使う（内容ごとにグループ分けする）
たくさんの行をグルーピングして項目（=section）分けしたげると見やすくって親切ですな。

4.並び替える
データが膨大で目的のものが見つけにくい場合、しかも明確なキーワードを知らない場合（検索できない）、
似たような情報群で並び替えてあげる。
ヘッダー列がクリッカブルであることが必要。

5.しぼりこむ
こちらもデータが莫大な場合、チェックボックスやラジオボタン、ドロップダウンリストなどで
情報をフィルタにかけ絞り込むことができる。

6.ページ送りをつける
7.途切れないスクロール
8.スクロールしても固定して表示されるヘッダー
9.ヘッダーなし
10.伸び縮みする列
11.列の上で色んな操作ができる
12.複数の列を操作できる
などなど。

（hashikouが力尽きました・・全てを読むには↓のリンクを押してください）
原文：Ultimate guide to table UI patterns

--
tableって色々見せ方あるんですなー。
最初webアプリケーション寄りじゃね？と思ったのですが、よくよく考えると静的HTMLでもtableは普通に使うし、
JS使えば動的に表現できるし、知っといても損はないと思います。
わりとざっくり作りがちですが、こんな細かいところにもちょっとした配慮や見せ方を仕掛けてあげると、
格段に操作性や視認性がアップするのがtableのかわいいところかもしれません。

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

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

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

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

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

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

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

このサイトに来ている多くの人はネット上で情報とか取得しているのでしょう。
私自身はなんだかんだアナログな人間なので、紙媒体の活字が好きです。
とはいえ、仕事柄ネットで情報も探しますが。。。

ちょうど今月のことだったと思いますが、
講談社や小学館、新潮社など国内の出版社21社が「日本電子書籍出版社協会」を立ち上げたそうです。

携帯電話だと着メロや着うたの次にメジャーなコンテンツかな電子書籍は。
実際にどんなものかと、漫画を携帯電話で見たことがあります。
今では携帯電話はいつも手元にあるコミュニケーションツールのひとつで、
ちょっとした空き時間なんかにこんなサービスを利用したりするんだろうな。とか思ったりしました。

少し前に「iPad」の発表で盛り上がった？こともあり、amazonの「Kindle DX」など
近い将来、書籍は電子化が進んでいくのでしょうか。

端末自体はまだまだ普及していないでしょうが。
今後の展開が楽しみになってきます。