デザインの基礎を学びクオリティの高い制作物を作る

デザイン

Webデザインなど仕上がったサイトを見てイメージしていたものと違ったものが出来たと感じていないだろうか?自分では上手くデザインしたはずなのにいつも微妙になってしまうセンスが無いから仕方がないと思っていないだろうか?

デザインにはセンスが必要だと思われがちだがセンスが必要なのはアートでありデザインには必要ないといってもいいだろうこれからデザインを勉強しようと思ったり自分はデザインに向いてないのかなと諦める前にデザインの基礎をしっかり勉強してよりレベルの高い制作物を作れるようになろう

では実際にデザインの基礎を学んでみよう

デザインの意味を知る

デザインの基礎を学ぶ前にデザインの意味を理解しておこうデザインにはセンスが不要といったがそもそもデザインとは設計が本来の意味である計画設計し利用する人々にとってわかりやすく視覚化していくこれがデザインである

設計と聞くとイメージがしにくいかもしれない具体的には見出しのサイズは大きめにして文字色は赤色にするそれ以外の文字は黒色にするさらに写真は一番大事な要素なので目につく場所に配置する...etcこのように見てほしいものを見る人にわかりやすいようにする設計し視覚化することがデザインである

1.デザインの要素について学ぶ

デザインは設計し視覚化していくことだといったがまずはデザインの基礎中の基礎デザインの要素について学ぼうデザイン要素はデザインを行う際の表現要素そのものであるデザインにとって無くてはならない存在だといっていいだろう では実際にどんな要素があるのか確認していこう

ここでは代表的なデザイン要素を上げている人によっては異なる要素を提言している場合もあるが基本的にはどれも似たり寄ったりなので特に意識する必要はない

デザイン要素

1.1.線

はただの線だが使い方によって重要な役割を果たすで囲まれた領域はそれだけでグループ化された情報があることがわかる情報のつながりもで表すことができる

このように情報の区切りやつながりを表すこともでき点線や曲線などさらに表情豊かなを使うことにより表現の幅を広げる事ができる

1.2.形

は四角三角丸はもちろん線をつなぎ合わせればそれも形となるひとつでデザインの雰囲気は全く変わる人は少し丸みを帯びた曲線的な優しさ柔らかい印象を受ける逆に角ばったには冷たさ硬さといった印象を受ける

このようにには見せたいイメージ応じて使い分ける事ができる重要な要素である

1.3.空間

空間と聞いて空間?と思うかもしれないここでは余白と捉えてくれてよいデザインでは空間余白はとても重要だ私はデザインの中で空間余白の捉え方が一番重要ではないかと思っている

空間余白は単なる空きスペースという意味ではない空間余白は余裕や使いやすさを与えより多くの空間余白は高級感やモダンに見せる役割を果たす

たかが空間余白といわず重要なデザイン要素でありデザインの基礎となるのでしっかり押さえておこう

1.4.色

デザインといわれて直ぐに思いつくのはのデザインではないだろうかについては普段の生活でも日頃感じることができるデザインである例えば赤い色には力強さや情熱を感じたり青い色には静けさや冷静を感じたりする

は3つの要素にわけることができる色の鮮やかさを表した彩度色の明るさの度合いを表す明度緑といった色みの違いを表す色相色の三属性ともいわれるがうまく組み合わせれば表情豊かなデザインやシンプルにを使うことで見せたい所を強調させたりすることができる

自分の思いつくままではなく見た人にどんなイメージを与えるかを考えて配色しようデザイン全体の印象を左右する重要なデザイン要素でありデザインの基礎となる

1.5.明度

明度でも出てきたがここでの明度は明るさや暗さの程度のことをいう背景を暗めにして前面に出すものは明るめにするこれにより奥行きを表現できる

目立たせたい要素だけを明るくすれば注目はその要素に集まる舞台の演者が目立つよう照明を照らすようにデザインでも各要素にあった明るさを与えればより一層デザインにメリハリをつけることができる

1.6.質感

ものの質感の事をいうザラザラやツルツルといった表面の粗さや滑らかさの質感を表したりフニャフニャやゴツゴツなどもの自体に感じる柔らかさや硬さといった質感を表現する

質感には触ることができる触覚的質感と2次元上の視覚的質感にわけることができる デザイン要素として質感はどんな影響をあたえるのか?紙でいうと少しザラザラした和紙のような紙にはどことなくレトロを感じプラスチックのような表面の紙にはモダンな感じをあたえることができる

1.7.立体

立体とは3次元的な形をいう長さ奥行きをもった形である2次元上でこの立体を表現すれば人はその部分が浮かび上がっているように錯覚する視線は自ずと立体に集まるだろう

注目してほしい時に使ったり奥行きを全体的に持たせたデザインにして前面に来るオブジェクトを目立たせるといった工夫も考えられる多用は良くないが上手く使えばデザイン表現に幅を持つことができるだろう

2.デザインの基礎を学ぶ

