デザインの基礎７選と考え方！Webや印刷物にも応用可能な知識をご紹介

印刷物やWeb制作を始めたい初心者の方にネックなのがデザイン基礎知識。

IllustratorやPhotoshopの基本的な操作や、HTMLやCSSはある程度覚えたけどデザインが出来ない…。感性や少しハードルを高く感じている方もいらっしゃいますよね。

ですが、結論から言うとデザインは「センス」ではなく「理屈」！

基礎知識を固め量を熟せば、必ずスキルとして身につきます。

そこで今回は、印刷物やWeb制作の初心者の方を対象に、デザインの基礎知識や考え方について解説していきます！

この記事で扱うデザインとは大前提として、商用目的として使う「商業デザイン」の方を意味します。

基礎に入る前にデザインに対する考え方

デザインの基礎について解説する前に、「デザインとは何か」という基本的な考え方から。

まずはデザインに対する苦手意識や先入観を一緒に取っ払っていきましょう！

よく「デザイン」と聞くと、生まれ持った才能や美術的なセンスが必要では？と思われる方いるかもしれません。

実際に私も過去に自分の職業がデザイナー関係である事を説明すると、「絵を描くのが好きなんだね」「美術が得意なんだ」などのように知り合いから言われました。

確かに私にとって絵画は得意な分野でしたが、初めてデザイン事務所に就職した頃の経験から言わせてもらうと、美的センスや絵心がなくても全く問題ありません。

商業デザインはセンスではなく「理論」

では、実際にデザインにはどういう考え方が最適か。それは「センス」ではなく「理論」です！

ただ、理論と言うと漠然とした感じがするので、個人的に言い換えるとデザインは「視覚情報の取捨整理」だと考えています。

デザインは感覚ではなく、一定の法則や原理原則に則った上で、盤面上で情報を取捨選択・整理整頓し組み立て制作していくものなのです。

このように商業デザインの真髄とは絵を描くのではなく、視覚情報をユーザーにとって見やすく整え届ける事を意味します。

つまり、世間のグラフィック・Webデザイナーの方は、自身の感覚や感性を頼りに、ホームページや広告媒体を制作しているわけではないという事ですね。

美術センスを活用できる場面も当然あり

このように商用で使うデザインでは、美的センスや絵心がなくても全然問題ありません。

では、デザインにおいて美的センスや感性を活用できる場面は全くないのかと言うと、その答えは「No」です。

例えばイラストや絵を描くのが好きな方であれば、「色彩構成」が得意なはず。

また、線の使い方や配置など細部まで拘る方も美術系には多いと思います。

以降詳しく解説しますが、デザインでは上記のような「色彩構成」や「細部への拘り」といったものも非常に重要な要素です。

印刷物やWeb制作にも利用可！デザインの基礎知識７選

ここからは、デザインの原理原則や実務レベルで多用されているデザインの基礎について解説していきます！

主なデザインの基礎的な知識や要素は下記の通りです。

• デザインテーマ
• フォントの基礎
• 文字組みの基礎
• レイアウトの基礎
• カラーイメージ
• 配色の基礎とコツ
• 画像データの扱い方

これらデザインの基礎知識は、印刷物だけでなくWebメディアなど様々な媒体に流用できるので、いずれかのデザイン業務に興味のある方は是非参考にしてくださいね！

デザインテーマ(方向性)を考える

まず、デザインの基礎部分で重要なのがデザインのテーマやコンセプトを作業前に考えておくこと。

デザインのテーマと言っても特別難しいことではなく、デザイン全体の方向性や基盤と考えてもらって問題ありません。

ただ、このテーマを予め決めておかないと、文字や配色がバラバラで全体が統一感のないデザインになってしまい、非常に見辛くなってしまいます！

そんなデザインのテーマを決める時は、下記のようなポイントを軸に決めていきます。

• 誰に見てもらうか
• 商品や業種は何か
• 媒体は何にするか
• 構成はどうするか
• 季節との関連性の有無

どんな年齢層の方に見せるか

デザインのテーマを決める上で大事な要素の１つが、見てもらう側の年齢層です。

例えば、高齢層に見せるデザインであれば暖色系を多く取り入れた見やすいタッチのデザイン。若年層なら派手でインパクトのあるデザインなどユーザーの年齢層によってテーマや世界観は変わります。

商品や業種に応じて考える

次に商品のコンセプトや業種に応じてデザインテーマを考えるということ。

商業デザインでは、企業商品のコンセプトや業種に見合ったコンテンツが当然の如く要求されます。

