デザインスキルを身につける、デザイン力を上げる9つの方法

1．デザイン理論を学ぶ

Webサイトを見て、「綺麗だ。真似したい。」と思っても、そのサイトのどこが優れているのか、どういう点に配慮して制作しているのか、理論的な知識がなければ、わかりません。

自分で制作する時のためにも、デザイン理論を学んでいると、制作する上で迷いが少なくなり、クライアントにも、上手に論理的に説明することが出来ます。

また、下記で紹介する、優れたデザインを観察する際にも、理論を学んでおくと、制作者が、「どういう意図を持って、どういう点に工夫しているのか。」が、よく理解することができる。

オススメデザイン書

デザイン理論だけではなく、世の中では、デザインが、どう役に立っているのであろうかとか、

例えば、椅子の形状は、人が側にいれば、座りたくなる家具であり、椅子の形状（デザイン）は、人に、そう仕向けている。

同じように、ドアの取っ手なども、そのデザインにより、押したくなる、引きたくなる、など、認知心理学の面から紹介した本などを読んでおくと、デザイナーという仕事が、社会に、こう活かされているのだという誇りにも、繋がり、心理学の根本を知っておくと、その知識は、一生、生きてくるのではないでしょうか。

いずれにおいても、デザインに、心理学というのは、必要な知識です。

また、ものが飽和し、これからの時代、デザインなどの装飾をいかなければと、幾つもの本で主張されています。

 

Webデザインとグラフィックデザインのデザイン知識

Webデザインとグラフィックデザインのデザイン知識の違いですが、Webデザインには、Webデザイン特有の知識があり、紙には、印刷で用いるデザイン特有の知識があります。

紙のデザインの知識の歴史は、長く、Webデザインの歴史は浅いです。

書籍として出版されているデザインに類する書籍は、皆、グラフィックデザインに関しての本であり、通常、書店のWebデザインの棚にはなく、デザインに関する棚に並べられています。

Webデザイン、グラフィックデザイン、同じデザインであり、共通する部分も多く、学んでおいて損はないです。

２．定番のレイアウトを把握する

Webサイトには、様々な種類がありますが、そのレイアウトの基本パターンは、５，６種です。

その、それぞれのレイアウトの基本パターンが、どういうサイトに適し、どういう特徴を持っているのかを把握しておけば、その後のWebデザインに生きてくる。

３．魅力的なサイトを数多く見る。

最近は、あまり観なくなったのですが、映画は、僕の趣味です。

確か、淀川長治さんが、映画制作にたずさわりたい若者に向けて、こんな台詞を言っていたという記憶があります。

とにかく、自分がいいと思う映画を観続けることです。

つまり、自分なりのデザイン・スタイルを確立し、デザインの引き出しを多く持つには、自分が良いと思うWebサイトをストックし、研究する必要があります。

有名なWebデザイン・ギャラリーサイト

縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG I/O 3000 | Webデザインギャラリー

これらのギャラリーサイトなどで、自分が良いと思うサイトを、Pinterest などで収集しておき、時折、見直すとよいでしょう。

 

WordPress Themes & Website Templates from ThemeForest

上のサイトは、WordPress などのテーマを販売されている、世界的に有名なサイトです。

こういうサイトから、売れ筋のテーマを研究すれば、なんとなく、マーケティングの力も身につくかも知れません。

ただ、検索結果からは、どういうテーマを売っているのか、少し見づらいというマイナス点も、あります。

このTheme Forest で、何億というお金を稼いでいる人も少なくないそうです。

 

少し注意しなければならない点は、URL が同じでも、サイトデザインが、いつの間にやら、変更されている恐れがあるということです。

なので、スクリーンショットを自分のローカルのPCもしくは、Evernote にストックしていくのもよいでしょう。

Pinterest には、クールなデザインを収集している人達が大勢います。

僕のPinterestは、こちら。

Kazu Pinterest

４．常日頃から、街や周囲のデザインを観察する。

なぜこのようなデザインになったのかであるとか、このデザインは、どういう意図があるのだろうかとかを考えながら、街のデザインを観察する。

5．ファッションに気を配る

女性の場合は、概ね、ファッションに興味があるでしょう。

男性も、ファッショに気を配ると、如実に、デザインセンスに直結するのではないしょうか。

友人の反応、恋人の反応とか。

男性の場合だと、彼女にも喜んでくれるのではないでしょうか。

