今日は、スマホ対応で注目を集める「レスポンシブ・ウェブデザイン」の良い点と悪い点を述べていきます。 結論としては、レスポンシブ・ウェブデザインはすごいと思いますが、現状では、スマホ向けにはレスポンシブ・ウェブデザインを採用せずに専用の軽いHTMLを用意して対応するべきだと私は考えます。そうでなければ、完全にモバイル・ファーストでのデザインで進めることです。その理由を解説していきます。 3分でわかる？ レスポンシブ・ウェブデザイン「レスポンシブ・ウェブデザイン」のことを耳にしたことはあるでしょうか？ 2011年に日本でも注目された、Webページのデザイン手法で、PC向け・スマホ向け・タブレット向けなど、さまざまな画面サイズのデバイスに対応したWebデザインを柔軟に実現できるようにするものです。わかりやすく言うと、次のような仕組みで実現しています。 CSS3の「Media Queries（メデ

こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初

当ブログをスマートフォン対応したいなーと思ってはいたけど、iPhone持ってないしXperiaの需要はどうなんだろうとか考えたり言い訳しつつずっと放置してましたが、今回 iPod Touch （先代の）を借りたので、勉強がてらiPhone対応と言うかスマートフォン対応してみました。 何かを実験するには自分のサイトが一番手っ取り早くて良いですね。 サイト持ってない方は、ホント何でもいいので、何かしら作ったほうがいいかなーと思います。 ドメイン取得して、サーバレンタルして、構成練って、デザイン・コーディングして、FTPクライアントでファイルアップしてみたり、MTやWPインストールしていじったり、CSS3の実験したり色々使えて便利ですし、カッチリ作れば実績にもなりますしね。 と、それは良いとして、スマートフォン対応したんです。えぇ。 CSS HappyLife for iPhone URLのオシ

使い慣れたDreamweaverで、iPhone用のWebサイトを作りたい。そんなWeb制作者の声に応えるエクステンション（拡張機能）「iPhone site extension for Dreamweaver CS4/5」が登場した。利用は無料で、開発元のエイチツーオー・スペースのWebサイトからダウンロードできる。 iPhone site extensionは、アドビ システムズのHTML/CSSオーサリングツール「Dreamweaver」にiPhone用Webサイトの作成支援機能を追加するエクステンション。iPhone site extensionをDreamweaver CS4/CS5にインストールすると、新規作成メニューから「iPhone用ページ」「iPhone用Webアプリ」の2種類のHTML/CSSテンプレートが選択できるようになる。各テンプレートには、アップルのデザインガイ

先日の勉強会での発表内容に関して、ke-tai.orgさんのところで入力モードについて突っ込まれたので、せっかくだし書きかけの記事をきちんとまとめてみることにしました。 元々、wideの%MobileStudyで入力モードの話が出た際、意外と情報が間違って知られていたりすることが多いようだったので、特にはまりやすいあたりを中心に、入力モード指定についてざっくりと書いておこうと思って、まとめたかけでそのまま放置していたｗものがあったんですが、それがベースです。 そんなわけで、記憶頼りが中心であんまり検証しないで書いてるので、間違いが含まれてたらごめんなさい。 では本題。 入力モードとは まず、入力モード指定って何のことかという話からすると、みんな携帯をいじる時に「全角かな」とか「数字」とか「英小文字」とかいろいろ端末の文字入力を切り替えると思うんですが、あれのことです。 サイトを作る時にin

GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

はてなダイアリーで更新を行っていた「case:MobileDesign!」ですが、引越しをしました。 【新しいアドレス】 http://case-mobile-design.com/ 2015年4月、さらに下記に引っ越しました。 http://hi-posi.co.jp/tech 今後もよろしくお願い申し上げます。

DoCoMo,EZweb,Softbankを共通の外部CSSファイルからスタイルを反映させるモジュールを作りました。 http://search.cpan.org/~komoriya/HTML-MobileJpCSS-0.01/ 3キャリア間での変換の必要性 DoCoMoでは外部CSSを参照できずインラインのみの対応となっています。 DoCoMoのインライン化についてはid:tokuhiromさんの作成したHTML::DoCoMoCSSこちらで対応が可能なのですが、3キャリア間で共通のCSSを参照するとなると属性の指定方法に微妙な差異が問題となります。 例えば小さいフォントを表示したい時は、 DoCoMo --- font-size:xx-small EZweb --- font-size:10px Softbank --- font-size:smallと属性の値が異なります。 hrタグ

こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G（FOMA・WIN・3GC）端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末（FOMA・WIN・3GC）がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末（PDC・P型・C型など）を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運

最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT

急増するFlash Liteとアクセシブルな携帯電話、らくらくホン。いつか見た景色が繰り返されそうではあるのですが。 Flash Liteはらくらくホンで読み上げられるのか。 ふと思いついたのがこの疑問です。（追記）やはり難しいようです。コメントを参照してください。 世間では携帯電話の旬なネタといえばやはりiPhoneなわけですが、アクセシビリティの中ではDoCoMoのらくらくホンかと。らくらくホンについてあまり詳しくない方は（僕もですが）、次のリンク先を参照してください。 FMWORLD（個人） 携帯電話(F672i) : 富士通 音声ですべて操作できる携帯電話が変える人生。 (Junnama Online (Mirror)) ＜徹底検証＞ドコモ、ＦＯＭＡらくらくホンIIIで強化された読み上げ機能　ユニバーサロンリポート らくらくホンはコンテンツを音声で読み上げる機能がついていて、それが

ハーモニー・アイ主催のミニ講座【「ホームページ作りにユーザーの声を生かそう」視覚障害者編】（3月9日）に参加してきました。 感想としては やはりスクリーンリーダー等の出費は大きい らくらくホンの評価・活用度がこれほど高いとは思わなかった これほどAjaxが否定されるのも珍しい 実際のWeb閲覧のシーンを生で見られた。これは大変だ といったところ。以下、その時のメモ。 点字ディスプレイ KGS corporation製 24万円 ただし点字の普及率は10％程度 スクリーンリーダーの紹介 PC-Talker（4万円くらい） 95Reader（開発停滞中） JAWS（海外製、高価格・15万円くらい） エディタ 「MyEdit」を使用（後日判明：「PC-Talker」に無料で付いてくるらしい） 文字を打ち込むと、読み上げてくれる 環境設定まで読み上げてもらえる PC操作 マウスが使えないので、キー