デザイン会社が発信するLP制作情報メディア

黄金比を活用するだけでLPのデザインもプロ級!デザインをする上で抑えておくべきポイント

2022.8.27
黄金比を活用するだけでLPのデザインもプロ級!デザインをする上で抑えておくべきポイント
企業や会社にとって重要な存在となるのが、商品やサービスをインターネット上で売るためのランディングページです。ランディングページはインターネット広告や検索結果の受け口となるので、商材のイメージがランディングページによって左右されるといっても過言ではありません。


ランディングページはデザインに制限がないため、サイドメニューなども必要なく、画面を広々と活用できます。そのためランディングページはとても自由度が高く、デザイン性も高いものを制作することができます。ランディングページのデザイン性は非常に影響力が高く、とても重要な要素となります。



今回は、ランディングページのデザインをしたいと考えている方に、デザインのポイントをご紹介いたします。

目次

やっぱりLP制作はプロに任せたい!まず制作事例を見る

デザインの4原則

デザインの4原則

近接

関連のある要素を近くに並べることで、関連する要素が認識しやすくなります。


近接のポイントは「余白」にあります。すべての余白を均等にするのではなく、関連する要素同士の余白、そうでないものの余白などという風に、余白のひとつひとつを整理して近接を効果的に使うことがポイントです。


整列

要素の並びを揃えることによって、ページ全体に一体感が生まれます。これによってページ全体を認識しやすくなります。整列のポイントとなるのは「見えない線」で繋げることです。


しかし、中央揃えはインパクトが弱いので、逆に素人っぽさが出てしまう可能性があります。象徴的に使いたい、ソフトな印象を持たせたいなどといった明確な意図がない限り多用しない方が無難となります。


反復

デザインの特徴を作品全体で繰り返す。これによって一貫性が生まれます。WEBサイトではページ内でアイコンなどのモチーフを反復し、別のページに移動したときにもユーザーに他のホームページに移動してしまったなどと誤解されないように、ホームページ内に要素を反復させることがあります。

コントラスト

色や書体、フォントのサイズ等の異なる要素の区別をはっきりつけることで、要素の区別が視覚的に認識しやすくなります。


コントラストのポイントとしては、強弱を臆病にならずに思い切って差をつけることです。中途半端に差をつけてしまうと、逆に読者に伝わりにくくなってしまう可能性があります。コントラストをつける時は明確に変化を付けてみましょう。


デザインでも黄金比は使える?

デザインでも黄金比は使える?
「黄金比」という言葉を恐らく耳にしたことがあると思います。黄金比とは、人間にとって最も安定し、美しく感じられる比率とされています。


そんな黄金比をランディングページのデザインにも活用することができるのか、解説します。


黄金比とは

黄金比とは
黄金比とは、1:1.618の比率のことを表し、黄金比は人間にとって最も安定し、美しく感じられる比率とされています。


黄金比を使った身近なものとしては、名刺、郵便はがきなどカード類が挙げられます。さらに黄金比は自然界にも多く存在しており、松ぼっくりや花びらの数、葉の生え方においても発見されています。


黄金比の歴史と使用例

黄金比の歴史は、古代ギリシャ時代にまで遡ります。古代ギリシャの数学者「エウドクソス」(紀元前408年頃~紀元前355年頃)が、黄金比を発見した張本人と言われています。その後、世界で最も有名な建造物のひとつであるパルテノン神殿の建設の際に、総監督であった彫刻家「ペイディアス」がはじめて黄金比を用いたそうです。

そのころは「黄金比」と呼ばれていたわけではなく、初めて「黄金比」という言葉が使われたのは、ドイツの数学者「マルティン・オーム」が1835年刊行した著書の中ででした。この著書をきっかけに、1:1.618の黄金比が世界中に広く知れ渡るようになったのです。

先ほどは、名刺や郵便はがきなど私たちの生活の身近にあるものに使われているとお伝えしましたが、もっと昔から歴史的建造物や美術品に採用されていました。例えば、古代ギリシャ時代の作品として有名は『ミロのビーナス』は、黄金比を使った彫刻として大変有名ですよね。その他にも、レオナルド・ダヴィンチの代表作『モナリザ』の顔やパリの象徴的建造物『凱旋門』にも、黄金比は使われています。

レイアウト寸法に利用

レイアウト寸法に利用
レイアウトの寸法を決める時に黄金比を利用してみましょう。シンプルに黄金比を取り入れる方法として、1:1.618の比率で寸法を決めることがオススメです。


例えば、典型的なサイズとされる960pxを考えたとき、1.618で割り算すると594pxという、高さを決定することができます。


