allWebクリエイター塾　ブログ

多国でランキング１位のアプリ「Clear」に見るモバイルファースト

2012-02-28T10:24:00.006+09:00

2月15日にリリースされたiPhoneアプリ「Clear」は、発売後わずか５時間余りで世界中のApp Storeを席巻し、ほぼすべての国でランキング１位に輝いたと wired や Yahoo!ニュースでも記載されていて日本でも話題をよんでいる。

「Clear」は、よくあるToDoアプリではあるが、その操作性が斬新である事から注目されている。
以下は操作方法が伺える動画だ。

2011年8月に SwapSkillsDoubbble(2) で行われた「スマートフォンUX」のサブタイトル「本物のWebサービスはユーザー体験から始まる」にもあるように、UX/UIによって売れるアプリが決定してきた証拠でもあると感じている。

そして、アイディアの根本にはモバイルファーストの考えがある事が見受けられる。
以下、Yahoo!に記載されている内容を元にポイントを分析してみた。

2008年に初めて制作した(中略）初期のアイデア段階では、ナヴィゲーションバーもあったし、「新規追加ボタン」もあったし、ほかにもよく見かける機能がたくさん付いていたのだ
マウスを使っているときなら、ボタンをクリックするときに、実際に指でボタンを押しているわけだからまだ許せます。でも、スマートフォンを使うのであればガラスを擦っているだけで、まったくフィードバックがないわけですよ。
最初の打ち合わせで、そのすべてを取り除き、一から考え直すことを提案した。

パソコン画面を設計していないClearなどのアプリだとモバイルファーストという言葉は一見違うものと考えがちでしっくりはいかないが、考え方はパソコンを基軸に考えず、モバイルだけを考えているという点においてはまさに、モバイルファーストの考えだ。

実は、モバイルファーストという言葉は数年後には死後になっているとも予測されている。つまり、モバイルファーストである事が当然になるからだ。

今後モバイルの普及が進みモバイルが主流になればなるほど、モバイルファーストの考えは当たり前になる事は容易に想像がつく。

だがその前に、Clear制作者フィル・リュウ氏の

「いろんな可能性を秘めた新しいプラットフォームが登場したときに、新しい道を模索しないというのは逆に自分に損害をもたらすことになる。」

という言葉通り、未開拓の分野にはまだ可能性が多く含まれていると感じてやまない。

CSS3 でタペストリーデザイン（三角形）描いてみた。

2012-02-23T18:56:00.005+09:00

最近はCSS3を利用してインタラクティブなコンテンツ表現を行うサイトが出てきました。

SwapSkillsのサイトをリニューアルしましたが、詳細ページの部分でCSS3を利用した二等辺三角形をつかってみましたので、簡単にご紹介します。

CSSで二等辺三角形のサンプルを作っている例はいくつかあります。検索してみると海外だけでなく国内でもサンプルを掲載しているサイトがありました。

CSS3で描く基本図形 | KSK-soft.com

CSS3で描く基本図形2 | KSK-soft.com

書き方は主に2つあります。1つはborderプロバティを使ったもの、もうひとつはCSS3のtransformプロバティを使ったものです。

1.borderプロバティを使った三角形

borderプロバティを使ったものは、簡単に作れます。

幅や高さを消してborderのサイズと色を変化させると簡単に三角形ができます。

border-widthの幅を上辺は25px、左右は50px、下辺は5pxに指定し、border-topに赤色を指定し、その他の色を透明にしました。

これで三角形の出来上がりです。

borderプロバティを使ったものは古いブラウザでも対応できそうです。ただ、アンチエイリアスが効かないためにジャギーが発生してギザギザが目立ちます。

borderプロバティを使った三角形（上）は
transformプロバティを使った三角形（下）と比べてジャギーが目立つ

サンプルソース

.triangle01 {

width: 0;

height: 0;

margin-left:200px;

margin-bottom:50px;

}

2.transformプロバティを使った三角形

CSS3のtransformプロバティを使ったものは、borderプロバティを使ったものよりも難しいです。

「子要素が親要素の余計な部分を隠して三角形をつくる」というものになります。

親になる要素と子になる要素2つが必要です。子になる要素は、::before疑似要素・::after疑似要素を使うのがいいでしょう。

はじめに、子要素には、幅と高さが同じ大きさになるように指定します。

次に、2つ用意した子要素をCSS3のtransform:skewで変形させ、平行四辺形を2つ作ります。

CSS3のtransform:skewで変形させた平行四辺形

transform:skewの数値がポイントで同じ数値のプラスマイナスの値を指定します。

1つはtransform:skew(75deg)のように正の値、もうひとつはtransform:skew(-75deg)のように負の値にして回転させます。

変形させた2つの子要素は、同じ形の平行四辺形を反転させたものになります。

2つ用意した子要素の位置を、三角形の頂点が合うように調整します。

親要素の下部に平行四辺形で"X"を作る形になります。

親要素の下部に平行四辺形で"X"を作る

最後に親要素に「overflow:hidden」を指定します。これで子要素が親要素からはみ出た部分を隠せます。

完成形。緑のコンテンツ部分がオレンジの部分で隠されて三角形になる。

サンプルソース

.triangle02{

position:relative;

overflow:hidden;

width:150px;

height:20px;/* 高さをかえれば五角形に */

margin-left:200px;

background:green;

color:#333;

}

.triangle02:before,

.triangle02:after{

position:absolute;

bottom:-0px;

content:"";

z-index:0;

width:100px;

height:100px;

background:orange;

transform-origin:0 0;

}

.triangle02:before{

left:-210px;

-webkit-transform:skew(75deg);

-moz-transform:skew(75deg);

-o-transform:skew(75deg);

-ms-transform:skew(75deg);

transform:skew(75deg);

}

.triangle02:after{

right:-210px;

-webkit-transform:skew(-75deg);

-moz-transform:skew(-75deg);

-o-transform:skew(-75deg);

-ms-transform:skew(-75deg);

transform:skew(-75deg);

}

ゲーミフィケーションの大切さ

2012-01-10T12:07:00.002+09:00

今回、allWebクリエイター塾が主催するSwapSkillsでは「成功するWebサイト戦略手法ゲーミフィケーション/ゲームニクス」と銘打ってイベントを開催する。これは是非とも色んな人に参加してもらいたい。なぜなら、アプリケーションを作成する上で、これこそが成功の鍵を握っているからだ。

自分は1975年生まれ、ちょうど世代的にはファミコンの世代にあたる。毎日学校から帰っては1つのゲームに夢中になっていた。キャラクターがキノコやスターというアイテムをとってお姫様を救出するというストーリだ。

たぶん、僕と同じ世代の人なら誰でも知っている「スーパーマリオブラザーズ」がそれだ。

このゲームは非常に単純ながら、１回ゲームを全てクリアしても何度も楽しめていた。毎回、ゲームの色んなところが変わるのである。おそらく、ゲーム自体は何も変わっていなかったと思うが、単純に自分のスキルにあわせてゲームに隠れていた色んな敵やキャラクター、連続技、を楽しめたのである。この変化というか意外性のお陰で、このゲームには２年も３年も飽きなかった。本当に楽しめるゲームだった。

この経験は、今になって深く考えるようになった。

最近、小生も少しだけアプリといえるものを作成するようになった。そうすると、使い易さの他に、ユーザーにつかってもらいたい、もっと面白いアプリを作成したい。と考えるようになってきた。

その時、
「小学生の時に何故、あのゲームにはまったのか？」
「スーパーマリオブラザーズは何故面白かったのだろうか？」
ということを自問自答する。

そして、これは今までユーザーにストレスなく利用できるアプリとは別なことに気づいた。おそらく、ユーザーに飽きずに毎日アプリを作成してもらいたいと思うことは

アプリがストレスなく動くことも１つの重要な点ではあるが、僕が小学生の時に飽きがこなかった、毎回ユーザーが訪れるたびに「おっ何か変化があるぞ」と思わせる必要があるのだと思う。

ゲーミフィケーションやゲームニクスという言葉について、論じれるほど僕は知識はないが、僕達は成長の過程で、必ずこのようなことを体験しているはずだ。でも、今度はそれを体験させる側に立たなければならなくなってしまった。それを論理的に自分たちの制作物に意図的に反映させなければならない。

これに対する答えというかヒントを今回のSwapSkillsでは楽しみにしている。主催者ではなく、制作者という立場から考えてみたい。

成功するWebサイト戦略手法ゲーミフィケーションhttp://swapskills.info/doubbble/03.html

Chrome の驚くべきリアルタイム機能

2012-01-06T10:57:00.000+09:00

Google Chrome は「速さ」を特徴としたブラウザですが、ここまでするのかと思うぐらい「速さ」を追求するそうです。ユーザーがURLの入力をスタートして、その入力が終わるころにはページをダウンロードする機能を実装するようです。

グーグルは本日ブログの中で、最新のβリリースにて、幾つかのローディングスピードとセキュリティに関する機能を実装することを発表しました。

ローディングスピードに関していえば、βリリースのChromeでは、ユーザーが頻繁に訪問するページをプリロードする機能があります。オムニボックス（検索ボックスのことGoogleの呼び方）にURLをタイピングを始めると、オートコンプリート機能で予測されたURLを裏側でダウンロードを始めます。
ユーザーがエンターキーを入力する時には、既にページがダウンロード済みというわけです。実質ユーザーはローディングというものすら感じないことになります。

次にセキュリティに関しての改善では、クロームでは「Safe Browsing」機能を実装するようです。これは、「.exe」「.msi」の拡張子のついたファイルをダウンロードの後にスキャンを行い。万が一、そのファイルが悪意のあるコードを含んでいた場合は、ユーザーへ削除を促すものです。

Googleのこのような取り組みには毎度、驚かされます。今年もブラウザシェアの台風の目になるかもしれませんね。ひょっとするとChromeのシェアがIEを抜くことも考えられます。

2012年のご挨拶

2012-01-06T10:55:00.001+09:00

読者の皆様

新年あけまして
おめでとうございます。

本年も allWebクリエイター塾ブログを宜しくお願いいたします。

昨年は途中から投稿数が減ってしまいましたが、
本年は、投稿数が減らないように頑張っていきたいと思います。

少しでも皆様のお役に立てる記事を投稿していきたい考えておりますので
皆様のご支援を宜しくお願いいたします。

allWebクリエイター塾

jQuery Mobile 1.0正式版までの大きな変更点のピックアップ

2011-12-05T11:30:00.000+09:00

先日、ついにjQuery Mobileの1.0正式版がリリースされ、いよいよ本格的な利用が視野に入ってきました。そこで、jQuery Mobileのここ最近の変更点の中から大きなものをピックアップしてお伝えしたいと思います。

テーマのカスタマイズツール「ThemeRoller」のリリース
まずは、jQuery Mobileのオリジナルのテーマを作成することができるThemeRollerです。ThemeRollerは、これまで個別にスタイルを編集するしかなかったテーマのカスタマイズを簡単に行うことができます。各カラーをドラッグ＆ドロップで簡単に変更できたり、左側のインスペクタパネルで詳細に変更することができたりします。是非ともお試しください。

（http://jquerymobile.com/themeroller/）

大幅なパフォーマンスUP
これまでマイナーバージョンアップが行われるたびにチューニングされていましたが、正式版となる1.0では、さらに30%〜50%のパフォーマンスアップとなりました。今までもっさりと感じていた方は、再度試してみてはいかがでしょうか。

（フォームギャラリーの装飾に掛かった時間を測定してベンチマーク結果）

ページ遷移のパフォーマンスチューニング（DOMキャッシュとプリフェッチ）
jQuery Mobileでは、さまざまなページの装飾を行うため、プレーンなページを表示する場合に比べてページ遷移が遅くなっています。少しでもパフォーマンスを改善するために、ページのキャッシュができるようになっています。ページ要素に次のようにdata-dom-cache属性を追加し、属性値にtrueを指定すると再度表示したときにキャッシュを表示するようになります。変更が少ないページなどに適用すると良いでしょう。

<div data-role="page" data-dom-cache="true">

また、それでも遅い場合には、遷移先のページを先に読み込んでおくようにすることができます。<a>要素にdata-prefetch属性を追加することで元のページが表示された際にバックグラウンドで取得するようになります。

<a href="index.html" data-prefetch>プリフェッチ付きリンク</a>

pjax（pushState）対応
jQuery Mobileで作成された各ページは、これまでハッシュベースで管理されていました。そのため、例えば最初のページ（index.html）からメニュー（menu.html）へ遷移するとURLが次のようになっていました。

http://example.com/index.html#menu.html

これを、HTML5のHistory APIを利用して、対応ブラウザであれば正常なURLに書き換えるように変更されています。

http://example.com/menu.html

以上、大きな変更点を4つほどピックアップしてみました。ここで紹介したもの以外でもいろいろな機能追加や変更点があります。モバイルサイトを簡単に作成できるjQuery Mobileを是非、試してみてください。

[PR] 12月17日(土)にjQuery Mobileをまる1日使って学習する「タッチイベントが簡単実現で超便利！ jQuery Mobile徹底習得講座」が開催されます。興味のある方は、この機会に是非チェックしてみてください。

PrefixrがAPIでEspresso・Codaなどに対応

2011-11-12T10:53:00.005+09:00

Prefixrは、CSS3のベンダープレフィックスをいい感じに追加してくれるサービスです。An Update on Nettuts Prefixr | Nettuts という記事を読み、Espresso、Codaなどに対応していることを知り、Espressoで試してみました。
PrefixrのAPIページを開くと、現在の対応アプリケーションが記載されています。Espresso、Code、Sublime Text 2などのエディタに対応しています。変わったところではAlfredにも対応しています。

Espressoのプラグイン（Sugar）をダウンロードして試してみました。
まずは、ベンダープレフィックスなしのスタイルを記載します。

『Action』メニューから「Prefixr」→「Update Section or Document」コマンドを実行すると一瞬で変換されます。

ベンダープリフィックスをいちいち追加するのは結構めんどうな作業です。いままではPrefixrのサイトでCSS3のベンダープレフィックスをいい感じに追加していましたが APIに対応したエディタを使用する人はプラグインを使用することで作業効率があがると思います。

Macを使っているユーザーならサービスメニューを使うことですべてのエディタで使用することもできますので、つかってみたらいかがでしょうか？ただし、DreamWeaverではサービスメニューを使うことができないみたいですが。。。

参考にしたい、CSS3でつくる商品写真の見せ方

2011-11-04T11:54:00.003+09:00

Original Hover Effect は「:hover」で、マウスオーバーした際のエフェクト10種類を紹介してるギャラリーサイトです。CSS3でここまで出来るんだと改めて感心する出来ばえです。

女の人の写真にマウスオーバーをすると、ダイナミックなアニメーションで商品説明とボタンが出現します。

自分のウェブサイトでも利用できるように保存しておきたいですね。

ソースコードの紹介は全てここにあります。

出典元

http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/

アニメーションできるプロパティがわかる一覧表、「animatable」

2011-11-01T13:33:00.004+09:00

「animatable」は、CSS3の transition を適用できるプロパティを一覧を掲載しています。ウェブサイト作成時に、無意味なCSSプロパティを指定をすることはブラウザのレンダリングパフォーマンスを落とします。このツールを使えば余計なプロパティにアニメーションを指定しなくて済みます。

掲載されているプロパティ一覧
ここにあるプロパティはtransitionを指定できます。

background-color
background-position
background-size
border-radius
border-width
box-shadow
color
font-size
width
height
letter-spacing
line-height
opacity
outline
text-indent
text-shadow
top
transform
transform-origin

無意味な指定とは

span{
width : 100px;
height : 100px }

上記の指定は無駄な指定です。span はインライン要素ですので幅と高さの指定は無意味なのです。このような指定はブラウザのレンダリングパフォーマンスを損ないます。

すごい、３Dのマップもプラグイン無しで実装できる。

2011-10-23T12:45:00.002+09:00

今までは３DはFlashなどのプラグインを利用で実装していたのですが、なんとWebGL（ウェブベースのグラフィックスライブラリ）はプラグインなしで３Dが実現できます。

Google MapとNokiaのMapでWeb GLを利用できます。Google MapはGoogle Map をGLバージョンに切り替える際に判定がされます。要件を満たしていないと下記のとおりとなります。

Google Map(普通のGoogle MapとURLがかわりません)
Nokia ３D Map

左下に判定が・・・

判定後のメッセージ、残念でした。

ハードウェアに制限が
ハードウェアに推奨があるらしく自分のMac Book Air ではファンがギュイーンと回転することになりました。詳細は、Googleのヘルプページを見てください。

Gmailもレスポンシブ・ウェブ・デザインへ

2011-10-21T17:40:00.002+09:00

Gmailの次期バージョンのデザインが「レスポンシブ・ウェブ・デザイン」になります。これは新しいGmailのデザインをGoogleが間違ってYou Tubeへアップしたことから発覚しました。

これが問題のアップされたビデオです。クリックしていただくと閲覧することができます。

新しいGmailのデザイン

いよいよ、「レスポンシブ・ウェブ・デザイン」が当たり前の時代がきました。ユーザーエージェントで振り分けを考えている人は、時代に取り残されちゃいますよ。

allWebでも「レスポンシブ・ウェブ・デザイン」を教えていますので是非受講してみてください。

もっと効率的になろう！オンラインCSS共有ツール

2011-09-20T11:56:00.004+09:00

オンライン上のソースを共有するツールといえば、「github」「js.fiddle」などが有名です.
最近ですがCSSのソースコードを共有するツール「CSS Deck」があるみたいです。開発チームでCSSのソースコードを共有したいことってあると思いますが便利です。

使い方
このツールは４つのペーンからシンプルに成り立っています。

デザインビューペーン（右）
HTMLペーン（左上）
CSSペーン（左下）
コントロール部分（上部）

完成したデザイン

HTMLを記述する

CSSを記述する

共有・背景変更

HTML ペーンへHTMLとCSSペーンにCSSを挿入して、デザインビューで結果をみることができます。

共有する

共有するのは簡単です。右側の上部の「SHARE」というボタンを押すとURLが吐き出されます。あとは、そのURLをメールなどで送付するだけです。

デフォルト

「SHARE」ボタンを押すとURLが現れる

魅力的なデモを紹介

http://cssdesk.com/uufxf

まとめ

ソースコードを共有するツールは他にも沢山があるが、CSSだけに注目したツールは珍しいい。すこし時間のある時に使い方を考えてみるといいのかもしれない。

「レスポンシブ・ウェブ・デザイン」だよ、「レスポンシブル」じゃないよ。

2011-09-17T14:57:00.005+09:00

最近、「レスポンシブ・ウェブ・デザイン」の記事が増えてきました。

しかし、タイプミスなのか、間違って覚えたのか「レスポンシブル・ウェブ・デザイン」とか「レスポンシブル・デザイン」とかいうのがあります。この記述は間違いです。直ぐに修正しましょう。

また、「レスポンシブ・デザイン」は間違いではありませんが、建築業界で使用されている言葉とかぶりますので、ポピュラーな表記ではありません。

「レスポンシブ・ウェブ・デザイン」とタイプしづらいですが正しく表記しましょう。

大手新聞社の Boston Globe も Responsive Web Design を採用

2011-09-17T14:52:00.003+09:00

モバイルへの対応方法の一つとして「レスポンシブ・ウェブ・デザイン」が日本でも流行りつつあります。本家の海外では９月１２日にボストン（米国）の大手新聞社「Boston Globe」がウェブサイトを完全にレスポンシブ・ウェブデザインでリリースしました。

「Boston Globe」のウェブサイトをチェックすると、気づいた点が幾つかありました。

コンテンツの変化

「Boston Globe」のウェブサイトはスクリーンサイズに合わせてコンテンツが変化します。サイトの左上部のコンテンツですが、スマートフォン用のスクリーンサイズでは、「天気」と「交通」のみが表示されます。しかし、大きいスクリーンサイズでは、左上部に「車」と「求人」と「不動産」が加えて表示されます。スマートフォンでは、「天気」や「交通」というユーザーがもっとも利用するコンテンツのみ表示しています。ユーザーの環境（コンテキスト）を考えてコンテンツを可変させているのですね。

技術的なことでもこのナビゲーション周りには、display:tableが利用されていたりと、非常におもしろいウェブサイトです。

スマートフォン版

デスクトップ版

コラムの順番

３コラムのレイアウトを実現する場合、float:leftを順番に指定すると、左から順番に１番目のコラム、２番目のコラム、３番目のコラムと横並びになります。それをスマートフォン用でスクリーンサイズを小さくする場合は、floatをfloat:noneで解除します。面白いのは、その並び順です。スマートフォン用にした場合は、一番上にくるコンテンツは真ん中のコンテンツになっています。非常に不思議な並び順序ですね。

デスクトップ版の並び方

スマートフォン版の並び方

２番目のコラムが一番上に表示される

ブラウザ対応

実はこのプロジェクトは IE6, 7, 8 をサポートしています。しかしIE6,7,8はmedia Queryに未実装の為に、「Respond.js」を利用してサポートしています。ちなみに、「Respond.js」は、modernizr2.0 の中で作成できます。

まとめ

世界中で「Responsive Web Design」が「Boston Globe」のような大きなプロジェクトで利用されたことは話題になっています。これを機に「レスポンシブ・ウェブ・デザイン」が、これから普及していくでしょう。また「Boston Globe」の例からは実務で制作する上でのノウハウが沢山つめこまれているでしょう。

Facebookは世界で３番目に大きい国家と同じ

2011-09-03T10:27:00.002+09:00

ソーシャルメディアが成長しているのは、皆さんよく分かると思います。でも人に説明をする時に、ただ数字を並べても成長の凄さは伝わりませんよね。そこで、便利なインフォグラフィックを用意してみました。といっても海外の「Search Engine Journal」からの引用です。
ちなみに、皆さんはFacebook が世界で３番目に大きい国家と同じユーザー数（人口）ということを知ってましたか？意外な捉え方が為になります。

全画像はこの下です。

画面をがんばって下までスクロールすると色々な発見があります。是非、参考にしてみてください。

ソーシャルメディアで知られていない真実　２０選

2011-09-02T12:01:00.004+09:00

ソーシャルメディアって大きすぎて、どれだけ大きいのか分からなかったりしますよね。そこで、ソーシャルメディアで知られていない真実を２０個ほどまとめてみました。

地球上の９人に１人はFacebookを利用している。
Facebookでは、７００億分が１ヶ月に費やされている。
Facebookのユーザーは、１ヶ月に１５時間３３分をFacebookに費やす。

残り１７個は続きで

２５億人以上がFacebookにモバイルからアクセスする。
２５０万以上のウェブサイトがFacebookとインテグレートされている。
Facebook では１ヶ月に３０億のコンテンツが共有されている。
300,000 のユーザーが７０種の言語への翻訳をボランティアとして活動している。
Facebookでは、１日に２０００万のアプリがインストールされている。
YouTube は４億９０００万のユニークユーザーがウェブサイトを訪問している。 (2011年２月時点)
YouTubeは１ヶ月に９２億ページビューが生成されている。（モバイルと埋め込みされた動画はふくまない）
Youtubeでは、１ヶ月に２.９億時間が視聴されている。 (326,294年)
Wikipediaは１７００万の記事をホストしている。
Wikipediaには９１０００人の編者がいる。
Flickrでは１分間に３０００の画像がアップロードされている。
Flickrには５０億もの画像が保存されている。
Twitterでは１日に平均して１億９千万の「つぶやき」がある (２０１１年５月現在)
Twitterは１日に１６億のクエリを処理している。
Twitterは１日に５０万の新規ユーザーを獲得している。
Google+ は２５００万人以上のユーザーがいる。
Google+ はソーシャルネットワークでは最も早く１０００万人のユーザーを獲得した。(Twitter は 780日、Facebook は852日)

レスポンシブ Web デザインには欠かせない。スケッチテンプレート

2011-09-02T11:29:00.004+09:00

「RESPONSIVE WEB DESIGN SKETCH SHEET」はレスポンシブ Web デザインに便利なテンプレートです。細かいラフの作成には向いてないですが、各スクリーンサイズ（スマートフォン用、タブレット用、デスクトップ用、テレビ用）のラフスケッチにはピッタリです。

印刷用紙サイズをA4からA3へ変更すれば、細部も書き込みできるので利用してみてください。

http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets

やっぱり、PSDやaiデータがあると便利。HTML5ロゴ:ダウンロード

2011-08-29T11:48:00.004+09:00

allWebのウェブサイトのバナー作成する際、よくHTML5のロゴが必要になったりします。でもW3Cの公式サイトでダウンロードをしようとすると、「SVG」と「PNG」しかありません。これでは加工が大変なので、PSDデータとかaiデータがないかと(SVGはイラストレーターでは開けられますが、aiファイルが便利だったするので)探していました。

よく見ると「SVG形式」や「PNG形式」しかない。

PSDのHTML5画像のダウンロード

ダウンロードのサイトを発見したのは、Espreson Media という小さなブログポストでした。

ダウンロードは小さい文字ですが「Download」からできます。HTML の「文字付き」と「文字なし」ロゴの両方が入っています。

出典元：http://espreson.net/#/131-blog/?link=300-html5-logo-psd/

3DのHTML５のロゴ
PSD形式の画像を探す途中で面白い HTML5 の 3Dロゴを見つけました。
PNG形式ですが、大きいサイズなので Fireworks などで編集すれば便利です。

ファイルはウェブサイト右上の「Download Image」からダウンロードできます。

出典元：http://lemarquis.deviantart.com/#/d3r77w5

まとめ
HTML5のロゴで何か印刷物を作りたいとか、自分でロゴを加工して利用したいと思う人には便利だと思いますので利用してみてください。

高品質フリーの画像集のサイト16選

2011-08-11T10:10:00.002+09:00

ウェブサイトやプレゼンで利用する画像を探していて見つからない時ないですか？こんな時に便利なウェブサイトを集めていた記事を海外でみつけたので紹介しますね。中には登録しないと無料イメージもダウンロード出来ないサイトもありますが、基本的に全部無料です。

Freedigitalphotos.net

Freeimages.co.uk

Freerange

Free Stock Photos.biz

まとめ
高品質画像を探すと大抵の場合は有料が多いのですが、これなら大丈夫です。
無料画像がたまにトリッキーな場所に隠れている場合があるのが、たまに傷です。

出典元
http://blog.jibeo.fr/webdesign/16-sites-de-photos-gratuites-et-libres-de-droits-163

iPhone で「position:fixed」をスムーズに実現する「Scrollability」

2011-08-05T16:33:00.000+09:00

スマホサイト制作でナビゲーションを画面最下部に固定したいと思ったことはありませんか？

ページの最下部にナビゲーションを設置

しかし、残念ながらiOS4.Xは position:fixed; は指定できません。そこで紹介したいのが「Scrollability」です。「Scrollability」は JavaScript で要素が画面最下部へ固定できます。

作製はFirebug のオリジナルの開発者でもある Joe Hewitt氏（Facebook）です、否が応にも期待したくなります。

この「Scrollability」は、縦方向へのナビゲーションの固定のみだけではなく、水平方向へのナビゲーションの固定ができます。

デモ動画

http://www.youtube.com/watch?v=JPS4eLMGVOE

実装方法

ダウンロードURL

1、「Scrollability」のウェブサイトを開きます。

２、「Download」をクリックしてファイルをダウンロード

３、「tar.gz」か「.zip」のどちらかを選んでファイルをダウンロードする。

４、ダウンロードしたファイル

５，解凍したファイルの中身

６、「Scrollability.js」を読み込みさせます。

７、「Scrollability.js」の記述

<head>

</head>

８、公式サイトには２つのデモが掲載されています。下記のグリーンの画面のデモは水平方向へスクロールすることができます。

ホリゾンタル

テーブルビュー

今後の機能追加予定

「Scrollability」のウェブサイトでは、今後の開発予定の機能の説明があります。

テーブルのヘッダーの固定
写真ズーム

が予定されています。

まとめ
iScroll も同様に position:fixed を適用することができます。しかし、筆者の環境では「Scrollability」のほうがスムーズに動作しました。

イギリスで遂に Chrome がシェア２位のブラウザーに！

2011-08-01T22:40:00.000+09:00

本日、ブラウザーのシェア調査を行っている会社StatCounter によると遂に
イギリス市場では、Google Chrome が Firefox のシェアを超えました。
Firefox が22%に対して Chromeは22.1%と僅かですが上回ったのです。

元リンク

これは大きな意味を示します。Firefox と Microsoft の IEのシェアは下がり調子なのに対しては、Chromeは上り調子です。このまま、Chromeは更に市場のシェアを伸ばし、１位になるのも時間の問題です。

世界でも同様の流れになっている。

8月の世界全体のブラウザのシェアをみてみましょう。まず１位は、マイクロソフトのIEで42.45%、次に2位はFirefox で27.95%です。3位はChromeで22.14%となります。
FirefoxとIEの失ったシェアを、そのままChromeが手に入れているような形です。なので、余計にFirefox と IEの落ち込みとChromeの伸びが顕著にあらわれています。
イギリスと同じで Chromeのみが上り調子です。おそらく、このままのペースですと5〜6ヶ月以内に世界全体でもChromeが世界２位のブラウザになります。来年の今頃には完全にシェア１位になる可能がでてきました。

果たして日本は・・・
日本の市場でも、やはりIEとFirefox はシェアを失い始めています。Chromeは他の市場と同じ様にシェアを順調に伸ばしてきています。一方、IEは55%を下回ってしまいました。このままだと日本市場でも50%を切るでしょう。
日本でIEをChromeが上回るには１年以上はかかるかもしれませんが、流れはかわりません。このままだと世界市場を追従する形になります。

まとめ
Chromeの成長は世界市場のいたるところでも起こっています。このままだとGoogle Chromeが世界一になるのは間違いないでしょう。
また、Firefox の Google ツールバーの提供が終わったことがどのように影響を与えるかも注視しなければなりません。
ただ、いずれにしてもHTML5を推進するChromeのシェアの広がりは、HTML5の利用できる環境が整ってきていることになります。つまりHTML5の技術を習得することが、Web開発者には間違いなく必要になるということです。

レスポンシブ Web デザインのテストツール「Responsive Design Testing」

2011-07-31T16:54:00.001+09:00

レスポンシブWebデザインの為のツール
Responsive Web Design でウェブサイトを作製するときに、複数の画面サイズを一覧で確認できなくて困った事はありませんか？
そんな時に、「Resposive Design Testing」は最適なツールです。

このツールは、スクリーンキャプチャーのURLボックスに、確認したいファイルのパスを入力すれば、横幅240px、320px、480px、768px、1024px のそれぞれのデザインを確認することができます。

ウィンドウサイズを自分で変更する必要がないのは時間を短縮することができます。
また、この「Responsive Design Testing 」はダウンロードしてローカルで利用することもできます。

まとめ
「Responsive Design Testing」のようなツールが最近では、見られるようになりました。やはり、レスぽんシブ Web デザインが主流になりつつある理由なのかもしれません。

CSS3の凄いデモ animation & キネクト

2011-07-29T23:12:00.002+09:00

MSのキネクトで読み取った情報を、node,jsで吐き出してCSS3で再現するというデモを発見！
何を言ってるのか分からない人も多いと思いますので、まずはこのデモをみてください。

説明
右のスクリーンショットの人の形はマイクロソフトのキネクトを利用して人の関節のデータを読みこんでいます。そして、そのデータをnode.js と呼ばれるサーバーサイドスクリプティングでCSS3へ値として吐き出しています。（おそらく）

node.js は日本でも非常に注目を浴びてきているサーバーサイドスクリプティングです。今年の秋口には大きなイベントが開催される予定です。

また、CSS3のアニメーションは animatable で生成されています。

最大60%も高速化する「Google Page Speed Service」が登場

2011-07-29T14:52:00.000+09:00

Google は 7月28日（米国時間）に「Page Speed Service」を発表しました。このサービスはGoogleがあなたのウェブサイトを高速化して配信してくれるというものです。このサービスを利用すると、CSSやJSの最適化などについて面倒な作業をすることは必要なくなります。

最大60%のスピードアップも
このサービスを利用すると、Google は最大60%以上高速化されることを謳っています。
下記のようなサンプルギャラリーが用意されているので、実際にどのくらい高速化されているのかを確認してみよう。

allWebクリエイター塾のウェブサイトでもテストをしてみたが、30%のスピードアップをする事が出来ました。すばらしい。

テスト結果URL
http://www.webpagetest.org/result/110729_S0_a1ffb73ab49b168d9c4aeac8cd3e4ef1/

テスト結果の拡大

利用方法
現在このサービスは正式には提供されていません。申し込みをするには下記のページから「googleアカウント名」「適用するウェブサイト」「トラフィック」を選択する必要があります。

まとめ
モバイルが今後普及する際には、パフォーマンスが大切になってきます。その際に自分で高速化の作業をするより、Google Page Speed Service（有料で提供の予定）の方がコストも低いかもしれません。このサービスがデフォルトになる可能性は非常に高いでしょう。

スマホのUIを参考にできるウェブサイト

2011-07-13T10:20:00.000+09:00

スマホのデザインを考えるとき、UIの参考になるウェブサイトがあると非常に便利です。そんなサイトを２つ紹介します。

１つは「Moible UI Pattern」もう一つは「lovely ui」です。どちらも、様々なウェブサイトのUIパターンだけを紹介しています。

Moible UI Pattern
Mobile UI Patter は、いろんなスマホサイトのUIデザインがカテゴリーごとに比較されています。例えば、サインアップのフローなどもスクリーンショットで公開されています。

lovely ui
lovely ui は Mobile UI Patter に比べると整理されてはいないのですが、タグごとに自分の好きなカテゴリでスマホサイトのUIをみることができます。

自分のデザインしたい部分を注目して世界のスマホサイトと比較すると色んなことが学べるでしょう。見ているだけでも楽しいですけどね。

スマホでも使える！パフォーマンスアップの為のCSS記述方法

2011-07-12T19:56:00.002+09:00

「CSS Lint」は、CSS記述方法によるパフォーマンスをチェックできるツールです。開発したのは、Yahoo!、 Facebook でパフォーマンスチームだった Nicole Sullivan（ニコール・サリバン）です。Web Directions East 2009 で来日したこともあります。

モバイル端末の普及によって、回線速度が十分でない3GでもWebを快適に利用する為には様々な対策を講じる必要になってきました。テキスト量の制限からCSS, HTML, JS の最適化も重要な対策事項です。

このツールは、CSSの記述方法についてのパフォーマンスの側面から検証ができます。

チェックボックスで検証したい項目を自由に選択できますので自分で意図して検証にひっかかるCSSの記述を利用している項目があれば、予めチェックを外しておくことをオススメします。

下記にCSS LINT のドキュメントを翻訳しました。パフォーマンスの為のCSSの記述方法

下記にCSS LINT のドキュメントを翻訳しました。パフォーマンスの為のCSSの記述方法
Parsing errors should be fixed - パースエラーを修正しよう

CSS Lint はデフォルトでパースエラーを表示します。パースエラーは通常はミスタイプによるブラウザがCSSの適用をしなかったプロパティやルールを意味します。パースエラーは、CSS Lint によってエラーとして表示されます。修正するべき最も大切な事項です。

Don't use adjoining classes - 隣接クラスを使わないようにしよう。

.foo.bar のような隣接クラスはCSSで利用は可能です。これらは、IE6以下では利用ですることができません。

ID: adjoining-classes

Remove empty rules - 空ルールを削除しよう。

ルールを含まないプロパティ、たとえば：
.foo {}

CSSソースの整理をしない結果として、空のルールが何度も表示されるのを見かける。空ルールを抹消して、ファイルサイズを小さくしてブラウザが処理するスタイル情報を削除しよう。

ID: empty-rules

Use correct properties for a display - Display プロパティには正しいものを

たとえ CSSルールがグループできることが出来たとしても、display プロパティで無視される指定があるでしょう。このような手法は、CSSファイルに余計なゴミデーターになります。CSS Lint は下記のプロパティのリストをチェックします。

display: inline は width, height, margin (他の派生も), padding (ほかの派生も), もしくは floatを利用するべきではない。
display: inline-blockはfloatを利用してはならない。
display: blockはvertical-alignを利用してはならない。
display: table-* は margin (他の派生も) もしくは float 利用してならない。

無視されている、もしくは問題となるプロパティは削除してファイルサイズを削減しよう。そしてパフォーマンスをアップさせよう。

ID: display-property-grouping

Don't use too many floats - float を沢山利用しない

floatプロパティは使わなければならないとしても良い考えとはいえない。CSS Lintは floatを10回以上利用されているかをチェックして、もし利用されていれば警告を表示します。floatを沢山利用するというのは、レイアウトに対して何らかの引き算的アプローチが必要。

ID: floats

Don't use too many web fonts - Webフォントをたくさん利用しない。

Webフォントは @font-face を利用して人気があります。しかしながら、ウェブフォンとの利用は　幾つかのブラウザはフォントのダウンロード中はレンダリングをストップしてしまいます。この理由から、CSS Lintは5つ以上のウェブフォントが１つのスタイルシートで利用されていると警告を表示します。

ID: font-faces

Don't use too may font-size declarations - `font-size`の指定はしすぎないようにしよう。

典型的なウェブサイトはfont-sizeの指定も含めて限定的でしょう。もし、１０以上の font-size の指定があるようであれば、マークアップの中でフォントサイズのクラスのテンプレートを再設定できるでしょう。

ID: font-sizes

Don't use IDs in selectors - セレクタにIDは使わないようにしましょう。

IDはセレクタで使うべきではありません、なぜならこれらのルールはHTMLと完全に紐付けされています。再利用する可能性がありません。ページでclassをセレクタに利用することの方が好ましいのです。

ID: ids

Don't qualify headings - 見出しは修飾しすぎないようにしよう。

h1-h6の見出し要素はスタイルシートの最初で設定されるべきでしょう。ページの途中で特定の部分で指定されるべきではありません。例えば、これは必要以上に修飾された見出し要素の例です。

.foo h1 {
    font-size: 110%;
}

見出しは、ウェブサイトを通して同じようなサイズやデザインであるべきです。

ID: qualified-headings

Heading styles should only be defined once - 見出しのスタイルシートは一度だけ指定されるべきです。

Heading elements (h1-h6) should have exactly one rule on a site. CSS Lint warns if it finds more than one.

ID: unique-headings

Zero values don't need units - ゼロの値は単位は省きましょう。

簡単にバイト数を減らす方法として、CSSでは0には単位を省くようにしましょう。簡単にいうと、0pxと0は完全に同じです、なので単位は省くようにしましょう。

ID: zero-units

Vendor prefixed properties should also have the standard - ベンダープリフィックスプロパティはウェブ標準のバージョンも記述しましょう。

-moz-border-radiusのように、ベンダープリフィックス付きのプロパティを利用する時は、ウェブ標準での指定を忘れないようにしましょう。ウェブ標準での記述は、ベンダープリフィックス付きのプロパティの後に来るのが好ましいです。

.foo {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

ID: vendor-prefix

CSS gradients require all browser prefixes - CSSのグラデーションの記述は全てのブラウザでベンダープリフィックスが必要です。

現在、標準でCSS gradient の採用はありません。つまり、CSS gradients をクロスブラウザで利用するには、ベンダープリフィクス付きのバージョンが多種必要になります。CSS Lintでは、グラデーションをサポートしている全てのブラウザへグラデーションが一様に指定されていない場合に警告をします。

ID: gradients

Avoid selectors that look like regular expressions - 正規表現を利用したセレクターを避けよう。

CSS3 複雑な属性セレクターを追加していますが、~=は遅くなります。属性セレクターを利用するときは、複雑な正規表現を利用したセレクタの利用をさけて、パフォーマンスの負担を減らしましょう。

ID: regex-selectors

Beware of broken box models - 壊れたボックスモデルには注意しよう。

ボーダーとパディングは要素のコンテントの外にスペースを追加します。width と height の指定をpaddingとborderと一緒におこなうことは通常は間違いです。なぜなら、貴方が望んでいるような結果にはなりません。CSS Lint は width か height が padding もしくはborderを一緒に利用されている場合に警告をだします。

ID: box-model

Don't use @import - @import ルールはさけよう

@import ルールは、幾つかのブラウザで並行ダウンロードを邪魔します。
(see: Don't use @import)

ID: import

Don't use !important - !import はさけよう

!important は個別性の仕組みによって導かれた結果をどんな場合でも書き換えてしまいます。CSS Lint は !import を利用された場合、警告を表示します。もし、最低でも10個以上の !import ルールがある場合はエラーを表示します。

ID: important

まとめ

CSS Lintは非常によく出来たツールですが、できれば上記のルールをよんで普段からCSSの書き方には気をつけたいですね。

A Book Apart 「Responsive Web Design」を買ってみた。書評

2011-07-03T10:02:00.005+09:00

A List Apart が運営する「A Book Apart」では、「Responsive Web Design」Ethan Marcotte 著の「レスポンシブ・ウェブデザイン」の書籍を購入することができます。発売日に購入して通勤時間などに読書してみた感想を掲載しておきます。

まず、この書籍ですが「Responsive Web Design」で既にウェブサイトが構築出来る人も、出来ない人も勉強することができます。まず、ベーシックな「Fluid Image」の説明もあり、また上級者向けには「Media Query」を利用した Float 解除（単純なfloat:noneではないので注意）の方法などの細かいテクニックまで説明されており素晴しい内容です。

レベルとしては、総じてCSS2.1レベルを理解できている人なら読み進めても大丈夫な内容でした。興味のある方は購入してみてはいかがでしょうか？オススメします。

購入ですが PDFバージョン、ePubバージョン、従来の書籍の形で購入が可能です。

jQuery Mobileのよく使うスニペット3種

2011-06-14T23:55:00.000+09:00

先日行われたSwapSkillsFreeEvent(3)「Dreamweaver CS5.5で作るjQuery Mobileを組み込んだスマートフォンサイト制作」で講演した際に要望の多かったスニペットを＋αして公開します。

1. 日本語化

英語メッセージの箇所をすべて日本語に変更しています。

日本語は各自お好みで編集してください。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
// 初期設定
$(document).bind('mobileinit', function(){

// 日本語化
$.mobile.loadingMessage = '読み込み中';
$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
$.mobile.selectmenu.prototype.options.closeText= '閉じる';
$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
$.mobile.page.prototype.options.backBtnText = '戻る';
});
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

2. テキストの省略無効

すべての要素のテキストの省略をしないようにします。

除外するものがあればコメントから判断して削除してください。

.ui-header .ui-title, /* header */
.ui-footer .ui-title, /* footer */
.ui-btn-inner, /* button */
.ui-li-heading, /* listview heading */
.ui-li .ui-btn-text a.ui-link-inherit, /* listview link */
.ui-li-desc /* listview description */
{
overflow: visible;
white-space: normal;
}

3. ホームボタンの自動追加

最初のページ以外の全ページにホームボタンを追加します。

ホームへのPage IDは各自の環境に合わせて編集してください。

$(document).ready( function(){

//最初のページ以外の全ページにホームボタンを追加
$(':jqmData(role=page)').live("pagebeforecreate", function(evt){
$(this).find(':jqmData(role=header)').append(
$('<a href="#main" data-transition="slideup" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>')
);
});
});

[PR]

jQuery Mobileについては、SwapSkills doubbble vol.01「モバイルサイト制作に見る、次世代ウェブのカタチ「One Web」」でもお話します。興味のある方は是非お越しください。

また、allWebクリエイター塾では「jQuery Mobile徹底習得講座」を開催しています。こちらも合わせてご検討ください。

DW CS5.5＋jQuery Mobileを使いこなすための心得10項目

2011-06-14T23:38:00.004+09:00

Dreamweaver CS5.5とjQueryMobileを使えばスマートフォンサイトは簡単に作成できますが、やはり使いこなすためには、CS5.5だけでは不足な部分や注意点を知っていなければなりません。
ここであげた点について自信を持って大丈夫と言える人はDW CS5.5＋jQuery Mobileマスターといえるのではないでしょうか。

1. jQuery Mobileの要素を簡単に作成することはできますが、オプションは基本的な項目のみです。また、いったん出力した要素のオプションは変更できません。
→手動で属性を追加したり変更したりする必要がでてきます。

2. コードの自動補完は属性名の候補などは出ますが、そもそもどの要素にどの属性を付けられるかなどには対応していません。
→属性の内容や効果については知っておく必要があります。属性名がうろ覚えでも指定できたり、タイプミスを防ぐものになります。

3. 親要素と子要素の組み合わせで、複雑なjQuery Mobleの要素を構成するものに対応していません。
→例えば、<select>要素にある属性を指定すると、<option>要素にこの属性を指定できるなどの組み合わせを考える必要があります。

4. 最新のビルドに対応していなければ、いくつかの機能で不具合がでる可能性があります。
→jQuery Mobileは当面の間、頻繁にアップデートされると予想されます。バグフィクスのためにも使用するライブラリを更新する必要がありますが、実際DW5.5でビルトインされているバージョンはalpha3となっています。(現在のリリースはalpha4.1)

5. CSS3のマルチスクリーン（メディアクエリ）の機能は、Androidなど一部で非対応端末があります。
→jQuery Mobileの対応した疑似マルチスクリーン（メディアクエリ）機能があるのでそちらに手動でのせ替える必要があります。

6. jQuery Mobile用のスニペットは用意されていないので、自分でノウハウを溜める必要があります。
→日本語化、テーマのカスタマイズ、アイコンなどなど

7. jQuery Mobileのデザインのカスタマイズに対応していないため、jQuery Mobileの作法にのっとった記述が必要です。
→jQuery Mobileの要素の装飾の仕方やクラス名の使い方、内容を知る必要があります。

8. 単一ページで作成したとき、複数ページに分ける場合の作法などがあります。
→例えば、複数ページにしたときに<script>要素、<style>要素などは<div data-role="page">の中に配置しないと読み込まれないなど。

9. デザインビューのもっさり感が気になる人は、スクラッチで作成しながら確認していくのはある程度の目処で行う。
→最初にDW5.5でモックを作成(テンプレートを利用)し、カスタマイズを手動で行い、最後にDW5.5で確認を行うのが良いと思います。

10. jQuery Mobileは自動でモバイル向けのサイトを構築しますが、ボタンの大きさに見られるように一定の規約やデザイン指向に準拠しています。
→スマートフォン制作のためのハウツーを知らなければ、より良いカスタマイズはできません。（アップルの規約ではボタンの大きさは最低44px必要など）

以上です。（文字だけですみません…）

逆にDW CS5.5がこれらの手の届かないところに対応していけば、もっと素晴らしいツールになることは間違いありません。筆者も今後のバージョンアップに期待しています！

[PR] 2011年7月9日（土）に、jQuery Mobile徹底習得講座を予定しています。詳細は，jQuery Mobile徹底習得講座詳細ページまで。

もう無視はできない。モバイルファーストを採用するビッグネームが現れた。

2011-06-03T11:55:00.006+09:00

「モバイルファースト」というのは、モバイル向けのプロダクト設計やサービス設計を最初に行い、その後にデスクトップ向けの開発を行う手法です。

この手法を取り入れるビッグネームがまたもでてきました。このブログで以前にも紹介しましたが、「Google」「Facebook」「Adobe」はモバイルファーストを既に採用している企業です。
採用の背景には「モバイルマーケットの成長」という１つの理由。「モバイルのイノベーションの利用」「コンテンツの集約」の２つメリットがあります。

新たにモバイルファーストを採用した企業

新たに「モバイルファースト」を採用した企業を紹介しましょう、「Apple」と「Microsoft」です。

Apple

Apple については以前より、モバイルファーストを実行している企業だと考えていました。その理由は２つあります。
１つは「iPad」で得たテクノロジーを Mac Book Air に転化したことです。フラッシュストレージのおかげでiPadは高速でスリープ状態から起動することができます。「モバイルファースト」の１つの特徴である「モバイルイノベーションの利用」にあたります。

Mac Book Air のページのスクリーンショット

２つ目はApple の新OS 「Lion」です。「Lion」にはiPhoneやiPadの開発で得た UI（ユーザーインターフェイス）などがふんだんに盛り込まれています。

例えば下記の「Launchpad」の画像はどうでしょうか？
iPadとiPhone の画面にそっくりですね。 iPadやiPhone から得たUIを「Lion」のデスクトップへ取り入れています。

つまりiPhoneやiPadの開発で得た優れたUIをデスクトップに与えてUIを向上させているのです。これも「モバイルファースト」のメリットである　「モバイルイノベーション」の利用にあたります。

新型OS 「Lion」の「Launchpad」

iPad の「Launchpad」

Microsoft

Microsoft が「Windows8」の画面を公開しました。大きな特徴として「Windows Phone 7」のような UIをもっていることにすぐに気づきます。ビデオを見てみるとWindows8 は明らかに　Windows Phone 7 の「Metro UI（メトロ）」とタッチテクノロジーをデスクトップに採用しています。Apple と同じように、モバイルからUIをデスクトップに採用しているのです。繰り返しになりますが、これも「モバイルイノベーション」の利用の一つです。

You Tub にアップされた Windows8 のビデオ（5分）

まとめ

今回、Apple と Microsoft のモバイルのUIは非常に使いやすいということに気づき、それをデスクトップへと採用しています。モバイルのユーザーのコンテキストは非常に多様であり、その環境で生まれたUIはデスクトップでは十分すぎるUIなのです。

「Google」、「Facebook」、「Adobe」は以前より「モバイルファースト」の採用を表明しています。しかし密かに2010年に「Apple」も「Microsoft」も「モバイルファースト」を採用していたといえそうな気がします。今後「モバイルファースト」は重要なコンセプトになります。

今回の記事で「モバイルファースト」に興味がでた方は、allWebクリエイター塾が開催する「SwapSkills Doubbble Vol1」に参加してみてはどうでしょうか？モバイルファーストに対する考え方、それを取り巻く技術をとインスピレーションと新しい技術を学ぶことができます。

A Book Apart 「Responsive Web Design 」を買う。

2011-05-30T23:01:00.005+09:00

アメリカの有名Tech ブログ「A List Apart」では、昨年末から「A Book Apart」ということで書籍の販売を始めました。CSS3, HTML5などの素晴しい書籍が発売されてきましたが、6月6日に遂に「Responsive Web Design」の書籍が発売されます。「Responsive Web Design 」に興味のある方は是非購入しましょう。

From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.

ネットブックとタブレットのモバイルブラウザーからデバイスとブラウザの数はラインナップを増やしてユーザーはあなたのウェブサイトへ攻め込むように訪れます。あなたのデザインは準備はできてますか？デスクトップより先にある、クラフトマンシップにあふれ、ユーザーのニーズに答えるウェブサイトの作り方を学びましょう。イーサン・マルコッテがCSSのテクニックとデザインの原則を「fluid
grid」「flexible image」「メディア・クエリ」を含めて深く説明します。ユーザーにどんな大きさ（小ささ）のディスプレイサイズでも高いクオリティーのユーザーエクスペリエンスを与える方法をおみせします。

著者は、「Unstoppable Robot Ninja」の Ethan Marcotte （イーサン・マルコッテ）です。A List Apart で「Responsive Web Design」について記事を執筆した方でもあります。Responsive Web Design にご興味のある方は是非とも一読を！

Firefox4がリリースされたばかりですが、Firefox7.01a が既にリリース！？

2011-05-30T15:11:00.001+09:00

FIrefox4.0 がリリースされて間もないのですが、なんと開発バージョンではすでに Firefox7.01a がリリースされています。ということで、試しにダウンロードしてインストールしてみました。Firefox7.01 aですが、今年中にリリースされることはないと思います。予定では今年は Firefox6までがリリースされて終わりになります。ご興味のある方は、Week Enginerring（ウィーク・エンジニアリング）になったFirefoxのリリース予定表を参考にしてみてください。

CSS3

まずはCSS3の対応状況です。殆どサポートされていますが、CSS3DとCSS Reflections はサポートされていません。個人的にはCSS3 3D Transform への対応が少しでも進んでるのかなと思っていたのですが。結果は下記の通りになりました。今後のCSS3 3D Transform のサポートを期待しています。

HTML5

HTML5ですが、こちらも現行のFirefox4からは開発されていないようでした。これからの、更新に期待ですね。

Firefox 7.01a を利用してみたい！

Firefox7ですが専用ページからもダウンロードできますが、こちらであればNightlyの中でも複数のバージョンを試す事ができます。やはり Firefox5 あたりをチェックしてみるのが現実的かもしれないです。

今週発表されたばかりのツールも紹介。CSS3のアニメーションツール 5選

2011-05-26T11:43:00.006+09:00

CSS3 vs Flash なんてことが叫ばれたのが久しいですが、最近ではCSS3のアニメーションが作れるツールも多く存在するようになってきました。今回はここ最近リリースされたばかりのツールも含め、CSS3のアニメーションが作れるツールを紹介いたします。

Sencha Animator

Sencha の CSS3アニメーション作成ツールです。この手のアプリとしては最も早くリリースされました。

Sencha Animator - 1.0 Beta 1 Highlights from Sencha on Vimeo.

Hype

Hype 最近、Mac App Store に登場しました。

有料（30ドル）

CSS3.0 Maker

CSS3.0Maker はCSSアニメーションだけでなくて、他のCSS3のプロパティ（box-shadow. text-shadou）が適用できる。

Animatable

AnimatableはSencha touch に似ていてタイムライン上でアニメーションを作成することが可能。デモが公開されていますが、販売はまだです。

A first look at Animatable from Andy Clarke on Vimeo.

Radi

このアプリケーションは超本格的で今回紹介するツールのなかでは最も高機能になります。canvas, css3,video と別々にコードを吐き出すことができる Mac 用のアプリケーションです。作業マシンのスペックが要求されます。

まとめ

CSS3のアニメーション作成ツールですが、おもったより沢山のツールがありました。有料より現在は無料版が多いです。ただし、今後Hypeのように有料版がCSS3アニメーションの需要とともに増えると思います。
また、現在のところの本命は、Sencha Animator, Hype, Animatable でしょう。どれも使いやすいUIをもっています。また、Radiですが機能では最も多く実装されており最強のツールですが、使い方が非常に難しいのが玉にキズです。

CSSを1行にしてみた、速くなるのか？

2011-05-26T00:32:00.002+09:00

スマートフォンサイトの制作では、パフォーマンスが非常に重要です。「mediaqueri.es」などをみていると、パフォーマンスを改善する為に幾つかHTMLとCSSが１行で書かれているサイトに遭遇します。そこでパフォーマンスが向上するか検証してみたく、実際に「SwapSkills」のCSSをツールを利用して圧縮しました。結果ですが、下記のようになりました。ツールは、「codebeautifier」を利用しました。

結果のスクリーンショット

結果
ファイルサイズは19.924KBから10.657KBに「-53.5%」でした。

体感

自分の体感としては、たしかに速くなりました。納得の出来るレベルです。SwapSkills のサイトは画像が重くて鈍い時があったのですが改善されました。

問題

メンテナンス性之欠如：
下記のスクリーンショットをみていただくと分かるのですが、更新を頑張ろうとは思いません。
コードのミス：
コードを最適化する際に、CSS3のアニメーションが何処かへいってしまいました。これは修正が必要です。また、ボタンの色も何処かへいってしまいました。これも修正が必要です。

ソースのスクリーンショット

まとめ

１行で記述すると、たしかにウェブサイトのパフォーマンスはよくなります。ただし、ツールを利用した場合などは、最適化後にブラウザで挙動などをチェックして最適化によって表示などが崩れていないかチェックが必要です。また、最適化後のメンテナンスのワークフローも考えないといけません。

今回は簡単なテストでしたが、次回はもうちょっとパフォーマンスの測定やData URIなどを検証することと、モバイル向けの高速化ができるか挑戦してみます。

Responsive Web Design を利用している企業サイトリスト

2011-05-23T15:47:00.003+09:00

allWebクリエイター塾ブログでは、Responsive Web Design（レスポンシブ・ウェブデザイン） をよく取り上げています。では、実際に一般のウェブサイトや個人以外のウェブサイトで Responsive Web Design を利用しているサイトはどのくらいあるでしょう？ということで探してみました。特に一般の企業を中心に集めてみましたので、レスポンシブ・ウェブデザインが一般企業でどこが利用しているのか興味がある方は、是非とも参考にしてみてください。

新聞編

About.com

なんと、New York Time の一部である、「About.com」ですが、レスポンシブウェブデザインです。日本の各新聞にもそのビジネスモデルまで影響をあたえる「New York Times」までもが　Responsive Web Design（レスポンシブ・ウェブデザイン）とは驚きですね。海外ではレスポンシブ・ウェブデザインがどんどん普及しているのが分かります。

Cicago Tribune

米国シカゴの新聞、「Cicago Tribune」の選挙ページです。どこでも。選挙情報がチェックできるようにモバイルで作られたのかもしれません。

公共団体編

City of Birmingham Choir

イギリスのバーミンガムのウェブサイトです。公共機関でも予算などを考えると Responsive Web Design（レスポンシブ・ウェブデザイン）なのでしょうか？

Walk Indianapolis

米国のインディアナポリス市の観光ガイドです。モバイル端末で市内を歩くことを目的にしているらしくあらゆるデバイスに対応しています。

WWF Earth Hour

WWF（世界野生動物保護基金）のキャンペーンウェブサイトです。WWFのような公的イメージの強いウェブサイトでも、レスポンシブ・ウェブデザインなんですね。

Spartan Robotics

高校生が作成したということで、公共団体のカテゴリに分けました。Google の本社があることで有名な Mountain View の高校のロボット制作クラブのウェブサイトです。高校生ですでにレスポンシブ・ウェブデザインとは末恐ろしいですね。彼らが作るロボットもかなりハイレベルのようです

一般ECサイト編

Leica Exproler

カメラで世界的に有名な企業「Leica」ですが、「Leica」のキャンペーンサイトでも「レスポンシブ・ウェブデザイン」を採用していました。かなり大規模なサイトですが、問題なく利用されているんですね。

Kristalia

Kristalia はイタリアの家具デザインメーカーです。非常に洗練されたデザインのウェブサイトですが、これも Responsive Web Design （レスポンシブ・ウェブデザイン）です。

Holiday Apart

Holiday Apart は　ホテルとかレストランなどの情報を紹介しているサイトです。面白いのはこのページにあったモバイルページについての記事です。

このページは、ダウンロードも何もすることなくモバイルやタブレットでアクセスできます。みたいなことが書いてあります。当たり前のようですが、ウェブサイトをスマートフォンで閲覧するのにダウンロードしなきゃいけないと思っている人もいるってことなのかもしれません。

The Modern Gentleman

ドイツの男性向けファッション雑誌のウェブサイトです。グリッドデザインを基調として、レスポンシブ・ウェブデザインで作成されています。

Cafe Monte Bonito

ドミニカ共和国でコーヒー栽培のビジネスモデルなどを構築し栽培している Cafe Monte Bonitoのウェブサイトです。背景画像がスマートフォン向けのウィンドウサイズになると消えます。

Sleep Street

Sleep Street は欧米でみられる家具付きアパートメントのウェブサイトです。家具自体がおしゃれですが、ウェブサイトもオシャレなウェブサイトですね。

Web関連企業編

My Opera

まずは、ブラウザベンダーの Opera「My Opera」では、Responsive Web Design を採用していました。2011-05-15 にリリースされたようです。

mobilism

mobilism はモバイルの開発者向けの世界的イベントです。ヨーロッパを中心に開催されますがトップクラスの開発者が集うことで有名です。

その他

Cujo.jp

Cujo.jp は作者のニックネームからネーミングされた、作者の仕事以外での写真などをあつめたウェブサイトです。日本在住の米国人の方のウェブサイトです。

まとめ

レスポンシブ・ウェブデザインですが、海外のデザイナーが圧倒的に多いのですが少しづつですが一般企業のウェブサイトに浸透をはじめていきました。後ほどデータを公表しますが、レスポンシブ・ウェブデザインの数は少しづつですが伸びてきています。

これには企業によってはコストが非常に限られていたり、利用しているCMSにスマートフォン対応がなかったり、サーバーサイドの管理会社が別会社になっていたり、と非常に複雑な場合にフロントエンドだけで対応できる「Responsive Web Design（レスポンシブ・ウェブデザイン）」は非常に便利で問題が少ないという背景があるのかもしれません。

ハイパフォーマンスWebサイトの著者が作成した便利ツール

2011-05-19T17:54:00.002+09:00

ウェブのパフォーマンスの勉強のバイブルともいえる書籍「ハイパフォーマンスWebサイト」の著者でもありGoogle のパフォーマンスチームに所属のSteve Souders（スティーブ・サウダース）氏が新たに HTTPをモニター分析するツール「HTTP Archive mobile」を公開しました。

此のツールはモバイルサイトのHTTPを調べて、Flash, 画像のサイズ、画像の利用率、JSのライブラリーの種類などをデータにしています。

まだまだ、始めたばかりでデーターは母数が足りないよう（5月19日時点で105サイト）ですが、注目のツールになります。

母数がすくないので、まだモバイルでFlashを利用したウェブサイトにあたっていないようです。なので、下記のように Flash 0%なんてこともあります。

HTML5の利用が多く、エラーが少ないようです。やはり、モバイル向けのウェブサイトは

HTML5が本命なのでしょうか。

このツールで紹介されているデーターは全てダウンロード可能ですので、ダウンロードして比較検討するのも面白いとおもいます。またデスクトップ版もありますので参考にしてみてください。

あなたのスマートフォンサイトのパフォーマンスは大丈夫？

2011-05-19T12:01:00.001+09:00

スマートフォンサイトを作成するときに、気をつけなければならない点が１つ有ります。それは、「パフォーマンス」です。でもパフォーマンスがどうかを調べるツールが欲しいですよね。そんな時に便利なのが、Blazeが提供する「Mobitest」です。

使い方は簡単です、テストしたいURLを「Enter Your Website URL」に入力し、テストしたいOSをiPhone4.3, Android2.2, Android2.3から選んであとはオレンジ色のボタン「Run Performance Test」を押してをおこなうだけです。

Android2.3も選択可能

結果は、その時にテストがどのくらいmobitest に溜まっているかによります。テストを行った際にはテストが溜まっているらしく時間がかかりました。

ちなみにテストを待っている間にネイバーのウェブサイトなどのテスト結果をみてみました。

http://m.naver.com

50%は50%のサイトより早いという意味です。

詳細な読み込み状況が表示されます。

韓国のNAVAR社の m.naver.com のテスト結果は驚異的で殆どの要素を 1msで読み込みしています。トータルで読み込みスピードが4.9秒ではありますが、要素を全て1/1000秒で要素を読み込みしているウェブサイトは見かけることはありません。すばらしいですね。

mobitest はテスト結果が表示されるまでに時間がかかりますが、非常に簡単に自分のモバイル用のウェブサイトをテストすることができます。なるべく早く読み込みができるように改善をしていきましょう。

パフォーマンスについて勉強したい人は、SwapSkills Doubbbleへどうぞ！

コーディングの手間を省くHTML5 & CSS3 フレームワーク

2011-05-18T18:13:00.001+09:00

「Perkins」は HTML5&CSS3のフレームワークです。
「LESSスタイルシート」とmixinを利用してボタン・テーブル・タイポグラフィー・フォームなどのマークアップとスタイルシートがすべて用意されています。

下記の用に様々なすでにデザインされたテンプレートが用意されています。また出来栄えがすばらしい。

コード用のCSSも用意済み

アイコンセットもある

使い方は、githubのダウンロードページからコンポーネントをダウンロードして、あとは指定されたクラス名をHTMLへ、指定された記述をスタイルシートへおこないます。

ダウンロードするのは1.1

CSSソース

footer {
 background: lighten(@gray, 20%);
 height: 100px;
 .bs();
 .ts();
 .tac();
}

例えば、ウェブサイトのfooter 要素のスタイルシートに「.bs」=box-shadow、「.ts」=text-shadow, 「.tac」=text-align-center とそれぞれのスタイルが適用できます。LESS スタイルシートのフレームワークの勉強の必要はありますが、非常に効率的にCSSが適用できるかもしれません。また、このフレームワークを利用しなくてもデザインだけでも参考になります。

これ全部 CSS って思わせるようなクオリティのボタン

2011-05-17T15:55:00.000+09:00

ここまでくると本当にCSSだけで出来るのって感じの品質のボタンの紹介です。このクオリティなら、おもわずボタンを押したくなりますね。また、押し心地？も最高です。しかし、box-shadow の使い方が妙です。

デモを試すときは、Chrome , Safari, Firefox を利用することをオススメします。

デモ
http://monkeydo.biz/demo/CSS3_button/

スマートフォンのボタンサイズ UI

2011-05-16T14:51:00.001+09:00

スマートフォンのデザインをする際の UI のサイズには誰もが最初は悩んでしまいます。そんな時に役に立つのが、Android や iOSのUI のガイドラインです。その中から、ボタンのサイズに関する部分だけを抜き出して集めました。

iOS の場合

ボタンのタッチ部分のサイズは最小で高さと幅は44ptが推奨されているみたいです。ただし、2010年に開催された Apple Tech Talk にてApple のUIデザイナーの Eric Hope 氏は、垂直方向へボタンがかさならないのであれば、例外として高さは 最小で22ptをOKとしていると話しています。事実、iPhone のランドスケープモードでは44px x 44px ではなく、48px x 38pxの高さのボタンも見受けられます。

Windows Phone の場合

WIndows Phone では、ボタンとボタンの間隔も指定されている。まず、推奨のボタンサイズは 9mm x 9mm、そして最低サイズは 7mm x 7mm と定められています。また各ボタンの間隔は、2mm以上と定められています。

Nokiaの場合

Nokiaではより詳しく最低でも1cmの7mmx7mm の場合は1mmの間隔、8mm x 8mm の場合は 2mmの間隔、またリストタイプのような場合には、5mmの間隔をあけることを推奨しています。

またNokiaのUIガイドラインには、ユーザーは押し間違いとして、ターゲットとするボタンよりも上に配置されているボタンを押す傾向があるそうです。つまりユーザーに Yes / No の選択をさせる場合には、上下に並べたりするのは避けたほうがいいと思います。

まとめ

スマートフォンでは、ユーザーが時間や音など様々なストレスにさらされていることが多いです。制作者はそんな時でも使いやすいUIを提供しなければなりません。上記に挙げられたサイズを参考にして、使い易いなるべく大きめのUIを配置することをオススメします。コンテンツがギチギチという時は、モバイルファーストのコンセプトに戻り、コンテンツを整理することから始めましょう。

また、出来上がったら最後に本当に押しやすいか自分や他の人にチェックしてもらう事も忘れずに。

出典：

このカンファレンスで講演します！7月2日（土）SwapSkills Doubbble 開催！

SwapSkills Doubbble

CSS3 「rem」って何だ。

2011-05-06T14:17:00.003+09:00

CSS3を勉強する際に大切なことは２つあります。ひとつ目は、”知っているプロパティをいかに上手に使うかということ”、二つ目は、”知らないプロパティをもっと勉強すること”だと言えます。

今回は、後者のあまり知られていないであろう「rem」を紹介いたします。とは言っても「rem」はプロパティではなく単位になります。単位表示でおなじみの「em：エム」に似ていますが「em」の様に親要素の値に影響を受ける事はありません。

rem

フォントサイズの指定を考えてみましょう。

「px」を利用するとフォントサイズを固定することができて制作する際には便利だったりしますが、最近ではスマートフォンなどのモバイルサイト向けに「Responsive Web Design」というデザイン手法で「em」のような相対単位を「Responsive Type Setting」として利用します。

ただし、IE では「em」を利用すると文字サイズを大きくしたり小さくしたり出来なくなるデメリットがあります。そんな時に便利なのが「rem」です。

「rem」の意味は「root」+「em」で、root 要素のフォントサイズを継承することになります。つまり、html要素のフォントサイズを継承するということになります。

下記に「em」と「rem」で記述した場合の実際のフォントサイズをコメントに「px」に表示してみましたので参考にしてみてください。「em」で指定した場合は、liのフォントサイズになると「?」がついている。li要素などの場合、階層が深くなるにつれてフォントサイズはどんどん大きくなってしまったりしています。

比較①：CSS 「em」で設定した場合


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

比較①：CSS 「rem」で設定した場合


html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

比較②：「em」


:root {
  font-size: 1em; /* 16px */
  line-height: 1.5em; /* 24px */ }
 
h1 {
  font-size: 1.5em; /* 24px */
  line-height: 1em; /* 24px */ }
 
h2 {
  font-size: 1.16667em; /* 18.6667px */
  line-height: 1.286em; /* 24px */ }
 
em, strong {
  font-size: 1.16667em; /* dangerous! */
  line-height: 1.286em; }

比較②：「rem」


:root {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */ }

h1 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.5rem; /* 24px */ }

h2 {
  font-size: 1.16667rem; /* 18.6667px */
  line-height: 1.5rem; /* 24px */ }

em, strong {
  font-size: 1.16667rem; /* safe; 18.6667px */
  line-height: 1.5rem; /* 24px */ }

rem をサポートしていないブラウザへの対処方法

下記の表を参考にしてもらうと、Operaのみが未だに「rem」をサポートしていません。この場合、Operaにはフォールバックとして「px」で指定をしてみましょう。


html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

ブラウザサポート

IE	FF	Chrome	Safari	Opera
IE8+	FF3.5+	Chrome1.0+	Safari5.0+	未

参考

CSS vs CSS3 スピードテスト

2011-04-28T10:13:00.002+09:00

１年程前にCSS3を利用するとブラウザに負担をかけてしまい、ウェブサイトの表示パフォーマンスが悪くなる　などということを言われたことがありました。おそらく、ブラウザの進化の過程では、そんな時もあったのかもしれません。でも最近ではCSS3がパフォーマンスが悪くなるというのは間違いのようです。

上記画像はMERCURY AUTOMOBILESというテストページですが、CSSで画像を多用したバージョンと、CSS3で角丸などを利用して画像を極力減らしたバージョンを用意しています。

利用されたCSS3

linear-gradient
border-radius
radial-gradient
text-shadow
box-shadow with RGBa

結果

となりました。

CSS3の方がパフォーマンスで優れているようです。つまりCSS3を利用することはモバイルウェブのようにパフォーマンスがより影響する環境ではより効果が高いことが予測できます。今後は CSS3をもっと勉強するようにしたいですね。

出典：

http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

モバイルのコンテンツとコンテキスト

2011-04-27T17:12:00.002+09:00

ウェブサイトの設計をする時、モバイル端末（スマートフォン、タブレット端末など）からスタートする「モバイルファースト」というコンセプトと手法があると以前に紹介しました。
このコンセプトで難しいのが コンテンツ です。モバイルの場合、コンテンツはコンテキスト（環境）に左右されると言われます。つまりモバイルの場合はデスクトップとは環境が違い、ユーザーは家でデスクトップの前に座ってパソコンを利用しているとは限らず、モバイルを利用するコンテキスト（環境）がユーザーによって違います。そのコンテキストを考えることがモバイルのコンテンツの決定に不可欠ということです。

Contents&Context

では、モバイルのコンテキストとはなんでしょうか？そんな悩みを解決できるかもしれない「コンテンツ」と「コンテキスト」のヒントになる図表などを集めてみました。

Elements Mobile Context

一番最初は、「Peopel-centric mobile computing」という、ユーザーを中心としてモバイルソフトウェアのデザインをするアプローチ。人々のコミュニケーション、ユーザーコンテキスト（場所や時間）、出来事、を考慮する手法と唱える C.Enrique Ortiz（エンリケ・オルティス）からの図の紹介です。

円の大きさが影響力、円の１つ１つがコンテンツを決定する上でのコンテキストになります。

http://weblog.cenriqueortiz.com/mobility/2007/07/22/the-elements-of-the-mobile-context/

彼はこの図表で、コンテキストとして「ロケーション」「時間」「デバイスの機能」「社会性」「状態」を挙げています。
例としてスターバックスで昼の3時に友人と一緒にiPad を利用しているとしましょう。これはスターバックスで椅子に座って３時ぐらいの混み合う時間（非常にストレスがある、周りの雑音は多い）に、友人と一緒に隣同士に座ってiPad でコンテンツを利用することになります。コーヒーを飲んでいるので、片方の手しか空いていないかもしれないという状況です。複雑なコンテンツは利用できない状況のようです。ましてビデオを再生するようなコンテンツは利用できないでしょう。

A Check List for Content Work

次は、A List Apart で著書「Contents Strategy」をだした Erin Kissane の記事から。
彼女は A List Apart の記事の中で「良いコンテンツ」とは何かを説明しています。抽象的な文章ではありますが良いコンテンツの特徴を端的に捉えています。

良いコンテンツはユーザーとビジネスに適切でなければならない。（appropriate）
良いコンテンツは便利でなければならない。（useful）
良いコンテンツはユーザー中心でなければならない。(user-centered)
良いコンテンツは明瞭である。(clear)
良いコンテンツは一貫性がある。(consistent)
良いコンテンツは簡潔である。(concise)
良いコンテンツは十分にサポートされている。(supported)

上記の6では、彼女は省くべきコンテンツとして下記を挙げています。自分のコンテンツを考えてみましょう。

ミッションステートメント、ヴィジョンステートメント
プレスリリース
長い規約文
際限のない機能リスト
繰り返しているコンテンツ
意味の動画コンテンツ

また彼女は記事の中で、Daniel Elzans のスライドから下記のような図を紹介しています。ユーザーが身体、感情、認知、の３つの円に属してコンテンツを決定していることが描かれています。コンテンツはユーザーの身体、感情、認知の状態によって決定されるということを示しています。

http://www.slideshare.net/danieleizans/context-as-a-content-strategy-creating-more-meaningful-web-experiences-through-contextual-filtering

まとめ

紹介した記事は、英語ですが両者ともモバイルのコンテンツはユーザーの環境など（場所、時間、身体、感情、認知）に左右されるということを説明しています。まずは、自分のWebサイトのユーザー像を確認して、どの時間、場所、でどのような環境下で利用しているのかを考えてみるとといいかもしれません。

例ですが、allWebの場合、受講生が道に迷われて当日の朝に電話をしてきます。つまり、ユーザーは野外で時間に追われるというストレスのある環境で電話をしてきていることになります。この場合コンテキストは「野外」「ストレス」ということになります。提供するべきコンテンツは Google Map や何らかの道順を示すものになります。

スマートフォン、モバイルサイト制作に強化された Dreamweaver CS5.5 の紹介:AdobeTV

2011-04-26T10:59:00.003+09:00

Dreamweaver CS5.5 がスマートフォンなどのモバイル端末のサイト制作に便利な jQuery Mobile や　PhoneGap の機能を取り入れている事が話題になっています。AdobeTVにグレッグ・ルイス氏らのエバンジェリストが解説しているのでモバイルサイト制作に役立つ内容に絞ってご紹介いたします。

＊日本語字幕付きで公開されています。再生ツールに[CC]がありますので、クリックすると表示されます。

jQueryを活用したモバイル向けデザインの効率化
このビデオでは、Dreamweaver CS 5.5のjQuery Mobileプロジェクトサポートについてご紹介します。広く普及しているjQuery JavaScriptフレームワークに基づいたjQuery Mobileを活用すると、Webデザイナーおよびデベロッパーはモバイルアプリケーションインターフェイスをすばやく、一貫して構築することができます。

Phone Gap
このビデオでは、PhoneGapフレームワークを使用したネイティブモバイルアプリケーションをビルドするためのDreamweaver CS 5.5サイトの構成方法についてご紹介します。新しい言語やツールを習得しなくてもiOSやAndroid向けにリッチなネイティブアプリケーションを配信することができます。

メディアクエリーを活用したモバイルデバイス／その他のスクリーン向けデザイン
Advanced Media Query Managerを使った異なる画面サイズ用のCSSファイルの作成、割り当て方法について、グレッグ・ルイスがご紹介します。

強化されたjQueryおよびJavascriptコードヒントによる作業の高速化
Dreamweaver CS 5.5で新しくサポートされたjQueryコードヒントの概要についてグレッグ・ルイスが説明します。熟練のWebプロフェッショナルでも、ビギナーでも驚くほど効率的にjQueryベースのプロジェクトをわずかな時間で作成することができます。

Google Chrome 11 の音声入力に挑戦！ Speech input API

2011-04-22T19:34:00.001+09:00

既にご存知の方も多いと思いますが、Google Chrome 11 βは音声入力が搭載されています。chrome11で入力フォームで音声を入力すると、それを認識してくれるという機能です。モバイルでは au の宣伝などで音声入力を見たことがある人はいると思います。元々は、アメリカで車の運転の際の安全確保の為にハンズフリー環境で生まれた技術だと思います。

今回、講座の資料づくりの、ついでに挑戦してみました。

Google Chrome 11β

最初の一回目は、「あれっ」と入力したのですが、「ちわっす」と表示されました。気を取り直して挑戦してみると、二回目は「あたま」が「頭」と正しく表示されました。三回目は「素晴しい」と表示されました。精度は素晴しいものがあると思います。

デモスライド（HTML5Rocks）

allWebのスマートフォン講座の教材として用意した動画ですが、非常にワクワクするデモでした。

Firefox も CSSアニメーションをサポート

2011-04-22T13:05:00.000+09:00

CSS3 のアニメーションですが、現在のところサポートしているのは Webkit系のみでした。しかし、Firefox も CSS3 アニメーションをサポートすることが分かりました。

Firefox の David Baron が自身のブログの中で紹介をしています。

David Baron Blog

動画は下記で紹介しています。

You Tube 【CSS Animations Demo】

デモは、 Aurora Build をダウンロードすると確認することができます。

Firefox 5 では実装されずFirefox6で実装と彼のブログにはあるが是非とも実装してもらいたい機能の１つですね。それにしても、仕様書が何をいってるのか分からない　という理由がありましたが、少し僕もそれで安心しました。僕も仕様書が何を言ってるのか分からない時があります。

よかったらシェアしてくださいね。

jQuery Mobile って何だ？

2011-04-21T19:47:00.000+09:00

jQuery Mobile は iOS や Android、Windows Phone7, BlackBerry などOSやブラウザに関係なくWebサイトを「アプリ」のように制作出来るフレームワークです。 jQuery の名前の通り jQuery Mobileは jQueryのコアを利用します。

今回は jQuery Mobile の事を少し考えてみたいとおもいます。

モバイルのアプリには2種類ある
まずスマートフォンには２種類の「アプリ」が存在します。

「ネイティブアプリ」
「ウェブアプリ」

この２種類のアプリをiPhone の場合で比較してみよう。

「ネイティブアプリ」
OSに依存し言語は Objective-C でオフラインでもフルに機能が利用できます。ただし、更新を行うのは面倒という特徴があります。当然、Android 版は別に開発する必要があります。

「ウェブアプリ」
ブラウザに依存し言語は HTML5、CSS3、JavaScript を主に利用しウェブサイトの一種です。更新は非常に簡単ですが、オフラインでは利用できない場合が多い（HTML5のオフライン機能を利用可能）という特徴があります。通常 iOS版、Android版と切り分けて作業を行うことはありません。

最近ではブラウザのHTML5やCSS3のサポートの向上によりウェブアプリが非常にふえてきています。

jQuery Mobile ではどっちのアプリが作れるのか？
jQuery Mobile はウェブサイトの延長線上である「ウェブアプリ」が作成ができます。その際、HTML5とCSS3とJavaScriptの利用がかかせません。

jQuery Mobile が流行る理由。
jQuery Mobile はウェブアプリを作成できるのですが、ブラウザに依存する以上モバイルデバイスに搭載されている各々のブラウザ差異に影響されやすくなります。しかし、jQuery Mobile は iOS の Webkitにも Andorid の Webkit でも BlackBerry の Webkit でも、最近発表された、Windows Phone７にも対応できるクロスブラウザフレームワークです。

jQuery Mobile はこんなに利用されている。
jQuery Mobile はアルファ4.01 になってから安定性も格段に向上し、すでに多くのプロジェクトで利用されています。jQuery Mobile ギャラリーは jQuery Mobile で出来たページのみを集めたサイトです。覗いてみると様々なウェブサイトが jQuery Mobile で出来ているのが分かります。

jQuery Mobile ギャラリー

jQuery Mobile は Adobe のDW CS5.5にも

jQuery Mobile は CS5.5 にも実装されて Dream Weaver で利用することができます。人気のあるエディターに jQuery Mobile が採用されたことは、jQuery Mobile が非常に重要なフレームワークであることを意味しているでしょう。

利用はjQuery Mobile をトグルから選択するだけ。DWだと iOS SDK や Android SDKなどをダウンロードしてインストールすることなく利用できるので非常に便利です。

利用方法の詳細は、 Ascii のウェブプロフェッショナルで紹介されていますので参考してみてください。

jQuery Mobile の勉強のススメ

jQuery Mobile はフレームワークとして多種のテーマなどが用意されています。機能が多い分だけ勉強の必要性があるのが jQuery Mobile の難しさです。ただし、覚えてしまった人にとって、これほど心強いフレームワークはありませんので勉強することをオススメします。もし、自分で勉強する時間がない方は allWebクリエイター塾でも「jQuery Mobile徹底習得講座」を開催していますので利用してみてください。

CSSの仕様書が何時更新されたかわかるページ

2011-04-20T12:15:00.001+09:00

CSS3の書籍を執筆していますが、日々仕様書は変更されるばかりです。知らない間に変更されてた、なんてことも毎日。では、どうやって、CSSの仕様書が何時更新されたかわかるのでしょうか？この時、このページが便利です。

W3CのCSSの状況がわかるページ

Index of /csswg：http://dev.w3.org/csswg/

レスポンシブ・ウェブデザインの Media Queries の設定と15px

2011-04-20T11:20:00.001+09:00

レスポンシブ・ウェブデザインで大きなポイントとなるのが、メディアクエリのサイズの設定です。以前に「mediaqueries」に掲載されているウェブサイトのメディアクエリのサイズを調査したことがありましたが、今回はメディアクエリのサイズの設定について詳しく紹介したいと思います。

メディアクエリのサイズ

メディアクエリのサイズですが、

800px –ネットブック、Nexus One、Dell Streak などのサイズ。
600px – タブレット端末、例えば SamuSung ギャラクシー、Blackberry Playbook。iPhone 4 のポートレートのサイズは少し大きい 640pxなので、800pxのスタイルシートが iPhone4 のポートレートでは適用される。
480px – スマートフォンでは一般的なサイズ、3GS以下のiPhone のポートレートモードもこのサイズ。
320px – iPhone 3GS 以下のポートレートのサイズ

CSSソース

下記が参考までにレスポンシブ・ウェブデザインを実現するための記述です。


/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {

}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {

}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {

}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {

}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {

}

上記の記述をみて「あれ！」と思った人は鋭いです！

なぜサイズが20px大きいか？

上記の CSSのソースを見てみると、すべてサイズが20px大きいのに気づくとおもいます。これは Webkit つまり iOS と Android の殆どのモバイル用のブラウザへのバグへの対応です。Webkit は垂直のスクロールバーの横幅のサイズ（約15px）をウィンドウサイズに含めないのです。これは、Webkitのバグで OperaやFirefox ではウィンドウサイズとしてではなく実装されています。（仕様書上は、ウィンドウサイズに含まれる。）その分、15px から 20px を大きめにメディアクエリーのサイズとして指定しているのです。

このスクロールバーの横幅が約15px

まとめ

レスポンシブ・ウェブデザインでは、メディアクエリのサイズ指定が大きなポイントになります。上記に紹介したサイズ以外にも適したサイズがあるかもしれません。例えばスマートTV向けにデザインをすることも今後や必要になるでしょう。そのときは、1600px以上をターゲットにすればいいのです。
今後は、レスポンシブ・ウェブデザインの奥深い部分にも焦点をあてていきたいと思います。

参考記事：
http://www.456bereastreet.com/archive/201101/media_queries_viewport_width_scrollbars_and_webkit_browsers/

IE6-8 にもレスポンシブ・ウェブデザインを適用する「respond.js」

2011-04-16T12:26:00.004+09:00

allWebクリエイター塾のスマートフォン講座では、レスポンシブ・ウェブデザインを徹底的に教え込みます。そのなかで、IE6-8 （IE6はすでに対象外かもしれません）へ Media Queries を適用する JSを紹介しています。それが、「respond.js」です。

Respond.js

「respond.js」は

非常に軽くて(最小化バージョン3kb /gzipバージョン 1kb)使いやすい JavaScript ライブラリです。作成したのは、jQuery UI や thmem roller などを作成した「Scott Jehl」、最近人気が急上昇の開発者です。jQuery Mobile も大きく関わっています。

利用方法
利用方法は簡単で、「respond.js」を<head></head>内の CSSファイルの後に設置するだけです。

<head> 
 <meta charset="utf-8" /> 
 <title>Respond JS Test Page</title> 
 <link href="test.css" rel="stylesheet"/> 
 <link href="test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/> 
 <script src="../respond.src.js"></script> 
</head>

デモ

Media Queries をサポートしているブラウザだと、respond.js がなくても Media Queries を理解してくれるので respond.js が動いているか分かりませんが、IE6-8 でアクセスしてもウィンドウサイズによって背景色が「黄色」から「青色」「赤色」「緑色」に変化するのがわかるでしょう。

非常に便利な JavaScript ライブラリですね。是非とも参考にしてみてくださいね。

Flash の利用率が大幅に減少してきたみたいだ。

2011-04-16T11:19:00.000+09:00

Google のウェブサイトパフォーマンスのスペシャリストに「Steve Sauders（スティーブ・サウダース）」という人がいます。以前は、Yahoo ! にいてウェブサイトのパフォーマンスなどの研究もしていました。有名な人ですので、名前を一度は聞いたことがある人もいると思います。

彼は、最近はモバイルのパフォーマンスに傾倒し、自身のブログ「stevesauders.com」にて、Flash の2010年10月のページに占める容量と、2011年3月のページ占める容量を比較して公開しました。

その結果、チャート上では、3% しか減少していないように見えますが、2010年10月と2011年3月の調査対象の総量の変化などに補正を加えると -16% の減少という結果がでました。

iPhone や iPad など「Flash」を再生できないデバイスの登場やモバイル市場の拡大によるページ容量の縮小などがこのような結果をもたらしたのかもしれません。

画像の利用率が増えた
彼はブログの中で、画像の利用率が増えたことを非常に疑問に思っているようです。パフォーマンスを求めるなかでは画像の割合を減らすはずなのに、何故か画像の利用率が増えている。これは、今後の調査の中で少しづつ解明していくとのことです。

CSS3 のtransform の上手な使い方。ActiveInbox

2011-04-13T23:56:00.000+09:00

たまたま、自分のGmailのGTDを入れてみたいなと plugin を物色していたところ、ActiveInBox なるアプリケーションをみつけました。何気なくウェブサイトの説明をみていたところ所々でCSS3らしい挙動を発見しました。なんとも上手な使い方なので紹介したいと思います。

通常の状態ーChrome11

マウスをのせたところーChrome 11

マウスをホーバーさせると画像が拡大されしかも少しセンターに寄ってきます。ただ画像を拡大するUIは見ることはありますが、センターに寄ってくることによって非常に見やすいUIを実現しているのは非常に素晴らしい。

CSSソース

.shots li:first-child img:hover {

-ms-transform : scale(1.6);

-moz-transform : scale(1.6);

-o-transform : scale(1.6);

-webkit-transform : scale(1.6);

transform : scale(1.6);

-ms-transform-origin : left bottom;

-moz-transform-origin : left bottom;

-o-transform-origin : left bottom;

-webkit-transform-origin : left bottom;

transform-origin : left bottom;

-webkit-transform-origin-x : 0%;

-webkit-transform-origin-y : 100%; }

CSSのソースをみてみると transform-origin プロパティを 50% 50% から変更して　left bottom に設定しているんですね。translate を利用することなく、これだけで移動しているように見せるとは素晴しいテクニックです。

allWebクリエイター塾のCSS3講座で教える時も同じですが、CSS3はいかに「subtle」（巧妙）に使うかがポイントです。派手なデモではなく、いか上手に使うかを考えてみましょう。また、ブログでも素晴しいCSS3の使い方を見つけたら紹介したいと思います。

Responsive Web Design の日本語訳

2011-04-13T14:36:00.000+09:00

allWebクリエイター塾の、リソースページでは日頃のデザインワークによって重要な資料や、Webの歴史の中で重要なブログ記事などを日本語訳にて掲載をしています。多くの記事を翻訳することは労力的にできませんが少しづつアップデートしていきます。

例えば、日本でも最近話題になってきた Responsive Web Design の原本であれば、A List Apart の翻訳記事を用意してあります。

allWebクリエイター塾リソースページ
http://all-web.org/resource/

Madmanimation と CSS3の未来

2011-04-12T18:15:00.003+09:00

海外技術系ブログの「A list Apart」が北米で展開しているカンファレンス「An Event Apart」において、英国のデザイナー Andy Clarkeは「Madmanimation」を公開しました。一切、Flash を利用することなく1分間に渡るアニメーションを作成しています。

Madmanimation のスクリーンショットの一部（chrome 11）

Firefox 4で同様のdemoを閲覧すると、コマ割りが表示される。

Flashのアニメーションを作成する人は、「Madmanimation」を見ても、対して驚かないと考えています。ですが、Flash が世に初めて紹介された当時の作品は、「Madmanimation」と代わらない、もしくはそれよりシンプルな作品が多かった気がします。

Animatable

Animatable は Flash アニメーションを作成するように、CSS3でアニメーションを作れるようにしたツールです。「Madmanimation」も Animatable で作成されています。
Sencha が提供している、Sencha animator がありますが、非常によく似たツールです。

Animatable の紹介動画 - UIなども見ることができます。

今後 CSS3のanimation プロパティの利用テクニックとAnimatableのようなツールは間違いなく Flash に匹敵もしくは、それ以上のレベルまで数年をかけて磨かれて素晴しい作品が沢山でてくるでしょう。これからは、Flasher の人がそのデザインセンスを活かして、 JavaScriptとCSS３を利用してアニメーションをつくる時代がくるのかもしれません。

参考
http://animatable.com/

CSS3のプリフィックスを自動で生成「-prefix-mycss」

2011-04-06T00:13:00.000+09:00

CSS3の利用が日々の作業の中で当たり前になってくると、ベンダープリフィックスを付けるのが非常に億劫になってきてしまいます。そんな時に便利なツールが「-prefix-mycss」です。

このツールは、自動で W3C のプロパティ名に「ベンダープリフィックス」を付けてくれます。

使い方

1、まず最初に自分がつくったソースを左側に記述します。

２、オプションを選択します。「All options = 全部のオプション」「No comments added = コメントの付けない例： /* border-radius*/」「No space on prefixed properties = プリフィックスの前にスペースをつけない」「All in 1 line = 全て1行で記述」

３、「Prefix」のボタンを押します。右側のボックスにソースが生成されます。これで完成です。

現在サポートされているプロパティ

利用の際には、サポートされているプロパティのチェックはお忘れなく。

◯ - 完全、▲-一部　×-未完

○animation

○background-clip

○background-origin

○background-size

○border-radius

○box-shadow

▲gradient (linear)

×gradient (radial)

○transform

○transition

アスキーに記事を寄稿しました。で感じたこと。

2011-04-01T20:46:00.001+09:00

Ascii ウェブプロフェッショナルで記事を書きました。HTML5のCanvas, audio などについてです。HTML5はすこしづつですが一般のウェブサイトなどでも利用されるようになってきました。IT技術が浸透するには、必ず「Chasm」（キャズム：溝）があると言われています。これば、新しい技術を「アーリーアダプター」と呼ばれる人が利用してから、一般の大多数に浸透するまでの間のことを指します。今回、この記事を寄稿したところ、HTML5が少しづつですが浸透してきており、キャズムを今年中には乗り越えるのではないかと考えています。

CSS3についてのスライド「CSS Reloaded」を2008年6月にアップルストア銀座で公開したときには、様々な方から「すばらしい」「わくわくする」などのコメントをもらいました。一方で有名な講師の方や、CSS3関連書籍を執筆されている方を含めて「つかえない」「はやすぎる」などの厳しい声もいただきました。

ですが2011年、今やCSS3は当たり前であり、誰でも使えて当たり前になってきています。改めて早く勉強しすぎたということはないと考えています。CSS3にかぎらずHTML5も同様だと考えています。

CSS3を利用したデザイン小ネタ「グラデーションボーダー」

2011-03-31T01:26:00.008+09:00

CSS3というとTransform3Dなどの派手なプロパティに目が行きがちですが、簡単なCSS3とCSS2.1だけでもちょっと”いかした”デザインを作成することができます。

今回は、CSS3のグラデーションとCSS2.1の:beforeと:afterを利用したグラデーションのかかったボーダーをご紹介します。

以下のサンプルの様にボーダーだけがグラデーションになっています。今までであればグラデーションに見えるところに画像をひいていましたが、その必要はありません。

（仕組み）
ボーダーにみえている部分は背景指定で実現しています。黒から白にかわる背景画像の上に白い背景を重ねているだけです。

HTMLソース

<div>
    いろはにほへと　ちりぬるを
わかよたれそ　　つねならむ
うゐのおくやま　けふこえて
あさきゆめみし　ゑひもせすん

色は匂へど　散りぬるを
我が世誰そ　常ならむ
有為の奥山　今日越えて
浅き夢見じ　酔ひもせず
    いろはにほへと　ちりぬるを
わかよたれそ　　つねならむ
うゐのおくやま　けふこえて
あさきゆめみし　ゑひもせすん

色は匂へど　散りぬるを
我が世誰そ　常ならむ
有為の奥山　今日越えて
浅き夢見じ　酔ひもせず
 </div>

CSSソース


div { 
      width: 400px;
      margin: 40px auto;
      position: relative;
      padding: 20px;
    }
    div:before {
      content: "";
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      background-image: -moz-linear-gradient(top, black, white);
      background-image: -o-linear-gradient(top, black, white);
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, black),color-stop(1, white));
      background-image: -webkit-linear-gradient(black, white); 
      z-index: -2;
    }
    
    div:after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: white;
      z-index: -1; }

