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

企業や会社にとって重要な存在となるのが、商品やサービスをインターネット上で売るためのランディングページです。ランディングページはインターネット広告や検索結果の受け口となるので、商材のイメージがランディングページによって左右されるといっても過言ではありません。
ランディングページはデザインに制限がないため、サイドメニューなども必要なく、画面を広々と活用できます。そのためランディングページはとても自由度が高く、デザイン性も高いものを制作することができます。ランディングページのデザイン性は非常に影響力が高く、とても重要な要素となります。
今回は、ランディングページのデザインをしたいと考えている方に、デザインのポイントをご紹介いたします。
ランディングページはデザインに制限がないため、サイドメニューなども必要なく、画面を広々と活用できます。そのためランディングページはとても自由度が高く、デザイン性も高いものを制作することができます。ランディングページのデザイン性は非常に影響力が高く、とても重要な要素となります。
今回は、ランディングページのデザインをしたいと考えている方に、デザインのポイントをご紹介いたします。
目次
デザインの4原則

近接
関連のある要素を近くに並べることで、関連する要素が認識しやすくなります。
近接のポイントは「余白」にあります。すべての余白を均等にするのではなく、関連する要素同士の余白、そうでないものの余白などという風に、余白のひとつひとつを整理して近接を効果的に使うことがポイントです。
近接のポイントは「余白」にあります。すべての余白を均等にするのではなく、関連する要素同士の余白、そうでないものの余白などという風に、余白のひとつひとつを整理して近接を効果的に使うことがポイントです。
整列
要素の並びを揃えることによって、ページ全体に一体感が生まれます。これによってページ全体を認識しやすくなります。整列のポイントとなるのは「見えない線」で繋げることです。
しかし、中央揃えはインパクトが弱いので、逆に素人っぽさが出てしまう可能性があります。象徴的に使いたい、ソフトな印象を持たせたいなどといった明確な意図がない限り多用しない方が無難となります。
しかし、中央揃えはインパクトが弱いので、逆に素人っぽさが出てしまう可能性があります。象徴的に使いたい、ソフトな印象を持たせたいなどといった明確な意図がない限り多用しない方が無難となります。
反復
デザインの特徴を作品全体で繰り返す。これによって一貫性が生まれます。WEBサイトではページ内でアイコンなどのモチーフを反復し、別のページに移動したときにもユーザーに他のホームページに移動してしまったなどと誤解されないように、ホームページ内に要素を反復させることがあります。
コントラスト
色や書体、フォントのサイズ等の異なる要素の区別をはっきりつけることで、要素の区別が視覚的に認識しやすくなります。
コントラストのポイントとしては、強弱を臆病にならずに思い切って差をつけることです。中途半端に差をつけてしまうと、逆に読者に伝わりにくくなってしまう可能性があります。コントラストをつける時は明確に変化を付けてみましょう。
コントラストのポイントとしては、強弱を臆病にならずに思い切って差をつけることです。中途半端に差をつけてしまうと、逆に読者に伝わりにくくなってしまう可能性があります。コントラストをつける時は明確に変化を付けてみましょう。
デザインでも黄金比は使える?

「黄金比」という言葉を恐らく耳にしたことがあると思います。黄金比とは、人間にとって最も安定し、美しく感じられる比率とされています。
そんな黄金比をランディングページのデザインにも活用することができるのか、解説します。
そんな黄金比をランディングページのデザインにも活用することができるのか、解説します。
黄金比とは

黄金比とは、1:1.618の比率のことを表し、黄金比は人間にとって最も安定し、美しく感じられる比率とされています。
黄金比を使った身近なものとしては、名刺、郵便はがきなどカード類が挙げられます。さらに黄金比は自然界にも多く存在しており、松ぼっくりや花びらの数、葉の生え方においても発見されています。
黄金比を使った身近なものとしては、名刺、郵便はがきなどカード類が挙げられます。さらに黄金比は自然界にも多く存在しており、松ぼっくりや花びらの数、葉の生え方においても発見されています。
黄金比の歴史と使用例
黄金比の歴史は、古代ギリシャ時代にまで遡ります。古代ギリシャの数学者「エウドクソス」(紀元前408年頃~紀元前355年頃)が、黄金比を発見した張本人と言われています。その後、世界で最も有名な建造物のひとつであるパルテノン神殿の建設の際に、総監督であった彫刻家「ペイディアス」がはじめて黄金比を用いたそうです。
そのころは「黄金比」と呼ばれていたわけではなく、初めて「黄金比」という言葉が使われたのは、ドイツの数学者「マルティン・オーム」が1835年刊行した著書の中ででした。この著書をきっかけに、1:1.618の黄金比が世界中に広く知れ渡るようになったのです。
先ほどは、名刺や郵便はがきなど私たちの生活の身近にあるものに使われているとお伝えしましたが、もっと昔から歴史的建造物や美術品に採用されていました。例えば、古代ギリシャ時代の作品として有名は『ミロのビーナス』は、黄金比を使った彫刻として大変有名ですよね。その他にも、レオナルド・ダヴィンチの代表作『モナリザ』の顔やパリの象徴的建造物『凱旋門』にも、黄金比は使われています。
そのころは「黄金比」と呼ばれていたわけではなく、初めて「黄金比」という言葉が使われたのは、ドイツの数学者「マルティン・オーム」が1835年刊行した著書の中ででした。この著書をきっかけに、1:1.618の黄金比が世界中に広く知れ渡るようになったのです。
先ほどは、名刺や郵便はがきなど私たちの生活の身近にあるものに使われているとお伝えしましたが、もっと昔から歴史的建造物や美術品に採用されていました。例えば、古代ギリシャ時代の作品として有名は『ミロのビーナス』は、黄金比を使った彫刻として大変有名ですよね。その他にも、レオナルド・ダヴィンチの代表作『モナリザ』の顔やパリの象徴的建造物『凱旋門』にも、黄金比は使われています。
レイアウト寸法に利用

