ということで過去のことは全部忘れて早速今週のまとめ行ってみましょう。

さて、6月28日にはてなブックーマークがtwitterとの連携強化を発表しまして、これに伴い今後の記事の書き方をちょっと変更したいと思います。連携強化の詳細はリンク先で見て頂くとして、今回の連携強化の何が素晴らしいかというと、なんとtwitterに投稿したURLのClick数が見れる！という所ですね。これにより自分が投稿したURLをどれくらいの人が見てくれたかが簡単に解ります。

前三回まではRTとふぁぼったーを元に紹介する記事を決めていたのですが、今回からはClick数とRTとふぁぼったーを集計し、独自のランキングとして発表してみようと思います。

1位　980ポイント
デザインは、デザイナーに任せるには重要すぎる
デザインに言及した記事が今週の一位です。WDSをフォローしてくれてる方々の中にwebデザイナーさんやデザイン業務に関わる方が多いからでしょうか。刺激的なタイトルではありますが、中身は企業担当への言及ですね。企業担当者さんに完成イメージが無いために何度も振り回される事も多いので、デザイナーからしても歓迎したい話ですね。

2位　811ポイント
IEのブラウザシェア増加に転向、IE6も増加|マイコミジャーナル
毎回定期的に発表されるブラウザシェアの調査ですね。毎回あまり話題にはならないのですが、IE6が増加ということで様々な悲鳴が寄せられました。

3位　233ポイント
あなたのコンテンツがつまらないことを示す20の危険信号 ? SEO Japan
これが沢山ある場合はあなたのコンテンツはつまらないかもしれないチェックシートですね。耳が痛いです。

4位　181ポイント
Flash を捨て HTML5 に移行するポルノ業界 – スラッシュドット・ジャパン
VHSvsベータに始まり、メディアの主権争いにはポルノは欠かせない要素なんですね。全てのウェブサイトの 37% がポルノコンテンツ!!

5位　144ポイント
ECサイトをデザインする時の8つのポイント | Webクリエイターボックス
いつも良質の記事を書いてらっしゃるwebクリエイターボックスさん。お互いにフォローワーさんの大多数が被っているので、現在の集計方法では他記事より不利ですが流石の貫禄で5位。

6位　140ポイント
50 Corporate Website Examples | Naldz Graphics
海外サイトで唯一のランクイン。企業サイトの作例ですね。最近海外サイトの紹介が少なくなっていて申し訳ないです。

７位　132ポイント
ワンパターンなウェブデザインから抜け出すための10のヒント | コリス

8位　133ポイント
商用に使える！無料素材集のサイト厳選７ | WordPress【ワードプレス】初心者の部屋～使い方知っとこ？

9位　131ポイント
白黒のクールなサイトをデザインする際に参考になる30選:phpspot開発日誌

10位　123ポイント
商用可！シンプルで汚れ過ぎていないグランジテクスチャ20「20 Simple & Subtle Grunge Textures」 | DesignDevelop

以下は100ポイント以上獲得するもランクイン出来なかった素晴らしい記事です。
HTMLをWPテーマ化する時の手順リスト – かちびと.net
Photoshop Vip 「水」に関するテクスチャ素材100枚、あつめました
WEBの作業が楽になるテクニック総まとめ　第7回 – 目次 – MdN Design Interactive
iPhone向けサイト制作ノウハウ＆拡張機能 for Dreamweaver CS4/5
俗説に惑わされないSEO | ウェブ力学
YouTubeがあらためてFlashとHTML5ビデオの比較論を展開–HTML5はまだ劣勢
Webデザイン最新トレンド ～イマドキUIのつくりかた ：第3回　トップページを彩るスライドショーのポイント｜gihyo.jp … 技術評論社
実例から学ぶ、写真画像を使ってウェブデザインに奥行きを与える方法 | コリス

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

関連する投稿

• 今週のweb制作情報まとめ | Web Design Scratch 02
• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本

関連する投稿

• 今週のweb制作情報まとめ | Web Design Scratch 03
• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本

twitter – web design scratch

今後はtwitterで紹介した中から、RTやふぁぼったーを参考に反響の多かった記事を一週間のまとめとして配信したいと思います。

ちなみに前回の記事ですが、1000フォローでのぼせ上がったというか、思うところがあり伸びに伸びてしまってます。近いうちに現状も踏まえてちゃんと書けたらと思います。

今週はいつもより携帯サイト関連の記事が多かった気がします。ちょうど仕事で携帯サイトを作っていたので助かりました。今週一番興味が沸いたのはPublickeyさんのいま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0です。新しい技術を覚えるのは大変だけど楽しい。ワクワクするけど、嬉しいような面倒なような複雑な心境です。

関連する投稿