（コメント）
簡単なトリックなのですが、気の利いた知恵を利用したテクニックですね。
デザインの上でこだわりたいディデールですがどうしても画像になってしまいがちです。
今回のサンプルは他にも応用が効きそうなのでご紹介しました。ぜひ応用でいろいろなデザインにチャレンジしてください。

CSS3 transition を生成するツール「Ceaser」

2011-03-25T01:41:00.001+09:00

CSS3のtransitionはアニメーションを設定できるプロパティだが。いざ「transition」を利用してウェブデザインのパーツにアニメーションの動きを付けるとき、実際のパーツを何度も動かしてアニメーションのスピードを調整するのは非常に面倒だ。そんな時に非常に便利なのが「Ceaser」（シーサー）だ。このツールは、サンプルパーツを自由に調整してオンライン上でコードを自動生成してくれる。

機能

アニメーションのスピードをデフォルトの「linear」「ease」「ease-in」「ease-out」「ease-in-out」から選択することができる。ほかにも、独自のキーワードが用意された21種類のアニメーションが用意されている。もちろん「custom」を選択すると独自のアニメーションを作成することができる。

また、「left」「width」「height」「opacity」とアニメーションにともなう動作も用意してあります。

「left」→左から右
「width」→幅が広くなる
「height」→高さが高くなる
「opacity」→だんだん透明になる。

