バナーをデザインする時の文字ポイント

バナーは限られた領域の中で、文字と画像によって伝えなければなりません。
そして、ユーザーにクリックされるためには、伝えたい相手に伝えたい情報を一目で伝えなくてはなりません。

1.目立たせたい文字の優先順位を決める

まず、バナーに掲載したい文字を全て配置してみましょう。

その次に、この中でどの情報を一番伝えたいか、どの情報がユーザーにとってメリットのある情報なのかを考え、目立たせたい文字の優先順位を決めます

2.文字の大きさを決める

先ほど決めた優先順位をもとに、視覚的に優先順位の違いがわかるよう文字の大きさを変えて強弱をつけていきます。

3.文字の位置を揃える

人の視線は左から右に移動するので、文章を読ませることを目的としたコンテンツを作成する場合は左揃えることが私見です。
背景画像と文字だけで構成するバナーを作成する際には、「中央揃え」がおすすめです。
中央揃えは全体がシンメトリー(左右対称)になるので安定感が生まれ、デザインとしての一体感を出しやすくなります。

4.文字に装飾を付ける

文字の大きさを変えてだけでは、まだ単調な印象です。
文字要素によって文字の後ろに背景色を敷く、上下に線を引くだけでも要素間にメリハリが生まれます。

背景を敷いた文字や、白抜きにした文字は他に比べて目に留まりやすくなるので、全体の構成に合わせて文字の大きさを再調整します。
ここで色を付けると配色とレイアウトの両方で悩んでしまい、余計に時間がかかってしまう場合もあるのでモノクロのまま進めていきます。

5.フォントを変える

フォントはデザインの印象を決める大事な要素です。
選ぶフォントによってユーザーに与わる印象が変わってくるので、どういったユーザー層に訴えたいのか、どのような印象を与えたいのかによって使いわける必要があります。

6.文字の大きさを揃える

同じ文字サイズで設定してもひらがな、カタカナ、漢字、英語で大きさが違って見える場合があります。

7.文字に対比を付ける

先ほどの一体感を出す作業とは対照的に、文字の大きさを不揃いにすることによって内容を強調することが出来ます。

8.字間と行間を調整する

字間とは文字の左右の空間で、行間とは文章の行と行との間のことです。
どちらも伝わりやすさに影響することなので、要素ごとにまとまりが感じられるように設定することが大事です。

9.色をつける

色はデザイン全体の印象を決める大事な要素です。
バナーのリンク先のページの色に合わせる、伝えたい内容のテーマやイメージに合った色を選ぶなどでメインの色を決めます。

10.遊び心を加える

デザインがまとまったところで、より魅力的になるよう少し手を加えてる。

コーティングとは

コーディングはプログラミングの一環で、WebサイトをGoogleなどのブラウザで表示するためには、プログラミング言語を使ってコードを書き、コンピューターに指示を出す必要があります。
そのコードを書く業務がコーディングです。

HTML

HTMLは文章や枠などの構造を指定するマークアップ言語です。HTMLはプログラミング言語ではありません。
コーディングは『タグ』という記号を使って記述し、コンピューターに指示を出します。タグにはたくさんの種類があります。

CSS

CSSはスタイルシート言語です。CSSもプログラミング言語ではありません。
CSSを使えば、色をつけたりサイズを細かく調整できたり様々な装飾をつけることができます。

JavaScript

JavaScriptは動きをつけるプログラミング言語です。
〈TOPページに戻る〉というボタンを押してゆっくり戻っていく動きや、ドロップダウンメニューが出てくる動きはJavaScriptで再現できます。

WEBデザイン配色パターン

配色パターンとは、ホームページサイトのデザインを決める上で重要な要素のひとつです。
一般的には、以下の3つの色を選ぶのが好ましいと言われています。

・ベースカラー
・メインカラー
・アクセントカラー

ベースカラー

サイト内でもっとも大きな面積を占める色で、背景や余白で使われます。

メインカラー

サイト全体の印象を決める色で、配色カラーの中でもっとも大切なカラーになります。
メインカラーによって全体のイメージが決まります。

アクセントカラー

メインカラー、ベースカラーに対して、ユーザーが見たときに目が引くような色を指します。
問い合わせボタンなどに使われる場合が多いです。

ベースカラー70%、メインカラー25%、アクセントカラー5%の割合がバランスが良いとされます。

