デザインカンプを作ってみよう②完成編

前回はデザインカンプの下書き段階までを、谷宜樹が解説しました。
今回は、作成した下書きをもとにデザインカンプを仕上げていきましょう。
クライアントがいる場合は、サイズや配色などの指定がないかあらかじめ確認しておいてください。
勉強中の方は、ワイヤーフレーム通りになっているか見比べ、参考にするサイトから配色のイメージをもらっておくと良いですね。
気になることがあれば、下書きの段階で解決しておくことが大切です。
コーディングできるかどうかも確認したら、次に進みましょう。

■下書きを書き写してみよう

ワイヤーフレームや下書き、参考にするサイトなどを準備して、本番用シートに書き写していきます。
下書きをphotoshopで作成した場合は、書き写す必要はありません。
紙に下書きした場合や別のソフトを使って下書きした場合は、そのままの内容でphotoshopに写しましょう。
画像やアイコンなどの素材が用意してあれば、完成品に使うものと同じものを配置します。

■大まかに配色してみよう

下書きが写せたら、画像やアイコンを配置し、色も大体決めておくとスムーズにデザインできます。
クライアントからの指示がない場合は、参考にするサイトから決めて良いでしょう。
クライアントから指定されている場合でも、デザイナーが別のものを提案することがあります。
クライアントとの打ち合わせによって変更もあり得るので、この段階ではざっくりとしたものでOKです。

■ガイド線を引いてみよう

まずWEBページの幅の中心に、線を1本引いてください。
次に、文字が入力される範囲「コンテナ幅」を決め、ガイド線を引きます。
例えば、WEBページのギリギリまで文字を入力するなら、ページの左右の両端に線を引きましょう。
余白を持たせたい場合は、その幅を考えながら線を引きます。
一般的に、800～1300pxくらいのコンテナ幅が多いでしょう。
この線を目安に、具体的な配置をすることができます。

■バランスを見ながら組み立てよう

ガイド線まで引けたら、ワイヤーフレームを見ながら中身を組み立てていきます。
まずはガイド線を目安に、下書きを書き写したところの位置がズレていないか確認しましょう。
画像の大きさが適切か、イメージ通りの配色になっているかも忘れず確認して下さい。

これでデザインカンプの完成です。
初めて作る場合は、イメージしていたものと違うものになることもあります。
上手くいかない時には、ワイヤーフレームや下書きの段階から見直す必要があるでしょう。
焦らずじっくり準備して取り掛かるのが、谷宜樹のおすすめです。

 

デザインカンプを作ってみよう！①下書き編

前回は、WEBデザインをする時に重要な「デザインカンプ」について谷宜樹がお話ししました。
今回はデザインカンプの作り方について、まずは下書きの段階までを詳しく見ていきます。
手順に沿って、作成するコツなどもお話していきますので、ぜひ一緒に作ってみてくださいね。

■どのような流れで作成するかイメージしてみよう

デザインカンプは、一般的に次のような手順で作成されます。
勉強中の方は、自分にどんな技術が必要になるか考えてみましょう。

①「ワイヤーフレーム」を作る
②参考にするサイトを探す
③デザインカンプの下書き
④ページの幅と高さを決める
⑤下書きを書き写す
⑥大まかな配色を決める
⑦「ガイド線」を引く
⑧全体のバランスを確認

■「ワイヤーフレーム」を作成しよう

WEBページを作る際は、まずレイアウトを含めた「ワイヤーフレーム」という設計図を作成します。
デザインカンプの前に、WEBページの配置を決めておきましょう。
例えば、ロゴやメインとなる画像の位置と大きさ、記事を貼り付ける場所などを図にして表します。
このワイヤーフレームの作成にも細かいルールや方法があるので、また後日、谷宜樹が解説しましょう。
今回は、初めに設計図を作るということが理解できればOKです。

■参考にするサイトはどこで見つける？

ワイヤーフレームができたら、どのようなデザインにしていくか考えます。
一から新しいものを作るのは難しく時間もかかるので、既存のデザインを参考にするのが一般的です。
以前、谷宜樹が紹介したギャラリーサイトなどを利用するのも良いでしょう。
できるだけ豊富なイメージの中から選びたいので、少なくとも5～10個くらいは参考資料を集めておいてください。

■デザインカンプの下書きをしよう

どのようなデザインにするか決まったら、ワイヤーフレームを見ながら下書きしてみましょう。
Photoshopやillustratorで作成するのが一般的です。
ワイヤーフレームに肉付けするように、実際のデザインと同じように作っていきます。
クライアントからの指示がある場合は忘れずに取り入れましょう。

