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. コンテンツの品質管理に役立つ無料の文章チェックツール3選

    ライターや外部の制作会社から納品されてきたコンテンツの品質管理もWebディレクターの大切な仕事の1つ…

  2. フラットデザインにも相性抜群。スタイリッシュなWordPress…

    用途や目的にあわせて幅広く利用できるデザインテンプレート(テーマ)はWordPressの大きな魅力の…

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

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

  4. ランディングページの成功事例その2「TECH:CAMP」

    ベテランのWebディレクターでも頭を悩ませることの多いランディングページ制作。用途・目的に沿ったペー…

  5. 「オウンドメディアって何?」意外と知られていないトリプルメディア…

    「オウンドメディアって最近よく聞くけど、どんなもの?」。この質問に正確に答えられるWebディレクター…

  6. 外注やデザイナーに頼らずサクッとロゴを制作。ロゴジェネレーター3…

    LineやInstagramといったSNSの台頭にともない、コミュニケーションツールとしてあっという…

  7. フォント選びの基本中の基本。和文&欧文の4系統

    フォントはレイアウトや配色と並んでWebデザインにおいて大きなウェイトを占める要素です。同じテキスト…

  8. Webコンテンツの印象を大きく変えるタイポグラフィの4原則

    フォントを効果的に使うにはタイポグラフィ(書体の配置や構成といった表現)も大切です。デザインやレイア…

PICKUP

PAGE TOP