テクニック

WEBデザインの品質をあげるテクニック集です。クオリティを上げるための技術やヒントをご紹介します。

Back Number

フリー素材でサイトを作る グローバルナビ編

2012年04月05日
フリー素材でサイトを作る グローバルナビ編

今回はフリーのアイコン素材を使って、ショッピングサイトのグローバルメニューをつくります。

03

2012年07月17日
写真素材がない時のデザイン方法 キービジュアル編

今回は、素材がない時のデザイン方法を、キービジュアルをデザインする場合に絞って考えてみたいと思います。

02

2012年09月11日
写真に関しての「困った」を解決!~ サイズが小さい・解像度が低い場合 ~

入稿された写真素材のサイズが小さい・解像度が低い!そんな時のデザイン対処方法です。

01

2012年11月08日
フリー素材でサイトを作る タイトル・見出し編

グローバルナビ編の続編!簡単で見栄えのする見出しを作りましょう。今回はいくつかパターンをご紹介します。

index_img

2013年08月09日
テイストや雰囲気の作り方 ~前編~

デザインを作る上で、必要となってくるのがテイストです。見た目も雰囲気もとても左右される大切な内容です。今回は、テイストの作り方についてご説明します。

index_img

2013年08月09日
テイストや雰囲気の作り方 ~後編~

デザインを作る上で必要なテイストについて、今回は後編としてテイストの作り方を実践的にご説明します。

初めてでもできる!ペンツールを使ってお絵かき ~描き方編~

2013年08月16日
初めてでもできる!ペンツールを使ってお絵かき ~描き方編~

初心者にとってとっつきにくいペンツール。思い通りに描けないという方もこれを読めば、きっと使いこなせるはず!

pen

2013年08月19日
初めてでもできる!ペンツールを使ってお絵かき ~調整編~

初心者にとってペンツールは、どう使えばいいか悩むところではないでしょうか? なんとなく線は引けても、思い通りに描けないと…

index_img

2013年08月22日
絵心がなくても描ける! トレースから作るイラスト

ペンツールの使い方をある程度マスターしたら今度は、トレースをしてましましょう。今回は、写真をトレースしてイラストにします。

index_image

2013年08月26日
作り方のコツを伝授! 実例で学ぶロゴデザイン

今回は時間をかけずに作成するロゴの作り方をご紹介します。例としてWebサイトのロゴの作り方をまとめました。

イラストレーターで実現! 手書き風イラストの描き方

2013年08月28日
イラストレーターで実現! 手書き風イラストの描き方

今回はイラストレーターの効果を使って、手書き風のイラストにチャレンジ。ちょっと手を加えるだけでデザインに温かみがでてきます。

簡単ロゴデザイン 悩まず作るコツとポイント

2014年02月07日
簡単ロゴデザインVol.1 悩まず作るコツとポイント

作る時に悩んでしまうのは、作り方のルールを知らないからなのかもしれません。そこで今回は、悩まずロゴを作れるポイントをご紹介します。

テクニック一覧ページを見る

Special 特集

catch_balloon

2018年11月13日
【フリー素材】手書きふきだし素材スペシャル Ver.1

今回は3種類の手書きのふきだしです。シンプルで幅広く使えるので、制作物のちょっとしたアクセントにどうぞ。ふきだしの手書き…

Interview インタビュー

index

2014年10月15日
イラストレーターを目指し活動中!~後編~

※今回は少し趣旨を変えて、織田さんのイラストをページにちりばめました。 学校で広告を学び、色々やってみたくなった。 ─ …

Seminar セミナー

短時間で学ぶInDesign初心者講座
2018年11月20日(火) 16:00-18:30

デザイン

InDesign

Technic テクニック

catch_file_034

2018年11月06日
Photoshopブラシを使った簡単な雲の描き方

写真やイラストに雲を描き足したいけど、どうやって描くのか分からない… そんなお悩みに答えます! Step1 雲を描く下準…

Books オススメ書籍

レイアウト、基本の「き」

2018年08月28日
レイアウト、基本の「き」
  • デザイン

デザイン初心者向けのレイアウトの本 初歩的なレイアウトの基礎を 理論的なしっかりとした説明を元に、豊富な図案で説明 全部…

Award アワード

「海の日」ポスターコンクール
2018年12月5日(水) 締め切り

テイストや雰囲気の作り方 ~前編~

デザインを作る上で、必要となってくるのがテイストです。
見た目も雰囲気もとても左右される大切な内容です。今回は、テイストの作り方についてご説明します。

