前提として知っておく知識
前回の記事で、デザインを作成する際に参考にさせて頂いたサイトURLをまとめました。
WebデザインからCSS設計について考える その0001 前提知識みたいなもののリンクをまとめた - Motomichi Works Blog
前に見てたサイトどれだっけなー。ってなると困っちゃうので。
はじめに
参考にさせて頂いたページをもとに、どのような手順で作っていくと失敗を減らして無難に作っていけるか。というのを考えつつ、過去の失敗も踏まえて自分の為にまとめておきたいと思います。
PCのWebサイトデザインを主眼に、タブレットやスマホなどもところどころ視野に入れて制作していきます。
SMACSSをベースにしたCSS設計、SassなどのCSSプリプロセッサを使用する場合を想定した感じで、レイアウト、モジュール、色などに分けてデザインしていきます。
4の倍数、8の倍数でデザイン
「デザインは8の倍数でできている | 1 pixel｜サイバーエージェント公式クリエイターズブログ」を参考にさせて頂いています。
- コンテンツ領域の幅
- モジュールの幅
- モジュールの高さ
- 余白
上記した項目について、4の倍数と8の倍数でデザインをしていきます。
具体的には以下の数字が使用されます。
4の倍数 : 4,12,20,44(4の倍数はこの4種類だけに限定します)
8の倍数 : 8,16,24,32,40,48,56,64.........
このようなルールを作ることで、CSSコーディングやデザインで迷うことが減って良い気がします。
コンテンツ領域の幅、カラム、グリッドシステム
コンテンツ領域の幅を決める
今回の想定としては、固定した数値を持たせて、1296pxにしました。
この1296pxの要素を中央に配置する事になります。
- ディスプレイ幅1366pxのノートPCで横スクロールせずに閲覧できる
- 12グリッドで分割したときに整数になる
- 8の倍数である
といった理由から幅を決めました。
カラム内の余白
カラム内の余白は左右12pxとしました。
例えば1カラムのページ構成の場合
1296pxの1カラムなので、12+1272+12=1296pxとなります。
例えば4:8の2カラムのページ構成の場合
左カラムは、432pxなので、12+408+12=432pxとなります。
右カラムは、864pxなので、12+840+12=864pxとなります。
グリッドシステムとそのCSS
12グリッドからなる、グリッドシステムを利用したデザインとCSSを作成します。
CSSを記述する場合、例えば以下のようになります。Bootstrapなどを使用するのも良いと思います。
.l-grid-12 {width: 100%;}
.l-grid-11 {width: 91.66666667%;}
.l-grid-10 {width: 83.33333333%;}
.l-grid-9 {width: 75%;}
.l-grid-8 {width: 66.66666667%;}
.l-grid-7 {width: 58.33333333%;}
.l-grid-6 {width: 50%;}
.l-grid-5 {width: 41.66666667%;}
.l-grid-4 {width: 33.33333333%;}
.l-grid-3 {width: 25%;}
.l-grid-2 {width: 16.66666667%;}
.l-grid-1 {width: 8.33333333%;}
Photoshopなどでデザインを作成する場合、1グリッドあたり108pxでデザインしていく想定です。
デザインのベースになる色、テキストの装飾
サイトのキーカラー
今回は青とオレンジの2色でいきます。
- キーカラー1 #19a0cd (青)
- キーカラー2 #df870c (オレンジ)
フォーム送信失敗時のメッセージは赤、成功時のメッセージは緑、などを使う想定があるので、キーカラーはこれらと違う色を使うことにして、青とオレンジにしてみました。
もちろんサービスや会社のイメージカラーがあると思いますので、好きに選べるときばかりではないと思います。
グレー
罫線や文字色、背景色などで使用するグレーを10段階程度決めておくと良い気がします。
- 一番濃いグレーは#333333
- 一番薄いグレーは#f6f6f6
- 二番目に薄いグレーは#e6e6e6ぐらいが良さそう
ぐらいだと無難な気がしますが、一番濃いグレーは#222222ぐらいが適切かもしれません。
一番薄いグレーが#f6f6f6ぐらいで、塗られている面積が小さいと、ディスプレイによっては白と違いがわからない事が過去にありました。
塗られている面積が広いとグレーだということが認識しやすかったです。
中間も含めて適当に10個ぐらいグレーを作成しておきます。
Sassなどを使用している場合は予めグレーの変数を10個ぐらい定義しておくと良かったです。
罫線に使用するグレーはこの10個のうちの4番目と7番目の濃さを使う。とか2色くらいに限定しておくと良い気がします。罫線が何段階ものグレーに分かれ過ぎていると後々デザインルールの管理が辛いと思うので。
見出しの色
モジュールのデザインの前に、見出しに使用する色をキーカラー1に決めておきます。
見出しの色と「進む」ボタンの色を同系色にしない方がサイトが見やすいかもしれません。
ボタンの色
モジュールのデザインの前にボタンの色も決めておきます。
- 進む (上記したキーカラー2)
- 戻る (グレー10個のうちの少し濃いめの色 #777777)
- ページネーターとか進みも戻りもしない色(キーカラー2と同系色だけど違いがわかる色 #dea659)
- 強調したい色(会員登録とかここぞと目立たせたい色 #2e9c10)
- disabledなボタン(二番目に薄いグレーが良い気がする)
最低限この5色ぐらいで、Bootstrapにあるようなdangerな色のボタンとかあっても良いかもしれないです。
disabledなボタンを二番目に薄い色にする理由としては、背景色が一番薄いグレーの領域に、disabledなボタンを置いても混ざらないようにしています。
通知メッセージなどの色
思い当たる部分としては、フォーム送信失敗やフォーム送信成功時の色などです。
- 危険や致命的なエラーを伝える色 (赤)
- 安全だけど強調したい色 (緑)
- 特に強調しなくても良い色 (グレー)
カテゴリ分けに使うタグの色
色付きのタグでカテゴリ分けが必要な場合などは、色相環で30%ずつ色相をずらして以下のような12色作ったりしています。
これ以上分けると色の違いがわからなくなってきます。
$badge__color--0001:#ff6969;// $badge__color--0002:#ffb469;// $badge__color--0003:#ffff69;// $badge__color--0004:#b4ff69;// $badge__color--0005:#69ff69;// $badge__color--0006:#69ffb4;// $badge__color--0007:#69ffff;// $badge__color--0008:#69b4ff;// $badge__color--0009:#6969ff;// $badge__color--0010:#b469ff;// $badge__color--0011:#ff69ff;// $badge__color--0012:#ff69b4;//
bodyのテキスト色とサイズと行間
例として以下のようにしてみます。
- 色はさっき定義した一番濃いグレー
- フォントサイズは16px
- 行の高さはフォントサイズの1.5倍(line-heigjt:1.5;)
行の高さはあくまでも初期値の意味であり、必要に応じてモジュール毎に設定することになります。
リンクテキストの色と装飾
例として以下のようにしてみます。
- 色はキーカラー1
- リンクだとわかりやすいように下線
- hoverしたら下線が消えて、色が変化する
キーカラー2の方が良いかもしれないです。
その他の色
ここまでに定義した色の明度だけを上下させて作れるような色をデザインに使用すると、Sassのlightenとdarkenで作り出せるので、管理する変数が減らせて良いと思います。
ページを構成するモジュールのデザインを作ってみる
使う色がだいたい決まったので、モジュールの形状をデザインしていきます。
CSSを記述する際はwidth:100%;とし、外側の要素幅に任せるようにすると汎用性の高いモジュールができるかと思います。
また、ページやサイト全体のデザインをする前に、ボタンのカラーバリエーションや、h1からh6までを一通り用意しておくとサイトデザインの途中で困る事が減らせると思います。
ページの前にまずモジュールを一通り。という意識で作っていきます。
ボタン
高さが4の倍数または8の倍数になるように作ってみます。
44px,32px,20pxの3サイズを作成します。
デザインする際のボタン幅は任意です。
以下の画像のようにデザインしてみました。
モジュールの高さが4の倍数または8の倍数になる事を優先して作成したモジュールです。
ページをデザインする前に、ボタンのカラーバリエーション、アイコン画像を左に入れた場合や、">"みたいなのを右端に入れた場合、なども予め作成しておくと、後々困りません。
また、アイコン画像は高解像度ディスプレイの事も考慮した場合、
- SVGを使う
- 2倍サイズ使う
- アイコンWebフォントを使う
などの想定と判断を予めしておくと便利です。
また、ボタンの色によっては、アイコン画像の色も何色か必要になると思います。
h2見出し
モジュール内の余白が8になるように作ってみます。
モジュール自体の高さは、テキストが一行の場合と二行の場合で可変になるようなCSSを記述する想定なのでなりゆきです。
以下の画像のようにデザインしてみました。
モジュールの高さはなりゆきにして、内部の余白が4の倍数または8の倍数になる事を優先して作成したモジュールです。
例としてh2を出しましたが、h1からh6までをひととおり作成してから、ページデザインをすると良い気がします。
h6が後で必要になって、h5とh6の目立ち具合の違いがつけられない。というような事に困った経験が過去にあります。
見出しについては、
- テキストの左にアイコンが入る
- 右肩にボタンが入る
- クリックできる見出し
などのパターンも考えられるのでそこも視野に入れてモジュールをデザインしておけると良い気がします。
ここでもボタン同様にアイコン画像について予め想定しておくと便利です。
input type="text"のモジュール
ボタンと横並びにすることが想定されるので、borderも含めて、高さ44px,32px,20pxの3サイズを作成します。
サンプル画像は省略します。
disabled、エラー、readonlyなどのパターンを予め想定しておくと良い気がします。
プルダウン
ボタンと横並びにすることが想定されるので、borderも含めて、高さ44px,32px,20pxの3サイズを作成します。
サンプル画像は省略します。
無効、エラーなどのパターンを予め想定しておくと良い気がします。
バッジ(カテゴリタグ)
以下のようなルールにして、ボタンとの違いを意識しながら作ってみます。
- クリックできるものはベタ塗り
- クリックできないものは縁取り
例として以下の画像のような感じです。
このバッジの色が12色必要で、「カテゴリ分けに使うタグの色」に定義したような12色を作ったことがありました。
サイトによっては12色は不要ですね。
ページネーター
基本的にはページの数字が5個程度並ぶと思うのですが、以下のような事を予め想定しておかないと、色々実装しなおす事になったり、ほんとはこういうデザインが良かったのに思うようなデザインで実装されなかった。などの事が起こりやすいモジュールです。
過去にそのような経験をしてきたモジュールです。
- テキストフォームから数字を入力できるかどうか
- 全10ページ中5ページ目などの表示
- 全100件中51から60件目などの表示
- 10件ずつ表示(プルダウンなどで変更できる)
- 1ページしか無い場合の表示
- ページが少ないときの表示
- 1ページ目を閲覧中に「前へ」「最初へ」の表示をどうするか
- 2ページ目を閲覧中に数字がどのように表示されるか
- 最終ページを閲覧中に「次へ」「最後へ」の表示をどうするか
- 数字ボタンの現在ページのデザインをどうするか
- スマホではどのように表示するか
など色々考えておくと、サーバーサイドの人も、フロントエンドの人も色々スムースに作業が進みそうですし、デザイナーとしても期待通りの実装がされて良さそうです。
その他のモジュール
こんな調子で
- モジュールの高さが4の倍数または8の倍数になる
- モジュール内の余白が4の倍数または8の倍数になる
上記のいずれかのルールを基調にモジュールのデザインを作成していきます。
また、よく使われるモジュールとして、以下のようなものは括弧の中に書いた項目のパターンに対応できるようなデザインを予めしておくと後で困らなそうです。実際色々困った経験もあります。
- ラジオボタン(選択前、選択後、無効、エラー)
- チェックボックス(選択前、選択後、無効、エラー)
- ファイルアップロードフォーム(選択前、選択後、無効、エラー、ブラウザ差異)
- textarea(選択前、選択後、無効、エラー)
- フォーム要素を配置する枠(エラーメッセージ、入力例、注意事項、必須、ツールチップなどの表示領域確保)
- テーブル(セル内の余白を4の倍数または8の倍数にする)
- アコーディオン(開いたとき、閉じたとき)
- 利用規約(第1条、第1条 第1項、箇条書き、注釈などのデザインが意外と必要だったりする)
- ぱんくず
- ヘッダー
- フッター
- リスト
- Ajax用のローディングアイコンとその表示場所(クリックしたボタンの代わりに表示、ページの中心に表示など)
- モーダルウィンドウ
- スライドショー
- タブ
など、よく使うモジュールをモリモリに盛り込んだ縦に長い1ページのデザインを作ってみたりして、モジュール一覧みたいにします。
この段階で、スマホではどのように表示するのかを各モジュールについて考えておくと、レスポンシブWebサイトも想定したHTMLコーディングができるのでやり直しが減ります。
おわりに
同じ失敗を何回もしないように、自分の覚え書きのつもりで書きました。
ボタンやinput要素などは、bootstrapをそのまま使う手法の検討や、bootstrapに合わせて4つの高さのボタンを作ることも検討した方が良かった気がしています。
何か思い出したり、新しいことに気付いたらこの記事を編集していこうと思います。