■ページの幅と高さは？

クライアントからの指示に従うのが基本です。
特に指定がない場合は、1000px前後の幅で作ると良いでしょう。
PCでは、1280px×1920pxで作成されているものが一般的です。
解像度にも考慮し、表示させたいデバイスによってどのくらいのサイズが見やすいか考えて作成します。

ワイヤーフレームの作成からページのサイズ感を決まるまでが、デザインカンプの下書きです。
ここまで来たら、次は配色や位置の決定をしていきましょう。
続きはまた次回、谷宜樹が解説します。

「デザインカンプ」とは？完成見本でクライアントとイメージを共有

WEBデザインをクライアントに提案する時、まず見本を作ってプレゼンします。
この見本のことを、WEBデザイン業界では「デザインカンプ」と呼んでいます。
今回は、デザインカンプがどのように使われているか谷宜樹が解説していきましょう。

■デザインカンプの役割とは？

完成見本としてクライアントに披露するのが、デザインカンプです。
企画書よりも具体的にイメージが伝わり、完成品の内容とかなり近いものになります。
デザイナーとクライアントで完成形のイメージを共有し、「こんなはずではなかった」ということを未然に防ぐために作られています。
デザインカンプの時点でイメージの共有をしておき、クライアントが納得した上でHTML・CSSによるコーディング作業が開始されるのが一般的です。
コーディングの前なら修正も簡単なので、デザインカンプをしっかり確認しておく必要があるでしょう。

■デザイナーのスキルが試される！もう1つの意味

デザインカンプは、クライアントに完成品のイメージを持たせるだけでなく、「このデザイナーに任せて良いか」という判断材料にもなります。
谷宜樹もWEBデザイナーをクライアントに紹介する時、まずはデザインカンプを見せてスキルをチェックしてもらいます。
能力があるかないかということの他に、デザイナーが得意とするデザインとクライアントが求めるものの相性が良いかどうかも重要です。
例えば、モード・ラグジュアリーなデザインが得意なデザイナーに、ファミリーレストランのチェーン店の広告を任せても良いものでしょうか。
クライアントの要望を聞くだけでなく、デザイナーの力量を判断して適切な人材をあてがうのも谷宜樹の仕事です。
その時にデザインカンプはとても参考になります。

■ただの下書きじゃない！コーディングを意識して作る

一般的に、WEBデザイン制作会社で作るデザインカンプは、photoshopが使われています。
illustratorというソフトが使われることも多いでしょう。
また、無料のソフトで「GIMP」もあります。
これは、photoshopやillustratorに匹敵する高性能のソフトなので、WEBデザインを勉強中のみなさんにもおすすめです。
HTMLやCSSが分からなくても感覚的にWEBデザインを作っていくことはできますが、あとでコーディングする作業があることを忘れずに。
例えば「ここで2つの文章が交互に点滅するようにしたい」と思ってデザインしても、その命令をコーディングするスキルがなければできません。
コーディングが可能なのかよく考えてデザインカンプを作成しましょう。

今回は谷宜樹も作成しているデザインカンプについて解説しました。
次回からは、具体的にどうやってデザインカンプを作っていくのか勉強していきましょう。

CTAボタンが与えるイメージは？効果的なデザインを考えよう

前回は、谷宜樹がCTAボタンに添える言葉について解説しました。
他にも、CTAボタンの見た目を決めるサイズ・カラー・イラスト・形が重要だとお話しましたね。
今回は、この4つの要素について詳しく解説していきたいと思います。

■色んなCTAボタンを作ってみよう！

CTAボタンが与えるイメージを知るためには、まず自分で様々なサイズ、カラー、形のボタンを作ってみるのが一番です。
編集ツールの練習にもなるので、まずは何も考えずに色々作ってみましょう。
3～5個作れたら、そのボタンに同じ「ここをクリック」という文字を入力してください。
これでそのボタンの見た目だけでどう感じるか調べることができます。
じっくりボタンを観察し、自分ならどんな感想を持ったかメモしてみましょう。

■CTAボタンのデザインで考えることは？

CTAボタンの見た目からどんな感想を持つかは人それぞれですが、一般的に次のようなことを意識すると効果的だといわれています。
ここからあなたのWEBサイトに必要なものが見つかるかもしれませんよ。

・サイズ
スマートフォンでも表示されるWEBサイトであれば、CTAボタンのサイズは10㎜×10㎜が理想です。
平均的な指の大きさから、このサイズのボタンが押しやすいといわれています。
長方形のボタンであれば縦の長さが10㎜、円形のボタンであれば直径が10㎜のものを意識しましょう。