「duration」はアニメーションが開始から終了までにかかる時間です。ミリセカンドで記述されていますので、1000＝1秒になります。1,800だと1.8秒となります。

「Ceaser」を利用すれば簡単にtransitionをテストしてパーツに最適なアニメーションを適用することができます。

絶対に使いたい、modernizr 2.0

2011-03-19T17:45:00.004+09:00

最近では、すっかりCSS3を利用する人には定着した「modernizr」当初は、CSS3の対応状況をチェックするツールと誤解をしていた人も多くいました。しかし、このツールは、CSS3やHTML5のサポート状況をclass名としてhtml要素に反映し、そのclass名を利用して「プログレッシブ・エンハンスメント」を適用するJavaScriptです。

html 要素に CSS3のサポートされているか？されていないか？で別々の class名を記述します。
例えばブラウザが「multiple background」を

サポートしている場合

<html class="multiplebgs">
</html>

サポートしていない場合

<html class="no-multiplebgs">
</html>

CSSの記述

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

このツールは現在のバージョンは「1.7」だが、ベーターバージョンとして「2.0beta」が公開されている。

2.0Betaの大きな違い

1.7と2.0beta大きな違いは、

自分で利用したプロパティを選択できる
新しいプロパティが利用できる「Flexbox」「3Dtransform」など

