グラフィックデザイナーでもできるスマホCSSレイアウト

Pocket

昨今のIT/Webに関わるグラフィックデザイナーは、ペーパーレス化の流れによりインタラクティブなデジタル上のキャンバス(画面)に関わることが多いのではないでしょうか。

今回は最低限の配慮レベルではありますが、ハード面でもソフトウエア面でも贅沢な環境が日々整っている現在において求められる、
「やらないよりはやったほうがグラフィックデザイナーとエンジニア間の温度差を減らせる」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,”MS Pゴシック”,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%; /*横幅*/

height:auto;/*縦幅自動(pxや%も可)*/

border: 0px solid #000000; /*枠線の設定*/

border-radius:6px; /*角丸具合*/

margin: 10% 5% 10% 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: 3.75% 0% 3.75% 0%;/*テキストから四辺までの空き具合*/

list-style:none; /*リストマーク「・」を消す*/

font-weight:700;/*文字強調*/
font-style:normal;

【罫線】

hr.keisen {/*罫線*/
border: 0 none;
height: 1px;
color: #696969;
background-color: #696969;
}

【位置/並び/回り込み】

display:block; /*要素の並び方の制御*/

float:left; /*フロート(浮動)して寄せる*/

overflow: auto; /*フロートした要素の回り込みを阻止*/

【重なり順序】

position: relative; /* JavaScriptでz-indexを調整するために必要 */
z-index: -1; /* 重なり順序の設定*/


さいごに

以上の基本的な設定だけでも数値を調整して想定レイアウトの再現が出来ると思います。

実運用ではブラウザ依存や機種依存など、またまだ補う設定が必要ですが、
エンジニアの方になかなか伝わりにくい要素間の空き具合だけは最低限再現でき伝わるのではないでしょうか。

ペンやマウス、illustratorから、
HTML/CSSやJavaScriptに持ちかえて、
ダイレクトにインタラクティブ性がある絵が描けたら効率的ですね。

このページは今後も修正と追加をしていきます。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket