T.Ohki
これからウェブデザイナーになりたいと考えてる人、デザインをはじめてみたけどいまいち自信が持てない人向けのデザイン力アップにつながるまとめ
ウェブデザインの原則 【基本編】
これからウェブデザイナーになりたいと考えてる人、デザインをはじめてみたけどいまいち自信が持てない人に、ウェブデザインをおこなう上で絶対に知っておくべき原則をまとめてみました。
ここで紹介する原則を知ることで、視覚的なアクセントの付け方やコンテンツの整理のしかたを、誰でも理屈で簡単にデザインできるようになるはずです。また、これからあなたが他人のデザインを眺めた時、そのデザインの特性を「イメージ」と「理論」の2WAYで理解できるようにもなるでしょう。これからのデザインに役立つ大原則、永久保存版です。
デザインの「近接」「整列」「コントラスト」「反復」という4つの原則について解説されている記事。見やすいレイアウトにするにはどうしたらいいのかが分かります。この4つの原則を理解すれば、視覚的な整理やメリハリのついたデザインを作れるようになるはずです。
ウェブデザインにおいてとても重要なのがこの文字組み。文字のベースライン(上下の位置)、カーニング(文字の前後の間隔)、ジャンプ率(文字サイズの格差)のバランスを、解説用の画像を用いて知ることができます。この原則を理解することで、見出しやテキストデザインの向上につながります。
色。印象を作り出したり、メリハリを出したり、と全体やパーツの表現をする上で欠かせない絶対的な要素の一つです。原則というよりも「理論」や「理屈」というニュアンスが近いでしょうか。これらを知識として持っていれば、ウェブデザインをおこなう際の色の選択に「基準」が生まれるので、効果的なデザインを作り出すことができるはずです。
ウェブデザインの原則 【拡張編】
ウェブデザインの原則についての理解ができたら、次はデザインの観察をおこなってみましょう。すると、今までは関心することしかできなかったようなハイセンスなデザインも、実は様々な「原則」を取り入れてることがわかるはずです。綺麗なデザインほどその傾向は強いですし、原則に基づいたデザインであるからこそ、その原則を意図的に破ることで効果を生み出すことができます。
「原則」を理解した次のステップとして、実際のデザインを分析して更に理解を深めること、そしてそのデザインを真似てスキルアップに繋げるための情報をまとめてみます。
まずオススメなのがこの記事。各要素・原則を、実際のハイセンスなWEBデザインと合わせて丁寧に解説されています。ここで紹介されているWEBデザインを、その解説を理解しながら眺めるだけでも理屈として理解できます。次に、その理屈を持ってデザインを真似してみると、知識とスキルの双方の向上につながるはずです。
デザインと一概にいっても、様々なテイストがあります。様々なテイストやその手法を知っておくことで、自分の好きなデザインや手法が分かり、デザインとの向き合い方が明確になってきます。あなたがインスピレーションを受けたテイストがあれば、まずはそこから積極的に真似てみましょう。新しいテイストを生むきっかけにもなりえます。
ウェブデザインの原則 【実践編】
最後に、ウェブデザインをおこなう環境で必須ともいえる、Photoshop・Illustratorの実践テクニックを学べる記事・サイトのまとめです。実は、私は状況によってFireworksも使用しますので、個人的まとめとしてFireworksのテクニックも学べる記事・サイトも紹介しておきます。
テクニックを学ぶことで、できることの幅は広がりますし、それなりに経験がある人でも、「あぁ、こんな方法があるんだ!」という新しい発見・気付きにつながるはずです。
Photoshopのチュートリアル記事を紹介したりテクニックを紹介する超有名なブログです。チュートリアル記事の紹介は海外(英語)サイトなので、記事先で実践するには躊躇しがちですが、Photoshopで使う機能の英語表記さえ覚えてしまえば、画像付きなので「日本語しかわかんね」という人でもそんなに苦労せずに学ぶことができます。
同じくPhotoshopのチュートリアル系。こちらは日本語で読める記事の紹介です。上記の「Photoshop VIP」内の記事も紹介されてます。デザインといってもサイトデザインに関しては、ここまでレベルのテクニックを使う機会はそうそうないと思いますが、表現の幅を広げておくことに損はないし、ちょっとしたアクセントとして使う機会はあるかもしれませんね。
こちらはIllustratorのチュートリアルの紹介ページです。記事元は海外(英語)サイトです。ただ、分かりやすい画像付きなので、Illustratorの機能の英語表記を覚えてしまえばそんなに問題はないでしょう。
Photoshop、Illustratorの海外チュートリアルを翻訳解説されているブログです。数はそこまで多くはありませんが、日本語で解説されているところは少ないのでご紹介しておきます。
Fireworks派の人は必見の国内でも数少ない日本語チュートリアルサイトです。基礎知識と称された初心者向けの情報からデザイン制作テクニックまで、丁寧な解説をされています。
こちらでもFireworksのチュートリアルを紹介されています。ただ、こちらは海外(英語)サイトのチュートリアル紹介となっているので、解説はすべて英語表記になります。PhotoshopやIllustratorの海外サイトのケースと同様、Fireworksの機能の英語表記を事前に覚えておく必要がりますね。
Photoshopのツール名の英語表記と日本語表記の比較をされているページです。海外サイトのチュートリアル記事を実践する際に役立ちます。
こちらはIllustratorのツール名の英語表記と日本語表記の比較をされているページです。海外サイトのチュートリアル記事を実践する際に役立ちます。
以上、これからデザインをはじめる人、デザインに自身がもてない人向けのデザイン向上のきっかけづくりのまとめでした。更なるスキルアップを図るには、デザインの魅せ方の手法や理論・理屈についての理解を深め、実践し、引き出しの数を増やしていくことが必要です。
また次回以降、どこかのタイミングでそこについてはまとめてみたいと思います。
でわ。
https://matome.naver.jp/odai/2133793825751310701
2013年08月07日