モバイルサイトワークフレームデザイン備忘録

    ずっと前からやろうと思っていたモバイルサイトのデザインをようやく実行に移せました。

    想定したサイト

    ・コミケなど、お買い物の管理リストなどを管理するサイト

     

    今回はとりあえず見た目の大枠のフレームワークを作ってしまおうと計画しました。

    以下のような仕様をイメージしました。

     

    仕様

    1. iOS(safari), Android(標準ブラウザ,Chrome), WindowsPhone(IE Mobile)で表示が均一になる
    2. 画面が縦横の状態どっちでも表示が均一になる
    3. jQueryMobileを使わないで独自実装で動作を実装し、軽量化を目指す
    4. マークアップはHTML5の方式で実施
    5. CSSのスタイルはなるべく新しいものを取り入れ、FlexibleBoxやAnimationを使ってシンプルにレイアウトや装飾を行う
    6. レスポンシブデザインを視野に入れるものの、まずはフレームワークを完成させるためにviewportはJavascriptで計算させる(viewport固定式モバイルサイトデザイン)
    7. ナビゲーションメニューは画面の領域を広くとるため、メニューボタン押下でサイドメニューをスライドして表示するとき、見られるようにする(某有名SNSっぽい挙動を目指す)
    8. HTML5系のAPIを積極的に取り入れる(WebStorage、FileAPI、WebWorker、オフラインアプリケーションを採用)
    9. 文字のデザイン統一感を出すため、Googleの日本語Webフォント「Noto Sans Japanese」を採用
    10. 画面遷移はオフラインアプリケーションとするので、URL変化による画面遷移ではなく、Javascriptによる動的な画面入れ替えを実施することで機能を実現する
    11. SNS的な要素を取り入れ、「~さんから通知が来た」場合は「通知」という文字をメニューボタンの下に表示させ、CSS3アニメーションで点滅できるようにする

     

    以下、備忘録です。

    【備忘録】作っていて嵌ったこと
    ・モバイルブラウザにはまだまだベンダープレフィックスが残っている(-webkit-)
    ※今回、iPhone / iPad にきっちりデザインを合わせようと思って、いじくった結果、登場してまだ年数の浅いプロパティなどはベンダープレフィックスをつけたプロパティ名でないと効かないところにはまりました

    ・IE MobileのUserAgentの文字列判定条件の作り方
    ※「MADOSMA」というWindowsPhone端末のIE Mobile11でviewportのテストをしたときにUserAgentが「なんでもござれ」状態でして、判定条件をどうやって「唯一無二」のものにできるかではまりました

    ・iOS8系列の端末のSafariでは「font-size」の大きさを変えるアニメーションができない
    ※これ、アニメーションしない事象がなぜ起こっているのか原因をうまく突き止められませんでしたが、できないというのは間違いないです

    ・viewportはJavascriptで計算させると初回表示時に不当に拡大された状態で表示されることがなくなり、全体が見えるようになるが、固定デザインとなるため、レスポンシブデザインを視野に入れている場合は別の解決策を模索する必要がある

    ・Webフォントの導入は簡単で、オフラインアプリケーションのマニフェストファイルにしっかり書き込んでおけば、2回目以降のロードは軽くなり、パフォーマンスが上がり、文字デザインの統一が果たせる

    ・CSSファイルはカラーが関係しているものと、レイアウトが関係しているものを分離することで効率よく管理できる

    ・viewportの値を決めるためのJavascriptの計算はロードイベント時メソッドではなく、最初にページが読み込まれた時点の流れで処理させる。また、その計算を行うJavascriptのソースは<body>タグの閉じタグの直前くらいに配置してやれば、DOMが大方できている状態になるので都合が良く、viewportの値をいじることにより画面が「一瞬ずれる」動きがなく、自然に見えるので良い

    ・メニューや通知内容などは、画面本体のコンテンツとは全く別物になるようレイアウトし、画面の外側に隠しておくことによりスムースなアニメーション動作への備えができる。また、UIは「親指でも触れるくらいのパネルの大きさ」を意識し、「どういうことをするのか連想させるアイコン」を採用することで、ユーザのやりたいことを「直観的」に操作できるようにするのが良い(誤操作や勘違い防止につながる)

    作ったサイトは以下の場所にあります。

    http://kimswebinfo.html.xdomain.jp/webdevelop/comiketsys/index.html

    ※モバイル端末でアクセスしてください(PCだと若干デザインが崩れます)

     

    以下、参考にしたサイトなどです。

    GoogleWebフォント
    http://11neko.com/font-2/

    Viewportの動的計算
    http://d.hatena.ne.jp/festiva1300/20121122/p1

    使わせていただいたアイコンのサイト
    http://hankodeasobu.com/

     

    次回までの課題

    1. 未実装なもの
      ・オフラインアプリケーションの処理
      ・WebStorage利用の設定保存処理
      ・Workerによるマップ描画処理
      ・WebStorage利用のリストデータ保存・更新処理
    2. 検討すべきもの
      ・データとそのモデル(設定・リスト)
      ・ファイルのインポート処理

     

    似たカテゴリーの投稿