オシャレと言われるLPのデザインの参考例

shunichi shiga
オシャレなLPデザイン例

インターネット広告業界ではチラシのような存在になっているランディングページ(LP)ですが、従来のキャッチコピーや口説き文句にあふれたものから変化の兆しが見えます。
より洗練されたデザインになり、中にはイメージ画像だけで商品の写真すら未掲載というのも登場しています。ここでは、そんな次世代のLPをご紹介しましょう。

こんな依頼ならかっこいいデザインに

ここ1、2年で、LPは爆発的に数を増やしました。このような状態だと、今までと同様のLPを新たに作っても、すぐに埋没してしまうでしょう。

依頼主の中にも、それを敏感に感じ取って、違う方向に差別化したいと考えている人がいます。型通りではないLPの登場で、ようやくデザイナーの本来の力が発揮できると言えます。

そんな最新のLPに合う依頼は、やはり、最先端の技術や流行に乗った商品などを扱うものでしょう。そんな依頼が来たら、まったく新しい提案を行うのも良いかもしれません。

クールなデザインで気を付けたい点は?

とは言え、商品やサービスを紹介するLPの役目は変わりませんので、デザインを追求し過ぎて、何が言いたいのか分からなくなっては元も子もありません。

芸術ではなく、あくまでも広告の一部だという事を認識しておきましょう。センスの良いデザインで注意を引き付け、宣伝する商品やサービスに興味を持ってもらったら大成功です。
現在の売り込みが激しいキャッチコピーや口説き文句がなくても、ターゲットに受け入れられる可能性が高いでしょう。

かっこいいデザインのLP例

次世代のLPと言うべきLPの好例を挙げておきましょう。

かっこいいLPデザイン例1

Adobeの画像編集ソフト、Photoshopで使うプラグインのLPです。このプラグインは、パノラマ写真の歪みを簡単に修正できる機能が強化されています。

Photoshop用だけあって、買い求めるのはデザインに詳しい人がばかりだと思いますが、そんな人でも納得できるLPになっています。

かっこいいLPデザイン例2

高校生とその家族写真を募集するプロのカメラマンのLPです。素敵なポートレートを撮ってもらえそうな感じが、全体のレイアウトから伝わってきます。

かっこいいLPデザイン例3

香りを効かせたボディケア製品のLPです。季節に合った製品のセットを発売していて、これは秋用の宣伝のために作りました。見るからに芳しい香りが漂ってきそうです。

かっこいいLPデザイン例4

ソフトウェア開発と開発者の育成をする会社のLPですが、かなり特殊なデザインで、ミステリアスな雰囲気を出しています。

と言うのも、一つ目のイラストをロゴマークにしている事から分かるように、フリーメーソン的な感じで仕上げてほしいという要望があったからです。

かっこいいLPデザイン例5

最先端を行く大学生によるカンファレンスのLPです。さすが流行の先頭に立っているとしているだけあって、エッジの効いたデザインです。

かっこいいLPデザイン例6

ワインとスピリッツの販売会社のLPです。ワインにまつわる至言をスタイリッシュにまとめています。グラス、ボトル、オープナーを効果的に使っているのも技ありです。

かっこいいLPデザイン例7

フランスで生まれた電子タバコのLPです。製品自体がポップなカラーリングなので、それを踏襲しています。女性が好みそうなデザインです。

かっこいいLPデザイン例8

ミステリーゲームアプリを紹介するLPです。ぼんやりとした人影を使った背景が、不気味な雰囲気を盛り上げています。アプリの面白さを引き立てる仕上がりでしょう。

LPのデザインとは

これらのLPは、キャッチコピーや口説き文句がないか、あっても極わずかなものばかりです。それでも目を引き付ける力を持ち合わせていると言えるでしょう。

このようなLPが登場してきた今こそが、デザイナーの本領を見せる時かもしれません。

関連記事

読む気にさせるLPのためにデザイナーができる方法

読む気にさせるLPのためにデザイナーができる方法

