webデザイナーになりたいけれど「デザイン力がない」「デザインに自信を持てない」などと悩んでいる方もいらっしゃると思います。
私自身も最初はデザインがとても苦手でした。でも、良いデザインをたくさん見て、良い部分を真似していくうちに、どんどんデザイン力が上がっていきました。
デザイン力を上げるために一番おすすめの方法は、良いサイトの模写です。
今回は、すぐに実践できるデザイン力を上げる具体的な方法をお伝えしたいと思います。
もくじ
デザイン力に「センス」や「才能」は関係ない
「デザイン力を上げたいけれど、そもそもセンスや才能がないと難しいのでは？」と思っている方も多いのではないでしょうか。
でも実は、そんなことはないんです。デザイン力とは、天性のセンスや才能ではなく「経験値」です。
多くの良いデザインを見て、真似をすることで、デザインの経験値がどんどんたまっていきます。新しいデザインを制作する際には、そのストックされた経験の中から、良さそうなものを選んで引き出すだけで良いんです。
デザインの経験値をためるためには、冒頭でもお伝えした通りサイトの模写がおすすめです。
サイト模写の具体的な方法
まず、模写するサイトを探します
まず、模写するサイトを探しましょう。私がよく見るサイトは次のとおりです。
- MUUUUU.ORG
…クオリティが高い縦に長いサイトが見られます。私が一番よく利用するサイトです。 - ランディングページ集めました。
…ランディングページ（LP）と言えばここですね！私が会社で制作したサイトもいくつか掲載していただきました。 - sps collection
…スマートフォンサイトのデザインリンク集です。スマホサイトはPCとは違った工夫が必要なので勉強になります。 - Responsive Web Design JP
…日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。 - イケサイ
…名前の通り、イケてるサイトが集まっています。日本のサイトが対象です。 - I/O 3000
…国内外問わず、クオリティの高いサイトが見られます。 - 81-web.com
…日本の優れたwebデザインが集まったサイトです。
模写するページ全体のキャプチャーを撮ります
模写に良さそうなサイトを見つけたら、ページ全体のキャプチャーを撮ります。
私はGoogle Chromeを使用しているので、「FireShot」という拡張機能を使ってキャプチャーを撮っています。Firefoxでも使えるようです。下記よりダウンロードいただけます。
PhotoshopまたはIllustratorでサイトを模写します
キャプチャーを撮り終わったら、PhotoshopまたはIllustratorを立ち上げて、キャプチャーを元に模写していきます。（FireworksでもOKです）
サイトを模写する具体的な流れ
- キャプチャーをPhotoshopまたはIllustratorで開く
- （Illustratorの場合）アートボードのサイズを画像に合わせます
※画像をアートボードのサイズに合わせるのはNG - レイヤーをロック
- 新規レイヤー作成
- キャプチャーを見ながら模写していきます
- 最後にキャプチャーと比較し、調整します
サイト模写５つのポイント
- 模写する中で、「いいね！」と思ったポイントをメモしておく
- 何故「いいね！」と思ったのかを考える
- 制限時間を決めて制作する
- 色んなジャンルのサイトを模写する
- 完璧にこだわらなくて良いので、数をこなす
「いいね！」と思ったポイントをメモしておくこと、これが一番重要です。メモをしておくことで、実際の仕事の際にも、そのアイデアを引き出すことができるからです。また、何故「いいね！」と思ったのかを考えながら作るとより効果的です。
『株式会社メディケア・リハビリ』の「いいね！」ポイントとその理由をいくつか挙げてみました。
- メインビジュアルに笑顔のおばあちゃんの写真を掲載
「いいね！」の理由：ファーストビューでサービス内容がわかる。安心感が沸く。 - サイトのメインカラーは緑で統一
「いいね！」の理由：緑は「安心感・安定・調和」を表す色。色でも安心感を強調している。 - フォントは見やすいゴシック体
「いいね！」の理由：ターゲット層を意識した見やすいフォントが使われている。
このように、「デザインの意味」を考えながら模写することで、単純に見た目の良いデザインを作ることから一歩進んで、ユーザビリティを考慮したデザインを作れるようになります。
また、実際の業務は時間との勝負です。時間を決めて、時間内で作る練習をしましょう。ジャンルは一つに偏らず、様々なジャンルのサイトを模写することをおすすめします。
色はスポイトツールで取る、フォントもなるべく実物に近いフォントを使うなど、完成度を上げる工夫は必要ですが、完璧主義になってしまうと進まないので、完璧にこだわるよりも、80％程度の完成度で構わないので、まずは数をこなすことを意識しましょう。
サイト全部の模写は大変なので、1ページだけ、バナーだけ等、一部分だけでも大丈夫です。あくまでデザイン力をつける為の練習なので、テキストを１字１字打つこと等もせず、コピペできるところはコピペで入れましょう。参考にしたい部分だけ模写すれば十分です。
常にアンテナを貼り、情報収集することも大切
サイト模写だけではなく、常にアンテナを貼り、情報収集することが大切です。
webサイトを見るだけではなく、美術館へ行く、電車内広告・本・雑誌・TV・新聞等で良いデザインを見つけたらメモしておくことも勉強になります。
また、アプリのPinterest（ピンタレスト）もデザインのヒントがたくさん転がっています。
私の場合は、電車に乗ると広告を見て、いいなと思った広告のデザイン手法をメモしています。例えば、マンションの広告を見たときに、「3,000万円」と記載があったとします。この場合、「3,000」だけフォントが大きく、「万円」だけフォントが小さい、というパターンが多いですよね。これは金額をより目立たせるために「万円」を小さくしている、ということです。些細なことですが、こういったことも、デザインの参考になりますね。
また、街を歩いている時に、いいなと思ったロゴや看板などがあれば、メモや写真に撮っておきます。
広告を見ていると、そのデザインは何故そのデザインでなければならないのかというデザイナーの考え方が見えてきます。もちろんデザイン自体の丸パクリは絶対にNGですが、デザイナーの「考え方」をパクることは非常に重要です。
Photoshop・Illustratorの技術を磨くことも大事
模写や様々な広告を見ることで経験を積むのはもちろんのこと、PhotoshopやIllustratorをサクサク扱えるようにしておくことも重要です。思い描いたデザインを形にするためには、最低限PhotoshopとIllustratorの知識が必要だからです。
webデザイナーが覚えるべきソフトについては、下記記事をご覧ください。
まとめ
デザイン力は、サイトの模写や良いデザインを見ることによって鍛えることができます。また、PhotoshopやIllustratorの技術を磨くことも大切です。
私が新卒の時、先輩DTPデザイナーから「学ぶことは真似ること」と教わりましたが、本当にその通りだと思います。良いデザイン手法を真似て自分のものにすることで、どんどんデザイン力はついていきます！まずはどんどん手を動かして、サイトの模写をしてみましょう。