カラム数について

1カラム

①ヘッダー②メイン③フッターが構成。
縦積みされたコンテンツの順序はスマホで表示した時も変わりません。
スマホ画面をはじめとしたレスポンシブデザインへの配慮があります。

メリット
・情報を1つの文脈で伝えることができる
・スマホ画面のデザインと統一感が生まれる

デメリット
・他のコンテンツが探しにくい。
・広告が入れづらい

2カラム

ヘッダー、フッターと②メインと③サイドメニューが並列に構成。
最もよく採用されているレイアウト。
サイドメニューを右側に置くケースはECサイトなどで多く採用され、目的の商品を探しやすくカテゴリー階層も分かりやすいといったメリットがあります。
左側に置くケースはメディアサイトに多い。

メリット
・見やすさに優れている
・デザインの参考になるサイトが豊富にある

デメリット
・コンテンツへの集中力がある程度で低下する
・高さの均衡を調節するのが難しい

3カラム

ヘッダー、フッターと②左サイドメニュー③メイン④右サイドメニューが並列に構成。
2カラムと同じように多くのサイトで採用されている。

メリット
・次のアクションの選択肢が多い
・スクロール量が短くなりユーザーの負担が減る

デメリット
・雑多な印象や古臭い印象を与えかねない
・スマホ画面での配慮が必要になる

WEBデザインの基本構成

WEBレイアウトには様々な種類がありますが、WEBサイトの目的に応じて最適なレイアウトが使用されます。

WEBサイトを構成するレイアウト要素としては以下のようなものがあります。

ヘッダー

ヘッダーとはWEBサイトの上部に共通の画像、テキスト、ナビゲーションなどを配置するために設けられます。

・ロゴ
・ナビゲーション(メニュー)
・バナー
・イントロ、テキスト

ロゴ

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。

ナビゲーション(メニュー)

ナビゲーション(メニュー)はWEBサイトの操作性を決める重要な要素です。
最近ではスマートフォンからのアクセスが増加し、狭い画面での操作性を考えると、ボタンよりもテキストメニューの方が操作しやすいのでナビゲーションはシンプルなテキストで表現することが多いです。

バナー

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
バナーはWEBページの中で広告的色彩の強い部分です。

イントロテキスト

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
イントロテキストとはWEBサイトの会社やサービス、商品が一言で言うとどのようなものであるのかを表現した文章です。

サイドバー

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
サイドバーはWEBページのタイトルや本文以外の機能や情報をまとめてレイアウトする部分です。
サイドバーに配置される情報としては以下のようなものがあります:

・検索バー
・新着情報のタイトル一覧
・記事カテゴリ
・カレンダー
・バナー広告
・タグクラウド
・更新履歴
・ショッピングカート
・コメント
・RSS
・ビデオ
・アーカイブ
・サイドバーは機能的ですが、情報が多すぎるとサイドバーが使いづらくなります。またスマートフォンのような小さな画面ではサイドバーは邪魔になってしまいます。サイドバーにはメリットとデメリットがあることを考えて設定すべきです。

ボディ

WEBサイトではGIFまたはPNG形式でロゴデータを作成します。
ボディにはWEBページの本文、画像、動画などコンテンツそのものが配置されます。

カラム設定

WEBサイトの読みやすさを考慮して、カラム設定を行う場合があります。
例えば、自分の会社のビジネス領域が大きく分けて4つある場合、カラム設定を行うとこの会社は大きく分けて4つのビジネスカテゴリがあるのだと言うことがわかりやすくなります。

見出しのデザイン

見出しのデザイン

↑これを見出しといいます。

1.罫線を引く
見出し周りをシンプルな罫線で装飾する方法です。

2.アイコンをつける
先頭にイラストやアイコンを入れると目印になります。

3.英字と組み合わせる
飾りとして英字と組み合わせる方法です。

4.囲む
文字を1文字ずつ囲む方法です。

5.ふちどりをする
太文字をふちどり、下の文字とずらして重ねたデザイン。

他にも様々な見出しデザインがあるので、いろいろなサイトを見て参考にしてみてください!

illustrator カラーパネル

カラーパネルでカラーモードを変更するには、パネルメニューから変更したいカラーモードを選択します。
スペクトルバーにマウスポインタを移動します。マウスポインタの形状はスポイトツールになります。