少し勉強しておりますが、その人の顔の色とかによって、似合うカラーが違っていたり、パーソナルカラーというものがあったり、奥が深いです。

色が、相手に与える印象も違い、リアル感を持って、センスを学べると思います。

6．場合によっては、絵画教室など美術と関連するスクールに通う、もしくは、美術関係の趣味を持つ。

僕は、カメラを趣味にしているのですが、随分と多くの写真を見たりして、撮り方も研究してますので、始めた頃よりも、随分とセンスも磨かれたと思います。

Web用の用途に適した、写真の見方には、まだ疑問符ですが、写真を見る力には、随分と自信があります。

一時期、絵画教室にも通いました。

絵画教室に通うことで養われる力

• 集中力
• 表現力
• アートの基礎力
• 観察力

など。

直接的には、Webデザインには影響しないかも知れませんが、アイコンなどは、複雑な形状をシンプルに捉え、形にするものだと思います。

すなわち、デフォルメの要素が大きいかと。

そこで、デッサンなどで培われた力が発揮するのではないでしょうか？

おすすめオンライン講義

 

第１回：イメージを形にするイージースケッチ まっすぐな線が描けるようになろう

「デッサン」で検索すると、他の録画も出てくるようです。

7．手描きで模写

Webサイトの見本帳などの書籍を利用して、手描きスケッチをしていく。

この場合の利点は、3つ。

・自分でWebサイトを収集すると、どうしても、偏りが現れるが、一流のWebデザイナーによって、偏りなく、幅広いWebサイトを閲覧する事ができる。

・手描きをする事により、Webデザインの表現方法の幅が広がる。

・Webデザインの解説を読むことにより、そのWebデザインの優れた点、Webデザイナーが意図した点などを、一流のWebデザイナーを介した解説を読むことができる。

オススメWebサイト見本帳

基本、どの本でも大差ないかと。

突出しているのは、Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集 。

あと、珍しい所では、オンラインショップのレイアウト 売上・満足度・リピート率UP……ブランド価値をあげる業態別デザイン実例集 が、ECサイトに特化しています。

8．トレース

見本となるWebサイトを拡張、アドオンなどでキャプチャーし、それを下にして、Photoshop で、トレースして行く。 これを行うことにより、デザインの細部に気付くようになり、実践的なWebサイトのデザイン力を身につけることができる。

一番の目的は、対象となるデザインをじっくり観察し、技術を盗み、自分の引き出しを増やすことです。

Webデザインのスキルを磨こう！Webサイト模写のススメ | Webクリエイターボックス より。

トレースの方法

参考サイトの透明度を下げて、上からなぞる。 1週間に1サイトを目標に。 制作時間を計っておく。

1．模写するサイトを探す

前記の Pinterest に収集したサイトやギャラリーサイトから、見本となるサイトを用意する。

2．模写するサイトを、じっくり観察する

このサイトのどこが優れているかなどを、自分なりに、最初に分析する。

3．Photoshop でトレース

どういうレイヤー効果が使われているかなどを含め、見本の細かなところに注意しながら、ガイドを引き、トレースして行く。

注意すべきいろいろ

• • 余白の取り方
  • 配色
  • フォント
  • コーディングへの配慮

4．改めて、Webサイトを分析してみる

トレースして改めてわかったWebサイトの良いところ、改善した方が良い点などを、自分なりに分析してみる。 メモを取っておくと、あとあと、利用価値があるかも。

参考サイト

Webデザイン力を上げる。Webトレースをやってみよう！-手順編- | LOL.blog—webデザインetcを勉強中 Webデザインのスキルを磨こう！Webサイト模写のススメ | Webクリエイターボックス Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス ウェブデザインの勉強に！サイトのトレースを爆速化するツール5選 | 東京上野のWeb制作会社LIG

 

9．Webサイトを自作してみる

やはり、デザイン系などクリエイティブな創作物は、自分でやっていって初めて、色々、気付く点や学ぶ点が多いと思います。 なので、自作にチャレンジしてみる。

Webデザインを身につける上で役立つ学習サイト

WebデザインのためのPhotoshop実践講座

【参考記事】

どんな勉強やインプットをしてる？LIGのデザイナーの方法をご紹介！ | 東京上野のWeb制作会社LIG スクールに通うべき？Webデザイン初心者が短期間で上達するコツ – IT業界まるわかりガイド

非常に良い記事です。
是非、読んでみることをオススメします。