menu

Appleのロゴにも活かされているデザインの「黄金比」とは?

ディレクター心得

WordPressや各種フレームワークが普及し、ぐっと身近になったWebサイト制作。WordPressなどを利用すればデザインやコーディングにそれほど深い知識がなくてもトレンドから大きく外れることはなく、一定以上の機能を備えたWebサイトを制作できるようになりました。

ただ、やはりプロのWebディレクターならデザインやマーケティングに対する最低限の知識は持っていたいもの。クライアントに対するプレゼンテーションや打ち合わせの際も、その場限りの提案をしたり、ニュアンスで伝えたりするよりは、具体的な理論やメソッドに基づいてロジカルに説明した方がより説得力が増すでしょう。

・Appleのロゴにも取り入れられている「黄金比」
モノの外観をバランスよく表現し、見る人に素直に美しいと思わせるのがデザインの「黄金比」です。具体的な比率は、横:縦=1:1.618(大まかには5:8)。「モナ・リザ」や「ミロのヴィーナス」といった美術品に黄金比が取り入れられているのは有名な話ですが、それ以外にも、はがきや名刺、Appleの企業ロゴ、デジタルカメラやiPhone自体も黄金比に基づいて設計されています。

Webサイトを制作する際は、トップページのファーストビューを黄金比に基づいてレイアウトすると、よりユーザーに情報が伝わりやすく、アクションを導きやすくなると言われています。もちろん黄金比にこだわるあまりコンテンツの内容を減らしたりするのは本末転倒なので、あくまで目的と照らし合わせて活用するようにしましょう。

黄金比はWebサイトのレイアウトだけではなく、画像やフォント、ボタンにも活かすことができます。例えば、500px×1000pxの画像をWebサイトで使う場合、黄金比に基づいて横幅が809px(500px×1.618)になるようにトリミングすると、より画像の特徴が際立ち、バランスよく見せることができます。

フォントの場合、記事本文のフォントが9ptなら、小見出しにはそれに1.618を掛けた14.562pt、中見出しにはさらに1.618を掛けた23.561ptというように、黄金比を意識することで全体の印象をスマートに整えることが可能です。

購入・予約ステップへ遷移するリンクボタンの場合は、横:縦のバランスだけでなく、文字部分の横幅とボタン全体の横幅を大まかに5:8に設定すると、違和感なく情報が伝えられ、スムーズにアクションを導くことができるでしょう。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

野球観戦をより楽しく、快適に。スポーツ界に先駆けたMLBのBeacon活用事例

マルチタスクを効率的に管理。スムーズなプロジェクト進行に活かせるツール3選

関連記事

  1. Webデザイナーへの発注で最初に伝えたい、デザインの「背景&スト…

    「思い描いたイメージと全然違う」、「あれだけ強調したのに全く伝わっていなかった」…。Webディレクタ…

  2. 手軽に作ってWebサイトにアクセントを。無料のGif画像作成サー…

    複数の静止画を組み合わせてコマ送りで表示することによって、画像に動きをつけることができるGif。We…

  3. プレゼンや打ち合わせに活用したい、無料モックアップ作成ツール3選…

    ワイヤーフレームと同様に情報共有やプレゼンテーションの精度を高めてくれるのがモックアップです。クライ…

  4. 意外と簡単?Webフォントの利用方法とメリット&デメリット

    CSSを用いたWebサイトが一般的になり、多くのWebデザイナーに注目されているWebフォント。Go…

  5. WordPressの表示速度をアップさせるプラグイン5選

    アクセス解析やセキュリティなど豊富な機能が提供されているWordPressのプラグイン。使い方によっ…

  6. 即戦力のコーディングチェックツール3選

    デザイナーへの発注やクライアントとの連絡・調整に加えて、Webページのコーディングをチェックするのも…

  7. メンバーへの共有もより簡単に。ワイヤーフレーム作成ツール3選

    クライアントを含め複数のメンバーが携わるWebサイト制作において、情報共有やプロジェクトの進行に大き…

  8. Webサイトの配色に取り入れたい「70・25・5の法則」

    Webサイトの配色を決めるためには、それぞれの色の特徴・効果とあわせて効果的な配色パターンを知ってお…

PICKUP

PAGE TOP