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

ども、忠犬（のわりに近所の犬には吠えられる）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」など
近い将来、書籍は電子化が進んでいくのでしょうか。

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

ども、忠犬（かどうかは知りませんが）hashikouです。

どうやら雑誌「web creators」が2010年5月号（2010年3月29日発売）をもって
WEBに全部移行だそうです。
つまり紙媒体では発行しなくなるってことですよね。
確かに最近のweb creatorsは掲載した記事を集め、後日まとめて書籍として発売するパターンが多く、
雑誌を買うインセンティブが以前と比べて減っていた感じがしていました。

そこで、先の3つの柱のうち「紙媒体」の部分を縮小し「Webサイト」の部分を大幅に拡大することで、
それらの問題を解消し、読者のみなさまに有益な情報をいち早く、より豊富にお伝えできるようになります。
月刊「web creators」のWebサイト移行のお知らせ - MdN Design Interactive - Webデザインとグラフィックの総合情報サイト

プレスリリースでは明記されていませんが、Web版は有料化したりするんでしょうか？
課金で収益あげるか、広告で何とかするか、今後の動向が気になる感じです。
しかし雑誌は1,200円でも払えるのに（必要な情報なら）、オンラインマガジンなどで1,000円とか言われると
「高っ」と思ってしまうのは、なんでなんでしょうね？
内容がまったく同じだとしたら、物理的な質感にお金払っているんでしょうか。。

TAKA-Gです。
最近、管理人ziraiさんと仕事をしていまして、ブログ書きますよーと言ったのが事の発端で。
ウェブのことは忠犬ハシ公に任せつつ、ちょっと違ったことを記載していきたいと思います。

興味がある方はtwitterでも探してみてください。

最近全くブログの更新を怠っていましたが、新たなブロガーを2名迎えたことによりこの度復活することとなりましたのでインフォしておきます。
それに伴いブログの個別エントリーの最後にRTボタンを設置してみました。数字の下の「retweet」をクリックするとそのままリツイートできますので、是非つぶやいてみてください！

みなさん、ミスしてますか！恥ずかしい話、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は長いテキストやフォルダ単位での比較にと使い分けています。

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

突然ですがこんにちは。副管理人のhashikouです。
前職で管理人ziraiさんと師弟関係だったこともあり、縁あってブログを書かせてもらうことになりました。
ホットでヤングなレンタルサーバー技術ネタを書いていこうと思うので、どうぞよろしくお願いします。
初回なのでHTML5について適当にまとめてみます。

1.HTML5までの経緯
今まで策定されてきたHTML4やXHTML2は、文書構造としてのマークアップ言語であり、主にtext/htmlとしての使い方が大半でした。
しかし通信回線の発達や技術の進歩などにより、googleをはじめとしたWebアプリケーションの需要が高まり、現在のHTML4や諸々を拡張しHTML5の策定をすることとなりました。

2.何が変わるの？
ざっくりざっくりご紹介します。Webアプリケーション系は省略。
・<img>と同じように<video>とか<music>とか使える。プラグイン不要（ただしコーデックでモメてる）
・canvas機能が策定、HTMLでキャンバスを指定してそこにJSでグラフィックの描画など色々できるように
・ローカルにキャッシュもためておけるのでローカルでWebアプリが使える→iPhoneのGmailですでに使っている
・<section>、<article>要素が増え、文書構造をより明確に組み立てられる
・その他<div id="header,footer">→<header><footer>というように、よく使うタグとid、classのセットが独立した要素に
・DOCTYPEなどの記述が短くなる
・input typeの種類が増える、カレンダーやスライダなどUIも増加

3.今後どうなるの？
HTML5のすべての実装が完了して正式勧告されるのが2022年などと言われています。。が、ブラウザ側では仕様がある程度決まっているものに対して実装が進んでいるため、一部使ってみることはできます。ブラウザ実装表は以下からご確認ください（1年前の記事ですがわかりやすいです）。
HTML5/CSS3は最新Webブラウザでどれだけ実装が進んでいるか？ － Publickey