デザイン要素について理解できたら次は基礎について学習しようデザインの基礎はクオリティの高いデザインを行うためには必須となる内容である何事も基本が大事というように基礎を知っていないとテクニックを駆使するのは難しくなるここで基礎をしっかり学び上級テクニックも使いこなせるようになろう

2.1.近接

基礎1つ目近接関連性が高いデザイン要素を近くに配置し情報の整理を行うこと

人は近くに配置されたものを自然にグループとして認識し関連性があるものだと考える これを利用して情報や性質に関連性があるものを近くに配置して一目で関連性を把握できるデザインができるデザインの基礎としては大事な法則である

基礎近接を知らないと全てのものを密着させたりして情報の関連性がわかりにくいものが出来上がってしまう

以下はレストランのメニューに基礎である近接を適用する前と後を示したサンプルであるこれだけでも格段に見やすくなる基礎である近接がどれだけ有効かお分かりいただけるだろう

デザイン近接のサンプル

2.2.対比コントラスト

基礎2つ目対比コントラスト一番伝いたい重要なことや補足程度で見てもらえれば良い要素に視覚的強弱をつけるここでの視覚的強弱とは大きさ余白などに対して行うことを表している視覚的強弱は気が付かなければ意味がないように強弱が大きければ人は目を惹かれ強弱が小さけれ人は目を向けにくくなる

対比を実践してデザインする前に情報の優先順位をつけて整理することが一番大事だといえる

以下は基礎対比コントラストを適応する前と後を示したサンプルである通常の文字と比べて大きかったり太さが異なるものには人は必然的に目がいく基礎である対比コントラストがデザインにもたらす影響は絶大だ

デザイン対比のサンプル

2.3.反復

基礎3つ目反復は簡単に言えば視覚的に一貫性を持たせる事だといえる例えば見出しは全て同じフォントサイズを使う注意書きや補足を表すときはどのフォントを使い背景色は白で文字の色は赤にするユーザーが今まで体験したことと一貫したデザイン要素であればすぐに何を表している部分なのか理解ができるだろう

まずは反復させるべきデザイン要素を事前に確認しておくことが重要である

以下は基礎反復を適用する前と後を示したサンプルである適用前と後では不安定な印象がなくなっているのではないだろうか基礎反復はユーザーにストレスなく情報を認識させる効果がある

デザイン反復のサンプル

2.4.整列

基礎4つ目整列はレイアウトを揃えることに気をつかうことだ要素の配置には見えない基準線を設けてそれをベースに配置する配置する際には等間隔にすることにも気を配ろう整列させることで洗練新鮮明快な印象が生まれる

デザインにまだ慣れていないなら意図的に補助線を引いたりしてデザイン要素をどこに配置するか考えるのが良いだろうよくありがちなのが中央揃えを多用することだ中央揃えのデザインは目線を動かす距離が長いこれはユーザーにストレスを与える要因となるさらに長い文章は改行の位置などが影響して見づらくなってしまうこのように中央揃えの使用は工夫が必要だといえる

以下は基礎整列を適用する前と後を示したサンプルである洗練明快といった印象が感じ取れるようになっているのではないだろうか基礎である整列には情報をわかりやすくするだけだなく与えるイメージにも大きく貢献するといえる

デザイン整列のサンプル

3.デザインテクニックを学ぶ

デザインの基礎を学んだ後はデザインテクニックを学ぼう少しの工夫によってデザインのクオリティが格段にあがるテクニックといっても意識するだけで簡単に実践可能な内容であるので是非とも参考にしてもらいたい

3.1.グリッドを活用する

グリッドはWebサイトやポスターなどグラフィックデザイン全般的に使えるテクニックでありデザイナーにとって重要なツールだ グリッドの線に合わせてデザイン要素を配置していけば自然に綺麗なデザインが出来上がるデザイン要素が整列化され情報も見やすくなりスッキリとしたデザインになることは間違いないだろう

気を付けてほしいのはグリッドのサイズは不規則ではダメだということだ規則的な間隔で線を用意しよう

グリッドシステム

3.2.メリハリをつける

文字やデザイン要素に差をつけてメリハリをあたえるデザイン基礎2.2.対比コントラストとほぼ同等の内容だが複数のメリハリの付け方を紹介する

メリハリの付け方には大きさ余白などがある大きさの場合は目立たせたいものを他より大きくするの場合は例えば背景色などと対比した色を目立たせたい部分に適用する余白の場合は目立たせたい部分の周りに余白を多く使う高級感が増し洗練されたイメージをあたえることができる余白を多く使う場合は全体的なバランスも考慮しなくてはいけないので注意する必要があるだろう

メリハリ

3.3.色の調和を考える

よくやりがちなのがむやみやたらに色を使い過ぎて落ち着きのないデザインとなってしまうことだ

背景色をまず決めよう背景色はあくまでも脇役だが全体のイメージを大きく左右させる

次にメインカラーを何色にするか決めるメインカラー誰に何を伝えるデザインか考慮したうえで決めよう企業カラーなどがあればそれがメインカラーとなるメインカラーは明度が高すぎたり彩度が低いと与える印象が弱くなってしまう重要なカラーなのでこの点に注意して目立つ色や目的にあった色を選択しよう

