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

Category : Memo

ここ最近でサイトを作ったときに思ったことのメモです。
個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ(結局なかったことにされたけど)、今やってるのが1つ。
昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。

昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。

全般

  • HTML5 Boilerplate は丸ごとというより必要な部分だけ抜き出して使うと便利。
    「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。
  • 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。
    (対象がいわゆるモダンブラウザの場合)
  • Sass 3.2 から使える Placeholder Selector は凝ったことしなくても普通に便利。
    ただし IE9 以下のセレクタ数制限には注意。
  • IE8 以下の古いブラウザの場合、CSS に関してはレイアウト崩れが起きない、ちゃんと情報が伝わるなら無理して新しいもの(border-radius とか)は適用しない。仕事でやったサイトがそれだったけど、話し合って納得してもらえた。
  • Canonical URL を link 要素で指定している場合、それが明らかに不正なもの(http:/// のみなど)であっても、Google のウェブマスターツールは教えてくれない。
    これについては進展があったらまた別の機会に書くかもしれない。
  • EUC-JP のサイトはめんどくさい。
    どこがどうと言うほどではないけど、ときどき文字コードで引っかかることがある。

外国語(主に中韓)

  • 多言語サイトは大変っていうかめんどくさい。
  • 韓国語使用者向けのサイトを作成するときは Working with Korean が参考になった。
  • 中韓向けサイトでの font-familyArial, sans-serif にしておくと使いまわせて楽。要は特に指定しないということ。
  • 「それじゃあ Windows でフォントがしょぼい。メイリオみたいに Vista から入ってるのないの?」
    ある。
    中国語は 微软雅黑(Microsoft YaHei)、韓国語は 맑은 고딕(Malgun Gothic) がそれにあたる。
  • 中国語のフォントは What are the Mandarin Chinese web safe fonts?[chinese mac] Fonts を参考にした。
  • 韓国語のフォントについては前出の Working with Korean に載っている。
    Wikipedia のハングルの書体も参考になるかも。
  • どのフォントを指定するかについては、それぞれの国の大きなサイトを見るのもいい。
    中国なら 百度 と、そこから辿れる新聞社のサイト。
    韓国なら Yahoo! KoreaNAVER、そしてそこから辿れる新聞社のサイト。
  • 多言語サイトなら UTF-8 で作っておくと悩みがちょっと減る。
    最初に中国語サイトを GB2312 で作ってしまって(そのときは日中のサイトしか予定がなかった)、後から韓国語や東南アジアの言語が増えてきて中国語サイトだけ文字コードが違うという、どうしようもないことになった(後に修正)。
  • 文字コードやフォントのことについては英語のサイトは割と楽だけど、文字の大きさとかは気を遣わないといけない。
  • 右から読む言語のサイトがなくってよかったと心の底から思った。
    その手のサイトを作るときの注意点は U-Site の国際的なユーザビリティを読むのがいいと思う。
  • 中国向けサイトは金盾の影響もあって SNS 展開をしているサイトだと難しい。中国ローカル SNS のことも考えないといけない。
  • 中韓ともに IE のシェアが非常に高い。
  • 中国はブラウザシェアがちょっと特殊なので、一応そのへんも考えること。
    Maxthon360 Safe Browser あたりの人気が高いみたい。どちらも IE コンポーネントブラウザ。

Android, iOS のスマートフォン

  • レスポンシブなサイトの場合はモバイルファーストな感じで作るといいと思ったけど、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:post@example.com">メールアドレス</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 を使って作ってる。
  • 困ったら検索しましょう。

他にもあった気がするけど、とりあえずこんなところで。
また何かあったら書きます。

Leave a Reply