スマートフォンサイトのWebデザインに関する覚書

smartphone_sitedesign

今日は、スーパー銭湯で日頃の疲れを洗い落としてきましたよ。精神的にもリラックスできるので銭湯は大好きです。

それでは、今日のまとめ記事です。

ASCII.jp：スマホ対応の新潮流「レスポンシブWebデザイン」とは？

Annotations:

レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。

レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。

Tags: CSS、スマートフォン

HTMLは1つにしておいて、CSSでレイアウトだけ切り替えれるように作るのがベストですよね。これからは、デザイナーもレスポンシブWebデザインを意識していく必要がありそうです。

スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]

Annotations:

640pxでデザインする場合は余白やフォントサイズなどがすべて2で割り切れるようにデザインしないといけません。

利用するフォントは基本的にヒラギノ角ゴ W3を利用

Androidではヒラギノ角ゴが入ってない為、Droid Sans Japaneseや新ゴRなどのフォントが採用され、デザインが若干違って表示されることも理解しておきましょう。

Androidの標準フォントであるDroid Sans Japaneseにはボールド体が存在しないためボールド体が表現できません。

リンクはボタンなどにし最低44px以上にしましょう。

iPhone 3Gで57×57ピクセル、iPhone 4で114×114ピクセルのアイコンが利用できるのでこれらもあらかじめ用意しておきましょう。

Tags: スマートフォン

スマホ独特のサイトデザイン知識が必要ですね。こういうのは、読んで覚えるのではなく、使って身に付けないといけませんね。

【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife

Annotations:

スマートフォン向けの新規でサイトを作るのに使えそうな感じの一式

Tags: スマートフォン CSS JavaScript

おっ！これは使えるかも。

[CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス

Annotations:

ラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。

Tags: CSS

ログイン画面など、センター寄せする場合に使えそうです。

意外と知らない!?CSSセレクタ20個のおさらい｜Webpark

Annotations:

CSS セレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。

Tags: CSS

jQueryでもセレクターはよく使っているのですが、こうやってまとめてもらえるとうれしいですね。

どや！？ひよっこデザイナーにもできるWebページ高速化！鍵は「HTTPリクエストの数を減らすこと」 | デザインどや！？

Annotations:

外部CSSファイルの読み込みでは、「@import を使わないようにする」ことが読込速度の低下を防ぐ1つの方法です。

@importを書くとスタイルシート下に置くのと同じ現象になるので避ける

Tags: CSS

@import使ってるので、なんとかやめていく方向で考えてみます。

fladdict » スマホのUI考〜ボタンについて

Annotations:

ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。

片手で操作するUIと、両手でもって人差し指で操作するUI、両手の親指で操作するUIは別物。

基本的には「全てのタッチできる場所」は立体にし、タッチできない場所は立体にしない

離した時に機能するほうがよい。・離した場合なら、ユーザーが押してから考えを変えても、領域外に指を出してキャンセルできる。

目安としてはナビゲーションバーのボタンラベルは名詞で妥協し、大きなボタンは動詞表現にする。

アイコンだけのボタンは基本伝わらない。

そもそもボタンが多すぎるUIが間違っている。

Tags: iPhone、UI

（追記）スマホサイトでは、PCサイトとは違って、ボタンのサイズ、配置などにも気を配らないといけないですね。

fladdict » スマホのUI考２〜フィードバックについて

Annotations:

何かが起きたら必ずユーザーに通知する。

アニメは「状態Aから状態Bに変化した」ということをユーザに明示的に宣言する為のもの。

アニメは「特定の処理を実行中」ということをユーザに明示的に宣言する為のもの。

基本的には、遷移が深い方向に潜ったか、浅い方向に浮かんだかが明示するのが最重要。

「ユーザーがどうすれば問題を解決できるか？」を明示的にする。

Tags: iPhone UI