レスポンシブ・ウェブデザインのみを集めた 「mediaqueri.es」

以前 「Responsive Web Design のウェブサイトを集めてみた。」をしたところ非常に人気がありました。そこで、レスポンシブ・ウェブデザインのみを集めた「mediaqueri.es」をご紹介します。かなりの数のレスポンシブ・ウェブデザインが掲載されていますので参考にしてみてください。ウェブサイトそれぞれでデザインが違うので勉強になります。

iOSとAndroidのモバイルWebkitの違いと注意点

スマートフォンのサイト制作する際に、モバイルのブラウザについて知ることは非常に大切です。実際に モバイルのウェブサイトを制作すると 色んなことに気付かされたり、失敗したりします。今回、世界でも日本でもモバイルで圧倒的なシェアを誇る モバイルWebkitを調べてみました。そして CSSのサポートが悪くクライアントの案件にてサポートから外すべきブラウザがわかってきました。

Responsive Web Design のウェブサイトを集めてみた。

スマートフォンウェブサイトの開発を考えると、これだけ、画面サイズが増えてくれば PHPや.htaccess で全てのデバイスに対してユーザーエージェントで細かく振り分けを行い、別々のHTMLやCSSを提供する手法は、ゼロサムゲームみたいなものかもしれません。クライアントにはコストが重くのしかかり、開発者には開発時間が重くのしかかります。ここには win-win のような関係は全くないでしょう。

iOS SDK と iPhone シミュレーターのインストール

iPhone 向けのウェブサイトを開発する場合、必ずといっていいほどお世話になるのが iPhone シミュレーター。今回はそのインストール方法をご紹介します。まず大前提として お使いのマシンが mac であることが前提となります。

スマートフォンの資料作りに便利な ジェスチャー画像を集めてみた

現在、スマートフォンに関しての電子書籍を執筆しています。その中で、フリップ、タップ、スワイプなどのジェスチャーを用意する必要が多々あります。Fireworksなどで一から作るのは非常に大変なので便利なテンプレートサイトを自分なりにブックマークなどをして結構集めていました。それを紹介したいと思います。

Google Docs で作るウェブサイトのワイヤーフレーム

Google Docsでつくるとチームで資料などを共有するときに非常に楽です。そこで、スマートフォンからデスクトップまでのGoogle Docsでつくることができるワイヤーフレームを集めてみました。

Verizon の iPhone が話題になったわけ

2011年、米国の 携帯キャリアの１つ「Verizon」から iPhoneが発売されることになりました。日本での一部のメディアで非常に話題になりましたが、あまりWeb関係者では何が凄いのかピンとこない人もいると思います。実は、今回の「Verizon」の一件は 日本のKDDIに一番関係があります。

モバイル検証ツール 「Mobile Perf Bookmarklet」 の使い方

Google のパフォーマンス技術者 Steve Sauders（スティーブ・サウダース）が、モバイル向けの ブックマークレットを発表しました。このツールでは現在、HTML、CSS、DOM、CSSスプライトなどをチェックすることができます。

モバイルサイトを制作していると、たまに実機でソースがどうなっているのかな どチェックをしたいことが多々ありますが、そんな時に便利なツールです。

下記がそのMobile Perf Bookmarkletページです。

2011年にWebデザイナーとして注目すること①「スマホ」

allWebクリエイター塾では、もっとも注目する技術・キーワードを3つご紹介します。まず第１弾は「スマートフォン」です。下記の図をみてください、これはアメリカのコンサルティング会社 Nielsen が スマートフォン（以下スマホ）のマーケットへの浸透の予想をした図です。

まさかと思う人もいるかもしれないのですが、