インターネット上のバナー広告や検索結果のPRワードをクリックすると、最近はランディングページ(LP)へリンクします。ランディングページの「ランディング」とは「着地」「上陸」という意味の英語で、ユーザーが最初にアクセスしたウェブページの事を指しますが、特にインターネット広告業界では、商品やサービスの売り込みを長めの1ページにまとめたものを言います。 このLPの制作を依頼された時、どのような事に気を付けたら良いかをご説明しましょう。 LPの内容に含まれるものとは? — たいていのLPは上の図のような内容になっています。「キャッチコピー」はターゲットに訴求する言葉とイメージ画像が入ります。ダイエット食品だと「おなかがペッタンコに!」という言葉にスリムな女性の写真というような組み合わせを目にした事も多いでしょう。 「共感」はターゲットの気持ちを代弁するような言葉です。「スイーツをガマンしなくても大丈夫!」などが入ります。 「商品」は文字通り、商品やサービスの具体的な説明とその画像です。 「ベネフィット」は、その商品を使うとどんな効果があるかを提示します。「10日でウエストがマイナス3センチ!」「お肌も同時にスベスベに!」などが並びます。 「利用者の声」は、商品を使った人の感想です。 「差別化」は、同じような商品との違いを書きます。「いろんな味があって続けやすい!」などが挙げられるでしょう。 「アクション」は、商品なら購入ボタン、サービスなら問い合わせボタンが置かれます。「問い合わせ先」は会社名や会社概要が入りますが、「アクション」を優先させたいので、かなり小さめにして、リンクも貼らない場合が多いです。 LPの内容から対象者を想像する — 以上のように、商品やサービスを知り尽くしていないと、利用者の声はおろか、キャッチコピーさえ書けないので、文章部分は依頼主に任せたほうが無難です。 逆に言えば、おおまかな商品説明だけで、あとはデザイナーが考えるという依頼は、必ず問題が出てくるでしょう。文章がそろった上で、デザインの作業に入らなければなりません。その後は用意された文章から、ターゲットを見極めます。 はっきりとした文章が書けるという事は、依頼主もマーケティングしてターゲットを絞っているので、デザインするほうも把握しやすいと思います。 引き込ませるデザインのコツ — ターゲットが分かったら、次はそのターゲットが好みそうな色やフォントなどを選びましょう。一般的に、女性向けならライトトーンで爽やかな感じに、男性向けならダークトーンで力強い感じにしますが、LPの内容によっても変わります。 それぞれの項目は補色同士にして、メリハリを付けたほうが良いです。フォントは、特に見出しには強調するためにゴシック系を使う事が多いですが、信頼感を出すために明朝系も臨機応変に使いましょう。一番初めに目にする「キャッチコピー」の部分は、最大限に力を入れます。文字列は白枠の幅を大きく取ったり、暗めの背景に白で浮き立たせるなど、インパクトを与えます。画像も画面の半分以上を占めるような大きさにしましょう。 最後の「アクション」のボタンは、グラデーション、ベベルやエンボス、ドロップシャドウを多用して、注意を集めます。 コーディングまでする場合、ホバー時の動作の有無に迷いますが、パソコン以外にスマートフォンなどでも共通で使うなら、意図した動作にならない時があるので、付け加えないほうが良いでしょう。 このように全体を見ると、新聞に入っている折り込みチラシとほぼ同じような作りだと分かります。しかし最近は、このようなLPがすでに溢れ返っているので、より差別化するために、物語形式やポスター形式といった新しい形に変化してきています。 これからこそがデザイナーの本来の力を発揮できる時かもしれません。

シンプルに仕上げたLPのデザイン参考例

シンプルに仕上げたLPのデザイン参考例

