コーディングをするときちょっとだけ意識しておくことで簡単楽ちんになる項目


久しぶりにベタベタなコーディングしたら「flexboxつかうでー!!」とか思ったらHTML4 transitionalだったり色々な制約があってfloat使ったおっさんです。

みなさんこんばんは。
宮城県仙台市にてWebのちからで様々な情報にアクセスしやすくし、様々なパフォーマンス改善をしちゃったりする時にはWebディレクター、時にはWebプランナー、時にはWebエンジニア、時にはWebデザイナー。
世界中の「コーダー」の味方、ma-sanです。

Web業界で働く皆さんはコーディングしてますか?
僕はまったくしません!!

しかし、そんなおっさんにも世の中は厳しいです。
デザインの通りにしなければならない、よしなにしなければならない、なんてことはたくさんあります。かなしい!!

最近ではXDの出現でPCとSPのインタラクションがどうのとか、比較的この手の悩みは解決しましたが、今もなお、コーディングが苦手〜という方にちょっと意識すると変わるかも、ということを紹介します。

というわけで本日のお話です。

1.サイズ(マジックナンバー)は必ず変わる前提とする

ボタン、テキストサイズ、ボックス要素、ナビゲーションやメニューの数などは全て変わります。
紙媒体とも違いますし、環境も変わるため、絶対このサイズ、というものは存在しません。
よくあるのはデザインデータ上ではきれいに収まっていたテキストでしょうか。
デザインデータ上ではぎりぎりまで詰めることによって、一文字二文字改行してしまう、なんことはよくあります。

フォントサイズが変わっても狼狽えない。
行数が変わるだけで崩れるのは論外。

なので、数値を設定するときは「変わらない前提」ではなく、「変わる前提」としてください。

2.位置(position)も変わりまくる前提とする

左側に寄せていた画像をやはり右側に置きたい、なんていうのは序の口です。
縦並びにしていた要素がやっぱり横並び、なんてこともよくあります。
よくあるのはPCでは2カラム、3カラムになっているボックス要素がSPのときは1カラムになっているとかもありますね。

画像とテキストの配置、アイコンの配置などに気をつけて、可変的なCSSを前提としてください。

3.余白は機能として捉える

これは僕も苦手だったり、よくデザイナーさんに指摘されてきたのですが、余白というものを軽視してはいけません。
余白ひとつで読みやすさだったり、区切りだったり、コンテンツの設計に大きな役割をもっています。

margin、padding、line-height、ちゃんと見ましょう。

4.各種環境対応、印刷対応

・検証には時間が掛かる
という前提を持って
・各OS(環境)を定義
しましょう。これをしてないとあとで泣きをみます。

といっても、最近では大きな問題が発生しなかったりしますが、この手の話をするとおじさんは無限にお話しちゃうので割愛。

意外と指摘される印刷対応です。
これは事前に話をしてないと、よく指摘されます。

・ページ全体が最低限表示されるようにします。
・ブラウザにより挙動が異なる事項(背景画像の印刷有無など)は許容ください。
・微小な行間の違いなど、ユーザーの情報取得を妨げない程度の違いは許容ください。
・レスポンシブ化に伴い画像をCSSの背景指定にするケースが出てきますが、その場合、背景画像をデフォルト非表示にしている場合印刷に含まれません。

みたいな事柄をきめておきましょう。

5.禁止事項を決める

・Git(バージョン管理)を使わないのは許さない
・iFrame要素は使用しない。
・Flashは使用しない。
・style属性を使用してHTMLソースに直接CSSの記述は行わない。
・不要なJavascriptの記述はおこなわない。
・SSIは使用しない。
・XHTMLによる記述は禁止とする
・commonファイルは弄らない
・ライブラリを追加しない
・実体参照を使うべき箇所で使わない
・影響範囲を調査しないで改修しない

ざっと思いついたことですが、事前に禁止事項を決めておかないと、自分以外の方が触ったりしたときに大問題が発生したりします。

まとめ

かんたんなコーダーの流れですが1からコーディングするという前提で

1.デザイン全体の確認
 ・id/class 命名ルール(画像も!)
 ・共通化の洗い出し(モジュール)
 ・不明点洗い出し※必須
2.全体のレイアウトを組んでいく
 ・どのようなボックス要素を利用するか
 ・マージン設計(余白など)
3.共通パーツ作成
 ・共通と思われるパーツを確認・作成していく。
 ・共通パーツは特定の位置にしか使えないような構造にはしない。
  例:.header-list、.left-navなど
 ・左寄せ、右寄せなども共通パーツとして作成する
4.独自パーツ作成
 ・他のコンテンツでは利用しなそうな独自のパーツを作成
  例:カルーセルスライダーなど
5.セルフチェック
 ・どんなチェックをするのか想定しておく
 ・クライアントによってガイドラインが存在するので確認

という感じでしょうか。
この途中途中で各項目の問題がでてきたりするので、意識しておきましょう、

現場からは以上です。



あわせて読みたい