メインが決まればサブカラーを決めるメインカラーを引き立てる色が好ましいこの時彩度明度色相のどれか一つでも大きな差をつけて違いがはっきりと分かる色を使うとよいあまり大きな差がないとアクセントとして目立たなくなってしまうのでデザイン要素自体に目が向かないサブカラーをいくつか使うとしても数個にしておくほうが無難である

全体を通してそれぞれの色からどんなメッセージを伝えたいのかを考えそれが伝わる色使いになっているか今一度確認しよう

色の調和

3.4.デザイン要素の間隔を意識する

空間余白の役割については1.3.空間でも述べたがこの空間余白は意識してとるようにしよう

デザイン要素の上下左右の間隔が均一に見えるように心がけよう左側だけ広くて右側は狭いようではバランスが悪い場合にもよるがなるべく均一な間隔のとり方をしよう 情報のグループが異なるときなどは少し大きめに空間余白を空ける事でデザイン要素の視認性が高くなる

間隔

3.5.一貫性を保つ

複数のページを持つWebサイトなどの場合全てのページとあるページだけデザインが異なっていたらユーザーはどう思うだろうか同じWebサイトにも関わらず所々異なるデザインがされているとユーザーは混乱する

一貫性を保つためにはデザイン要素をそれぞれ統一しよう同じ意味として配置したデザイン要素ならばそれ以降も同じものを使用する

例えば同じ情報の役割として配置された見出しがあるとする全体的なページでは赤色の文字だったのにあるページでは緑色で文字の大きさも変わってしまった このようなことが無いようにデザインを開始するまえにデザイン要素の設計をしっかりと行おう

一貫したデザインがユーザーの迷いをなくしユーザエクスペリエンスの向上につながるだろう

一貫性

3.6.フォントがもつイメージを考えよう

フォントによって与えるイメージが違うことを覚えておこう多くの文字が並ぶ中ではフォントのもつイメージが大きくデザインに影響してくる子供向けの可愛いサイトに教科書に書かれているようなフォントは使わないだろう

デザインによって何を伝えたいかを考えフォントを使い分けよう明朝serif系の文字は信頼性や堅実さといった印象を与えゴシックsans serif系の文字は親しみやすく柔らかい印象を与えることを知っておこう

フォントのイメージ

3.7.シンプルであることを恐れない

シンプルもデザインである無意味な装飾や配色は最も目立たせたいデザイン要素が埋もれてしまう

装飾や配色で伝えたいメッセージが無いのであればそれは無くしたほうが良い最低限のデザイン要素で的確にメッセージを伝える方が重要である無駄なデザインを施していないか今一度チェックしてみよう

シンプル

3.8.テクニックを真似る

デザイン上達のためにクオリティの高いデザインを真似てみようデザイン要素の配置や間隔の空け方配色の仕方などを真似してみるただ真似るだけではなくなぜこのようなデザインにしているのか自分なりに考えてみると理解も早まる

これは良いデザインだなと思ったらチェックしておく習慣をつけると良い街の広告やWebサイトチラシなどデザインはどこにでも溢れているきっと自分がイメージしているデザインに似ているものがあるはずだからくまなくチェックしてみよう

3.9.なぜこのデザインにしたか自分に問う

デザイン要素一つ一つに対してなぜこのデザインにしたのか自分に問いながらデザインしよう

そうすることでデザイン要素一つ一つに何らかの理由もしくはメッセージが込められているのに気がつくのではないだろうかもしそのデザイン要素に意味がなければそれは必要の無いデザイン要素である

デザイン全体のもつメッセージは小さなデザイン要素一つ一つから構成されている細かい点にも妥協せずにいつも自分に問いながらデザインをしよう

まとめ

どうだっただろうかデザインの基礎を知っているだけでも洗練された制作物をつくれるようになるはずだ筆者自身も専門的にデザインを学んでいるわけではないがここで記載した基礎事項を徹底するように心がけている

この基礎を知っていると知らないでは大きな差がつくのは歴然であるもちろんここに書かれた基礎だけではなく多くのテクニックや考え方があると思うそこで今回は知っておいて損はないテクニックについても紹介している

デザインを行う際に気を付けてほしいのがデザインに正解はないということ 基礎をもとにして自分なりのテクニックを身につけるべきだオリジナリティ溢れユーザーに対するメッセージ力あるデザインを目指し全ての基礎をしっかり身につけよう

阿部 憲太朗
by阿部 憲太朗

1986年3月5日生まれ。IT系ベンチャーでシステム開発や提案営業後、NextConnect inc.設立。コネも何もない状態から銀行システム開発やWeb開発など案件に携わる。2016年からはWebブランディングに力を注ぎ、Webプロデュースとクリエイティブディレクション、デザイン、システム開発をやっています。

Related Posts / 関連記事

記事はありませんでした

Facebook and Twitter

Facebook

Twitter