元々はユーザーが最初にアクセスしたウェブページの事を意味したランディングページ(LP)ですが、インターネット広告業界では専ら、バナー広告などのリンク先にある、長めの1ページにまとめた商品やサービスの売り込みを指しています。 その大抵のページにはキャッチコピーや口説き文句があふれていますが、最近ではシンプルに決めたものも登場してきました。そんな時代を先取りするLPをご紹介しましょう。 こんな依頼ならシンプルなデザインに キャッチコピー、ベネフィットフレーズ、利用者の声といった、LPのお決まりの言葉を盛り込んで、極太ゴシックや補色などを使って派手に作ってほしいという従来のLPを要望されたら、それに従うしかありませんが、そのようなLPも飽和状態なので、シンプルデザインが合う内容であれば、違った提案をするのも一つの手です。 例えば、銀行や証券会社のような信用第一の業種なら、あまり美辞麗句を書き立てるのも逆効果なので、簡潔かつ的確にまとめたいものです。 また、サービスに絶対的な自信があるものは、それをさりげなく披露すると、必ずや説得力を持つ事でしょう。 シンプルなデザインで気を付けたい点は? いくらシンプルにすると言っても、文章や画像を単調に並べただけではデザインに失敗していると考えざるを得ません。フォントはベーシックなものが良いですが、その大きさや太さでメリハリを付けましょう。 また、画像も1枚をベタッと貼り付けるのではなく、説明で欲しい所に貼るという必要性を熟慮するべきです。 そして、それらの配置は、「これはこんな事ができて、その成果はこんなふうで、こんな感想が届いています」といった物語を感じるものにすると、読み進める気を起こさせるでしょう。 シンプルなデザインのLP例 成功例を見ると、シンプルデザインがより良く理解できると思います。 ドローンを使って、空撮を行ったり環境をモニタリングする会社のLPです。サービスを簡潔にまとめ、一番の関心事である写真の出来を明確に提示しています。 また、使用するドローンは、良く知られているDJIのファントムではなく、上位機種のインスパイアである事を強調したデザインです。 イギリスの不動産業者向けにデジタルマーケティングを伝授する会社のLPです。信頼を感じさせる緑色を取り入れ、スタイリッシュに仕上げています。 SNSなどと連動して街に出ている友人を探す事ができるアプリのLPです。一目で理解できるアイコンを作って、このアプリが何の役に立つのか、どんな動作をするのかを端的に説明しています。 企業や個人投資家向けのベンチャーキャピタルファンドのLPです。要望した色はブラック、そして、プラチナとホワイトでしたが、ブラックはそのまま使うと信頼感を損なうため、グラデーションにしています。 オランダを中心とした求人広告会社のLPです。企業の人事向けに、優秀な人材を集める方法を解説する教材を、分かりやすいインフォグラフィックで説明しています。 ペットと死別した人のために、その遺骨を収める壺を販売するデザイナーのLPです。最小限の言葉が説得力を増しています。 持ち家、借家に関わらず、省エネを目指す人に指南する電子書籍のLPです。白熱球や蛍光灯よりもLEDという誰でも知っている省エネの方法を提示しているので、見ただけで内容を理解できます。 WordPressを使ったサイトを最適化するサービスのLPです。大きく描いたバロメーターが、あっと言う間に心配事を解決してくれるような印象を与えます。 デザイン by Infinity デザイン どんなに口説き文句を並べるよりも、簡素な言葉や単純な画像のほうが力を持つ時があります。それらはもちろん、人々の関心を引くものでなくてはなりません。 依頼内容からその核心となる部分を見出し、是非シンプルなデザインへと昇華してください。

印象に残るオシャレなヘッダーデザインとは

印象に残るオシャレなヘッダーデザインとは

