カテゴリー別アーカイブ: デザイン

デザインを考えるときはまず紙に書くのがおすすめ

印刷物やWEBのデザインを決めるとき、ラフの段階ではまず紙に書くのをおすすめしています。最終的にはIllustratorやPhotoshopなどを使って仕上げるわけですが、最初からこれらのソフトを使ってデザインを作っていくと作業がはかどりません。これは個人的な経験則から言えることでもあり、多くのデザイナーの意見でもあります。

もちろん「最初からパソコン上でデザインしたほうが効率的に作業ができる」という方も中にはいるかもしれませんが、「最初は紙に描く」のをやってみたことがない方はぜひ試してみてください。アイディアが浮かんだときにさっと素早く描くことが出来、それを基にしてさらに次のアイディアが浮かび…という風に、パソコン上で描いていくよりも構想が膨らみやすいように思います。

IllustratorやPhotoshopは、手書きでは描けない正確なデザインが出来ますが、手書きほど素早く描くのは難しいです。紙に描くとアイディアが浮かびやすいので、おすすめです。

無料のテクスチャ写真素材サイト4選

今回は、印刷物やWEBサイトに使う画像の作成に役立つテクスチャ素材を無料で配布している素材サイトを5つ紹介します。今回紹介するサイトは、「素材サイト」ページにもリンクを張っています。

パブリックドメインの素材を配布しているサイトを選んでいますが、素材のライセンスについては各サイトで必ず確認してから使ってください

今回紹介しているのはパターン素材ではなく、テクスチャ写真素材です。背景として用いたり、写真やオブジェクトに質感を追加したいときに便利です。シームレスパターン素材を探している場合は、「素材サイト」ページでいくつか素材サイトを紹介しています。

テクスチャ素材サイト

Lost and Taken – Free Texture Stock Photos

Lost  and Taken

グランジ、紙、水彩など、様々なテクスチャ写真素材が配布されています。カテゴリごとに分かれていて見やすいです。

Free Stock Textures

Free  Stock Textures

木や壁、植物、水滴からウォールペインティングのような変わり種まで、沢山のテクスチャ写真素材があります。キーワード検索が主になっていますが、トップページ下部にカテゴリもあります。

フリー画像素材 – BEIZ Graphics(ベイツ・グラフィックス)

BEIZ Graphics

日本の写真素材サイトです。テクスチャではない写真素材も沢山あるのですが、和紙、水彩、木目、岩などの高品質なテクスチャが配布されているので、テクスチャ素材サイトとして紹介させていただきました。

Paper-co | 紙のテクスチャー素材を無料でダウンロードできるサイト

Paper-co

紙のテクスチャ専門の素材サイト。ノートや方眼用紙、段ボール、木、ラベルやタグなどの素材があります。

ポートフォリオに使える無料モックアップ素材

デザイン業界などの就職で、一番重要視されるのがポートフォリオです。ポートフォリオは作成に結構時間と労力が必要です。納得のいく作品を集めて、作成してください。しかし、せっかくいい作品を集めても、見せ方によっては魅力が半減してしまいます。ポートフォリオ自体のデザインも見やすく、きれいに仕上げ無いといけません。

作品をより魅力的に見せたいとき、モックアップ素材を使うと効果的です。モックアップ素材とは、作品のデザインをはめ込むことで、印刷物なら実際に印刷したかのように、WEBサイトならPCやスマートフォンなどのデバイスに表示されたように見せるためのものです。

モックアップの例

名刺やフライヤー、パンフレット、Tシャツ、カン、ビン、PC、スマホ…などなど沢山の種類があります。

モックアップを使うだけで、デザインがより魅力的に見えるので、ぜひ試してみてください。

参考サイト

下記は、無料で使えるモックアップがまとめられたWEBページです。

モックアップ アーカイブ – PhotoshopVIP

デザインする前にコンセプトやターゲット、内容の見直しを

WEBサイトのデザインカンプやフライヤーなどの課題制作で、毎回皆さんにお伝えしていることは、コンセプトやターゲットなどをよく考え、それに沿った内容にしてください、ということです。

