PRODUCT INTRODUCTION 製品紹介

文書型

  • HTML5+CSS3

文字コード

  • UTF-8

動作検証ブラウザ

  • PC(パソコン版)
    • Windows
      • Internet Explorer 11.x以降
      • Google Chrome 最新版
      • Mozilla Firefox 最新版
    • Mac OS X
      • Safari 最新版
      • Google Chrome 最新版
      • Mozilla Firefox 最新版
  • SP(スマートフォン版)
    • iOS
      • iOS 7.x 以降の標準搭載ブラウザ
    • Android
      • Android 4.1 以降の標準搭載ブラウザ

CSS

  • フレームワーク
    • Bootstrap
  • 拡張メタ言語
    • Sass

フロントエンドで使用するライブラリ

  • jQuery
  • jQuery Mobile

レイアウト

  • デバイスの画面幅に反応してレイアウトが変化する「レスポンシブレイアウト」とする

レイアウトを変化させる画面幅

  • 992px
  • 768px
  • 320px

サポートモニターサイズ

  • ヨコ:320px 〜 1,024px

フォント

  • font-family: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

ページ容量のめやす

  • gzip後200KB以下

ページの読み込み速度対策

  • Webフォントを使用する
  • ロゴやアイコンなど、変更の可能性が低い画像群1ファイルにして、CSSスプライトを使用して画面に表示する
    • スプライト画像:ヨコ1,024xタテ1,024以内
  • ナビゲーション、ボタン類はHTML+CSSで実装する
  • 外部CSSはlinkで読み込む(@importは使用しない)
  • CSS expression は使用しない
  • 画像容量を最適化する(Google Page Speedでエラーが出ないこと)

マークアップ

  • ページタイトルをh1に指定する
  • keywords / Description
    • 空のままとする
  • チェックボックス、ラジオボタン
    • キャプションにLabelを指定する
    • Selectや他のInputもLabelとセット指定する
  • HTMLブロックはコメントで区切る
    • 開始と終了が分かれば良い。命名はアルファベットで。
      • <!-- HOGE BLOCK -->
      • <div>
      • </div>
      • <!-- /HOGE BLOCK -->

グリッドシステム

グリッドシステム


レスポンスのパターン

2カラムページ → サブカラムを下に移動する

レスポンスのパターン


サムネイル一覧 → 画像サイズの拡縮、並べ方を変更する

レスポンスのパターン


グローバルナビゲーションなど → トグルナビゲーション

レスポンスのパターン


都道府県リスト → トグルナビゲーション

レスポンスのパターン


1カラムページ → リキッドレイアウト(表示要素はそのまま)

レスポンスのパターン


テーブルレイアウト → リキッドレイアウト(表示要素を減らす)

レスポンスのパターン


標準アイコン(Webフォント)

  • メニュー
  • メニュー
  • 検索
  • 一覧:リスト形式
  • 一覧:タイル形式
  • 並べ替え
  • 昇順
  • 降順
  • 次のページなど
  • 前のページなど
  • 上位階層へ/折りたたむ
  • 下位階層へ/展開する
  • メールアドレス
  • パスワード
  • ショッピングカート
  • 未達成
  • 達成
  • 手続き中/更新中
  • クレジットカード
  • 人を表す
  • 人を追加する
  • チーム/サークル/大勢
  • 日付
  • 日付+時間
  • 場所
  • チェックイン
  • GPS起動中
  • 写真のアップロード
  • YouTubeの動画を貼り付け
  • 写真
  • 動画
  • 拡大表示
  • 書く
  • 編集する
  • 日記
  • コメント
  • 掲示板
  • 評価
  • 評価
  • お気に入り
  • お気に入り
  • Good
  • Bad
  • Good
  • Bad
  • 更新
  • 追加
  • 削除
  • 削除
  • 停止
  • ごみ箱
  • 閲覧制限付き
  • 設定
  • 設定
  • パソコン
  • タブレット
  • スマートフォン
  • 電話を掛ける
  • Facebook
  • Twitter
  • Google+
  • ヒント/ヘルプ
  • タグ付けする
  • グラフ表示/成績
  • Cloud/サーバー
  • アップロード
  • ダウンロード
  • ログイン
  • ログアウト
© Synapz Inc.