作業効率がアップする隠れた使い方教えます！
WEB制作、プロの無料サービス活用術
──デザインに使えるツール（2）
[technique 12]
レイアウトに黄金比・白銀比を活用する
文＝沖塩慶悟（（有）ムーニーワークス）
Tool レイアウトの小技
URL http://viskowaza.web.fc2.com/layout/ratio/divide/
パーツレイアウトやデザインの重心バランスに黄金比や白銀比を取り入れたい場合に、指定したサイズの範囲内で、直感的にその比率で分割し、罫線を引けるツール「レイアウトの小技」を活用してみるとよい。このツールは、黄金比・白銀比・半分のいずれかを選択し、たとえばサイト全体のレイアウトなら幅900px内、サイド領域にボタンをつくるため180×111pxの範囲内など、指定したサイズにベースを設けることができ、『▽』マークで分割位置をサポートしてくれる。これを使って特定の比率に従い必要分の罫線を引いたら、その画面をキャプチャしてPhotoshopなどデザイン作成ツールで貼り付けてデザインしよう。サンプルではメニューボタンや見出しパーツで使えるものを、このオンラインツールを使って作成してみたが、ものの1分でつくることができた。また、日本人になじみ深く、黄金比よりも好まれる白銀比も選択することができる。
ベースサイズ指定。2が分割比。3が指定したベースサイズ比の基準。4がベース
ボタン用にベースを 180×42pxに指定。ベースの縦横比は「比率無視」を選択しベース内をクリックして罫線をつけていく
サイトキャプチャをベースにデザイン作成。各パーツサイズと余白を黄金比ガイドに従ってデザイン
上が固定単位10pxを基準にボタンを作成した例。下が黄金比を基準にサイズ・余白を合わせた例
[INDEX]
>>> [technique 01] オンラインで本格的な画像編集をする
>>> [technique 02] 繰り返し用の背景画像を作成する
>>> [technique 03] カラーパターンを作成しアプリケーションで活用する
>>> [technique 04] ビットマップ画像をベクターデータに変換する
>>> [technique 05] アカウント不要の画像編集ツールを扱う
>>> [technique 06] グリッドレイアウトを正確にすばやく設計する
>>> [technique 07] 写真に含まれる色のカラーパレットを生成する
>>> [technique 08] 読み込み中……を表すローディングアイコンをつくる
>>> [technique 09] プロトタイピングをもっと効率的にする
>>> [technique 10] 画像を劣化させずに容量を削減する
>>> [technique 11] カラージェネレーターでカラーパレットを作成する
>>> [technique 12] レイアウトに黄金比・白銀比を活用する
本記事は『web creators』2010 vol.101からの転載です。本特集全記事は誌面で読むことができます。
月刊『web creators』掲載記事号の情報はこちら！＞＞＞
![[technique 12] レイアウトに黄金比・白銀比を活用する](https://www.mdn.co.jp/di/images/common/np_article.gif)
