webデザインのグリッドレイアウト作成に使える無料ツール

ウェブデザインを考えるときに基本レイアウトをどうするかはいつも悩みの種です。最近ではグリッドレイアウト、グリッドデザインといってレイアウトを細かく分割した手法がとられており、今回はそのグリッドレイアウトを作成するためのツールの無料ツールを紹介します。

グリッドレイアウトとは

グリッドレイアウト、グリッドデザインとはウェブレイアウトを制作するときに表示スペースを垂直や水平方向に分割するガイドラインのことを指します。
グリッドを作成することによって、整理されたコンテンツをデザインするためのスペース確保やカラムの位置、各マージン等を正確に行う事が出来ます。

もともと、グリッドは雑誌や新聞などの印刷物のデザインに昔から利用されており、新しい技術ではありません。また、グリッドを使うことで新聞のようなウェブレイアウトを作る必要はなく、あくまでもデザイン構築の手助けとなるツールと言えるでしょう。

無料で使えるグリッドレイアウト作成ツール

このように便利なグリッドレイアウト作成ツールですがウェブ上で無料で使えるツールがあるので紹介します。

960 Grid System

960GridSystem

「960 Grid System」は960pxの横幅を基本としたウェブデザインのレイアウトグリッドをPSDファイルやCSSファイルに変換することが可能です。
基本は12分割と16分割のよく使うであろうグリッドを提供してくれるのですがデザイン作成の下書きとして使えるツールとして使えそうです。

gridulator

gridulator

gridulatorはコンテンツの幅と分割するグリッドの数を指定することによってスペースが異なる複数パターンのグリッドレイアウトを計算してくれるツールです。
使い方は「Overall Width」に横幅を、「#of Columns」に分割数を入れるといろんなパターンのグリッドレイアウトが作成されます。
計算したグリッドレイアウトはPNGファイルでダウンロードすることが出来るのでPhotoshopやFireworksで使うことが出来ます。

最後に

今回はグリッドレイアウトツールを2つ、紹介しましたが、このようなツールを使うことによって作業の効率化を行っていきたいですね。

  • Pocket
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets
レスポンシブサイト構築に便利なCSSフレームワーク、グリッドデザイン搭載の「HTML KickStart」
2014年春 お勧めのウェブアイコンフォント(web icon fonts)2種類!
デザイン全般で使えるweb色見本
これは便利!グラデーションが簡単に作れるCSSジェネレーター
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
いろんな用途が見込めるフリーのアイコン集(PSDファイルでダウンロード出来るよ)
違うブラウザで同じ表示をさせるためには リセットCSSとノーマライズCSSの特徴
Bracketsでお薦めの拡張機能(エクステンション)と拡張機能のインストール・アンインストール方法
OGPにおける記述方法の勘違いと修正方法(2015年春時点での最新情報?)
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!
サイト構造と被リンクの確認が無料で出来るツール「AdMatrix Analytics」
表示しながらCSSの編集が出来るFirebugの使い方

Menu

HOME

 TOP