コンセプトやターゲットが決まっていない状態でデザインしてしまうと、軸がぶれてしまって、デザインするのに時間がかかります。

また、WEBサイトやフライヤーに入れる内容(情報)は、あらかじめ決めておく必要があります。内容が決まっていない状態でレイアウトを始めてしまう方がいらっしゃいますが、本来、内容が決まっていなければデザインはできないはずです。

たとえばWEBサイトの場合は、サイトに必要な内容をまとめ、どのようなページが必要か決めて、サイトマップを作ってからデザインに取り掛かります。内容がおぼろげなままデザイン開始すると、結局レイアウトがはかどらず、逆に時間がかかることになってしまうのでご注意ください。

たとえ予定通りに制作が進まなかったとしても、あらかじめ準備しておくことは大切なので、意識して決めておいてほしいと思います。

文字がチカチカするハレーションについて

文字に背景をつけたり、ふちを付けたりする際、色の組み合わせによってはチカチカして見づらくなることがあります。今回の記事では、このチカチカを回避する方法を紹介します。

ハレーションを起こした文字

上の画像のように、隣り合わせの色がチカチカして見える現象をハレーションといいます。ハレーションは、いくつかの条件が重なったときに起こります。

彩度が高く、明度が近い色の組み合わせでハレーションが起こる

ハレーションは、彩度が高く、明度が近い色の組み合わせで起こりやすいです。ハレーションを回避するには、背景か文字の彩度を落としたり、明度に差を付けたり、間に白などをはさんだりする方法があります。

ハレーション回避の方法3つ

  1. 背景か文字の彩度を落とす
  2. 明度に差をつける
  3. 間に白などを挟む(セパレートカラーを入れる)

下の画像は、上の3つの方法を使ってハレーションを回避した例です。

ハレーション回避例

文字は、情報を伝えるものなので、読みやすくすることは最も重要です。デザイン的に特別な意図がない限り、ハレーションは避けるようにしてください。

WEBデザインの色選びで考えること

WEBデザインの色選びで考えること

WEBサイトのイメージを大きく左右する要素に「色」があります。WEBデザインをするうえで重要な色選びは、イメージが固まっているならすぐに決まるかもしれませんが、なかなか決まらないこともあります。そんなときに参考になる考え方や、ポイントをまとめました。

3色を基本に考える

WEBサイトに限らず、色を選ぶ時は3色がまとめやすいです。ひとつは一番広い面積(デザイン全体の7割程度)に使うベースカラー、ひとつはデザインのイメージに合わせて全体の3割程度の面積に使うメインカラー、最後に目立たせたい部分などごく一部に使うアクセントカラーです。ベースカラーやメインカラーで見た目のイメージが大きく変わるので慎重に選びます。

3色だけでなく、もっとカラフルにするときには、色を使う面積の比率に気を付けてください。単純に色を足すだけでは、まとまりのないデザインになりがちです。色を増やす場合は、ベースカラー、メインカラー、アクセントカラーの比率はそのまま、それぞれの色数を増やします。たとえばベースカラーが白で、メインカラーを赤と青に増やす場合、白は全体の7割程度の面積を保ったまま、赤と青が合わせて3割程度の面積になるようにデザインします。

色のイメージ

直感的に色が決まらないときは、色の持つイメージから論理的に考えるのも手です。サイトのターゲットやコンセプトに合ったイメージの色をベースカラーやキーカラーに設定します。たとえばIT系企業のサイトではキーカラーに青がよく使われていますが、これは青色が「先進的」「理性的」「清潔」「信頼感」などのイメージを持っていることが影響していると思われます。

ただし、海外向けにサイトを制作する場合は、国内での色のイメージが通用するとは限りません。日本では「赤」は女性的なイメージがありますが、アメリカでは男性的なイメージを持たれているなど、イメージが違うこともあります。

アクセシビリティ

色分けして理解を促すようなデザインの場合、視覚障害を持つ方でも問題なく利用できるよう、色以外の判断材料も用意しておく必要があります。また、このようなデザインでは、色覚障害を持つ方が見分けやすい色を選ぶことも重要です。