• 横幅960pxのグリッドレイアウト
• リキッドレイアウトの最大横幅を固定する-minmax.js
• [追記]CSSでロールオーバーをするときは
• [XHTML+CSS]CSS Spriteで表現する角丸
• [Webデザイン] 企業サイトの横幅はどれくらい？～住宅メーカー編～

ありがたい事に配信開始から５ヶ月の2010年新年早々にフォロワーが1000人を突破いたしました。フォロワーの皆さん本当にありがとうございます。そしてこれからもよろしくお願いします。

さてTwitter的に言えばフォロワーが1000人というは特に多いわけでもないのですが、なんとなくキリが良いのでまとめてみようと思います。まずは初回というか、まとめ一発目なので経緯を。(実際にやってみた感想は次回)

そもそも何故Twitterでweb制作系のサイトやブログを紹介し始めたかというと、実は僕はとても自堕落な人間でして、自分でも本当にビックリするほどに。でも何かを作ったり誰かの役に立ちたいという気持ちは人並みにもっていまして、毎日のように怠け者の自分と相反する欲求を抱えて悶々としてました。

天性もなく勤勉でもない者がクリエイティブな活動をするほど不幸な事はありません。

本来ならば自分の守備範囲（webデザイナー）の話題を噛み砕いて紹介する事が一番なのですが、ここは当代きっての怠け者のこの私。あいにく人様に見て頂くほどのテクニックも知識も持っておりません。

そんな中「何か人様に見て頂いて恥ずかしくないモノは」と考えると「そういえば(僕は)結構多くのweb制作系のサイトを見ているんじゃないだろうか」と思ったわけです。

以前から日課としてRSSを1日500前後ほど読んで、そして後々参考になりそうなブログ記事をはてなブックマークで保存して歩くという行為を繰り返していました。ヘビーブックマーカーからしてみればRSSの消化が1日500前後というのは特に多くなく、普通の人からしたら暇人と思われる程の中途半端な数字ではありますが。

これをはてブとは違う形で吐き出す事で、誰かの役にたてないだろうか。もっと言えば「存在しなくても困らないが、存在してればそれに超したことは無い」という小さな存在感を示せないだろうかと思ったのです。

そんな中、ちょうど僕はその頃Twitterにはまっていまして「それなら僕のはてブをTwitterの人たちに見てもらおうか」と思ったのです。

とてもお粗末ではありますが、こうしてtwitterでのweb制作系ブログの紹介が始まりました。

長くなったので続きは Twitterで６ヶ月間web制作情報を配信してみた まとめ編 として分割します。

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。作成者が自身のフォントを提供できるようになるため、@font-face はユーザのコンピュータにインストールしているフォントの数に依存する必要性を排除します。mozilla developer center @font-face – MDC

という事になります。従来ならデザインされたフォントを使った見出しなどは画像で作っていたのですが、これによってテキストで表現出来るようになります。

しかし新しいブラウザでしか表示できなかったり、フォントの権利問題などによりなかなか使用しにくいものでした。

今回試したtypekitは権利周りがクリアなフォントを簡単に@font-faceとして使用できるというサービスです。

プランは無料のものから用意されており、気軽に使用出来るようになっています。(無料版はサイト右下にtypekitのバナーが出現)

ちなみに無料のTrialだと69種類(現在)の欧文フォントの中から２種類のフォントが利用できます。日本語のブログだと欧文フォントは２種類で十分な場合も多いのではないでしょうか。(残念ながら日本語フォントはありません)

設定も簡単で、typekit側が用意したJavaScriptのコード２行をheadに書き込んで、後はtypekit editerから反映させたいセレクタを指定するだけ。今回はブログタイトル(h1)とサイドバーの見出し(h3)に指定してみました。本当に10分くらいで作業が終了。

使用前

使用後

たった数分でこんなにも見出しの印象が変わりました。しばらくこのまま使ってみようと思います。

参考
typekit
TypeKit で広がる Web デザインの可能性 | WWW WATCH
詳しく解説してくれています。

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

しばらくはネタリストに溜まったままのWebデザイン系ブログ記事のまとめや、日記が多くなると思いますがよろしくお願いします。

今回は海外のミニマルなwebデザインのまとめです。まずミニマルとは。

ミニマリズムとは美術・建築などの造形芸術分野において、1960年代のアメリカに登場し主流を占めた傾向、またその創作理論であり、最小限（Minimal)主義（ism）から誕生し、必要最小限を目指す手法である。
ミニマル – Wikipedia

必要最小限のデザインということで、シンプルなイメージとタイポグラフィのバランスが大切になってきます。

タイポグラフィが大切といえば、先日モジックスZeroジャンキーさんがまとめられた”ウェブデザインの95％はタイポグラフィ”というエントリーも参考になるかもしれません。

＜インフォメーションデザインとは、タイプフェースの善し悪しを論じることではありません。タイポグラフィの善し悪しの話なのです＞。

