transitionalだったり色々な制約があってfloat使ったおっさんです。宮城県仙台市にてWebのちからで様々な情報にアクセスしやすくし、様々なパフォーマンス改善をしちゃったりする時にはWebディレクター、時にはWebプランナー、時にはWebエンジニア、時にはWebデザイナー。世界中の「コーダー」の味方、ma-sanです。Web業界で働く皆さんはコーディングしてますか?僕はまったくしません!!しかし、そんなおっさんにも世の中は厳しいです。デザインの通りにしなければならない、よしなにしなければならない、なんてことはたくさんあります。かなしい!!最近ではXDの出現でPCとSPのインタラクションがどうのとか、比較的この手の悩みは解決しましたが、今もなお、コーディングが苦手〜という方にちょっと意識すると変わるかも、ということを紹介します。いうわけで本日のお話です。コンテンツ(ページ内リンク)1.サイズ(マジックナンバー)は必ず変わる前提とする2.位置(position)も変わりまくる前提とする3.余白は機能として捉える4.印刷対応5.禁止事項を決めるまとめ:変わり続ける、を意識すること1.サイズ(マジックナンバー)は必ず変わる前提とするボタン、テキストサイズ、ボックス要素、ナビゲーションやメニューの数などは全て変わります。紙媒体とも違いますし、環境も変わるため、絶対このサイズ、というものは存在しません。あるのはデザインデータ上ではきれいに収まっていたテキストでしょうか。してしまう、なんことはよくあります。フォントサイズが変わっても狼狽えない。行数が変わるだけで崩れるのは論外。数値を設定するときは「変わらない前提」ではなく、「変わる前提」としてください。2.位置(position)も変わりまくる前提とする左側に寄せていた画像をやはり右側に置きたい、なんていうのは序の口です。縦並びにしていた要素がやっぱり横並び、なんてこともよくあります。あるのはPCでは2カラム、3カラムになっているボックス要素がSPのときは1カラムになっているとかもありますね。画像とテキストの配置、アイコンの配置などに気をつけて、可変的なCSSを前提としてください。3.余白は機能として捉えるこれは僕も苦手だったり、よくデザイナーさんに指摘されてきたのですが、余白というものを軽視してはいけません。余白ひとつで読みやすさだったり、区切りだったり、コンテンツの設計に大きな役割をもっています。margin、padding、line-height、ちゃんと見ましょう。時間が掛かるという前提を持って・各OS(環境)を定義しましょう。これをしてないとあとで泣きをみます。いっても、最近では大きな問題が発生しなかったりしますが、この手の話をするとおじさんは無限にお話しちゃうので割愛。意外と指摘される印刷対応です。これは事前に話をしてないと、よく指摘されます。・ページ全体が最低限表示されるようにします。・ブラウザにより挙動が異なる事項(背景画像の印刷有無など)は許容ください。・微小な行間の違いなど、ユーザーの情報取得を妨げない程度の違いは許容ください。・レスポンシブ化に伴い画像をCSSの背景指定にするケースが出てきますが、その場合、背景画像をデフォルト非表示にしている場合印刷に含まれません。みたいな事柄をきめておきましょう。5.禁止事項を決める・Git(バージョン管理)を使わないのは許さない・iFrame要素は使用しない。・Flashは使用しない。・style属性を使用してHTMLソースに直接CSSの記述は行わない。・不要なJavascriptの記述はおこなわない。・SSIは使用しない。・XHTMLによる記述は禁止とする・commonファイルは弄らない・ライブラリを追加しない・実体参照を使うべき箇所で使わない・影響範囲を調査しないで改修しないざっと思いついたことですが、事前に禁止事項を決めておかないと、自分以外の方が触ったりしたときに大問題が発生したりします。・共通と思われるパーツを確認・作成していく。・共通パーツは特定の位置にしか使えないような構造にはしない。例:カルーセルスライダーなど5.セルフチェック・どんなチェックをするのか想定しておく・クライアントによってガイドラインが存在するので確認という感じでしょうか。中心に企業のWebマーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。「Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。