エキスパートコラム
Jimdoで「かっこいいホームページ」をつくろう！ ～プロが教えるかんたんテクニック集～（全6回）
第5回：黄金比・白銀比・青銅比、プロのセオリーを取り入れて、バランスのとれたレイアウトを実現する
執筆：赤間 公太郎（株式会社マジカルリミックス）
2015年3月2日更新
閲覧数105views
"Jimdoで「かっこいいホームページ」をつくろう！ ～プロが教えるかんたんテクニック集～"のコラムを担当する、マジカルリミックスの赤間です。全6回のこのコラムでは、ホームページの完成後に、よりクオリティをアップさせるための手法や考え方をお伝えしていきます。
Jimdoの役目は「かんたんにページを作成する」ことです。さらによりよい内容やデザインにするためには、少し突っ込んだ知識が必要となってきます。プロがよく使うテクニックを少し採用するだけでも、よりよいホームページになります。そんなテクニックをご紹介していきます。
プロは「センス」ではなく「ルール」や「セオリー」でデザインしている
プロのデザイナーが作ったホームページは、バランスがよくとても見やすいのには理由があります。専門職としてのセンスが必要なのはもちろんですが、それ以外にも、「こうしなければいけない」「こうしてはいけない」など、理論に基づいた「ルール」や「セオリー」を取り入れています。それらをうまく取り入れれば、センスのよいレイアウトや画像に仕上がるわけです。
今回は、比率について解説します。
美しいとされる比率「黄金比・白銀比」
デザインをする際、「幅と高さ」・「サイドバー部分とコンテンツ部分」など、複数の対象物の長さや大きさを比較する比率が存在します。その比率のとり方で、美しいとされるのが「黄金比」「白銀比」とよばれる比率です。
黄金比
黄金比は、人間にとって最も安定し、美しい比率とされています。建築や美術的要素に取り入れられています。
黄金比の代表的な例（近似値含む）は、パルテノン神殿、ミロのヴィーナス、名刺、キャッシュカード、ハガキ、iPhoneなどです。
白銀比
白銀比は日本に馴染みの深い比率です。代表的な例は、法隆寺、薬師三尊像、A4やB4などの用紙の仕上がり寸法。さらにはキャラクターでは、アンパンマン、ひこにゃん、キティちゃんをはじめとするサンリオキャラクターなども白銀比で構成されています。
※黄金比と白銀比の詳しい解説は非常に専門性が強いため、ここでは割愛いたします。
近似値で考える黄金比と白銀比
黄金比や白銀比を厳密にすると、数学的に複雑な計算式となります。しかし、近似値から単純な比率に換算すると、
と、考えることができます。縦横比や配置でバランスを取る際には、これらの比率を意識することにより、バランスのとれたものを作ることができます。
さらなる比率「青銅比」
青銅比は、四角を描いたときに、非常に横長になる比率です。ホームページでは、「メインビジュアル」や「キービジュアル」と呼ばれる、ページの上部に目を引く大きな写真を設置することが多々あります。
横長で使うようなメインビジュアル画像は、3:9を意識して作成するとおさまりがよい
写真の切り抜きや、カラムの左右の比率を決定する際、これらのルールを取り入れてみると、おさまりのよいバランスとなります。
黄金比・白銀比、青銅比などをかんたんに計測できるWebサービス
- Metallic Ratio：http://ratio.kish.in.net/
Metallic Ratioは、1辺の数値を基準としたとき、もう1辺の数値を好きな比率で算出してくれるサービス
Metallic Ratioにアクセスし、長方形の縦部分の入力フィールドに数値を打ち込んでみましょう。すると、その数値に連動して横部分の数値が変化します。初期値では、これが黄金比の組み合わせです。
フィールドに数値を入力すると、自動でもう1辺が計算される
上部にあるRatio Typesをクリックすると、比率の種類を変更することができます。例えば、右端のBronze Ratioを選ぶと青銅比になります。この例では、高さが280pxの画像を準備する際、幅が925pxであれば、青銅比の比率を保った画像を作る事ができるということがわかります。
Ratio Typesは、黄金比や白銀比など、さまざまな比率を自動的に算出可能
長方形が2つ並んだようなアイコンに切り替えると、縦横比から左右の比較比率に切り替える事ができます。 画像内での色の塗り分けの境界を見つけたり、文字を乗せる際のバランスの目安を見つけることができます。Jimdoでは、内容物を左右に区切って表示する「カラム」機能がありますので、その配置バランスを決定するのにも役立ちます。
- テキストの段組みに使用する
- 写真とテキストの配置バランスの決定に使用する
など、2つ以上のものを配置する際に活用してみましょう。
隣接の比率を計算するのにも役立つ
iPhoneアプリでも比率計算が可能
黄金比と白銀比を自動で計算してくれるiPhoneアプリもあります。
「RATIO」では、入力した数値に応じて、黄金比と白銀比のそれぞれの関連数値を表示します。作成するものを必ずしもこの数値に合わせなくてもよいですが、参考にすることで、バランスのよい画像が実現可能です。
アプリの公式サイトに、詳しい解説が掲載されています。
まとめ
- レイアウトのバランスは、感覚だけで決めずに、ルールを取り入れる
- 黄金比・白銀比・青銅比をはじめとするさまざまな比率は、はオンラインのツールで簡単に算出可能
- 縦横の比率・隣接の比率を考えて、バランスのよいレイアウトを心がける
- 日本に馴染みがよいのは白銀比
次回（最終回）は、「メインビジュアル画像に文字を配置する際のデザインパターン5連発」と題して、効果的な画像の加工パターンをご紹介します（つづく）。
赤間 公太郎（あかま・こうたろう）
株式会社マジカルリミックス 代表取締役CEO／JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/
宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。
Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年に退職し、しばらくフリーランスとして活動。2007年に株式会社マジカルリミックスを設立。社内での業務担当は、Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年より仙台市内の専門学校において、非常勤講師としてWeb制作の講義を担当。
主な著書に『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』（共著、エムディエヌコーポレーション）、『基礎から覚える、深く理解できる。Webデザインの新しい教科書』（同）。
かんたんJimdo完全マニュアル
2014年8月に、Jimdoは新UIと呼ばれるインターフェースが一新された仕様となりました。これまで培ってきたJimdoの使い勝手を踏襲し、さらに編集がしやすい操作感となりました。Jimdoのマニュアルはインターネット上にたくさん公開されていますが、新UIに対応したものはまだまだ充実してはいません。本書は、Jimdoを使うすべての人に参考にしていただけるよう、操作方法に注力した内容としました。はじめてホームページを作る人も、すでにJimdoを使っている人も、Jimdoの使い方がよくわかる1冊です。
10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック
オンラインホームページ作成サービス・Jimdo（ジンドゥー）を使ったホームページの作り方を伝える初心者向けの解説書。2014年8月に大規模リニューアルを行ったJimdoの新UIに対応。本書の構成は、Introduction+10章の解説記事を順を追って読み進めて行くことで、Jimdoでのホームページ作成に必要なひと通りのノウハウが、10日間で身につくものになっています。これからホームページ作成にチャレンジしたい方、すでに公開しているホームページをより良くしたい方に最適の1冊です。