＜優れたウェブデザイナーであれば、テキストを単なるコンテンツとしてだけではなく、ユーザーインターフェイスとして扱うことを知っているはずです＞。

ウェブデザインの95％はタイポグラフィ – Zopeジャンキー日記

詳しくは引用元を読んでいただくとして、このような考え方こそが素晴らしいミニマルデザインのサイトを作る近道なのかもしれないですね。

40 Killer Minimalist Blog Designs

40人のミニマリストのブログデザイン

100+ Clean, Simple and Minimalist Website Designs
100+のシンプルかつミニマルウェブサイトのデザイン

60+ Beautiful Websites Showcasing Minimalist Design
60以上のミニマルデザインの美しいウェブサイトです

Webdesign Trend Hunting – 27 Bright Websites Using Popping Colors | Inspired Magazine
ポップな色を使った27のウェブサイトです。明るい色を使ったミニマルなサイト集

35 Marvelously Minimal Websites | Design Shack
35の驚くほどミニマルなウェブサイト

minimalsites | minimal design website gallery
ミニマルなデザインのウェブサイトを集めたウェブサイト。

10 Super-Simple Web Designs | Web Design Blog
とてもシンプルな10のウェブサイト

20 Light Minimalistic Website Designs
20のライトなミニマルなウェブサイト

70 Typographic, Clean And Minimalist Color Scheme Web Designs
70のクリーンでミニマルなカラースキーム(色彩設計)のウェブサイト

35 Beautiful Minimal Websites – Part 6 | Vandelay Design Blog
35の美しいミニマルなウェブサイト

40 Beautiful Examples of Minimalism in Web Design
40のミニマリズムなウェブデザインの美しい例

40 Stylish, Minimal and Clean Free Wordpress Themes : Speckyboy Design Magazine
40のスタイリッシュでミニマルでクリーンなWordpressのフリーTheme

20 Examples Of Dark & Minimalist Website Designs With Great Typography | Spyre Studios
20のダークでミニマムな素晴らしいタイポグラフィのウェブサイト。

50 Minimal Sites | Web Designer Wall
50のミニマルなウェブサイト。

35+ Websites with Minimal Color Schemes | Vandelay Design Blog
35以上のミニマルなカラースキームのウェブサイト

関連する投稿

• 美しい日本語フォントAXISの商用利用できる試用版
• 無料で商用利用可能なメールフォームやCGI
• 横幅960pxのグリッドレイアウト
• 携帯サイトを作る前に読むべき本
• 今風のグラデーションを使ったボタンを作る方法 – 基礎

まじっくまうす？何それって人はこれを
アップル – Magic Mouse

こんな感じです。マルチタッチ対応って所が新しい所です。

とりあえず梱包されてる箱を開けてみた。スポンジでしっかり保護されてます。

箱から出してV550と並べてみました。全長はV550より長いですが、とても薄いです。実は先週末に某電気店でペタペタ触ってきたので薄々は感づいていたんですが、薄すぎてちょっと使いづらいです。何より単三電池２個で動いているので、見た目よりも重量感があります。重心が低いこともあって、マウスを指先でつまんで動かす人はいっそう重たく感じるかもしれません。しかしここら辺は慣れの部分だと思いますし、しばらく使えば問題ないでしょう。

一番厚い所で一円玉と同じくらいの厚さです。

なにより、スクロールがスルスル動いて気持ちいいです。本来ならホイールをコリコリと回してスクロールするのですが、MagicMouseだとマウスを人差し指で撫でるだけでススーっと動いてくれます。スクロールの動き方は好みによって慣性の有無を選ぶ事ができるのですが、慣性をつけると面白いようにヌルヌル動きます。

ただ、マウスで出来る操作がそう多くない事や、中央ボタン(MightyMouseだとスクロールボール？)が無いというのはかなり大きいです。Exposeやアプリの切り替えなど、便利な機能がマウスから使う事が出来ないのでMightyMouseや他社の多機能マウスを使用している人は少々不便に感じるかもしれません。

さすがにマルチタッチトラックパッドと同機能でとは言いませんが、せめて二本指上下の動きを感知して好きな機能を割り振れるようになればなぁと思います。

現状の感想としては「普段使いならあり」という感じでしょうか。仕事となると沢山のソフトを起動させたまま切り替えて使う事の方が多いですし、多ボタンマウスやMacBookなどのマルチトラックパッドのような使い心地を求める人には今の所むいてないのではないでしょうか。

とまぁ、ごちゃごちゃ言いましたが個人的には結構好きです。もしかしたら今後感想が変わるかもしれないので、そのときは力一杯褒めたいと思います。

ちなみに裏側はこんな感じ。裏側だけを見た人が「なにこれカメラ？」と言ってました。

カバーを外すと電池がこんにちは。こうやって見ることで、やっと単三電池が二本はいってる事を実感しました。カバーは結構ペランペラン。