参考サイト

WEBデザインでボックスの横幅に迷ったらグリッドデザインがおすすめ

WEBサイトをデザインするとき、最初にサイト全体の横幅を決め、次にカラムの横幅を決めると思いますが、サイトの横幅に収まるようにボックスの横幅と余白を計算するのは少し面倒な作業ですよね。計算を最小限に、迷わずレイアウトしたいという方には、グリッドデザインがおすすめです。

グリッドデザイン(グリッドレイアウト)とは

WEBサイトや印刷物をデザインする際に、画面に格子状のグリッドを作成しておき、それに合わせて要素や余白の大きさを決めるデザイン手法のことです。

WEBサイトの場合は高さに制約がないので、格子状のグリッドよりも縦線のみのグリッドが一般的です。グリッドは、ボックスの横幅の最小単位と、余白の大きさを決めて作成します。自分で作成しても良いですし、WEB上で配布されているものを利用することもできます。配布されているグリッドで有名なものに960 Grid Systemがあります。

960 Grid System

960 Grid SystemWEBサイト

サイト中央の大きなダウンロードボタンから、横幅960pxのグリッドが様々な形式でまとめてダウンロードできます。グリッドは12カラム、16カラム、24カラムの3種類です。ファイルを開くとピンクのグリッドが並んでいて、これに合わせてボックスをレイアウトします。あらかじめ基準の幅が決まっているので直感的にレイアウトでき、横幅や余白の計算も簡単です。

960 GRID SYSTEMの16カラムグリッド
960 GRID SYSTEMの16カラムグリッド

グリッド生成ツール

グリッドを自作する際に便利な、WEB上のグリッド生成ツールがあります。

Gridulator

サイトの横幅とカラム数を入力すると、数パターンの余白でPNGデータのグリッドを生成してくれる、分かりやすいツールです。

gridulator

Griddle.it

URLでサイトの横幅、カラム数、余白を指定すると、PNG画像を生成してくれるツールです。URLは次のように指定します。

http://griddle.it/サイトの横幅-カラム数-余白

griddle it

Modular Grid Pattern

カラム数、余白のサイズ以外にも、行送りや行数などが設定できるジェネレーターです。PNG形式とPhotoshopのパターンファイルが生成できます。

Modular-Grid-Pattern

グリッドデザイン参考サイト

伝わりやすいデザインにするため気を付けること

デザインの基本原則

デザインは、情報を伝えることを目的としています。伝わりやすく見やすいデザインにすることは、非常に重要です。いくら見た目が格好良くても、伝えたいことが伝わらなければデザインとして成功とは言えないでしょう。今回の記事では、伝わりやすいデザインにするために意識しておくと良い、デザインの基本原則4つ(ノンデザイナーズ・デザインブックより)を紹介します。

デザインで気を付けること4つ

デザインするときは、「近接」「整列」「反復」「コントラスト」という4つの原則を意識してみてください。意識するとしないとではデザインの仕上がりが大きく変わってくるはずです。以下、それぞれの原則の意味を書いていきます。

近接

関連する情報を近づけるという意味です。情報のグループ化という言葉もよく使われます。例えば名刺なら、「名前やフリガナ、役職のグループ」「住所や電話番号のグループ」「ロゴのグループ」のように分けられます。グループに属するものは近づけてレイアウトし、各グループの間に余白をとります。

整列

配置したものをきれいに整列することです。揃えられる部分は徹底的に揃えることを意識すると、見やすいレイアウトになります。

反復

1つのデザイン内で同じデザインを繰り返すことです。全体的な統一感が生まれ、同一のデザインにした部分が関連していることが分かりやすくなります。例えば、見出しの色や装飾を統一すれば、ぱっと見でそこが見出しだと分かりやすくなります。項目ごとの余白を統一することで、区切りを分かりやすくするといった手法も反復です。

コントラスト

デザインに差をつけることです。強いデザインの部分がより際立って見え、伝わりやすくなります。ここで言うコントラストとは、色だけでなく大きさや形などの差も含んでいます。

