サイト制作時のメモ 2012年前半

「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。
「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。

単純なサイトなら頑張って画像作らなくてもなんとかなったりする。
（対象がいわゆるモダンブラウザの場合）

Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便利。
ただしIE 9以下のセレクタ数制限には注意。

IE 8以下の古いブラウザの場合、CSSに関してはレイアウト崩れが起きない、ちゃんと情報が伝わるなら無理して新しいもの（border-radiusとか）は適用しない。仕事でやったサイトがそれだったけど、話し合って納得してもらえた。

Canonical URLをlink要素で指定している場合、それが明らかに不正なもの（http:///のみなど）であっても、Googleのウェブマスターツールは教えてくれない。
これについては進展があったらまた別の機会に書くかもしれない。

EUC-JPのサイトはめんどくさい。
どこがどうと言うほどではないけど、ときどき文字コードで引っかかることがある。

多言語サイトは大変っていうかめんどくさい。

韓国語使用者向けのサイトを作成するときは「Working with Korean」が参考になった。

中韓向けサイトでのfont-familyはArial, sans-serifにしておくと使いまわせて楽。要は特に指定しないということ。

「それじゃあWindowsでフォントがしょぼい。メイリオみたいにVistaから入ってるのないの？」
ある。
中国語は「微软雅黑（Microsoft YaHei）」、韓国語は「맑은 고딕（Malgun Gothic）」がそれにあたる。

中国語のフォントは「What are the Mandarin Chinese web safe fonts?」と「[chinese mac] Fonts」を参考にした。

韓国語のフォントについては前出の「Working with Korean」に載っている。
Wikipediaの「ハングルの書体」も参考になるかも。

どのフォントを指定するかについては、それぞれの国の大きなサイトを見るのもいい。
中国なら百度と、そこから辿れる新聞社のサイト。
韓国ならYahoo! KoreaとNAVER、そしてそこから辿れる新聞社のサイト。

多言語サイトならUTF-8で作っておくと悩みがちょっと減る。
最初に中国語サイトをGB2312で作ってしまって（そのときは日中のサイトしか予定がなかった）、後から韓国語や東南アジアの言語が増えてきて中国語サイトだけ文字コードが違うという、どうしようもないことになった（後に修正）。

文字コードやフォントのことについては英語のサイトは割と楽だけど、文字の大きさとかは気を遣わないといけない。

右から読む言語のサイトがなくってよかったと心の底から思った。
その手のサイトを作るときの注意点は『U-Site』の「国際的なユーザビリティ」を読むのがいいと思う。

中国向けサイトは金盾の影響もあってSNS展開をしているサイトだと難しい。中国ローカルSNSのことも考えないといけない。

中韓ともにIEのシェアが非常に高い。

中国はブラウザシェアがちょっと特殊なので、一応そのへんも考えること。
Maxthonと360 Safe Browserあたりの人気が高いみたい。どちらもIEコンポーネントブラウザ。

レスポンシブなサイトの場合はモバイルファーストな感じで作るといいと思ったけど、CSSを書くのがとても大変。
小さい画面向けに書いて、メディアクエリで大きな画面向けに追加していくことになる。この辺は上手にやらないと時間がかかるので、何回かやらないと駄目っぽい（SassやLESSなどのプリプロセッサを使っていたとしても）。

画像を見せるタイプのサイトは、サムネイル画像の幅を300px以内に収まるようにしておくと作る方にも見る方にもいいような気がする。
少なくとも写真のサムネイルについては、個人レベルなら高ppiデバイスのことは気にしなくてもいい気がする。
画像を見せるサイトということはページあたりの画像の数も増えるだろうし、その1つ1つの容量を増やしてまで対応する必要性が感じられなかった。

高ppiデバイスでぼやけるのがよくないロゴやアイコンについてはSVGでいいと思う。

ドロップダウンメニューは、タッチ環境ではタップで開閉、マウス環境はホバーで開閉すると使いやすいと思った。
Modernizrで判別するのがいいかも。
Media Queries Level 4にはhoverなんてのがあるので、上手いことやればその辺も処理できそうな気がする。今は無理だけど。

スマートフォンは基本的に文字が綺麗なので少し小さめでも読みやすいし、小さいと感じたら拡大も容易。
ただしフォントサイズの最小は12pxくらいにしておくのが無難。
個人的には14pxくらいが最小の方が好み。

ボタンはパディングを大きめに。
『UX Movement』の「Finger-Friendly Design」（面白いので是非読みましょう）によると、大人の指先のタッチ範囲は45～57pxだそうで、それくらいの大きさにはしておきたい。
実際に試したら、45pxが押しやすいと感じる下限だと思った。最初は32pxだったけど、それだとちょっと厳しい。
iPhoneはタッチ精度がとても優れているので、少しくらい小さくても苦にはならない。が、Androidはデバイスごとに精度が違うし、そもそも感度が悪いデバイスもある。
そういうところも考えると、やはり45pxくらいはほしい。最低でも35pxは必要だと感じる。

45pxは幅だけじゃなくて高さも同様。
ただ、現行のiPhone（3～4S）は表示領域の高さが小さいからちょっと窮屈になる。そのあたりとの兼ね合いも見て調整するのがいい。

同様の理由で、[Prev]…[5][6][7]…[Next]みたいなナビゲーションはスマートフォンだとつらいので、真ん中部分を非表示にして[Prev][Next]みたいなタイプに切り替えて、リンクを大きくするのもありだと思う。

スマートフォンを縦向き（ポートレート）で使っている場合、[Prev][Next]みたいなナビゲーションは左右中央のどちらかにまとめるより、[Prev]を左端、[Next]を右端のようにしたほうが操作しすいかもしれない。
逆に画面の幅が広がるとそれは使いにくくなるので、ボタンをより長くするかどちらかにまとめたほうがいいと思う。

iOSは<input type="file">が動かないので、画像なんかを投稿してもらうにはメールにするか、専用アプリ作るしかない。
ただiOS 6からはできるらしいので、この心配はなくなるでしょう。
Androidは2.2から対応しているのであんまり気にしなくてもいいかも。駄目ならメールで。

iOSの場合、メール投稿の場合でも<a href="mailto:[email protected]">メールアドレス</a>のようなものからは画像が添付できないらしい。画像閲覧アプリからやってもらうしかないようだ。MMSならいけるっぽいけど容量制限がある。
この辺の話は『Shin x blog』の「iPhone MMSから送信されたメールを処理する際の注意点」と「iPhone Safariから画像を投稿する方法」が分かりやすかった。
iOS 6でどうなるのかは知らない。

「もっと見る」みたいなボタンを押してコンテンツを継ぎ足していくタイプのUIは、そこから移動してブラウザの戻るボタンで戻ってきたときのことまで考えて作らないといけない。
戻ってきたらまたボタンを押して読み込むところから始めさせてはうんざりされる。
今回はsessionStorageを使うことで対応した。もっと他にいい方法があるかもしれない。

あんまり情報がなかったけど、POSTなフォームのサブミットボタンを押したらZipをダウンロードさせる場合、Androidブラウザだとほぼ確実に失敗するっぽい。GETなら大丈夫のようだ。
他にもファイルのダウンロードについては色々と問題があるので、『DigiBlog』の「Android and the HTTP download file headers」を読んでおくといいかも。
Opera MobileやDolphin HDでは上手くダウンロードできるので、それを提示するという手もある。

他、Androidのバグについては検索すればだいたい出てくる。日本語の情報も多い。

When can I use…、お世話になっています。

4つ全部PhpStormを使って作ってる。

困ったら検索しましょう。