LoginSignup
0
1

More than 3 years have passed since last update.

マイコーディングルーティン

Posted at

はじめに

制作会社を通して作業前に確認する必要があることを備忘録として簡単にまとめました。

スケジュール・仕様確認

・納期
・サーバーは自社で作成 or 提供か
・サイトマップ,ディレクトリ構造
・新規or既存サイトの有無(記事の流用もあるのか)
・更新の可能性のある場所
・動的、静的、フォームの有無、その他ソース提供
・システム導入(スクラッチ or  WP or その他CMS)
・ブラウザ対応どこまで
・インクルード
・ブレイクポイント(間の調整)
・ディスクリプションなどのメタタグ
・SNS アカウント、ogpタグ
・デザイン校了しているか

デザイン

・画像書き出し(pc,sp用)
・フォント設定(できれば特殊なフォントはなしにしてもらう。)
・可能な限りないフォントはDL。有料だったり、どうしてもない時は相談・もらう。
 ・サイズ、テキスト関連(フォントサイズ、字間、太さ、フォントの種類と有無)
・画像(Img)なのか背景(bg)にする部分と画像の形式
・サイトの動き、アニメーション(ボタンや各セクションのアニメーション)

コーディング

・コーディングルール(インデント、命名規則、レスポンシブ、SEO、アクセシビリティなど)
※READMEを用意しておくと共有が早い
・画像圧縮
・ SEO,アクセスビリティ( role属性入れる)
お客さん側で更新するもの(newsやblog,商品登録系)で文字数が長くなったときのレイアウト調整も視野に入れる。

◎複数で作業することも考えて

・ルール共有(css/FLOCCSS+BEM,gulp)
・FTP接続情報共有
・git ・・・ github/gitrub /backlog
・画像圧縮
・ディレクトリの作成(jsやcss,htmlファイルの作成の方法)
・ボタンのホバー、クリックイベント
・静的と動的
※工数やサイトの規模などによりルール変動あり。

チェック

・デザイン確認(jpgで書き出したものやperfectPixel利用)
 ※できたらデザイン作成者にみてもらう
・レイアウトやアニメーションのチェック
・ソースチェック(html/css検証サイトで確認)
・更新性のあるテキストや画像のレイアウトチェック
・各種リンクチェック
・各ブラウザ、タブレット、スマホでの確認
・アニメーションやjs部分の挙動確認

さいごに

適宜気づいたことや仕様の変更などあれば追記・修正します。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1