関連する投稿

• マウスに早速エアパッドソールを貼ってみた。
• Mac Book Proが届きました

まず裏返します。今回はソールの交換なので裏側の黒い部分をまずは剥がします。僕も初めてのときは結構勇気がいりました。しかし今回は二回目なので迷い無く。

メリメリメリッっと。

本来は故意に剥がすような場所じゃないので結構剥がしにくいです。ピンセットなど薄くてヘラの代わりになるものを使うと剥がしやすくなります。

剥がし終わったらエアパッドソールをペタペタペタと貼ってしまえば完了です。

貼り終わった後のマウスは冗談抜きによく滑ります。ノーマルのソールの約三倍(※当社比)くらい滑ります。すっごい滑るよ！の世界です。さっきまでは「このマウス重いなぁ」と思っていたのが「あー滑りすぎて確実にクリックできねぇ」レベルまで変化します。

当然ながら(マウスを動かすのが)重い状態から滑るように軽くなるので、使い心地に慣れるまではちょっと違和感がありますがすぐ慣れます(ソースは俺)。

きっとネットやPCが好きな僕みたいな者は、人生で一番長く握っていたモノが彼女の手ではなくマウスになるわけですし、少しでも軽い方が疲労も溜まりにくいんじゃないかなーと勝手に思いながら慣れていこうと思います。

いやーそれにしてもよく滑る。

[補足]Appleの純正マウスやlogicoolの一部マウスには専用のソールも発売されていますので、もしお買い求めの場合はそれを選んでみるのも良いかもです。

関連する投稿

• Magic Mouseが届いたからちょっと使ってみた
• Mac Book Proが届きました

(左からV550, VX Revolution(以下VX R), MX 620)

今回買ったのは一番左のV550です。

これに決めた理由はMac Book用のマウスということで、レシーバーが小さいマウスが欲しかったからです。レシーバーを装着すると。

こんな感じでちょこんと頭が出る程度なので、あまり気になりません。

ちなみに一番上の写真に写ってるマウスのレシーバーを比べると

(左からV550, VX R, MX 620のレシーバー )
という感じになり大きさは一目瞭然だと思います。Logicoolのマウスだらけなのは、MicroGearの使い心地が大好きだからです。

“新開発ホイール： MicroGear™プレシジョンスクロールホイール

MicroGearプレシジョンスクロールホイールは、2つのモードによって、容易なナビゲーションを可能にします。新開発のフリースピンモードを使用することで、長文の文書でも思ったとおりにすばやく移動することができます。
〜省略〜
スクロールした短い移動単位ごとに馴染みのあるフィードバックが得られるため、ユーザーは、リスト、スライド、個別のイメージなどを精確にナビゲートできます。
Logicool製品紹介より引用”

V550を使ってみての第一印象は「見た目感じより重い！」でした。よく調べもせずに小さいマウスなのでVX Rとおなじ単三電池1本かと思っていたら、実は二本使用だったので予想より重かったです。

またVX Rのような手のひらにフィットするように作られたマウスに手がなれているせいか、手のひらとマウスの間の空間が気になります。しかしまぁこれは慣れでしょうね。

ちなみに上の写真の左に写ってるMX620は握り心地自体は良いんですが、いかんせん僕の手には大きいのと単三電池2本というところで大きくて重くイマイチな感じでした。またVX Rは持ち運び時にレシーバーをマウス内に収納する事ができるのですが、VX Rより大きいボディのVN620でそれが出来ないというのもマイナスポイントです。

ちなみに僕はマウスを指先でつまみ手首を支点にして操作する人なので、手のひら全体で操作する人と比べるとマウスの重さが最大のネックとなります。

しかしうちのMX620は、ノーマルのソールを外してエアーパッドプロについてきたエアパッドソールを付けてからはネックだった重さ問題もいくぶん軽減しました。

↑の写真の白いやつ。これを付けると、マウスがまるで机の上を滑るような感じになって手首への負担が減るのでオススメです。

ちなみに一番上の写真に写ってるマウスパッドがエアーパッドプロなのですが、ソール単体でも十分な効果が得られます。（ソールは消耗します。一回張れば1〜2年持ちますが）

ちなみに僕のオススメはVX Rです。ボディは小ぶりで手にフィットし(まぁここは人それぞれですね)、MicroGearはもちろんZoomも合わせると8ボタンと多機能で、なんと単三電池1本なので重さが気になりません。ちょっとレシーバーが大きいですけどね。

とりあえずV550もクリップ&ゴー システムなる便利なもの(マウスをひっかけるドックを新品のMac Bookに貼る勇気が無いので僕は使ってませんが)もありますし、レシーバーが小さいという点だけでもノート用マウスとしては満足です。

関連する投稿

• 関連する投稿はありません。