0

LP(ランディングページ)を作る時に意識していること

長い文章がだらだらつづくWebページ…疲れるし、あまり読みたくないですよね。

ランディングページのホームページ制作するときには

ランディングページ集めました。
などを参考にしています。自分なりに気づいたいくつかの法則をまとめました。

LPのコツその1

LPは通常のホームページよりも、より一層、漫画のように、絵で追って閲覧者をスッと納得させられる流れを目指しています。
原稿をもらったら一旦通して読み、テキストが多いな、と感じた部分はそれを図式化します。

これはhutureのLP抜粋です

lp4

 

————————–デザインする前の元の原稿 ——————————————

「目的」を明確にする為のヒアリング

ホームページを作る「目的」を明確にすることが

ホームページ制作の第一歩。

「ホームページを制作しようと思ったきっかけは?」

「なぜホームページをリニューアルされたいのですか?」

自社(店舗)をアピールするための手段として必要ならば、

なぜアピールが必要なのでしょう?

「信頼・安心を与える為のブランディング?」

「それとも集客?」

「リピート客への情報提供?」

お客様によって目的は様々です。

目的が違えば使用する道具もまた異なります。

お客様のお悩み解決に最も適した道具は何か(=どんな ホームページを作るべきか)を考えるため、まずは現状のヒアリングをしっかりとさせていただくところから始めます。

ホームページは目的ではなく手段!

目的を達成させるための道具なのです。

——————————————以上———————————-
紙に一旦書き出して、図に出来ないか整理します。ここでは、

「ホームページを制作しようと思ったきっかけは?」

「なぜホームページをリニューアルされたいのですか?」

をQ&Aのような大きな問いかけにできないか?と考えました。
そして矢印を引いて、

「信頼・安心を与える為のブランディング?」

「それとも集客?」

「リピート客への情報提供?」

をアイコンのように扱えないかと思いました。

LPのコツその2

フォントサイズのジャンプ率が大きい分、余白も広めに。

ゆったり見えるように、地と文字とのマージンを30pxにしています(通常のページでは10px程度が多いです)

lp3

こちらは20px
lp2

LPのコツその3

LPに限りませんが、図が多くて色がバラバラになりやすいのでカラーパレットをつくっておく。
色々探していて、使いやすかったカラーパレットツールは「カラースキームデザイナー」です。

ここに行くとページ左半分に大きい虹色の色相環が確認できます。

大きい虹色円盤の右下にRGB:  という所があるのでそこにメインカラーを「ff0000」のように入力

します。大きい円盤の上に小さい円盤が6つ横並びになっています。それをクリックすると

自動生成されたカラーパレットが6種類見られます。

 

0

自然と人工的な配色

自然に見える配色と、人工的に見える配色について説明します。

 

◎ナチュラルハーモニー
=ナチュラルな配色。
暖色系の色は明度を高くし、寒色系の色は明度を低くすることで
自然な色を演出できます。
さらに、明るい色は黄みよりの明るい色にし、
暗い色は青みよりの暗い色にすると自然な印象になります。

 

◎コンプレックスハーモニー
暖色系の色は明度を低くし、寒色系の色は明度を高くすることで
不自然な色を演出できます。
さらに、明るい色は青みよりの暗い色にし、
暗い色を黄みの明るい色にすると不自然な印象になります。

 

※人工的なイメージがある配色
基本的には鮮やかな色をぶつけあうと、人工的でぎらぎらとした
刺激のある色になります。
ですので、上記の二つを表現したいときはこのような鮮やかな色の
使いすぎは極力さけたほうが良いでしょう。

人工的なイメージの配色の組み合わせは
「不思議さ」「未来的」「幻覚」などをテーマにホームページ制作を
する際には当てはまります。そのときは、100%鮮やかにすることをおすすめします。

0

スタイリッシュな配色

スタイリッシュな配色

 

スタイリッシュとはハイセンスという意味になります。
余白を多めにとる・寒色をベースに色数を少なくしてシンプルにまとめる。
などするとスタイリッシュな配色に近づけることが出来ます。

 

●スタイリッシュのイメージとは

無彩色で無機質を演出し、寒色のグレイッシュ・トーンを基調にまとめると
スタイリッシュを表現できます。
色の数を最小限に抑えれば抑えるほど、スタイリッシュ感が出ます。

 

●クールさをイメージさせる配色

透明感のある色を高明度・中彩度でまとめると、都会かつ清楚な印象になります。
明るいトーンの同一色相でまとめるとクールさをイメージさせる配色となります。

 

●スタイリッシュな配色においてのNG

・暖かさを感じさせる色の使用
※人工的で無機質な感じを表現することがスタイリッシュな配色に
なるので、基本的にはワンポイントでも暖色が入るとイメージが変わってきてしまいます。

0

色面積で印象を強くする

色の面積を大きくして形をよりはっきりと見せることで、力強い印象になります。

 

色面積を大きくして、力強い印象にする

 

ホームページ制作のデザインにおいて、デザインにメリハリをつけるために
ある箇所を強調したいときがあります。
そういったときは、色ベタの面積を多くすると力強い印象になります。

 

注目させたい部分には大きな面積を配置することも効果的です。
例えば、タイトル部分に大きな色面積を使用すれば、そこに視線が集まり
目立ちやすくなります。

 

また、少し話がそれますが、
そこの近くに同じ色の小さな色面積を配置すると、大きなものと比べて
色の濃淡が異なって見えます。
大きな色面積は本来の色よりも「薄く」見えます。
小さな色面積は本来の色よりも「濃く」見えます。
これを「面積対比」と言います。

 

※色ベタとは
指定した範囲に濃淡をつけずに、色をおくこと

 

0

共通色を使った表現

