Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

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

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

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


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

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

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

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

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


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

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

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


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

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

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


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

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

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


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

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

(追記) マニュアルを見なくても直感的に使えるのがベストなので、ユーザーがどうしたらいいかをうまく通知するようにデザインしたいですね。


スマホサイトを作る機会があったので、こういったスマホ関連のデザイン記事は気になります!

それでは、また!!