テイストを決める為には、「ターゲットを定める」事です。例えば、暑中見舞いを送る相手が誰かは分かりますよね。けれど、ウェブサイトの場合は、誰が見に来るのかをしっかりと考えないと、伝えるデザインが迷走します。作っている内に「何が良いのか分からない」なんて事もあります。はじめに、しっかりとターゲットを定める事で、ブレを無くすんですね。
ターゲットの決め方
より細かく決める事が良いとされていますが、今回はざっとでかまいません。年齢、性別、趣味程度でよいでしょう。デザインの面白いところは、「ターゲット以外には伝わらなくてもいい」と割り切れるところです。今回は下記のように設定します。
ターゲット : 20代前半~20代半ばまでの女性 可愛い物を好む
次に単語で書き出していきます。
今回は、ターゲットが割りと若い世代で可愛い物を好むと定めました。その人たちに合うものを、単語で書き出していきます。けっこう、ざっくりでかまいません。
連想テイスト : ナチュラル、ポップ、カラフル、ガーリー、やわらか
次に、そこから連想される「サブワード」も書き出しておきましょう。表にしておくと、便利です。
※エクセルなどの表計算ソフトで管理すると、今後に役立ちますよ。
テイスト ナチュラル ポップ カラフル ガーリー やわらか
サブワード
  • 手作り
  • 自然
  • 手書き
  • 元気
  • お菓子
  • 明るい
  • 風船
  • 絵の具
  • 派手
  • フリル
  • レース
  • 淡い色
  • 丸い形
  • ぼかし
次に2つの単語で表していきます。
先ほどの連想したテイストを織り交ぜて使います。
例えば、「ポップ&カラフル」とか「ナチュラル&やわらか」とか、「ガーリー&ポップ」などでも良いです。2つの単語を足すことによって、テイストを決めやすくなります。ここまでは、何となく分かるもので良いんです。
2つの単語で表したテイスト : ナチュラル&ガーリー
ここからが、少しだけ難しくなりますが、とっても大切なポイントです!
テイストを決める際に、「自分の感覚まかせ」だと、ターゲットとの感覚のズレが生じてしまいます。
例えば、「可愛い」と言っても個人差がありますよね。自分ではとても良く出来たと思っていても、ターゲットにとって可愛いもので無ければ、「あまり可愛く無いよね」と言われてしまいます。げんなりポイントですね。
よく使う方法としては、「すでにあるデザイン物から、感覚を得る」方法です。
下記のグラフ方式がお勧めです。
右上に行くほど、ポップで物が多い状態。
左下に行くほど、シンプルで物が少ない状態。大人っぽい物が多いと思います。例えば、コンビニで見かける雑誌を、このグラフに当てはめて見ましょう。
雑誌1は、若者に人気で10代~20代前半に好まれています。
雑誌2は少しだけ年齢が高くなり、20代後半位までに読まれていると思って下さい。
逆に雑誌3は、30代~40代の女性、OL層を狙った雑誌です。
雑誌名は出しませんので、ご自分で当てはめてみてください。
※雑誌以外でも、お菓子やお店、なんでもかまいませんが、お店と決めたら全てお店にしましょう。
ブレが無いか確かめる
自分のテイストを当てはめてみる。
先ほどのグラフに、自分の考えているテイストをおいて見ましょう。
雑誌1よりは落ち着いていて、雑誌2に近い。けれど、中身としてはもう少しポップな方が良い、といった位置づけです。
例えば、もっと大人しくしたいな、とかもっとシンプルにとなると、ポップからは離れてしまうでしょう。このグラフを使って、何となく世の中に自分のテイストを置いたら、どういう状態になるかた分かります。
※デザインの勉強としては、似た雑誌を買ってきて、雰囲気やデザインを参考にしても良いでしょう。こんな感じで、色々な方法を使い頭の中だけで感覚的に行わない事がとても大切です。
自分のテイストを当てはめてみる。
少し長い説明になりましたが、慣れてきたらどんどん飛ばして進めて大丈夫です。キーワードを出すところなどは、最初の内だけで良いですし、少なくてもかまいません。
次のページの後編ではいよいよ、実践的にテイストを作って行きます。
記事担当者のコメント
ターゲットを決めると、自然とテイストの方向性が定まってきます。
自分の好みではなくても、いろいろなテイストが作れるように日ごろから雑誌やチラシなどを見ておくと勉強になりますよ!
[ デザイン・コメント担当:白川 ]