ksk1015のブログ

html, css, javascript 等のウェブ制作の技術をブログしてきます。あばばばばば。

レスポンシブウェブデザインについての箇条書き

・ウェブサイトがPCからアクセスされるよりも、スマホからアクセスされる時代になった

・だからウェブサイトを作るなら、基本的にまずはスマホを想定したウェブサイトを作るべし
・ウェブ制作の現場は、当たり前だがPCが普及し日常的にPCを利用するため、またこれまではPCサイトを作ってきたことから、ユーザーよりも従来のPCサイトのサイズ感にしばられすぎてる
・例えば、広いスクリーンでのレイアウトの調整を一生懸命することより、表示速度のチューニングの方が大事かもしれない(謙遜したが絶対大事)
・とにかくウェブサイトがスマホからアクセスされるという現実を、ウェブサイト制作側では見えてないか見えているけどそれが制作に反映されてない、ように僕には見える

スマホサイトとPCサイトのデザインを分けて作ったものを、どう作るべきか

・対応デバイス・ブラウザは、レスポンシブならIEに関しては10以下は捨てていいと思う、Android2系も捨ててよし。捨てれない場合はできるだけシンプルなものを作りましょう。
・PC Windows7,8 IE11、Chrome最新、Firefox最新
・PC Mac Safari最新、Chrome最新、Firefox最新
タブレット iPad iOS最新 Safari
タブレット Nexus7,10等 Android最新 Chrome最新
スマホ iPhone5s iOS最新 Safari
スマホ iPhone6plus iOS最新 Safari
スマホ XperiaA Android4 標準ブラウザ
スマホ Nexus5,6等 Android5 Chrome最新

・一つのデザインをベースにして作るか、モバイル用と大きい用の二つのデザインをベースにして作るか
・二つのデザインをベースにしても、スマホなら320px〜768px、大きい768px〜を意識して作る

・イメージとテキストの組み合わせたもののバランスが難しい。イメージとテキストを別々にしてコントロールした方がいい。

・タッチデバイスに配慮する(リンク、ボタンを大きめに、hoverでしか情報が表示されない表現は避ける)
・アニメーションを多用したリッチなUIは昔ほどではないにせよ大変です。非力なスマホだと快適に動かなかったりバグが発生したり。端末やOSやブラウザによってはリッチな表現を切ることを想定して設計することが必要。
・スクロールに連動してアニメーションさせるとかはタブレットスマホは今でも難しいかな。
・fontawesome等のアイコンフォントは使い勝手がいいよ。
ベクターグラフィックはイラレファイルで、写真等は必要ならばモックとは別ファイルで高解像度のものを用意して欲しい。
・写真の角丸・マスキングはcss等で処理した方がいい場合がある。

・静的なモックに対しての検討だけでなく、コーディングしてブラウザで確認できる段階での検討改善のプロセスがより必要かな
・デザインを作る → 主要なページ・パーツのコーディングする → ディレクター・デザイナー・コーダーでレビューする → 修正する → 他のページのデザイン・コーディングする

・二つのデザインをベースにした場合、ワンソースかソースを分けて作るべきか
・激しくレイアウトが切り替わったり、特殊なリッチUIがあると、ソースがどんどん複雑になる。分けた方が無難。単ページとか期間限定のサイトとかなら大丈夫。
・ソースを分けてサーバーサイドで切り替えることは問題ない。一つのURLでスマホPC共に同じコンテンツを提供することが大事なポイント。

・二つのデザインをワンソースに落としこむことの大変さ
・パーツパーツによって、PCスマホ共用htmlにするか、PC用htmlとスマホ用htmlを分けるか、悩ましい
・htmlやcssが複雑になりがち
・jsが絡んでくるとさらに複雑になる
・悩まずに、PC用htmlとスマホ用htmlと完全に分けると、すっきりするが、ファイル容量約二倍(これするならソース分けた方がいいのでは。。。)

・レスポンシブサイトを作るなら、マルチなスクリーン環境に耐えうる拡張性のある一つのデザインを作ろうとして欲しい
・マルチスクリーンに耐えうるかどうかなんて、直感的な部分よりも、htmlとcssの理解度が大事な気もするので、結局コードを書けないとデザインできない気もする

・作るサイトが何が目的でどんなコンテンツをどのように提供するといいのか。結局それが大事。レスポンシブデザインは瑣末な問題。