です。

自分で利用したいプロパティを選択できることのメリット

まずは、必要なプロパティのみを選択できることで、利用しないプロパティに関わるコードを削除できます。そのことによって何よりjsの読み込みを高速化することができます。JavaScriptを読み込むスピードを高速化できることは、特にパフォーマンスを要求されるモバイルでは大きな効果をあげるでしょう。

新しいプロパティが利用できることのメリット

以前は、CSS3の3D transformは「modernizr1.7」にてサポートされておらず、3D transform を利用する際には苦労をしました。
今回からは、Safari以外の CSS3 3Dtransformをサポートしていないブラウザにも別のスタイルを適用できます。

利用方法

利用するプロパティを選択します。今回は、「Flexbox」と「CSS3 3D」を選択しました。
コードを生成します。「GENERATE IT!」という赤いボタンをクリックすると下記のようにコードが生成されます。
head要素内にダウンロードした JavaScriptを読み込む為の記述配置します。任意のファイル名を指定しましょう。
```
<head>
<script type="text/javascript" href="modernizr.js"></script>
</head>
```

「modernizr2.0」にはもっと隠された能力

「modernizr2.0beta」には、隠された機能があります。それが下記の箇条書きの２つです。

IE用のHTML5修正用 RemySharpの「HTML5shim」があらかじめ記述
JavaScriptのローディングを高速化する「yepnope.js」の搭載