・カラー
CTAボタンの大きさや形が同じでも、色が違うだけで印象がガラッと変わります。
WEBページの背景の色と合っているか、目に飛び込んでくるかを意識してデザインしましょう。
また、前に解説したように色が持つイメージもあります。
例えば、青は誠実さをイメージさせるので、企業説明のページに合いますね。
そのほか、LINE登録を促すならLINEのオフィシャルカラーである緑を使うと分かりやすいでしょう。
ただし、赤い文字はエラー、薄いグレーの文字はクリック不可であるというイメージもあるため、使用する色には注意が必要です。

・イラスト
CTAボタンは、図形で文字を囲むだけのほか、人や物などのイラストを添える方法もあります。
例えば、人の姿をしたアイコンの右上に＋マークが書かれているイラストと「フォロー」という文字が書かれていれば、このボタンの意味がイメージしやすいですね。
ショッピングカートのイラストや吹き出しのイラストも、商品購入や口コミ表示だと分かりやすいので谷宜樹のおすすめです。

・形
長方形、角が丸まった長方形、円形のCTAボタンをよく見ます。
長方形のボタンはスタイリッシュに、角が丸まったボタンは親しみやすさを感じますね。
円形は可愛くて目立ちますが、WEBサイトによっては子どもっぽくなりすぎて合わないものもあります。

自分のサイトがなんとなくまとまりのないデザインになっている場合は、WEBページの内容とCTAボタンのデザインが合っていないのかもしれません。
もう一度CTAボタンを作り直してみましょう。

CTAボタンにはどんな言葉を添える？分かりやすく魅力的なボタンとは

CTAボタンのデザインは、見る人に「押してみたい！」と思わせるものにする必要があります。
これは初心者の方でも、なんとなく想像できるのではないでしょうか。
しかし谷宜樹は、「このボタンを押したらどうなるか」ということが容易に想像できることも重要だと考えています。
WEBサイトで、ただ「押してみて」と書かれているボタンをあなたは押すでしょうか。
ボタンを押したら料金を請求されるかも、勝手に登録されるかも、と思ったら怖いですよね。
CTAボタンは、閲覧者が安心してクリックできるようにするべきです。
今回は、意味が分かりやすく、クリックするメリットを感じられるようなCTAボタンのデザインについて、谷宜樹と一緒に勉強していきましょう。

■ボタンを押したらどうなる？具体的かつシンプルに

WEBサイトにあるCTAボタンを見てみましょう。
時々「ここをクリック！」と書かれているものを見つけます。
それをクリックしたらどうなるか、あなたはそのページだけで判断できますか？
中にはクリックしてみて初めて
「ああ、会員登録のページに飛ぶんだ」「あれ？いつの間にか商品購入することになったみたい」と分かるCTAボタンもありますね。
クリックしたらどうなるかを、はっきりと伝えるCTAボタンにするべきです。
例えば、「会員登録はこちら」「商品を購入する」など、そのボタンをクリックするとどんなページに移動するか簡潔に説明しましょう。

■今すぐ押してほしい！ボタンを押すメリットを伝えよう

CTAボタンの目的は、閲覧者に行動を起こしてもらうことです。
「あとで考えよう…」と思ってスルーされてしまっては、CTAボタンを設置した意味がありませんね。
今すぐボタンを押してほしいなら、すぐに押したくなる言葉を添えましょう。
例えば、
「会員登録する」を「今なら1ヶ月無料！早速お試し登録」
「商品を購入する」を「あと1日！お得な限定セールで購入する」
という言葉でCTAボタンを作成するのが谷宜樹のおすすめです。
無料体験キャンペーンや期間限定セールを行っている場合は、忘れずにCTAボタンで説明しましょう。

■4つのデザインを意識しよう！

CTAボタンに使う文章の他に、ボタンの見た目も重要なポイントです。
サイズ・カラー・イラスト・形の4つは、WEBサイトに合わせて効果的なものを選びましょう。
詳しくは次回、1つずつ谷宜樹が解説していきます。
まずは、様々なデザインのCTAボタンを作ってみて、それぞれどんな印象を持つかじっくり観察するのも良いですね。
そこから人に与える影響に気付くことができます。

CTAボタンに添える文章で、WEBサイトが伝えたいことを明確に説明しましょう。
分かりやすいことと、魅力的であることの2つが備わっていると、よりクリック率が上がります。