サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
WWDC25
roundabout-mwp.blogspot.com
ブロック要素に背景色を付けるデザインは、ページにメリハリを付けるのに効果的なのでよく使われますが、auではたびたび「隙間発生問題」という意図通りの表示がされない問題にも遭遇します。 詳しくはsympleブログのエントリーで解説されていますが、このエントリではラウンドアバウトが用意している拡張タグ <ra:field></ra:field> <ra:area></ra:area> を使った実例を紹介します。この拡張タグを使うことで、キャリアによってdivとtableを書き分けるという煩雑なことをせず、シンプルなソース記述で隙間の発生を防ぐことができます。隙間が消せないというデザインの限界・制約を乗り越えられるので、画像同士やブロック要素を隙間なく並べたデザインが簡単にできるようになります。 隙間を解消するラウンドアバウトの
新着情報など一覧でテキストを見せるようなページで、行間が詰まっていると読みにくい印象を与えます。背景色の付いたボックスと接する箇所は特に余白が欲しくなります。 PCサイトではCSSのline-heightやmarginプロパティを使えばできますが、携帯サイトの場合、最も普及するiモードブラウザ1.0のFOMAではこれらのプロパティが効かず行間を調整できない事情があるので、画像を使った何らかの方法でしか余白を調整することしかできません。 そこでスペーサー画像を各テキストの次の行に配置して隙間を作るテクニックが使われますが、XHTMLソースを見てください。 （行間と、絵文字の両端に余白を作るためにスペーサーを配置した例） <div style="background-color:#006600"> <img src="spacer.gif" width="1" height="1" style
空メールを使った携帯サイトやサービスがよくあります。迷惑メールを懸念し携帯ドメイン以外のメールアドレスからの返信を拒否するユーザーも多いので、ユーザー離脱を起こしやすいです。こうしたユーザーに配慮し、ドメイン拒否指定をの解除がしやすいように、メール受信設定が行えるキャリアのURLにリンクを貼るなどします。 ラウンドアバウトのない静的なHTMLでは３キャリア分のリンクを列挙することになります。違うキャリア用のリンクを踏むとエラーになるので、ユーザビリティを考慮して出し分けしたいところです。 前回書いたように、ラウンドアバウトではPI機能または変換シートの２つの方法で出し分けをすることができます。 ●PI機能を使う場合 以下のサンプルのように、キャリアを出し分け条件にしてPIを記述します。 （XHTMLソース） ﾒｰﾙ受信設定は<br /> <?ra carrier="DoCo
ユーザーがフィーチャーフォンからスマートフォンにシフトしている現在のモバイル事情を考えるとラウンドアバウトという変換製品は大変時代にマッチした製品であると我々は考えています。 実際にラウンドアバウトを使ってスマートフォン対応（スマートフォンシフト）を行なったエンドユーザーに、製品選択の理由を聞くと次のような言葉が返ってきます。 「これからは、このアプローチが正しいと私達は思ったから」 「時代に沿った自然な考えだと思ったから」 「コンセプトに説得力があるから」 「なるほどと感心して、正しい方法だと思うから」 「将来の不安を解消できると思うから」 そして、ラウンドアバウトを選択するのは、ほとんどの場合エンドユーザーです。エンドユーザーは自ら、「スマートフォンだけ対応して携帯は自動にできないか？」という要求を満たせそうな製品をWebで探して我々のサイトに辿り着き、SIベンダーに調査・提案依頼して
このページを最初にブックマークしてみませんか？
『新・携帯サイトの作り方：ラウンドアバウト コンセプト』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