レイアウトの寸法を決める時に黄金比を利用してみましょう。シンプルに黄金比を取り入れる方法として、1:1.618の比率で寸法を決めることがオススメです。
例えば、典型的なサイズとされる960pxを考えたとき、1.618で割り算すると594pxという、高さを決定することができます。
さらにレイアウトに黄金比を利用し、2カラムに分割することがオススメです。これをすることによって調和のとれた美しい見た目を再現することができます。
例えば、典型的なサイズとされる960pxを考えたとき、1.618で割り算すると594pxという、高さを決定することができます。
さらにレイアウトに黄金比を利用し、2カラムに分割することがオススメです。これをすることによって調和のとれた美しい見た目を再現することができます。
余白に対して黄金比を利用して配置
どのようなデザインに対しても余白は必要となります。余白の使い方によってデザインの善し悪しは大きく左右されます。
直感的に配置するよりも、黄金比を利用して微調整することで、見た目をガラっと変えることが可能です。
いくつかのデザイン要素を並べる場合、いくつもの黄金比を組み合わせることによって統一感のある見た目のデザインを表現することができます。
直感的に配置するよりも、黄金比を利用して微調整することで、見た目をガラっと変えることが可能です。
いくつかのデザイン要素を並べる場合、いくつもの黄金比を組み合わせることによって統一感のある見た目のデザインを表現することができます。
黄金スパイラルトレース
黄金比によってできる螺旋スパイラルをコンテンツの配置場所を決めるためのガイドとして使用することができます。人間の目は細部ディティールまで表現され、スパイラルの中心に注目を集めます。螺旋スパイラルの中心に配置するように心がけるのがポイントです。
ロゴを制作するときは黄金サークルを活用
黄金比を利用することによって均等のとれた美しい正方形や長方形を作成できるのと同じように、サークル円にも適用することが可能です。
黄金比を利用した「黄金サークル」は美しい見た目を表現するだけでなく、統一感のあるロゴをデザインすることができます。
黄金比を利用した「黄金サークル」は美しい見た目を表現するだけでなく、統一感のあるロゴをデザインすることができます。
黄金比や白銀比をデザインに取り入れるためのツールについて
黄金比や白銀比を、効率良くwebデザインに取り入れるためのツールやソフトを4つご紹介します。
無料のものも存在するので、ぜひご活用ください。
1つ目は、web計です。
webデザイナー向けアレコレ計算機、略してweb計です。
数値を入力すると、入力した数値が短辺の時と長辺の時で、それぞれの数値を計算してくれます。
黄金比以外にもいくつかの比率で計算できるので、作業スピードの向上が期待できます。
黄金比の縦横数値が知りたい時におすすめです。
2つ目は、photoshopの切り抜きツールです。
言わずと知れた大人気アプリのPhotoShopですが、切り抜きツールの中に黄金比のガイドがあります。
黄金比を意識しながら画像を切り抜くことができるため、自然とデザイン性の高い画像が作れるでしょう。
黄金比の他にも、黄金螺旋を元に切り抜くこともできるのでおすすめです。
3つ目は、黄金比計算ツールの、keisanです。
web計と同様に、一辺の長さを入力し、幅や高さを計算してくれるツールです。
図も同時に載せてくれるので、理解しやすいです。
4つ目は、RATIOです。
こちらは、iPhone向けの黄金比、白銀比計算アプリです。
基準値を入力すると、比率計算により算出された関連数値を5段階同時に表示してくれます。
こちらも図表を表示してくれるので、直感的にわかりやすいです。
無料のものも存在するので、ぜひご活用ください。
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専門スクールです。
開校からの実績と講師力、卒業生が大勢いることが強みです。
年齢制限やスキルの制約が無く、随時入校可能なので、フレキシブルに学びたい方は、考えてみてください。
ここでは、資料請求や学校説明会を行っているスクールを3校ご紹介します。
1校目は、デジタルハリウッドです。
未経験からwebデザイナーへ転職したい方や、フリーランスとして独立したい方におすすめです。
転職やスキルアップのために、しっかりwebスキルを学びたいという方は、選択肢の1つに入れてみてください。
2校目は、テックキャンプです。
未経験から10週間でプロのデザイナーへと成長することができます。
600時間をかけて、デザインの基礎からコーディングまで、ゼロから1人で成果物が作れる技術力を身につけます。
個人に専属のトレーナーや、キャリアアドバイザーがついてくれるので、サポート面も安心です。
3校目は、インターネットアカデミーです。
1995年に開校した日本初のweb専門スクールです。
開校からの実績と講師力、卒業生が大勢いることが強みです。
年齢制限やスキルの制約が無く、随時入校可能なので、フレキシブルに学びたい方は、考えてみてください。
まとめ
デザインを制作するにあたって、まずは「デザインの4原則」をしっかりと頭に入れておくだけで、格段に統一感のある分かりやすいデザインに仕上げることができます。
もちろん、ランディングページのデザインにも活用することができるので、デザインに行き詰ったときや、もっと分かりやすくしたいという時には黄金比を活用するだけで、一気にデザイン性の高いランディングページへと変化します。
もちろん、ランディングページのデザインにも活用することができるので、デザインに行き詰ったときや、もっと分かりやすくしたいという時には黄金比を活用するだけで、一気にデザイン性の高いランディングページへと変化します。