■ホームページ制作時のデザインにおける配色について説明します

 

共通色を上手く使った表現方法

 

コンテンツの内容が豊富で要素が多く、全体がごちゃごちゃしてしまった・・・
そんなときは離れた場所に同じ色や同系色・類似色を配置することで全体が
まとまりやすくなります。

 

ここでポイントなのは、近い場所ではなく、離れた場所かつ
大きな色面積と、小さい色面積を組み合わせた方が効果が
出るということです。

 

これらを上手く活用することで、全体がまとまり、
引き締まった印象を与えることが出来ます。
また、色面積を大きくすると力強く活気のある印象を与えることも出来ます。
こちらに関しては、また次回に説明させていただきます。

 

0

中性色でまとめる配色

 

ホームページ制作における
緑や紫などの中性色で配色をした際のポイントや効果について

説明します。

 

中性色で独特な雰囲気を出す配色方法

 

●ポイント
中性色は寒暖や男女らしさのイメージがつきにくく、不思議なイメージを
与えます。
明度の高い組み合わせだと、軽さが出るので比較的他の色にも合わせやすい
ところがあります。
また、彩度が高いとミステリアスなイメージを与えます。

 

紫でまとめると優雅で上品、大人の女性をイメージさせます。
緑でまとめると癒しや、落ち着いたイメージになります。

 

最後に紫と無彩色(黒、白、グレー)を合わせるとクールに見せたり、
モダンに見せることも出来ます。

 

ホームページ制作で中々こういった色を使うことは少ないかも
知れませんが、こういった配色もあります。

0

モノクロにして色を強調する方法

 

ホームページを制作するときのデザインについて、
目立たせたい箇所をカラーにし、他の箇所をモノクロにすることで
そこのカラー部分が強調される法則について説明します。

 

モノクロにして色を強調する方法

●モノクロ画像の特徴について
モノクロの画像は彩度よりも明度で表現する分、カラーよりも
情報量が少なく、やや抽象的な印象になります。
モノクロの一般的な特徴としては
時代感を出したり、まるで時が止まっているような感覚を
見る人に与えます。
また、被写体によっては知的で芸術的な印象を与えます。

 

●一部分のみカラーを残して、モノクロにする
色を強調するうちの一つとして、一部分のみカラーを残し
ほかをモノクロに加工することで、カラー部分が浮き上がり
ドラマチックな印象になります。

 

色を多く使用すると、悪い言い方ではありますが雑な印象に見えることがあります。
そういったときに、上記の方法を行うことで印象が落ち着き、
文字や素材が配置しやすくなります。

ホームページ制作をしていく中で、配置について悩んだりした際は
この方法もぜひ、視野に入れてみてください。

0

描画をパスにするか ビットマップにするか

 

このような吹き出しをつくる時にどんな手順がふさわしいでしょうか。
光が左上に丸くかかっているので、
直線のグラデーションツールでは塗れません。
下の階層の矩形をマットな青にしておいて、
もう1レイヤー上から重ねるようにエアブラシで描くことにしました。

上が完成例、下はギザギザしている失敗例です。

path

 

両者の違いは上はパスで描いたこと、
下は選択ツールで楕円形を選択し、中を塗って吹き出しにしたことです。

まず、楕円形ツールで楕円形を作ります。

 

名称未設定-3

 

次に、ペンツールに持ち替え、シェイプを選びます。塗りを青にします。

?名称未設定-2

しっぽを描いて用意します。角度を切り替える時はALTを押しながらするとできます。

名称未設定-4

 

二つを選んでから、レイヤー→シェイプを結合、で合体します。

名称未設定-5

 

効果レイヤーでドロップシャドウをかけ、境界線の外側【または光彩(外側)サイズを9px、スプレッド77%】にすると完成です。

ラスタライズをすると、ペイントのように矩形を塗れるので、扱いの自由さが好きですが

このようなきちんとしたカタチをかく時は、単純な選択範囲ではダメで、きちんと描かねば…と学びました。

0

可読性について

こんばんはー

webデザイナー見習いのNです。

今回は「可読性」について簡単にご説明をいたします!

○可読性とは?

前回説明しました「可視性」が「文字の見やすさや、

文字として認識のしやすさ」になります。

一方「可読性」は「文字としての読みやすさ」になります。

「可視性」にゴシック体が多いのに対し、じっくりと読んでもらうことを求める

「可読性」は明朝体、セリフ体などが多いです。

例えば、新聞でしたり、小説などの書籍がそれにあたりますね。

webサイトでは、見ている人にちゃんと読んでほしいと思う箇所に明朝体・セリフ体を

使うと「可読性」が上がるということになります。

フォントによって、様々な効果がありますので場面によってフォントを

使い分けていくと良いということですね。

次回はフォントの効果について、さらに細かく紹介してゆきます!

0

視認性を高めるには

こんばんは!

見習いデザイナーのNです。

デザイナーを目指している中で様々なことを日々教わっていますが、

本日は「視認性」について私が説明させて頂きます。

○視認性とは?

まず、視認性とは形や物が背景に対して見やすいことを言います。

例で言うと「視認性が高い」または「視認性が低い」と言われています。

視認性が低いと言われてしまった場合は、視認性を高くするためにデザインを変えな
くてはいけません。

例えば以下のことをすると視認性が高くなるときもあります。

○「背景」と「物」の明度差を高くする。

○写真に柄や色が多い場合には写真のトーンを調節、あるいは「背景」と「物」の間に
色をはさむ。

○「物」に効果で影や光彩をつける。

などがあります。

視認性が高いということは見やすいということなので、こういった点を

気を付けるとデザインがもっと見やすくなる、分かりやすくなるということですね。

また、学んだことがあれば随時あげさせていただきます。

それではー