上記の２つのJavaScriptライブラリを別々にそれぞれダウンロードするより、「modernizr」で読み込んだ方が HTTPリクエストは１つになります。

まとめ
「modernizr」は「プログレッシブ・エンハンスメント」を実現するためには、なくてはならないツールです。2.0ではサポートが広がりますます欠かせません。是非、2.0を利用してみよう。Flexboxを利用できるメリットを感じられます。Flexboxについては次回のasciiの連載にて取り上げる予定なので、 Ascii Web Proffessional を閲覧してみてください。

allWebクリエイター塾 ブログ

多国でランキング１位のアプリ「Clear」に見るモバイルファースト

CSS3 でタペストリーデザイン（三角形）描いてみた。

ゲーミフィケーションの大切さ

Chrome の驚くべきリアルタイム機能

2012年のご挨拶

jQuery Mobile 1.0正式版までの大きな変更点のピックアップ

PrefixrがAPIでEspresso・Codaなどに対応

参考にしたい、CSS3でつくる商品写真の見せ方

アニメーションできるプロパティがわかる一覧表、「animatable」

すごい、３Dのマップもプラグイン無しで実装できる。

Gmailもレスポンシブ・ウェブ・デザインへ

もっと効率的になろう！オンラインCSS共有ツール

「レスポンシブ・ウェブ・デザイン」だよ、「レスポンシブル」じゃないよ。

