グラフィックデザイナーはペーパーレス化の流れにより、紙からデジタル画面に関わることが多いのではないでしょうか。
今回は最低限の配慮レベルではありますが、贅沢な環境が整っている現在において求められる、「デザイナーとエンジニア間の温度差を減らせる」WEBページレイアウト作りを紹介致します。
まずは枠（要素）取り
紙でもWebでも同じです。
レイアウトをするときは大きなカテゴリから小さいコンテンツまでを枠(以後要素)取りしていきます。
「html」「body」タグの要素は、全体を包括する要素として存在しています。
Webコンテンツはインタラクティブ（双方向）に利用者が操作することが多いので、サイズを指定したレイアウトや装飾を行う各要素に対しては、名前（idやClass）を付けておく必要があります。
idはレイアウト構成項目ごとに別の名前で設定し、classは繰り返し使う装飾表現のセットとして使いまわします。
同じ名前のidは1ページ中に1回しか設定できません。（「特集コーナー」など同じ項目名が複数存在することはないとおもいますが）
名前つけをしなくてもdivタグとして要素自体は見えない形で存在していますが名前つけをしていないとCSSによる装飾に対応できません。
そして、装飾以外にもインタラクティブなメリットがあり、
例えば、利用者の性別に応じて特定の名前を付けた広告枠の表示/非表示を動的に制御する場合にも使用します。
「枠取り」「空白のデザイン」「コンテンツ優先度」を設定することは紙面を作る場合と変わりないのです。
機能をもつ表現の場合
単純な画像や文字組の配置であればそのまま実運用してしまっても問題ないですが、
デザイナーに立ちはだかるのは、「タブ」や「カルーセルパネル」などの機能です。
これらはスキルが必要なので、ありもののソースをコピペするか、
実運用を考慮して正しい要素を配置（正しいマークアップ）をしていきましょう。
表現は、画像イメージで作り上げるのは簡単ですが、コーディングする際HTMLで再現出来なければ絵にかいた餅です。
しっかりと実運用と同じ制御下のパーツ構成で作る必要があります。
どの部分が押されたら画面を書き換えるアクションが起こるのかを意識する必要があり、UI情報デザイン上では押せる部分と押せない部分のわかりやすさは、画面イメージを製作するデザイナーは意識する必要があります。
文字など全体設定を入れておく
とりあえず、
CSSファイルの一番上に下記をコピペしておきましょう。
@charset "utf-8";
/* CSS Document */
html {
font-size:62.5%;/*10pt基準*/
}
body {
margin: 0px;/*ページ全体周りの余白がなくなる*/
font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;
font-size: 12px; font-size: 1.2rem;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background: #ffffff;
line-height: 1.4;/*文字行間設定*/
height: 100%;
}
重要）「全角スペース」がソース中に含まれると、正しく動きません
CSSによるオブジェクトの座標操作
いよいよデザイナーのスキルを発揮する工程に入ります。
各パーツは設置するだけでは縦に並ぶだけですので、
横並びにしたり回り込んだりはCSSでの設定が必要です。
CSSの命令文やソースをは覚える必要はありません。
CSSを使える人でも使用頻度の少ない命令文はすぐ忘れてしまうそうですので、
ソースの横にコメントアウト（/*機能説明*/）で機能説明を書いたものをコピペして手軽に使っていきましょう。
<< 配置の色々を紹介 >>
【枠/パネル】
width:90%; /*横幅*/
padding-top: 50%; /*アスペクト固定*/
height:auto;/*親要素の高さを、格納した子要素の高さで合わせる*/
border: 1px solid #000000; /*枠線の設定*/
border-radius:6px; /*角丸具合*/
margin: 2em 5% 2em 5%; /*上、右、下、左の要素周りの空き具合*/
background: #ffffff; /*オブジェクトの塗り*/
box-shadow: 2px 2px 0px #00254A; /*シャドウ*/ -webkit-box-shadow: 2px 2px 1px #00254A; /*シャドウ_Google Chrome, Safari用*/ -moz-box-shadow: 2px 2px 0px #00254A; /*シャドウ_Firefox用*/
【テキスト】
text-align: center; /*テキストの揃え*/
font-size: 12px; font-size: 1.2rem; /*テキストサイズ（pxとrem両方同じ数値で）*/
color: #333333; /*テキストの色*/
padding: 1em 0% 1em 0%;/*テキストから要素四辺までの空き具合*/
list-style:none; /*リストマーク「・」を消す*/
font-weight:700;/*文字強調*/ font-style:normal;
【罫線】
hr.keisen {/*罫線*/
border: 0 none;
height: 1px;
color: #696969;
background-color: #696969;
}
【位置/並び/回り込み】
display:block; /*要素の縦並び*/
display:inline; /*要素の横並び(テキスト制御など)*/
display:inline-block; /*横並びで一部inline特性*/
float:left; /*浮動独立させ右寄せする*/
overflow:hidden; /*子要素のはみ出た部分は表示されない*/
【要素の表現】
opacity:0.5; /*要素を透過*/
background-color:rgba(255,255,255,0.5); /*背景を透過*/
【重なり順序】
position:relative; /*要素のデフォルト表示位置を基準とする設定（相対）※z-indexに必要 */ z-index: -1; /* 重なり順序の設定*/
position:absolute; /*親要素の位置を基準とする設定（絶対）※z-indexに必要 */ z-index: -1; /* 重なり順序の設定*/
最後に
以上の基本的な設定だけでも数値を調整して想定レイアウトの再現に一部活用出来ると思います。
実運用ではブラウザ依存や機種依存など、またまだ補う設定が必要ですが、
エンジニアの方になかなか伝わりにくい要素間の空き具合だけでも最低限伝えられるのではないでしょうか。
ペンやマウス、illustratorから、
HTML/CSSに持ちかえて、
ダイレクトにインタラクティブ性がある絵が描けたら効率的ですね。
このページは今後も修正と追加をしていきます。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。
