Instagramスマホ画面CSSレイアウト:グラフィックデザイナー向けTweetPocketグラフィックデザイナーはペーパーレス化の流れにより、紙からデジタル画面に関わることが多いのではないでしょうか。今回は最低限の配慮レベルではありますが、贅沢な環境が整っている現在において求められる、「デザイナーとエンジニア間の温度差を減らせる」WEBページレイアウト作りを紹介致します。枠(要素)取り紙でもWebでも同じです。レイアウトをするときは大きなカテゴリから小さいコンテンツまでを枠(以後要素)取りしていきます。「html」「body」タグの要素は、全体を包括する要素として存在しています。Webコンテンツはインタラクティブ(双方向)に利用者が操作することが多いので、サイズを指定したレイアウトや装飾を行う各要素に対しては、名前(idやClass)を付けておく必要があります。idはレイアウト構成項目ごとに別の名前で設定し、classは繰り返し使う装飾表現のセットとして使いまわします。同じ名前のidは1ページ中に1回しか設定できません。(「特集コーナー」など同じ項目名が複数存在することはないとおもいますが)※「hoge~」部分は、意味はなく、仮置きの言葉です、自身で適切な言葉に置き換えてください。名前欄によくある「○○太郎」と同じ使用目的。名前つけをしなくてもdivタグとして要素自体は見えない形で存在していますが名前つけをしていないとCSSによる装飾に対応できません。利用者の性別に応じて特定の名前を付けた広告枠の表示/非表示を動的に制御する場合にも使用します。「枠取り」「空白のデザイン」「コンテンツ優先度」を設定することは紙面を作る場合と変わりないのです。単純な画像や文字組の配置であればそのまま実運用してしまっても問題ないですが、デザイナーに立ちはだかるのは、「タブ」や「カルーセルパネル」などの機能です。実運用を考慮して正しい要素を配置(正しいマークアップ)をしていきましょう。表現は、画像イメージで作り上げるのは簡単ですが、コーディングする際HTMLで再現出来なければ絵にかいた餅です。実運用と同じ制御下のパーツ構成で作る必要があります。どの部分が押されたら画面を書き換えるアクションが起こるのかを意識する必要があり、UI情報デザイン上では押せる部分と押せない部分のわかりやすさは、画面イメージを製作するデザイナーは意識する必要があります。文字など全体設定を入れておくとりあえず、CSSファイルの一番上に下記をコピペしておきましょう。100%;}重要)「全角スペース」がソース中に含まれると、正しく動きませんCSSによるオブジェクトの座標操作いよいよデザイナーのスキルを発揮する工程に入ります。横並びにしたり回り込んだりはCSSでの設定が必要です。CSSの命令文やソースをは覚える必要はありません。CSSを使える人でも使用頻度の少ない命令文はすぐ忘れてしまうそうですので、ソースの横にコメントアウト(/*機能説明*/)で機能説明を書いたものをコピペして手軽に使っていきましょう。重なり順序の設定*/最後に以上の基本的な設定だけでも数値を調整して想定レイアウトの再現に一部活用出来ると思います。実運用ではブラウザ依存や機種依存など、またまだ補う設定が必要ですが、エンジニアの方になかなか伝わりにくい要素間の空き具合だけでも最低限伝えられるのではないでしょうか。ペンやマウス、illustratorから、HTML/CSSに持ちかえて、ダイレクトにインタラクティブ性がある絵が描けたら効率的ですね。このページは今後も修正と追加をしていきます。次回も情報設計に関係した話題をお届け致します。デジマースのネモトでした。