参考サイト

上記の4原則について詳しく紹介されたサイトです。

フライヤーなどの印刷物をレイアウトするときのコツ

印刷物のレイアウトは、大きさの制限がないWEBのレイアウトとは違って、限られた紙面に必要な情報をすべて入れなければいけません。また、表裏がある場合は表面で興味を引き、裏面の詳細な情報まで見てもらえるようにするなど、表裏で情報の種類や構成も変わってきます。

それらを考え合わせて大まかなデザインを作り、Illustratorなどで制作をしますが、いざレイアウトしてみるとイメージしていたデザイン通りに文字が配置できないということがあると思います。実際に文字を入れてみると案外場所をとるものです。

そこで今回は、フライヤーなどの印刷物をレイアウトするときのコツについて記事にします。あくまで一つの方法なので、やりやすいかどうかは人それぞれだと思いますが、同じような方法で制作している方は結構いらっしゃると思います。

印刷物をレイアウトするときのコツ(制作手順)

印刷物ワークフロー

0.詳細な文言を決めてからラフデザイン

実際の案件では、文言があらかじめクライアント側で決められている場合と、自分でキャッチコピーなども考えなければいけないケースがあると思います。後者の場合、文言を決めておいてからでないとレイアウトできないので、デザインを考える前に文言は詳細に決めておきます。ただ、デザイン完成後に文言の修正が入るというのもまた日常茶飯事です。

1.最初に文字をすべて配置

ラフデザインを元にIllustratorなどで制作を開始します。ここでデザインにとらわれすぎて背景や枠、画像から配置してしまうと、文字を入れたときにうまく納まらなかったりするので、最初に文字をすべて配置してしまうのがおすすめです。文字サイズもここで決めてしまうとスムーズです。フォントの種類や文字色は、背景などが入ってある程度イメージが出来上がってからの方が決めやすいので、この時点では決めなくていいと思います。

画像はトリミングすればある程度自由に配置できるので、位置だけ決めておけばいいと思います(写真が入る位置に適当な図形を置いておくと、後でクリッピングマスクをかける際に使えるので便利です)もちろんこの段階で写真を入れてしまっても問題ありません。

2.背景や枠などを作成

背景や枠などを配置した文字に合わせて作成し、画像も入れます。全体のイメージが出来上がってくるので、このあたりでフォントの種類や文字色を決めると良いと思います。クライアントにデザイン案として提出するならこの段階です。

3.必要なら細かい装飾などを入れて最終的な調整

細部の細かい装飾などが必要なら作成し、全体のバランス調整や文字のカーニングなどを行って完成です。

無料のベクター素材をダウンロードできるサイト

ベクター画像は拡大縮小しても荒れず、印刷物にもWEB制作にも使いやすいです。フリーのベクター素材があると便利ですが、写真と比べるとクレジット表記が必要なものが多いように思います。この記事では、基本的に著作権表記無しで個人・商用利用可能な素材サイトをご紹介します。ただし、素材によってはライセンスが違う場合があるので、必ず配布元のライセンスを確認してお使いください

色々なベクター素材が揃っているサイト

Public domain vectors

Public domain vectors

パブリックドメインのベクター素材を集めたサイトです。アイコンやイラスト、背景など色々なベクター素材があります。パブリックドメインなので著作権表記無しで個人・商用利用、加工も可能です。

Royalty-free vector clip art and graphics | Public domain vectors

無料イラスト素材.com

無料イラスト素材.com

サイト名にイラスト素材とありますが、背景用のパターンや装飾用のフレームなども沢山あります。素材は全て著作権表記無しで個人・商用利用、加工可能です。

AI・EPSの無料イラストレーター素材なら無料イラスト素材.com

忙しいwebデザイナーさんのためのWeb用素材データ保管・無料ダウンロードサイト

忙しいwebデザイナーさんのためのWeb用素材データ保管・無料ダウンロードサイト

イラストやアイコン、ロゴなどのベクターデータ(EPS形式)が豊富です。写真の配布もされています。素材は著作権表記無しで個人・商用利用可能ですが、団体ロゴマークに関しては各該当団体の規定・ガイドラインに則ってご使用ください。

