スマートフォンサイトを表示する

  1. TOP
  2. Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~ : 第5回 黄金比・白銀比・青銅比、プロのセオリーを取り入れて、バランスのとれたレイアウトを実現する

エキスパートコラム

Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~(全6回)

第5回:黄金比・白銀比・青銅比、プロのセオリーを取り入れて、バランスのとれたレイアウトを実現する

執筆:赤間 公太郎(株式会社マジカルリミックス)

2015年3月2日更新

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

閲覧数12,263views

このコラムをPDF形式でダウンロードする

"Jimdoで「かっこいいホームページ」をつくろう! ~プロが教えるかんたんテクニック集~"のコラムを担当する、マジカルリミックスの赤間です。全6回のこのコラムでは、ホームページの完成後に、よりクオリティをアップさせるための手法や考え方をお伝えしていきます。

Jimdoの役目は「かんたんにページを作成する」ことです。さらによりよい内容やデザインにするためには、少し突っ込んだ知識が必要となってきます。プロがよく使うテクニックを少し採用するだけでも、よりよいホームページになります。そんなテクニックをご紹介していきます。

プロは「センス」ではなく「ルール」や「セオリー」でデザインしている

プロのデザイナーが作ったホームページは、バランスがよくとても見やすいのには理由があります。専門職としてのセンスが必要なのはもちろんですが、それ以外にも、「こうしなければいけない」「こうしてはいけない」など、理論に基づいた「ルール」や「セオリー」を取り入れています。それらをうまく取り入れれば、センスのよいレイアウトや画像に仕上がるわけです。

今回は、比率について解説します。

美しいとされる比率「黄金比・白銀比」

デザインをする際、「幅と高さ」・「サイドバー部分とコンテンツ部分」など、複数の対象物の長さや大きさを比較する比率が存在します。その比率のとり方で、美しいとされるのが「黄金比」「白銀比」とよばれる比率です。

黄金比

黄金比は、人間にとって最も安定し、美しい比率とされています。建築や美術的要素に取り入れられています。

黄金比の代表的な例(近似値含む)は、パルテノン神殿、ミロのヴィーナス、名刺、キャッシュカード、ハガキ、iPhoneなどです。

白銀比

白銀比は日本に馴染みの深い比率です。代表的な例は、法隆寺、薬師三尊像、A4やB4などの用紙の仕上がり寸法。さらにはキャラクターでは、アンパンマン、ひこにゃん、キティちゃんをはじめとするサンリオキャラクターなども白銀比で構成されています。

※黄金比と白銀比の詳しい解説は非常に専門性が強いため、ここでは割愛いたします。

近似値で考える黄金比と白銀比

黄金比や白銀比を厳密にすると、数学的に複雑な計算式となります。しかし、近似値から単純な比率に換算すると、

と、考えることができます。縦横比や配置でバランスを取る際には、これらの比率を意識することにより、バランスのとれたものを作ることができます。

さらなる比率「青銅比」

青銅比は、四角を描いたときに、非常に横長になる比率です。ホームページでは、「メインビジュアル」や「キービジュアル」と呼ばれる、ページの上部に目を引く大きな写真を設置することが多々あります。

横長で使うようなメインビジュアル画像は、3:9を意識して作成するとおさまりがよい

写真の切り抜きや、カラムの左右の比率を決定する際、これらのルールを取り入れてみると、おさまりのよいバランスとなります。

黄金比・白銀比、青銅比などをかんたんに計測できるWebサービス

Metallic Ratioは、1辺の数値を基準としたとき、もう1辺の数値を好きな比率で算出してくれるサービス

Metallic Ratioにアクセスし、長方形の縦部分の入力フィールドに数値を打ち込んでみましょう。すると、その数値に連動して横部分の数値が変化します。初期値では、これが黄金比の組み合わせです。

フィールドに数値を入力すると、自動でもう1辺が計算される

上部にあるRatio Typesをクリックすると、比率の種類を変更することができます。例えば、右端のBronze Ratioを選ぶと青銅比になります。この例では、高さが280pxの画像を準備する際、幅が925pxであれば、青銅比の比率を保った画像を作る事ができるということがわかります。

Ratio Typesは、黄金比や白銀比など、さまざまな比率を自動的に算出可能

長方形が2つ並んだようなアイコンに切り替えると、縦横比から左右の比較比率に切り替える事ができます。 画像内での色の塗り分けの境界を見つけたり、文字を乗せる際のバランスの目安を見つけることができます。Jimdoでは、内容物を左右に区切って表示する「カラム」機能がありますので、その配置バランスを決定するのにも役立ちます。

  • テキストの段組みに使用する
  • 写真とテキストの配置バランスの決定に使用する

など、2つ以上のものを配置する際に活用してみましょう。

隣接の比率を計算するのにも役立つ

iPhoneアプリでも比率計算が可能

黄金比と白銀比を自動で計算してくれるiPhoneアプリもあります。

「RATIO」では、入力した数値に応じて、黄金比と白銀比のそれぞれの関連数値を表示します。作成するものを必ずしもこの数値に合わせなくてもよいですが、参考にすることで、バランスのよい画像が実現可能です。

アプリの公式サイトに、詳しい解説が掲載されています。

RATIO:http://ratio.supercrowds.co/

まとめ

  • レイアウトのバランスは、感覚だけで決めずに、ルールを取り入れる
  • 黄金比・白銀比・青銅比をはじめとするさまざまな比率は、はオンラインのツールで簡単に算出可能
  • 縦横の比率・隣接の比率を考えて、バランスのよいレイアウトを心がける
  • 日本に馴染みがよいのは白銀比

次回(最終回)は、「メインビジュアル画像に文字を配置する際のデザインパターン5連発」と題して、効果的な画像の加工パターンをご紹介します(つづく)。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

赤間 公太郎(あかま・こうたろう)

赤間 公太郎(あかま・こうたろう)

株式会社マジカルリミックス 代表取締役CEO/JimdoExpert
http://www.magical-remix.co.jp/
http://www.kotalog.net/

宮城県出身。IT関連の専門学校を卒業後、仙台のデザイン会社に入社。Webサイトのデザイン・コーディングを中心に従事。2002年退職後すぐに個人事業としてマジカルリミックスを創業。2007年に法人化し株式会社マジカルリミックスを設立。規模を問わずお客様のニーズにあわせたWebサイトの企画立案、制作、アクセスと売上アップをめざした更新サポートまで一貫して手がけている。
また、Web制作だけにとどまらず、社内向けのセキュリティ・IT活用のプライベートトレーニング、セミナー出演、執筆なども意欲的に手がける。全国からの講演依頼も多数。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。

主な著書に『10日でSEO&アクセスアップ Jimdoデザインブック』(エムディエヌコーポレーション)『10日で作るかっこいいホームページ Jimdoデザインブック』(同)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。

[所属]
仙台商工会議所 エキスパートバンク登録/みやぎ産業振興機構 専門家アドバイザー/みやぎ工業会正会員

10日でSEO&アクセスアップ Jimdoデザインブック

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを今なら45,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/3/12~2017/3/18]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!