では、とある飲食店を例に挙げてみます。その飲食店が10月に食欲の秋と銘打って、限定メニューのキャンペーンを料理写真付きで告知したとします。

この時、ベースにハロウィーンカラーを取り入れてみたり、ポップな印象を全体に与えると、折角のメニュー写真が美味しく見えなくなります。

このように、企業が取り扱う商品や業種に応じて、デザインテーマを決めていく必要があるのです。

媒体は何を使うか

印刷物かWebか、どちらの媒体を利用するかもテーマを決めていく上で重要な要素です。

印刷物なら名刺・DM・チラシ・ポスター・リーフレットなど、Web制作ならコーポレートサイト・ランディングページ(LP)・バナー・ECサイトなど様々です。

各々の媒体に応じた適切なフォーマットがあるので、どの盤面上でデザインを書き出すのかも考えておきましょう。

フォントで変わるデザインイメージ

デザインで肝となる要素の１つがフォントスタイルです。フォントだけでデザインの印象を全て変えてしまうと言っても過言ではありません！

世間一般的にゴシック体や明朝体が認知されていますが、今や数え切れないほどのフォントが世に出回っています。

例えば老舗の高級旅館イメージを伝えるために使われる行書体のフォントなど、イメージによってフォントを使い分けていくのがデザインの基本です。

文字組みの基礎(行間・文字サイズ)

デザイン上でシビアな扱いが必要になってくるのが、テキストコンテンツ。

商業デザインにおいてテキストは重要な描画要素の１つで、デザイン上覚えておきたい基本的なルールが幾つかあります。

そんなテキストコンテンツの基礎ルールは下記の通りです。

• 縦横比の変更はNG
• 行間スペース
• 文字間隔
• 数字の統一

フォントの縦横の比率変更は基本NG

個性的で沢山の種類があるフォントですが、縦横の比率を変えて利用するのは基本的にNGです！

当然ですが、フォントは正規の比率が最も綺麗で、ユーザーにとって読みやすい状態になっています。

デザイン上の配置の問題や変化を付けたい等の理由で比率を変えてしまう方がたまにいますが、特別な事情がない場合は正規の比率のまま利用しましょう。

行間スペースに余裕を持たせる

複数行に渡る長文のテキストを配置する場合は、行間スペースに余裕を持たせましょう。

行間スペースを詰めすぎると、相手側に非常に読み辛い印象を与えてしまい、重要な説明文でも読んでもらえなくなってしまいます。

逆に、間隔を開けすぎると纏まりがなく稚拙な印象になります。

目安としては、設定したフォントサイズの70%分を空けておくのがおすすめです。

文字間隔の調整

行間スペースと同様、文字同士の間隔は詰めすぎないようにしましょう。

一文字一文字の間隔が狭すぎると、窮屈な感じがして読みにくくなってしまうので注意が必要です。

漢数字か算用数字(アラビア数字)で統一

テキストを配置する時は、漢数字か算用数字(アラビア数字)かで統一させると読み易くなります。

とくに慣用句を除いた「◯◯時間」その他、価格・年号・数量・重量・人数などを表す単位は、混合してしまうと統一感に欠けます。

例外もありますが、一般的に横書きでの記述は算用数字(アラビア数字)、縦書きであれば漢数字で漢数字で統一されています。

イメージカラーの基本

デザインにおいて配色以外に重要な基本要素が、「イメージカラー」です。

イメージカラーとはその色だけで商品やサービス、企業への印象をある程度付与させる役割を担っており、ある程度決まって使われることが多いです。

一例を挙げると、飲食店は食欲を掻き立てる橙色、IT企業は先進的な印象を持たせる青色、介護施設や病院は安心感を与える薄いピンクや暖色系が使われることが多いです。

ただし、これらはあくまでイメージカラー。

業種やサービス毎に「このカラーでないと駄目！」という明確な決まりはありません。

配色の基礎

上記で紹介したイメージカラーと同様に重要なのが「配色」です。

色にはそれぞれ適切な組み合わせがあり、上手く調和させることで違和感のない統一感のある色調となります。

逆にこの配色を間違えると、奇抜でいわゆる「ダサいデザイン」になってしまいます！

配色に関しては説明が非常に長くなるので、基礎的なコツとして下記に挙げておきますね。

• 必要最低限の色数に抑える
• アクセントカラーを決める
• 困ったら大自然に頼る

必要最低限の色数で整える

デザイン上の配色で気をつけたいのが色数です。

