copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2017/10/25

サイト作成時の確認事項(2017/10/25時点)

Written by Shunsuke Okoshi

  • HTML
  • Browser
  • device

INDEX

    EVOWORXテクニカルディレクターのオオコシです。

    設立10周年のタイミングで開発者ブログを開始してみたわけですが、
    まずは備忘録的にサイト作成時にチェックしておくべきポイントをまとめてみました。

    推奨環境/対象ブラウザ

    まず、特にクライアントからの指定がなかった場合の推奨環境について。
    Firefox QuantumとOS XのSafariの扱いがどうなるかというところ。
    よほどのことがない限りIE10以下は含めたくないです。(費用については要相談)

    browserl.istだとこんな感じ。
    last 4 versions,FF ESR,not Safari < 9,not ie < 11,not Android < 4.4,not iOS < 10

    2016年のCSS Nite(Coder’s High)ではポケモンGOに合わせとけばOKって言ってたけど大体そんな認識です。
    最近だと何を例に出すべきなのか…。

    PC

    OS ブラウザ
    Windows XP 対応なし 2014/4/8サポート終了
    Windows Vista 対応なし 2017/4/11サポート終了
    Windows 7/8/8.1 Internet Explorer 11、Chrome最新版、Firefox 最新版/ESR
    Windows 10 Edge、Internet Explorer 11、Chrome最新版、Firefox 最新版/ESR
    macOS(10.12以降) Safari最新版、Chrome最新版、Firefox 最新版/ESR
    OS X(10.11〜10.9) Safari9以上(OS X 10.9.5)、Chrome最新版、Firefox 最新版/ESR
    OS X(10.8以前) 対応なし Chrome50以降のサポート終了Firefox49以降のサポート終了

    スマートフォン

    OS ブラウザ
    iOS 現行バージョン(iOS 11)+前バージョン(iOS 10)のSafari
    Android 4.4以降のChrome

    Media Queries

    弊社では割とざっくりPC/スマートフォンの2パターンが多いです。
    768以上か768未満か。

    iPadをPC表示にしたいときは
    <meta name="viewport" content="width=device-width">
    body への min-width: (PCコンテンツ幅) の併用で。

    emで分岐しろっていう記事も見かけるんですが、日本でのiPhoneシェアを考えるとApple製品基準で区切るのがよさそうです。

    iPhone Xの全画面表示の constant(safe-area-inset-top) あたりはまだ試してません。
    「全画面がいいですか?」ってお客さんに聞いたら当然「全画面がいいです」って言うんだろうなぁ。

    device-width(Mobile/Tablet)

    端末 px
    iPhoneSE(縦) 320px
    iPhone 6s/7/8/X(縦) 375px
    Google Pixel(縦) 411px
    iPhone 6s/7/8 plus(縦) 414px
    iPhoneSE(横) 568px
    iPhone 6s/7/8(横) 667px
    iPhone X(横/標準モード) 724px
    Google Pixel(横) 731px
    iPhone 6s/7/8 plus(横) 736px
    iPad mini、iPad(縦) 768px
    iPhone X (横/viewport-fit=cover) 812px
    iPad mini、iPad(横) 1024px

    device-width(PC)

    端末 px
    MacBook 12、MacBook Pro 13、Surface 2/3 1280px
    MacBook Air 11、Surface 1366px
    MacBook Air 13、MacBook Pro 15 1440px
    MacBook Pro 15 Retina 1680px
    iMac 27、Thunderbolt Display 2560px

    <head>

    • DOCTYPE(HTML4ってことはないと思うけど)
    • charset(Shift_JISは滅びず…。)
    • meta keywordは不使用。
    • meta descriptionは160字以下で重複させない。(諸説あり。出典:検索エンジン最適化(SEO)クイックチェックシート
    • link rel="canonical"link rel="prev"link rel="next"の設定
    • viewportは基本<meta name="viewport" content="width=device-width">(ただしiPhoneXに注意)
    • IEのおまじない。 <meta http-equiv="x-ua-compatible" content="ie=edge">
    • html5shiv(もう要らない?)
    • Favicon、apple-touch-iconの設定。
    • OGP(appID取得可否も含め。デバッグでエラーになるけど最近はプラグイン置かない場合は取得してないです。)
    • Twitter Card(連携するアカウント確認)

    参考

    解析タグ

    Google Analytics、Google Search Console、Googleタグマネージャなど適宜確認してください。
    IP除外などGAのビューフィルタの設定は別の機会に。

    その他

    • Webフォントの使用可否。Font Family指定。アンチエイリアスの設定(Macのみ)。
    • リセットCSSの選定。Normalize.cssress、etc…
    • あるいはフレームワークの選定。BootstrapUIkitMDLZurb Foundation、etc…
    • CMS?WordPressMovable Type、etc…
    • ドメイン周りの設定(略)
    • サーバー周りの設定(略)
    • Editorconfigの設定。
    • sitemap.xml
    • ツールの確認。npm、gulp、sass、babel、webpack、etc…
    • 納品方法。(大事)

    納品前に。

    スピードテスト

    画像圧縮

    とりあえず今思いつくのはこんな感じ。
    思い出したら随時追記していきます。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View