ブラウザの実装がまちまちのため、制作の現場ではまだ実感が湧いてこないHTML5ですが、IE9もHTML5に対応するという噂もありますし（しないとそろそろ暴動起きますよね…）、googleやAppleが立て続けにHTML5を採用しアナウンスをしているところを見ると、やはり今後大きく流れが変わってくるような気がします。
近い将来、ブラウザ上で何でもできてしまう時代が来るかもしれません。見た目がどうのこうのというより、動的にアプリを組み込むこともふまえ、総合的な「WEBでできること」をお客さんに提案していく必要がでてきそうです。

もっとわかりやすく知りたい：
HTML5, きちんと。

サンプルが見たい：
HTML5サンプル集 - 株式会社あゆた

ikekaiを無事終えることができました。
総勢１７名。身内がチラホラ居ましたが、こんなに集まっていただけるとは思っていなかったので素直にうれしいです。

感想としては非常に楽しく有意義でした。
業種やWeb歴も様々で、CSS niteに関わっていた人や現在デジハリで勉強している人、CGを作っている人、デザイナー、プログラマ、フリーで仕事をしている人、極めつけはアダルトサイトとスイーツのコラボレーションサイトを運営していた人など面白い人ばかりでした。

一次会は名刺交換やWebの話に花が咲きましたが、二次会からは普通の飲み会の様で、初めてあったとは思えないほど打ち解けぶっちゃけていましたｗ

この会で改めて思ったのがWebの世界は横のつながりが非常に大事で、知り合いや情報が増えればいろいろなことが起こり、また起こすことができるということ。
ちょっと大げさっぽいですが本当にそう感じました。

というわけで今後もいろいろな人に会い、刺激を受け続けていきたいのでikekaiは今回限りで終わらず、また是非開催したいと思いますのでその際は皆様よろしくお願いします。
新規の方の参加も大歓迎です！

参加していただいたみなさまありがとうございました。

ikesaiの新たな試みとしてWeb業界＆Webに興味がある方の交流会を開催してみたいと思います。mixiでチョロと募集してみましたがイマイチ反応がなかったのでここでしちゃいます。。
巷ではセミナーなどで交流は多々あると思いますが、この交流会では特にトピックなどはなく、ただ仲良くなろう！ただ人脈が増えればいいな！をモットーに行いたいと思います。難しいことは考えず気軽に交流する場だと思って頂ければ幸いです。

■参加資格

・Webに興味がある方
・Web業界で働いている方
・Web業界で仕事してみたい方
・サイトを見るのが好きな方
などなど基本誰でも参加OKです。

Web業界は広そうで意外と狭い業界なので、いろいろな人と知り合いになり人脈を広げると今後の人生いろいろ役に立つのかなと思い今回企画してみました。

■開催情報
日時：2月6日（土）
場所：渋谷あたり
時間：19時～22時くらい
参加募集人数：20人程度
参加費：￥4,000くらい
参加条件：イケサイを見たことアル人
締切日：2月3日（水）まで

※詳細については確定後、改めてご連絡いたします。

参加希望の方は下記アドレスに必要事項を記入の上、
締切日（2月3日）までに送信ください。

メールアドレス：eventアットikesai.com
------------------------------
■記入項目
件名：【ikekai　参加希望】
お名前：
携帯番号：（確実に連絡が取りたい方は記入してください）
メールアドレス：（携帯でもOK）
職種：（できれば記入）
参加目的：（未記入でもOK）
その他：（当日やりたいことなど何かあれば記入ください）
------------------------------
※その他不明な点があればご連絡ください。

人数が集まらない場合は、中止の場合も。。
ご了承ください。。。

mixiに続き今さらですが、TwitterのIDを発行してみました。いまだに便利な使い方は分かりませんが、ここで面白いことでもできたらと。。サイト登録やデットリンク報告などもこちらで受付けます。
管理人のつぶやき、愚痴等もあると思いますがどうぞよろしくです。