EVOWORXの新規事業ワンコライフマーケティングとは？
サイト作成時の確認事項（2017/10/25時点）
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以降のサポート終了 |
- XPやVistaも含めたいと言われたら、まず 古いバージョンのInternet Explorerのサポート終了 を見せて、IE9以下にコンディショナルコメントなどでWhat Browser?へのリンクを表示。それでもダメなら個別対応で…
- Firefox Quantum ※Firefox 57〜
- エンジン始動！ Firefox Quantum がいよいよベータ版と Developer Edition に登場
- Firefox の延長サポート版 (ESR)
スマートフォン
| OS | ブラウザ |
|---|---|
| iOS | 現行バージョン（iOS 11）+前バージョン（iOS 10）のSafari |
| Android | 4.4以降のChrome |
- iOSのシェア
- Androidのシェア
- Can I use… Android 4.2-4.3 browser VS 4.4 browser
- Google、古いAndroid向けWebViewパッチ打ち切りについて説明
- Microsoft、ついにWindows Phoneの終了を確認
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 |
- DEVICE METRICS
- SCREEN SIZES
- mydevice.ico
- The Ultimate Guide To iPhone Resolutions
- iPhone X の Safari における Web コンテンツの表示
<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（連携するアカウント確認）
参考
- <head> cheatsheet
- Google検索エンジン最適化スターターガイド
- Open Graph マークアップ
- Facebook シェアデバッガー
- About Twitter Cards
- Twitter Card Validator
解析タグ
Google Analytics、Google Search Console、Googleタグマネージャなど適宜確認してください。
IP除外などGAのビューフィルタの設定は別の機会に。
その他
- Webフォントの使用可否。Font Family指定。アンチエイリアスの設定（Macのみ）。
- リセットCSSの選定。Normalize.css、ress、etc…
- あるいはフレームワークの選定。Bootstrap、UIkit、MDL、Zurb Foundation、etc…
- CMS？WordPress、Movable Type、etc…
- ドメイン周りの設定（略）
- サーバー周りの設定（略）
- Editorconfigの設定。
- sitemap.xml
- ツールの確認。npm、gulp、sass、babel、webpack、etc…
- 納品方法。（大事）
納品前に。
スピードテスト
画像圧縮
とりあえず今思いつくのはこんな感じ。
思い出したら随時追記していきます。