【無料配布】イラレ/イラストレーター/ベクトル パスデータ保管庫【ai・eps 商用可能ベクター素材】 | デザイナーさんの時間短縮のためのイラレweb素材 イラストレーター/ベクター/パスデータの無料ダウンロードサイト

ベクターイラスト素材サイト

イラストAC

イラストAC

有名なイラスト素材サイト。素材のダウンロードには会員登録が必要ですが、さまざまなテイストのイラストが揃っています。姉妹サイトに「写真AC」「シルエットAC」「フォントAC」があり、会員登録すれば全サイト利用可能です。

無料イラストなら「イラストAC」

ピクト缶

ピクト缶

かわいらしいイラスト素材の配布サイトです。著作権表記無しで個人・商用利用、加工も可能です。

商用利用可のベクターイラスト素材集「ピクト缶」

いらすとや

いらすとや

暖かい雰囲気のイラスト素材が配布されています。著作権表記無しで個人・商用利用、加工も可能です。商用利用の場合は1作品につき20点を超える場合は有償です。

無料イラスト かわいいフリー素材集 いらすとや

ガーリー素材

ガーリー素材

素材の数はそれほど多くありませんが、かわいくてクオリティの高いイラストが配布されています。

ガーリー素材 | 無料フリーイラスト素材配布サイト

特定の素材に特化したサイト

シルエットデザイン

シルエットデザイン

使いやすいシルエット素材がベクターデータで配布されています。サイト名の通りシルエット素材に特化していて探しやすいです。著作権表記無しで個人・商用利用、加工も可能です。

シルエットデザイン

frame-design

frame-design

シルエットデザインの姉妹サイトで、フレーム(飾り枠)のベクター素材に特化しています。フレームは活躍の場が多いので便利です。ただ、素材の検索機能が無いようなので探しづらい印象です。カテゴリやフレームの形状での絞り込みは、グローバルメニューから「フレームデザインとは?」などの別ページに行けば可能です。著作権表記無しで個人・商用利用、加工も可能です。

デザイン枠、飾り罫素材専門サイト「フレームデザイン」frame-design.com

FREE LINE DESIGN

FREE LINE DESIGN

シルエットデザインの姉妹サイトで、罫線のベクター素材に特化しています。400点以上の罫線があり、いくつかのカテゴリやキーワードで素材を検索できます。色々なデザインがあるので、ちょっとしたアクセントに便利そうです。著作権表記無しで個人・商用利用、加工も可能です。

飾り罫 | 罫線・飾り罫ライン素材 FREE LINE DESIGN

人物イラスト館

人物イラスト館

人物イラストに特化した素材サイトです。著作権表記無しで個人・商用利用、加工も可能です。

人物イラスト館:無料で使える商用利用可能なベクター素材

粋屋-日本の伝統文様と伝統色

粋屋-日本の伝統文様と伝統色

和柄のベクター素材に特化しています。素材サイトではなく、日本の伝統模様や伝統色を紹介するサイトですが、和柄紹介の一環として(?)素材の配布も行われています。素材は著作権表記無しで個人・商用利用、加工も可能です。

粋屋-日本の伝統文様と伝統色

家紋のEPS、素材ダウンロードのcrest-japan

家紋のEPS、素材ダウンロードのcrest-japan

家紋がベクターデータでダウンロード可能です。使いどころは限られていますが、カテゴリ分けやキーワード検索もできて探しやすくなっています。家紋自体に著作権はなく、素材も著作権表記無しで個人・商用利用、加工可能です。

家紋のEPS素材を公開してます。検索、ダウンロード無料。

さいごに

素材の利用規約が緩いサイトを選んでご紹介しましたが、必ずサイトの利用規約を読み、禁止事項を確認してから素材を利用するようにしてください。著作権表記無しで個人・商用利用、加工も可能という素材であっても、再配布などは禁じている場合がほとんどなのでご注意ください。

なお、今回紹介したこれらのサイトは固定ページの「素材サイト」にも追加しておきます。