みやのまるがゆく。

物忘れが激しい私のためのメモ

サイト作成時に確認しておきたいこと

Webサイトをまったくのゼロから新規作成するとき、
既存のサイトに新たなコンテンツを追加したいとき、
既存のサイトのサイドコンテンツとして新しく作り始めるとき
そんなときに確認しておきたい事項のまとめ。

対応デバイス・ブラウザ・バージョン

Webサイトの見た目と挙動、ここまでは担保しますよ、のお約束。
IEを対応しなきゃいけなかった時代は、地獄を見るか見ないかを大きく左右するテーマでした。
君のことは忘れないよ・・・トラウマとしてね・・・

そうは言ってもみんな大好きiOSでも出会いたくないバグはちょこちょこ見られます。
このエラーは対象外のブラウザでのみ起こるので、対応しません!と言い切るためにもきっちりと明記しておきたい!です!

開発環境

  • Sass、ejsなどが使えるビルドシステム使っていい?

  • jQuery等の便利なパッケージ使っていい?

  • CMS使っていい?

  • え?HTMLとCSSとオリジナルのJS(とその他言語)だけでこれ作るんですか???本気?

今後のスケジュールが大きく左右される瞬間です。
他会社と共同作成時や、制作後にお客様側でも編集する可能性があるときは便利機能に諸々NGが出ることがあるので要チェックです。

スマートフォン対応の方法

SP版サイトを作成後にPC版を展開、という流れもちらほら見られますが
まだまだ主流はPC版→SP版。
SP版をどのように作るかを決めてもらいましょう。

  • ブレイクポイントで対応
    指定したピクセル数以下ではSP版レイアウトを表示、といった感じ。
    主にCSSのメディアクエリを使用
    解像度で判定するので、なかなかないとは思いますが
    バカでかい解像度のスマホでアクセスするとPC版が表示される可能性はあります。逆もしかり。

  • ユーザーエージェントで対応
    アクセスしたデバイスで判定。JSが必要。
    表示内容にエラーが許されない銀行さんや、公共機関におすすめの判定方法です。
    SPでアクセスしたのにPC版が表示されて、大事な項目が見えないまま手続きを進めてしまった、というのは困りますから・・・(恐怖

head の中身

全てを制作側主導で設定してOKなのか、それとも

  • 決まっているmeta設定がある

  • 絶対に読み込まなくてはいけない共通CSS、JSがある

  • 新規に作成したCSS、JS等が開発環境的に読み込めるのか
    (無理なら共通CSS等に追記して作成する流れ)

このあたり、作成終盤になって出てくるとかなり悲惨です。
とくに共通CSSがあとから出てくると地獄。本当に地獄

body の中身

  • テンプレートはあるか
    既存のコンテンツに追加制作の場合は特に確認しておきたい項目。
    あとからごそっと修正する羽目になると涙ちょちょぎれちゃう。ほんとに。

  • 絶対パス or 相対パス

  • ID、クラス名の命名規則
    (ルールがあっても有耶無耶になる事例多数・・・)

  • コンテンツの最大幅
    SP対応と重複な気もしますが、最大幅を決めておかないと無限大にコンテンツが広がってしまうので、横長ブラウザで見たとき用に決めておくのが無難。

バージョン管理やタスク管理

  • Git使う?どこの使う?
    gitlabや backlog、もし決まっているのならそこを。アクセス権もわすれずに。

  • テスト環境
    お客様側で持っているのか、こちらで用意するのか。
    お客様に見ていただくまえのテスト前テスト環境として制作側にも一つあると便利ですね。

  • 修正依頼等のタスクはどこで管理?
    git管理と重複するサービスもありますが、redmineやasana、googleスプレッドシートなど、使いやすい場所でもれなく対応できるよう、どこかで一括管理できると安心です。


とりあえず思いついたものを羅列してみました。
また何か思いついたら追記します。
地獄を見ないための参考になりますように・・・