Advertisement

gridbasedlayout

いくつかの有名ホームページ、ウェブサイトを見てみると、どれも細かいところまで作り込まれたデザインとなっていませんか。

どのサイトもグリッドを使ってレイアウトされたものが多いように感じます。

グリッドを使うことでデザイナーに論理的で安定的なウェブレイアウトを組むことが可能となります。

 

グリッドを使うことのは退屈なデザインに仕上げるためではありません。

デザイナーはグリッドをベースにしたウェブレイアウトの基本的なルールを知ることで、それらのルールをオリジナルに壊してデザインすることができます。

 

今回はSix Revisionsで紹介されている「A Brief Look at Grid-Based layouts in Web Design」よりグリッドを使ったウェブレイアウトのデザイン方法を具体例とともにご紹介します。

ウェブデザインを制作するときに参考にしていただければ幸いです。

 

 

詳細は以下から。

 

 

グリッドとは何?


 

グリッドとはウェブレイアウトを制作するときにを垂直/水平方向に分割するガイドラインのこと。

これによって、整理されたコンテンツをデザインするためのマージンやスペース、カラムを正確に分けることができます。

 

グリッドはもともと雑誌や新聞などのプリントデザインに昔から利用されていますが、ウェブデザインにも応用することができます。

グリッドを使うことで新聞のようなウェブレイアウトを作る必要はなく、デザイン構築の手助けとなるツールで、デザインを制限するものではありません

 

 

 

グリッドを使ったウェブデザインの基本的ルール


 

どんなことにおいても新しい技術/スキルを学ぶときは、ガイドラインが必要となります。

基本となる土台を知ることでオリジナルのルールを効果的に適用することができます。

 

グリッドを使ってウェブデザインを制作するのはとてもシンプルで、すべてのデザインパーツをグリッドラインに揃えることが重要になります。

こうすることでコンテンツをデザインする手助けとなり、クリエイティブなウェブデザイン制作のはじめの一歩となります。

グリッドを使う方法には2つの方法があります。

 

 

■ オリジナルのグリッドをつくろう

 

自分だけのオリジナルのグリッドを作る方法はたくさんあり、オプションも無限大ですが、最終的にあなたの取り組んでいるプロジェクトにもっとも適したグリッドを選びましょう。

ウェブレイアウトを計算によって分割することで、奇数、偶数にかかわらずカラムを作成することができます。

このときにカラムとカラムの間の溝(gutters)を考えながら作成するとよいでしょう。

 

あなたのグリッドは複雑でもシンプルでも好きなように作成することができます。

複雑で精巧なグリッドレイアウトを使うことでデザインの自由が広がりますし、シンプルなグリッドレイアウトを使うことでコンテンツの内容を膨らませることができます。

 

選択はあなた次第です。

 

以下はフォトショップを使って作成したグリッドのサンプルとなります。

なおフォトショップのメインメニューより「ビュー」>「表示」>「グリッド」でグリッドラインを表示することができます。

19-02_2grids

 

 

■ グリッドライン用テンプレートをダウンロードしよう

 

現在いくつかのウェブサービスでグリッドライン用のテンプレートをダウンロードすることができ、これらを使うことでデザインにおける時間の短縮にもつながります。

もっとも有名なサービスのひとつにNathan Smithが運営を開始した960 Grid Systemがあり、12、16、24カラムのグリッドを簡単に作成することができます。

 

Smith氏は960 Grid Systemについて、「数年かけていつの間にか自分自身がひきつけられてたグリッドの寸法を共有しているだけです。それによって他の人の利益となるのであれば、それだけでよいのです。」と語っています。

 

ダウンロードできるパッケージは、CSS、HTML、フォトショップ、イラストレーター、InDesignなど豊富な選択肢から選ぶことが可能です。

それぞれのファイルにはグリッドがあらかじめセットアップされているので、オリジナルのウェブデザインを構築する手助けとなります。

19-03_960grid

 

 

 

基本的なルールを崩そう


 

基本的なグリッドラインのルールを学んだら、今度はそれを自分なりに崩してみましょう。

グリッドはデザインパーツなどのアイテムを整列させ、シンプルですっきりとした、ユーザーフレンドリーなデザインを実現します。

 

しかしすべてのパーツをきちんとグリッドに並べる必要はなく、いくつかのパーツを自由にレイアウトしてみましょう。

グリッドラインを崩したデザインパーツは、ボックス枠を使用したレイアウトより自由度があり、デザイン的にもユニークな仕上がりになります。

 

以下は960 Grid Systemを使ってレイアウトされたウェブデザインのサンプルとなります。

ほとんどのデザインパーツを、グリッドを使って整列されていますが、それを敢えて壊すことでオリジナリティのあるレイアウトを完成させることができます。

19-04_simplestation

via Simple Station

 

19-05_blackestate

via Black Estate

 

19-06_secondpark

via Second & Park

 

 

 

グリッドを使った具体的ウェブデザインサンプル


 

以下はグリッドを使ってよく整理された、ユーザーフレンドリーなウェブデザインのまとめとなります。

いくつかはグリッドラインを忠実に使って整列されていますが、グリッドラインを無視したデザインに仕上げているものをあります。

これでグリッドを使っても、退屈で平凡なウェブデザインをレイアウトする必要がないことがわかるのではないでしょうか。

19-07_habitat

via Help Your Habitat

 

19-08_podge

via Digital Podge 2009

 

19-09_uncorked

via Vegas Uncork’d

 

19-10_anton

via Anton Peck

 

19-11_brite

via Brite Revolution

 

19-13_kiki

via kiki & Bree

 

19-12_arvorecer

via Arvorecer

 

19-14_colly

via Simon Collison

 

 

 

デザインをさらに楽しくする各種ツール


 

以下はグリッドラインを使ったウェブデザインをさらに楽しくするツールをいくつかご紹介しています。

カラム数に応じて、ピクセル幅を自動計測してくれたり便利なツールばかりです。

 

Grid Designer

ウィンドウ幅を決めて、カラム数と溝、マージンを入力すると自動的に計算してくれる便利系ツール。

オリジナルでデザインしたグリッドを使ってCSSとHTMLをそのままダウンロードすることができます。

19-15_grid_designer

 

Grid System Generator

こちらもウィンドウ幅やカラム数などを入力することで自動的にピクセル幅を計測してくれるツール。

各種グリッドライン用サービスに対応しています。

19-16_grid_system_generator

 

Grid Calculator

フォントサイズ、カラム数、カラム幅、溝幅を直感的に入力することで、全体のレイアウト幅を計算してくれるツール。

19-17_grid_system_calculator

 

JQuery Masonry

グリッドラインを使って垂直、水平方向にアイテムを整列させてくれるユニークなJQuery。

19-18_jquery_masonry

 

Slammer

グリッドレイアウトをオフラインでもデザインすることができるアプリケーション。

19-17_slammer

 

グリッドはすべてのデザインに関する問題を解決してくれるものではありません。

グリッドは、ウェブレイアウト作成しようとするときに、シンプルできれいに整列されたデザインを構築するためのひとつの方法です。

今回のデザイン方法を使って、自分だけのオリジナリティあふれるウェブレイアウトをデザインしてみてはいかがでしょうか。

 

[参照元 : A Brief Look at Grid-Based Layouts in Web Design – Six Revisions]