shiftキーを押すと、マウスポインタの形状が選択ツールのものになるのでクリックします。

パネルメニューで表示される順番(CMYK→WebセーフRGB→グレースケール→RGB→HSB)でカラーモードが変更されます。

DTPで知っておくべきこと

天地:印刷物についている各部分の名称のことです。「天」は紙面上側のことを指し、「地」は紙面下側のことを指します。

アウトライン化:文字情報をあらかじめ図形化することで、ドキュメントファイルをフォントがない環境で開いた場合の文字化けを防ぐことができます。
※アウトライン化するとテキストの内容を編集できなくなるので、デザインが全て終わって入稿前にアウトライン化する or アウトライン化する前のaiデータを別で保存しておくことを推奨。

ノンブル:本・パンフレットなどのページ数を表す番号のことをいいます。

Q数:文字サイズを表す単位のことをいいます。文字サイズを大きくすることを、ポイント(Q数)を上げると言います。文字サイズを小さくすることを、ポイント(Q数)を下げると言います。

文字校(内校):印刷データを次の工程に渡す前に、配置されているテキストの内容やイラスト、画像データに間違いがないか内々で確認を行うことを指します。印刷してしまうと取り返しがつかなくなるなど紙での印刷ミスは影響範囲が広いので、慎重に行う必要があります。

最小フォントサイズ
視認性があり、読める文字であることは欠かせないので、テキストサイズは4.5pt以上を使うようにしましょう。
本文の文字には、8pt〜11pt程度の文字サイズが多く使われています。見出しはそれよりひとまわり大きいサイズ、キャプションはひとまわり小さいサイズで使い、強弱をつけます。
媒体によっては最低文字の大きさが決められている場合もありますが、注釈などには4.5pt ~ 5ptを使います。

トンボとガイド
印刷用データを作る際に、まず作るのがトンボとガイドです。データ作りの土台になるので、どちらもしっかり作っておく。

データを軽くしておく
データが重いと、イラレが固まりやすくなり作業スピードが下がるので、データを軽くしておくといいです。

文字詰め
テキストパネル内にある、トラッキングやカーニングを使って、見ても読んでも綺麗な文字の配列をしましょう。
トラッキングは、選択した文章全体の文字間隔の調整を行います。テキストの右側の余白が調整されます。

カーニングの項目
メクトリス:フォントを作ったデザイナーが計算したデータを元に最適なカーニング情報に基づいて自動で文字詰めを実行。このデータというのは、フォントに埋め込まれています。
オプティカル:ソフトが自動で判断して最適な文字詰めを行う(ソフトによる文字詰め)

文字の変形
テキストがポイント文字(対になるのがエリア内文字)の状態で、上下左右に縮めたり広げたりするとテキストパネル内の水平比率、垂直比率の数字が変動します。
決まったスペースに入りきらない文章をなんとか詰め込みたいときには文字の変形で縦横の比率を変えてはめ込みます。

デザインにおける基本

1.近接
同じ要素を持つ仲間同士をくっつけて、逆に別の仲間同士を遠ざける、「グループ分け」です。
近接は、デザインだけでなく、商品陳列や人間関係まで幅広い領域で使われています。

2.整列
順番にきれいに並べるということです。全体の配置をきれいに整頓することで、見栄えが良く見えます。
ワードなどの文書ツールなどにもある、左揃え、右揃え、中央揃えなどのように、基準に沿って揃えたり、また色ごとに一定の規則性に沿って情報を並べることで、情報がすっきりまとまって見える。

3.コントラスト
明るいと暗い、濃いと薄いなど、対比してメリハリをつけることによって、デザインをより見やすくすることができます。
コントラストをうまく活用することによって、伝えたい情報をひと目で伝えることができるデザインにすることができます。

たとえ文字が大きくても、文字の太さや書体、配色など様々な要素が噛み合っていないとコントラストの効果を最大限に活かすことができていないということになるので、注意が必要

4.反復
同じデザインを繰り返して使うことを指します。全体を通して同じデザインを使い続けることで、見やすさや統一感などを与えることができます。

主に、プレゼン資料、雑誌など、紙1枚ではなく文量が多いときに使われる手法。
紙1枚で済むくらい情報量が少ない資料でも、ある程度デザインの枠組みを決めて統一感を与えた方が見やすく効果的に情報を提供できる。