大手新聞社の Boston Globe も Responsive Web Design を採用

コンテンツの変化

コラムの順番

ブラウザ対応

まとめ

Facebookは世界で３番目に大きい国家と同じ

ソーシャルメディアで知られていない真実 ２０選

レスポンシブ Web デザイン には欠かせない。スケッチテンプレート

やっぱり、PSDやaiデータがあると便利。HTML5ロゴ:ダウンロード

高品質フリーの画像集のサイト16選

iPhone で 「position:fixed」をスムーズに実現する 「Scrollability」

イギリスで遂に Chrome が シェア２位のブラウザーに！

レスポンシブ Web デザインのテストツール「Responsive Design Testing」

CSS3の凄いデモ animation & キネクト

最大60%も高速化する「Google Page Speed Service」が登場

スマホのUIを参考にできるウェブサイト

スマホでも使える！パフォーマンスアップの為のCSS記述方法

Don't use adjoining classes - 隣接クラスを使わないようにしよう。

Remove empty rules - 空ルールを削除しよう。

Use correct properties for a display - Display プロパティには正しいものを

Don't use too many floats - float を沢山利用しない

Don't use too many web fonts - Webフォントをたくさん利用しない。

Don't use too may font-size declarations - font-sizeの指定はしすぎないようにしよう。