webサイトの顔とも言えるヘッダーは、サイト訪問者の心をつかむデザインである必要があります。サイト訪問者の心をつかむような、インパクトがありながらも、オシャレでセンスのいいヘッダー。デザイナーになったばかりの人には少しハードルの高いテーマかもしれません。 ここではクライアントが喜んでくれるであろう、印象に残るオシャレなヘッダーの例を紹介しますので、是非参考にしてみてください。   アイキャッチを組み込んだオシャレなヘッダー アイキャッチとは見ている人の注意を引くためのものを指す言葉です。ヘッダーのアイキャッチの手法としてよく使われる3種類を紹介します。 インパクトによるアイキャッチ 色によるアイキャッチ アイコンやロゴによるアイキャッチ 最もアイキャッチとして強いのはインパクトのあるデザインですが、派手なヘッダーをオシャレに仕上げることはとても難易度が高いため、デザイナーとしての経験が短い人にはオススメできません。そこでデザイナーになりたての人の参考になる、色やアイコン、ロゴによるアイキャッチを得意としているのがGoogleです。Googleのヘッダーはとてもシンプルですが、サイト訪問者の印象に残るヘッダーの良い例です。飾るものをできるだけ少なくし、シンプルなアイキャッチだけで主張するのが最近の流行にもなっています。 デザイン by bearbrick デザイン by don-armagadon デザイン by KR Designs   ターゲットを意識して派手すぎないヘッダーを ヘッダーでターゲットになる人に注目してもらうことばかりを考えると、主張ばかりが強いヘッダーになりがちです。ヘッダーはあくまでも看板なので、そのサイトが何のサイトなのかを知ってもらうためにあります。最小限の装飾でサイト訪問者の心を掴むことができればよいのです。 派手なデザインのヘッダーは印象に残りやすく、わかりやすいことが多いため、デザイナーとしては採用したくなるのですが、サイト訪問者は何度もサイトを訪れるうちに、次第に派手なデザインを「うるさい」と感じてしまうでしょう。また、派手なヘッダーはサイト全体のイメージを崩してしまう可能性もあります。サイト全体のバランスを崩さない程度に、一番伝えたい内容だけを強調するようにしましょう。 デザイン by Janneke デザイン by ogorinac デザイン by Janneke   Webサイトとの調和がとれたデザイン どれだけオシャレなヘッダーを作ってもwebサイト全体のデザインに合っていなければ、クライアントに差し戻される可能性が高くなります。ヘッダーのデザインをするときは、配置するサイト全体を確認して、ページに馴染むデザインになるように心がけましょう。 サイト全体がフラットデザインで作られているのにヘッダーがリッチデザインになっている場合や、暖色系のサイトに寒色系のヘッダーを組み合わるなどでデザインを行うと、サイト全体がちぐはぐな印象になってしまいます。 サイトのカラーに近い色、近いトーンの色を使う サイトのコンセプトをしっかり聞き出して作成する 上記の2点を意識してヘッダーのデザインを行いましょう。自分が作りたいデザインのヘッダーを作るのではなく、サイト全体にどのようにフィットさせるかを考えてデザインしてください。 デザイン by milajones デザイン by MercClass デザイン by Slaviana   インパクトのある見出しを有効活用 ヘッダーにキャッチコピーのような見出しを使用することで、サイト訪問者の興味をより引き立てることができます。本屋に並ぶ本の多くには、思わず手にとってしまいたくなるような帯がついていますよね。あの帯だけで本の売上が10倍変わることもあるそうです。ヘッダーの見出しは本の帯のようなものだと考えてください。 例えば、「美味しい珈琲屋」という見出しはデザインによっては映えますが、インパクトが弱いためサイト訪問者の心に響かないでしょう。そこで、「創業20年 愛され続ける珈琲屋」と言葉を変えるだけでもイメージが大きく変わります。さらにイメージに合ったフォントに変更すればさらに効果は高まります。 ヘッダーを配置するサイトの強みやメリット、特徴からキーワードをいくつも選び出し、特に強調したいものを組み合わせてサイト訪問者の心をつかむ見出しを作りましょう。 デザイン by KR Designs デザイン by fortunefaded デザイン by Kristopher P. 印象に残るオシャレなヘッダーデザインは、サイトの特徴をしっかりと表現しつつも、サイト全体にうまく溶け込みます。見た目の奇抜さや装飾を出来るかぎり省きながらも、アイキャッチやキャッチコピーを効果的に使うことで、サイト訪問者の印象に残るデザインに仕上げることが可能です。ぜひ、この記事を参考に、ヘッダーデザインにチャレンジしてみてください。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。