🎨

自己流 WebDesign 5箇条

2016/12/15に公開

色々な思想はあると思うけど、自分がコーディングするときに気を付けたり、発注する際にお願いする事など。
命令形になってるけど、ほぼ自戒。

タグの意味を知れ
position は使うな
動作以外の目的で JavaScript は使うな
ラベル等に画像を使うな
CSS をベタ書きするな

1. タグの意味を知れ

最も忌避される事例はテーブルレイアウトだろう。
「ホームページ」百家争鳴な時期においては Table タグを利用したデザインが主流だった。
かくいう自分もお世話になったわけだけど、そもそも Table はデータを入れるものだ。
それ以外は使うべきではない。

dl,dt,dd タグもよく横並びのために使われていたりするけど、本来はデータ定義につかうべきものだ。
div タグによる隙間作成もやめてほしい (margin,padding で済むならそれでやるべし)。
タグはデザインのためにあるわけではないのだ。

見た目が良ければいい？
もちろんそれもありだが、検索順位とプログラマからの評価は期待しない事だ。

2. position は使うな

後からデザインを調整するときに泣かされるのがこれ。
画面上の表示位置と、 HTML 上の位置が異なるため、なかなか直すのが大変だ。
ブラウザのデバッグツールで追跡すればすぐに位置は判明するが、あっち行ったりこっち行ったりして忙しいのはなるべく避けたいところ。

今ではそうでもないけど、ブラウザ間の微妙な誤差により上手く表示されないことも多々。
JavaScript で動作を追加する際なんかも、しばしば調整が手間取る原因になる。

[float+clear] もそれはそれで、 after 擬似要素の問題を孕むけど、 position よりかは HTML 上で追跡しやすいと思っている。

もし利用するならば管理台帳を作った方がいい。
メンテ時にも役立つし、どれだけ position に依存しているかも見えるだろう。

3. 動作以外の目的で JavaScript は使うな

Angler に喧嘩を売るつもりはないけど、 HTML 上に存在しないのに画面表示されている要素のデバッグは面倒な場合が多い。
HTML/CSS やサーバサイドで済むことはなるべくそこで終わらせるのが無難。
ただ、遅延ロード目的ならば、ユーザ体験向上のために必要と思っている(もちろん何でもかんでもやればいいということでもない)。

特にコーディングはデザイナがやって、動作はプログラマが並行して作成して後から合わせる場合なんかは色々な不具合を産みやすい。
デザイナが DOM 読み込み後に JavaScript で高さを調整する仕組みを導入していたために、そのページに画像カルーセルを実装したら取締役の写っている画像が画面外にぶっ飛んでいった、なんてこともあった。
それはそれで美味しいが、納品はできない。

4. ラベル等に画像を使うな

見た目は画像の方が断然良いのはわかるのだが、メンテナンス性が下がってしまう。
文字だったら修正も追加も楽ちんだ。
ブラウザ上でコピペもできる。
SEO 対策的にも文字の方が良いという話も (alt があれば問題ないという意見も聞くが、 Google の中の人じゃないので不明) 。

コーポレートサイトのリンク変更作業をした際、サイト自体は別な業者が作ったものだったためアイコンなどを作成した ai データがなく、たった数文字編集するためにサイト内全部のボタンを差し替えるという苦行を強いられたことがある。
さらに CSS の調整も必要になったため (background-image,:hover)、費用対効果も疲労度も最悪だった。

5. CSS をベタ書きするな

デザインの記述はなるべく分散させず、一つのファイルに集約されていると後から編集しやすい。
タグには data-* なども含め色々なエレメントを書く場合があるし、なるべく頭でっかちにしない方が可読性も上がる。
主役はタグの中身なのだ。

jQuery3 あたりからはタグに直接書かれた display:none を show() で表示できない、なんてこともあったりする。