Don't use IDs in selectors - セレクタにIDは使わないようにしましょう。

Don't qualify headings - 見出しは修飾しすぎないようにしよう。

Heading styles should only be defined once - 見出しのスタイルシートは一度だけ指定されるべきです。

Zero values don't need units - ゼロの値は単位は省きましょう。

Vendor prefixed properties should also have the standard - ベンダープリフィックスプロパティはウェブ標準のバージョンも記述しましょう。

CSS gradients require all browser prefixes - CSSのグラデーションの記述は全てのブラウザでベンダープリフィックスが必要です。

Avoid selectors that look like regular expressions - 正規表現を利用したセレクターを避けよう。

Beware of broken box models - 壊れたボックスモデルには注意しよう。

まとめ

A Book Apart 「Responsive Web Design」を買ってみた。書評

jQuery Mobileのよく使うスニペット3種

DW CS5.5＋jQuery Mobileを使いこなすための心得10項目

もう無視はできない。モバイルファーストを採用するビッグネームが現れた。

A Book Apart 「Responsive Web Design 」を買う。

Firefox4がリリースされたばかりですが、Firefox7.01a が既にリリース！？

CSS3

HTML5

Firefox 7.01a を利用してみたい！

今週発表されたばかりのツールも紹介。CSS3のアニメーションツール 5選

