ブログ

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

Shunsuke Okoshi
Lead Engineer / Director

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.css、ress、etc…
  • あるいはフレームワークの選定。Bootstrap、UIkit、MDL、Zurb Foundation、etc…
  • CMS？WordPress、Movable Type、etc…
  • ドメイン周りの設定（略）
  • サーバー周りの設定（略）
  • Editorconfigの設定。
  • sitemap.xml
  • ツールの確認。npm、gulp、sass、babel、webpack、etc…
  • 納品方法。（大事）

納品前に。

スピードテスト

画像圧縮

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