[今日のまとめ] スマートフォンサイトのWebデザインに関する覚書

Annotations:

• レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。
• レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。

Tags: CSS、スマートフォン

Annotations:

• 640pxでデザインする場合は余白やフォントサイズなどがすべて2で割り切れるようにデザインしないといけません。
• 利用するフォントは基本的にヒラギノ角ゴ W3を利用
• Androidではヒラギノ角ゴが入ってない為、Droid Sans Japaneseや新ゴRなどのフォントが採用され、デザインが若干違って表示されることも理解しておきましょう。
• Androidの標準フォントであるDroid Sans Japaneseにはボールド体が存在しないためボールド体が表現できません。
• リンクはボタンなどにし最低44px以上にしましょう。
• iPhone 3Gで57×57ピクセル、iPhone 4で114×114ピクセルのアイコンが利用できるのでこれらもあらかじめ用意しておきましょう。

Tags: スマートフォン

Annotations:

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

Tags: スマートフォン CSS JavaScript

Annotations:

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

Tags: CSS

Annotations:

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

Tags: CSS

Annotations:

• 外部CSSファイルの読み込みでは、「@import を使わないようにする」ことが読込速度の低下を防ぐ1つの方法です。
• @importを書くとスタイルシート下に置くのと同じ現象になるので避ける

Tags: CSS

Annotations:

• ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。
• 片手で操作するUIと、両手でもって人差し指で操作するUI、両手の親指で操作するUIは別物。
• 基本的には「全てのタッチできる場所」は立体にし、タッチできない場所は立体にしない
• 離した時に機能するほうがよい。
  ・離した場合なら、ユーザーが押してから考えを変えても、領域外に指を出してキャンセルできる。
• 目安としてはナビゲーションバーのボタンラベルは名詞で妥協し、大きなボタンは動詞表現にする。
• アイコンだけのボタンは基本伝わらない。
• そもそもボタンが多すぎるUIが間違っている。

Tags: iPhone、UI

Annotations:

• 何かが起きたら必ずユーザーに通知する。
• アニメは「状態Aから状態Bに変化した」ということをユーザに明示的に宣言する為のもの。
• アニメは「特定の処理を実行中」ということをユーザに明示的に宣言する為のもの。
• 基本的には、遷移が深い方向に潜ったか、浅い方向に浮かんだかが明示するのが最重要。
• 「ユーザーがどうすれば問題を解決できるか？」を明示的にする。

Tags: iPhone UI