まとめ

CSSを1行にしてみた、速くなるのか？

体感

問題

まとめ

Responsive Web Design を利用している企業サイトリスト

公共団体編

一般ECサイト編

Web関連企業編

その他

まとめ

ハイパフォーマンスWebサイトの著者が作成した便利ツール

あなたのスマートフォン サイトのパフォーマンスは大丈夫？

コーディングの手間を省くHTML5 & CSS3 フレームワーク

これ全部 CSS って思わせるようなクオリティのボタン

スマートフォンのボタンサイズ UI

CSS3 「rem」って何だ。

比較①：CSS 「em」 で設定した場合

比較①：CSS 「rem」 で設定した場合

比較②：「em」

比較②：「rem」

rem をサポートしていないブラウザへの対処方法

ブラウザサポート

CSS vs CSS3 スピードテスト

allWebクリエイター塾　ブログ

ソーシャルメディアで知られていない真実　２０選

レスポンシブ Web デザインには欠かせない。スケッチテンプレート

iPhone で「position:fixed」をスムーズに実現する「Scrollability」

イギリスで遂に Chrome がシェア２位のブラウザーに！

Don't use too may font-size declarations - `font-size`の指定はしすぎないようにしよう。

あなたのスマートフォンサイトのパフォーマンスは大丈夫？

比較①：CSS 「em」で設定した場合

比較①：CSS 「rem」で設定した場合

IE6-8 にもレスポンシブ・ウェブデザインを適用する「respond.js」

Flash の利用率が大幅に減少してきたみたいだ。