Home > スポンサー広告 > グリッドシステムベースのデザインをするときに気をつけること

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/102-f935b001
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > グリッドシステムベースのデザインをするときに気をつけること

Home > デザイン > グリッドシステムベースのデザインをするときに気をつけること

グリッドシステムベースのデザインをするときに気をつけること

001_2014070821583772f.png

グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。
完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。
ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。

960.gsのphotoshopテンプレートを使って既にグリッドが引かれているファイルをダウンロード

今回は960gsサイトのテンプレートファイルを使います。

サイト:http://960.gs
ファイルへの直リンク:ダウンロード



「960-Grid-System-master.zip」がダウンロードできたら、

template > photoshop > 960_grid_12_col.psd

を任意の場所にコピーして、photoshopで開いて作業開始です。
そのまま開いて作業をしてもいいのですが、元データはどこかに保存しておいて、新規ページ作成の時などにおいておくことをおすすめします。

960_grid_12_col.psdファイルを開く

photoshopでファイルを開いてみました。
12カラムのグリッドを選んだので、赤い12本のラインが見えるとおもいます。

photoshopのガイドを使いたいので、[cmd+;]を押して、ガイドを表示させ、さらにレイヤーの「12 Col Grid」は非表示にしておきます。


このような表示になりました。

ヘッダーの高さ、サイドメニュー、メインエリアのカラムを決めて、デザインを組み立てます

ヘッダーの高さ、サイドメニュー、メインエリアのカラム幅を決めます。
このとき、気をつけなくてはいけないのは、外側の10pxは使わないということです。
また、内側に引かれた10pxの幅のガイドには合わせないこと。
各グリッドは1カラム幅60pxで、間のマージンは20pxであることを意識しておきます。

ということは、縦の空間の幅も10pxないし20pxの倍数であるとより綺麗に見えてくることがわかるとおもいます。
[shift+↓]でオブジェクトを動かすと、10pxごとにオブジェクトが動きますので、組み立てていくときに利用するとさらに便利になります。ここはお好みで。


ヘッダーの高さを 横幅12カラムの 高さ120px、
サイドメニューは高さはアタリで 横幅3カラム
メインエリアも高さはアタリで、横幅9カラムとしています。

この中にデザインを入れ込んでいき、仕上げていきます。枠内にマージンをかけるとグリッドが崩れてしまいますので、あくまでこの幅ぎりぎりで作業をすすめるのがコツです。

デザインのコツ1:メインコンテンツでの配置について

通常はここまででも恩恵が受けられると思うのですが、注意というか、デザインとして綺麗に表示させて、さらにコーディングの時に時短できるようなコツのようなものを紹介します。

今回はサイドメニューに3カラム使っているので、メインコンテンツで利用できるのは9カラムです。グリッド分けをするとき、すべてのカラムを足して9になるようにすると、コーディングの時にグリッドシステムのフレームワークがそのまま使えます。


9カラムを2等分、9カラムを4等分にわける場合は割り切れませんので、フレームワークが利用できなくなりますので多用はしないようにします。
オリジナルのdivスタイルなどを設定すると利用が可能ですが、フレームワークの恩恵にあやかれないということです。

*ちなみにですが、3:9でサイドメニューを作っていても、
サイドメニューが終わるところでフレームワーク上で回り込みを解除しますので

3(サイドメニュー):9(コンテンツ) エリア
12カラムの広い広告エリア
3(サイドメニュー):9(コンテンツ) エリア
12カラムでフッター


みたいな組み方もできます。

デザインのコツ2:カラムの枠いっぱいにデザインをする

カラムが決まったら、カラムの枠いっぱいをつかってデザインすると縦ラインが揃ってデザイン上整って見えます。変な空間は入れないこと。空間を入れるときは、ルールを作ってカラムの枠や縦のラインがきちんと感覚的に「見える」ようにすることがコツです。


応用すれば空間があいていてもきちんとパターンが作れるようになりますが、まずは、グリッドいっぱいにデザインすることを心がけてみましょう。

なぜ、空間が空いているとダメになってしまうのか・・
それは、この空間が統一されていないようなデザインになってしまうときに起こります。
同じ意味合いを持つコンテンツを連続させたいとき、同じ幅や高さにして繰り返すと「同類」と人間の目はみなしますが、グリッドで折角合わせていても残念になってしまう例をご紹介します。


見えているグリッドに頼りすぎて、まとまりがあるように見えてしまうといいますか・・グリッドシステムをはじめて使うとこういう罠に陥りやすくなります。
初期のころわたしもハマりました。3段目なんて、10pxはみ出しています。グリッドシステムのフレームワークからははみ出しています。コーディングで新たに定義行きですね。いいんですが。
もちろん「はみ出す」という表現としては問題ありません。基本はこうしない、ということです。

まだ紫の枠が見えてるのでわかりづらいかとおもいます。
外してみましょう。


全く枠が見なくなりました、縦ラインも見えません。こうなってしまっては、デザインとしてひとつひとつの意味合いがよくわからなくなってしまいました。

ウェブサイトでは縦ラインはとても重要です。ないけれど、そこにある「線」を見せていくのが、グリッドデザインの基本です。基本を抑えて、CSSフレームワークなどがあって、すばやくコーディングしたいときには向いていません。

メインエリアは自由にレイアウトするという方法もあります。

ここまでが基本でしたが、メインエリアがランディングページや広告のように目立つようなデザインにする場合、ここのグリッドを気にしていてはどうしようもない場合があります。その場合は割りきってメインエリアは独自コンテンツにしてしまうのもアリだと思っています。
レスポンシブデザインの時など、切り落としもカラム落としもコーディング時に全部自前になる場合もありますが、そこを覚悟してデザインするのも一興です。

覚悟というのも、工数が増える、それだけですが。

まとめ

グリッドシステムでデザインしておくとPC向けのみのサイトでコーディングする場合もスムーズに行くのですが、レスポンシブデザインの場合、CSSフレームワークで設定をショートカットしたい場合にも、便利です。レスポンシブCSSフレームワーク自身にグリッド設定があって、ブラウザ幅でカラムを最終的に100%にするようなものが非常に多いからです。
最初から利用するフレームワークが決まっているときは、そのフレームワークに時折付属しているデザインの方法や、気をつけることは同じですので、独自に添付されているpsdファイルをつかってもいいでしょう。

グリッドシステムでデザインするときの基本ルール

・カラムの個数を足し算したり引き算したりして全体幅にあうように組み立てる
・カラムはめいいっぱい使ってデザインする(full width的な)
・デザイン上、縦の線に気をつければ自然と整頓できる
・自由に配置するときは、独自CSSを付け加える(工数が増える?かも?)ことを覚悟する

これらのルールに従ってつくっておけば、html上でカラム幅を数えて設定するだけでカラムの設定がスムーズになります。グリッドが苦手な方、なんだかうまくグリッド上で表現できなくて邪魔だな―と思っていた方。ぜひこの機会に挑戦してみてください。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/102-f935b001
Listed below are links to weblogs that reference
グリッドシステムベースのデザインをするときに気をつけること from バニデザノート

Home > デザイン > グリッドシステムベースのデザインをするときに気をつけること

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。