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. WordPressの効果を最大化する、レンタルサーバー選びのポイ…

    WordPressを利用するうえで最低限必要となるのが、「Apache」と「MYSQL」の両方に対応…

  2. Webデザインを見極める目を養う、高品質のギャラリーサイト4選

    フラットデザインやマテリアルデザインなど、次々と新しい概念が生まれるWebデザインの世界。プロのWe…

  3. 業務効率を上げるWebディレクター向けテキストエディタ4選

    Webサイトの記事の確認・作成に限らず、デザイナーをはじめとした制作スタッフとの情報共有や、備忘録・…

  4. 画像編集をクラウド化して業務効率UP。無料オンライン画像編集ツー…

    コンテンツマーケティングがWebマーケティングの主流となり、Webサイトのあらゆる面に高いクオリティ…

  5. 一筋縄では行かないLPOの成功の法則とは?LPの「ストーリー化」…

    Webディレクターが携わることの多い業務の1つがランディングページの最適化(LPO)です。いくら広告…

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

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

  7. ツールを使って接客をシステム化。総合力に優れたWeb接客ツール3…

    シニア層のネットショッピングの利用拡大やECマーケットそのものの成長にあわせて、急速にニーズが高まり…

  8. Webサイトの文章に+αの効果をもたらすフォントサイズ&位置の工…

    特定の文字や語句を強調する場合、Boldやアンダーラインが使われることが多くなりますが、タイポグラフ…

PICKUP

PAGE TOP