さらにレイアウトに黄金比を利用し、2カラムに分割することがオススメです。これをすることによって調和のとれた美しい見た目を再現することができます。


余白に対して黄金比を利用して配置

どのようなデザインに対しても余白は必要となります。余白の使い方によってデザインの善し悪しは大きく左右されます。


直感的に配置するよりも、黄金比を利用して微調整することで、見た目をガラっと変えることが可能です。


いくつかのデザイン要素を並べる場合、いくつもの黄金比を組み合わせることによって統一感のある見た目のデザインを表現することができます。


黄金スパイラルトレース

黄金比によってできる螺旋スパイラルをコンテンツの配置場所を決めるためのガイドとして使用することができます。人間の目は細部ディティールまで表現され、スパイラルの中心に注目を集めます。螺旋スパイラルの中心に配置するように心がけるのがポイントです。

ロゴを制作するときは黄金サークルを活用

黄金比を利用することによって均等のとれた美しい正方形や長方形を作成できるのと同じように、サークル円にも適用することが可能です。


黄金比を利用した「黄金サークル」は美しい見た目を表現するだけでなく、統一感のあるロゴをデザインすることができます。


zoom_in画像クリックで拡大

制作費用はこちら

□優れたロゴの特徴とは?

ロゴは企業や製品の顔ともいえる重要な要素です。
一目で印象に残り、ブランドイメージを形成する力を持っています。
では、どのような特徴を持つロゴが優れているといえるのでしょうか。
今回は、優れたロゴが持つべき5つの要素について掘り下げていきます。

1:シンプルさ

シンプルさはロゴデザインの基本中の基本。
シンプルであればあるほど、覚えやすく、認識しやすいものとなります。
余計な装飾を省き、必要最小限の要素だけで構成されたロゴは、一瞬で視覚に飛び込んできます。
有名な企業ロゴを思い浮かべてみれば、その多くがこの特徴を備えていることに気づくはずです。

2:印象的

ロゴが印象的であることは、強力なブランドアイデンティティを築く上で不可欠です。
一度目にしただけで記憶に残るようなデザインは、競合他社との差別化を図るうえでも重要でしょう。
シンプルながらも特徴的で、忘れがたい印象を与えるロゴが理想的です。

3:普遍性

トレンドに左右されず、時代を超えて受け入れられる普遍性も大切な要素です。
一過性の流行に頼るのではなく、長期間にわたって愛されるデザインを目指しましょう。
普遍的なロゴは、長い間そのブランドの顔として認知され続けることでしょう。

4:多面性

ロゴは様々な媒体で使用されます。
そのため、どんなサイズであっても、どんな色彩であっても、その効果を発揮できる多面性が求められます。
大きな看板から小さな名刺まで、一貫性を保ちながらも柔軟に対応できるデザインが理想です。

5:適切性

ロゴはその企業や製品の性格、目指す方向性を反映させるべきです。
ターゲット層やブランドの価値観に合わせたデザインを心掛け、適切性を重視しましょう。
例えば、子ども向けの製品であれば遊び心あるロゴが、高級品であれば洗練されたエレガントなデザインが求められます。

これら5つの要素を兼ね備えたロゴは、ブランドイメージの強化に大きく貢献します。
素晴らしいロゴデザインの背後には、これらの考慮された要素が隠されているのです。

□ロゴデザインに黄金比を取り入れる方法とは?

ロゴデザインにおいて、黄金比を取り入れることは、美しさと調和のとれた印象を創出する上で非常に重要な役割を果たします。
ここでは、黄金比を取り入れたロゴデザインの方法を探求し、その魅力に迫りましょう。

1:フィボナッチサークルを使った曲線の調整

黄金比をロゴデザインに取り入れる基本的な方法として、フィボナッチサークルの活用が挙げられます。
このサークルは、フィボナッチ数列に基づいた比率で描かれた円で、デザインの曲線部分に適用することで、自然で美しい曲線を作り出すことが可能です。
フィボナッチサークルを使うことにより、ロゴに流れるような動きと優雅さをもたらし、視覚的な魅力を高めます。

2:全体のレイアウトへの応用

黄金比をロゴデザインの全体レイアウトに応用することも、効果的な方法です。
具体的には、最大のフィボナッチサークルを全体の基準とし、それに準じて残りの要素を配置します。
このアプローチにより、要素間の均衡を保ちつつ、統一感のある、視覚的に安定したデザインを創出することが可能です。

3:空白部分の調整

ロゴデザインにおいては、使用する要素だけでなく、空白の部分も重要な役割を果たします。
黄金比を用いて空白の調整を行うことで、デザイン全体の調和と美しさを一層高められます。
具体的には、要素間の間隔や空白部分のサイズを黄金比に基づいて調整し、視覚的なバランスを整えることがポイントです。