１種類のデザインで使う色数は3色、多くて７色程度で決めておくのがお勧めです。

色数が多過ぎると、先程も言った「ダサいデザイン」になってしまうので注意が必要です。

アクセントカラーを決める

色数と同時に決めておきたいのが「アクセントカラー」です。その名の通り、ワンポイントで使うカラーのこと！

例えば、「青色・水色・黄色」の３色で構成する場合、青色と水色をベースカラーにし、黄色をアクセントカラーに使うといった手法です。

アクセントカラーを使うことで、引き締まったデザインになります。

困ったら大自然に頼る

配色で困った時は大自然に頼ってみましょう。かなり投げ槍な手法やん！と思われるかもですが、実は理に適ってたりします。

例えば、「緑・黄緑・茶色」の３色で思い浮かぶものは何でしょう？

この３色で森や木を直感でイメージした方もいると思います。

このように一瞬合わなそうに思える配色パターンでも、普段人間が見慣れている自然物の配色には違和感を感じないのです。

レイアウトの基礎(近接・整列・強弱・余白)

続いてデザインにおけるレイアウトの基礎です。

Webと印刷媒体では少し異なる部分もあるので、今回は共通して流用できるレイアウトの基本要素を解説していきます。

そんなレイアウトに関する基本的な知識は下記の通りです。

• 近接
• 整列
• 強弱
• 余白

近接(要素のグループ化)

近接とは、要素同士をグループ化させて配置、並列させるレイアウト手法。

要素同士を幅や位置を揃えるのはデザインにおいて基礎の基礎ですが、ただ何でも均等に並べればいいわけではありません。

分かり易い例を挙げると、商品画像と商品価格の列挙です。

ただ均等間隔に並べて整列させると余計なスペースが空き見辛くなりますが、画像とテキストをグループ化させ配置することで、纏まりが出来ます。

整列

デザインのレイアウトで言う「整列」とは、要素やテキストをグループ化させ整理させる手法です。

例を挙げるとWeb広告や名刺デザインで度々見る、左寄せと右寄せで各々纏められたテキストがそれに当たります。

強弱(要素の優先度)

強弱というのは要素やテキストの優先度をつける、または強調させること。

テキスト、また要素のサイズや色に変化を付けることでユーザーに伝えたい情報を明確化していきます。

ただ、取り扱う商品やサービスによってトーンを微調整しないといけないのが、この「強弱」の難しいポイントです。

余白

余白とは文字通り、要素やテキスト同士の適度な間隔を意味します。

よく 「見えない直線や枠線を盤面上でイメージする」と言われるのですが、Webや印刷媒体において重要なレイアウト手法です。

要素の関連性や位置関係によって余白を調整することで、コンテンツ全体が見やすくなります。

画像データの扱い方の基礎と注意点

最後にデザインにおける画像データの基本的な扱い方と注意点について！

Web制作や印刷媒体では、商品や人物など画像データを利用する機会が非常に多いのですが、その上での注意点と基本的な利用方法が幾つかあります。

• 素材の邪魔をしない
• 解像度に気をつける
• カラーモードの変換

写真素材の邪魔をしない

デザイン上、写真素材の妨げになるようなレイアウトは基本的にNGです。

例えば人物の顔や商品の写真に、テキストなど要素に半分以上隠れて見えない場合など、写真素材を使用している意味がなくなってしまいます。

模様やテクスチャなど単調な背景として使用する場合を除き、メインやサブ要素で画像を利用する場合はレイアウトに注意が必要です。

画像解像度の注意する

印刷媒体で画像データを利用する際は、「画像解像度」に注意しましょう。

画像解像度とは言い換えると画質のこと。

この解像度は「dpi」という単位で表され、画像データの解像度の数値が低いほど粗が出てボヤけた感じになります。

解像度に関する詳しい解説は割愛しますが、一般的に350dpiの解像度が印刷媒体に最適であると言われています。

カラーモードを最適化する

画像データを扱う時はカラーモードにも注意しましょう。

カラーには、主にRGBとCMYKという２種類のカラーモードがあり、WebコンテンツにはRGB、印刷媒体にはCMYKカラーを利用するようにしましょう。

この記事のまとめ

以上、Webや印刷媒体にも流用できるデザイン基礎７選と考え方について解説させていただきました！

今回紹介したものはデザインの基礎の基礎知識となるので、深堀すべき要素はまだまだ沢山ありますが、これからWebや印刷媒体の制作に取り組みたい初心者の方にとって、少しでも参考になれば幸いです。