グリッドシステムを使ってデザインをする
コンテンツを12分割したグリッドでレイアウトをするBootstrapのグリッドシステムです。
デザインを制作するにあたって、レスポンシブ対応するかしないか、どのタイプで作るのか先に決めておいて下さい。
・レスポンシブ対応する
レスポンシブを前提としたデザインを作ることで、レスポンシブ対応に最適なコーディングすることができます。
・今後レスポンシブ対応する
あとからレスポンシブ対応するのが難しくなる可能性がありますが、
レスポンシブ対応を意識したデザインにすることで、ある程度対応できます。
・レスポンシブ対応しないけどスマートフォンサイトを作る
PC・SPをファイル別タイプでつくります。デザインはそれぞれ自由に作ることが出来ます。
・PCサイトだけでよい
PCだけを意識してつくります。
・レスポンシブ対応する
レスポンシブを前提としたデザインを作ることで、レスポンシブ対応に最適なコーディングすることができます。
・今後レスポンシブ対応する
あとからレスポンシブ対応するのが難しくなる可能性がありますが、
レスポンシブ対応を意識したデザインにすることで、ある程度対応できます。
・レスポンシブ対応しないけどスマートフォンサイトを作る
PC・SPをファイル別タイプでつくります。デザインはそれぞれ自由に作ることが出来ます。
・PCサイトだけでよい
PCだけを意識してつくります。
他社デザイン案件の場合は、PC、SP、（タブレットも対応する必要があれば）それぞれのデザインデータを貰って下さい。
自社デザインより作業時間がかなりかかると思うのでスケジュールは多めにとって下さい。
自社デザインより作業時間がかなりかかると思うのでスケジュールは多めにとって下さい。
他社案件などで既存のサイトをレスポンシブ化するのは泥沼なので、断る、もしくは全リニューアルするほうがいいと思います。
グリッドシステムで可能なレイアウト
12・6・4・3・2・1カラムレイアウトは可能です。11・10・9・8・7・5カラムはできません。
各カラムには左右に15pxのpaddingが付きます。この15pxの数値は変更可能ですがサイト全体に影響します。
各カラムには左右に15pxのpaddingが付きます。この15pxの数値は変更可能ですがサイト全体に影響します。
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
左右の余白を一部変更したい
全てグリッドに沿ってデザインすると、メインコンテンツとサイドコンテンツの区別がつきにくくなることもあります。
サイドコンテンツ
メインコンテンツ
その場合、paddingを調整して部分的に余白を変更することも可能です。
以下はメインコンテンツのpadding-leftを30pxにしました。これでもメインコンテンツ内が崩れることはありません。
※スマートフォンなどで1カラムレイアウトになる時のpadding設定を忘れずに
以下はメインコンテンツのpadding-leftを30pxにしました。これでもメインコンテンツ内が崩れることはありません。
※スマートフォンなどで1カラムレイアウトになる時のpadding設定を忘れずに
サイドコンテンツ
メインコンテンツ
部分的に各カラムの左右の余白を変更したい場合は、CSSで個別に指定します。
以下は画像の左右の余白を5pxに変更したものと、0pxに変更したものです。
以下は画像の左右の余白を5pxに変更したものと、0pxに変更したものです。
サイドコンテンツ
メインコンテンツ
コンテンツの入れ子
".row"をつけると、子コンテンツは再び12カラム分割でレイアウトできるようになります。
3
9
4
4
4
3
3
3
3
HTMLの構造はPCサイトもスマートフォンサイトも同じ
HTMLの構造はPCサイトもスマートフォンサイトも同じですので、表示される順序を意識してデザインを作って下さい。
PC（SP）だけ表示する、非表示にするなどはCSSで再現可能です。
PC（SP）だけ表示する、非表示にするなどはCSSで再現可能です。
画像は幅100%が基本
様々なレイアウトに対応するために幅はCSSで指定します。なのでimgタグはwidth="100%"の指定が基本です。
コンテンツタイトルを画像で使う場合などは気をつけてデザインして下さい。英語ならgoogle webフォントを使うのもいいかもしれません。
コンテンツタイトルを画像で使う場合などは気をつけてデザインして下さい。英語ならgoogle webフォントを使うのもいいかもしれません。
デザインデータ
PC、タブレット、スマートフォン、PC（ラージ）の4種類の分岐があります。
デザインデータは最低PCとスマートフォンがあれば大丈夫です。
レイアウトは「12分の何カラムで左右のpaddingが何pxか」が分かればいいとおもいます。
デザインデータは最低PCとスマートフォンがあれば大丈夫です。
レイアウトは「12分の何カラムで左右のpaddingが何pxか」が分かればいいとおもいます。
PC .col-md-●●
| ウィンドウサイズ | 992～1200px |
|---|---|
| コンテンツサイズ | 970px |
| PSDデータ | 「案件」→「Template」→「デザイン」→「bootstrap3-970px.psd」 |
| 備考 | 1200px以上のウィンドウサイズはレイアウトが同じのまま大きく表示されます |
タブレット .col-sm-●●
| ウィンドウサイズ | 768～992px |
|---|---|
| コンテンツサイズ | 750px |
| PSDデータ | 「案件」→「Template」→「デザイン」→「bootstrap3-750px.psd」 |
| 備考 | デザインデータがない場合はPCのサイドカラムがないバージョンとして制作します。 |
スマートフォン .col-xs-●●
| ウィンドウサイズ | 768px以下 |
|---|---|
| コンテンツサイズ | 可変 |
| PSDデータ | 「案件」→「Template」→「デザイン」→「bootstrap3-480px.psd」 |
| 備考 | だいたいのデザインで大丈夫です。ただし、コンテンツの並び順はPCと整合性がとれるように作って下さい。 |
PC：ラージサイズ .col-lg-●●
| ウィンドウサイズ | 1200px以上 |
|---|---|
| コンテンツサイズ | 1140px |
| PSDデータ | なし |
| 備考 | PCサイズの拡大版です。レイアウトに変更が必要がある場合のみデザインを作成して下さい。 |
サイドカラム・サイドナビの位置
ウィンドウサイズがタブレット以下の場合にサイドコンテンツをメインコンテンツの上か下かどちらに表示するかを決めておいて下さい。
非表示にすることも可能です。
非表示にすることも可能です。
ベクターデータについて
Illustratorなどで作成したベクターデータをPhotoshopにペーストするときは、「ピクセル」で貼り付けると後からサイズ修正ができないので、
単一パスのものは「シェイプレイヤー」で、複合パスの場合は「スマートオブジェクト」で貼り付けて下さい。
フォントアイコン
Fontawesomeをテンプレートで使えるようにしているので様々なアイコンをデザインに簡単に取り入れることができます。
PSDでFontawesomeのアイコンを使う場合はhttp://fontawesome.io/の Downloadボタンからzipをダウンロードし、フォントファイル（.otfか.ttf）をPCにインストールして下さい。
あとはPhotoshopのフォントからFontawesomeを選択し、http://fontawesome.io/cheatsheet/から好きなアイコンをコピーして貼り付けるだけです。
PSDでFontawesomeのアイコンを使う場合はhttp://fontawesome.io/の Downloadボタンからzipをダウンロードし、フォントファイル（.otfか.ttf）をPCにインストールして下さい。
あとはPhotoshopのフォントからFontawesomeを選択し、http://fontawesome.io/cheatsheet/から好きなアイコンをコピーして貼り付けるだけです。
行間・文字間隔
基本的には統一して下さい。CSSで個別に指定もできますが効率が悪いのでオススメしません。
タイトルだけ使うなど、共通部分に指定するくらいは可能です。
行間はブラウザによって微妙に解釈が異なることがあるので、画像・テキストの横並びレイアウトで高さを揃えるようなデザインはピッタリ合わないと思っていて下さい。
タイトルだけ使うなど、共通部分に指定するくらいは可能です。
行間はブラウザによって微妙に解釈が異なることがあるので、画像・テキストの横並びレイアウトで高さを揃えるようなデザインはピッタリ合わないと思っていて下さい。