次世代Android端末の画面サイズを見据えたスマホサイトデザインとブラウザのファーストビュー表示領域 « console.log :) | Don't forget trace :)
今回は、現行のiPhoneと現時点での最新Android端末のスペックから、 最適なスマホ向けサイトのデザインサイズを考察します。 スマートフォン向けサイトをデザインする際にデザイナーがまず確認するのが、 想定の画面サイズとファーストビュー領域ではないかと思います。 ※ここでいうデザインには装飾だけではなく、ページ設計の意味も含み、デザイナーにはページの設計者の意味も含みます。 現状は、やはりまだ「iPhoneの画面サイズ」をスタンダードとする人が多いでしょう。 しかし、世界的に見てもAndroidの勢いが強く、さらにハイスペックな端末もドンドン発表されています。 今後発表される次世代の「Android端末の画面サイズ」がデザインのスタンダードになる日も遠くないかもしれません。 本記事の結論をいきなり書きますと ・現状のAndroid端末を基準にする際の想定ファーストビューサイズ
Sparrow.js | 携帯サイトを無料でスマホ対応！お手軽簡単、その秘密はJavaScript
スマートフォンのシェア増加に伴い、携帯サイトをスマートフォンでもキレイに表示させたいと 感じている方は多いと思います。そんな中、「今ある携帯サイトを活かす方法はないの？」とお考えの方に嬉しいニュースです。Sparrow.jsを使えば、簡単に自らの携帯サイトをスマートフォン対応させることができます。しかも、無料ですぐにお使いいただけます。このSparrow.jsを使ったら何ができるかをご紹介します。 半角全角変換 携帯サイトでは半角文字がよく使われています。ところがスマートフォンでは、半角文字を使う必要性はあまりありません。よって半角文字を、スマートフォンでは全角に変換して表示させます。 表示サイズ最適化 スマートフォンでは画像が小さく表示される場合、ユーザーがいちいちズームする手間が発生します。スマートフォンの画面サイズに合わせ、コンテンツを最適なサイズで 表示します。 タッチリスト表示
スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。 各デバイスの幅は、2012年3月のデータです。 A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケ
ドラッグアンドドロップでPCサイトをスマートフォン対応サイトに 「shutto」
ねとらぼで試してみた。編集画面で右の枠から左の枠へ各要素をドラッグアンドドロップで並べるだけでOK HTMLの知識が無くてもドラッグアンドドロップで簡単に、PCサイトからスマートフォン対応サイトを作成できるサービス「shutto」が11月22日にスタートした。@takeshiyakoさんが公開した。 shuttoでスマートフォンに対応させたいPCサイトのURLを入力すると、編集画面がオープン。右側に表示されているPCサイトからヘッダーやロゴ、テキストといった各要素を、スマートフォンに見立てた左側の枠内へドラッグアンドドロップで並べていく。 そうすると、スマートフォン対応サイトのデモ画面が完成。保存をクリックすると、shuttoを使って変換したページが実際どのように見えるかを確認できる。さらにshuttoで生成したJavascriptを自分のサイトに埋め込めば、URLはそのままに、スマートフ
スマフォ用サイトでよく使うエレメントが豊富に揃ってるフレームワーク -ChocolateChip-UI
スマートフォンなどのモバイル用サイトを簡単に制作できるようにするJavaScriptベースのフレームワークを紹介します。 先日リリースされたiOS5にも最適化されています。 ChocolateChip-UI [ad#ad-2] ChocolateChip-UIで用意されているエレメント あらかじめ用意されているエレメントは数多くあります。 ツールバー ナビゲーションバー ボタン アイコン ナビゲーションリスト テーブルビューアー セレクションリスト スイッチコントロール ポップアップ プログレスバー アクティビティインディケーター アクションシート セグメントコントロール スライダー カルーセル スクロールパネル ページングコントロール テキストを並べても分かりにくいと思うので、下記にキャプチャでご紹介。
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
スマホで雑誌が無料、お店の中なら――場所を価値化する「すまほん。」のビジネスモデル
スマートフォンを持って店にはいると、1時間だけ雑誌コンテンツが読み放題に――。こんな新サービスを開始したのがD2Cだ。すべての参加プレーヤーにメリットをもたらすという、このサービスのビジネスモデルとは。 カフェで人を待ったり、銀行や病院で順番を待ったりするとき、置いてある雑誌を読みながら時間をつぶしたことがある人も多いだろう。これをスマートフォンと電子書籍に置きかえ、“1時間だけタダで読み放題”にするのが、「すまほん。」という新サービスだ。 このサービスを展開するのは、モバイルメディアレップ大手のディーツー コミュニケーションズ（D2C）。同社営業本部 営業部で部長を務める澤宏明氏は、「このサービスは来店者だけでなく、店舗やコンテンツを提供する出版社にもメリットをもたらす」と自信を見せる。 同氏に、このサービスの概要とビジネスモデル、サービスが生まれた背景について聞いた。 有料コンテンツの
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Androidでfont-weight:boldを適用する方法
Androidでfont-weight:boldを適用する方法 Androidでは日本語にfont-weight:boldが適用されません。 <p style="font-weight:normal">ノーマル normal</p> <p style="font-weight:bold">ボールド bold</p> このHTMLをAndroidで確認すると次のようになります。 日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。 対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。 <p style="text-shadow:1px 0 0 black">ボールド bold</p> ただ、この方法だとiPhoneでは太字になるけどAndroidで
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PCサイトをスマホ対応・最適化｜Mobify（モビファイ）