ロゴデザインに黄金比を取り入れることは、美と調和の追求において重要な手段です。
今回紹介したフィボナッチサークルをはじめとする方法を駆使し、独自性と美的感覚を兼ね備えたロゴを創出することが、ブランドイメージの向上にも寄与するでしょう。
黄金比を取り入れたロゴデザインの探求は、創造力と美的感覚を刺激する、非常に魅力的なプロセスです。

やっぱりLP制作はプロに任せたい!まず制作事例を見る

黄金比や白銀比をデザインに取り入れるためのツールについて

黄金比や白銀比を、効率良くwebデザインに取り入れるためのツールやソフトを4つご紹介します。
無料のものも存在するので、ぜひご活用ください。

1つ目は、web計です。
webデザイナー向けアレコレ計算機、略してweb計です。
数値を入力すると、入力した数値が短辺の時と長辺の時で、それぞれの数値を計算してくれます。
黄金比以外にもいくつかの比率で計算できるので、作業スピードの向上が期待できます。
黄金比の縦横数値が知りたい時におすすめです。

2つ目は、photoshopの切り抜きツールです。
言わずと知れた大人気アプリのPhotoShopですが、切り抜きツールの中に黄金比のガイドがあります。
黄金比を意識しながら画像を切り抜くことができるため、自然とデザイン性の高い画像が作れるでしょう。
黄金比の他にも、黄金螺旋を元に切り抜くこともできるのでおすすめです。

3つ目は、黄金比計算ツールの、keisanです。
web計と同様に、一辺の長さを入力し、幅や高さを計算してくれるツールです。
図も同時に載せてくれるので、理解しやすいです。

4つ目は、RATIOです。
こちらは、iPhone向けの黄金比、白銀比計算アプリです。
基準値を入力すると、比率計算により算出された関連数値を5段階同時に表示してくれます。
こちらも図表を表示してくれるので、直感的にわかりやすいです。

デザインを学びたい方へ

デザインを本格的に勉強したいと思われた方は、デザインスクールに参加するのも良いでしょう。
ここでは、資料請求や学校説明会を行っているスクールを3校ご紹介します。

1校目は、デジタルハリウッドです。
未経験からwebデザイナーへ転職したい方や、フリーランスとして独立したい方におすすめです。
転職やスキルアップのために、しっかりwebスキルを学びたいという方は、選択肢の1つに入れてみてください。

2校目は、テックキャンプです。
未経験から10週間でプロのデザイナーへと成長することができます。
600時間をかけて、デザインの基礎からコーディングまで、ゼロから1人で成果物が作れる技術力を身につけます。
個人に専属のトレーナーや、キャリアアドバイザーがついてくれるので、サポート面も安心です。

3校目は、インターネットアカデミーです。
1995年に開校した日本初のweb専門スクールです。
開校からの実績と講師力、卒業生が大勢いることが強みです。
年齢制限やスキルの制約が無く、随時入校可能なので、フレキシブルに学びたい方は、考えてみてください。

まとめ

ランディングページのデザインでは、近接、整列、反復、コントラストという4つの原則が重要です。
これらはページに一体感と視覚的な美しさをもたらします。
また、古代から現代に至るまで、美の象徴とされる黄金比をデザインに取り入れることで、より調和のとれた美しい見た目を実現できます。
ロゴデザインにも同じ原則が適用され、シンプルさ、印象的なデザイン、普遍性、多面性、適切性という5つの要素が重要となります。

本稿では、これらのデザインの原則を用いた効果的なランディングページやロゴの制作方法を探求しました。
デザインの学びには終わりがなく、常に新しい技法とアイデアが求められます。
この美の追求は、常に創造的な挑戦であるといえるでしょう。

この記事を書いたライター
LPの制作に特化したデザイン会社(LP制作実績)。累計では数千LPデザインを手掛けております。すべて内製化しており、構成からデザイン、コーディングまですべてご対応可能です。各種サーバーのご対応はもちろん、楽天市場、ヤフーショッピングなどのモール系などへの反映もご対応可能です。
この記事の画像を作成したデザイナー
所属:株式会社Ryuki Design / 部署:デザイン部
※デザイナー一覧

紙媒体のデザインからwebデザイン(LP制作・バナー制作)までオールマイティーにデザインが可能。
デザインだけではなく構成も得意なハイスペックデザイナー。毎回クオリティの高いデザインをクライアントに提供しています。

LP制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

    LPアーカイブ
    AMAZON制作