Photoshop

何事も上達への近道は先達からスキルを「盗む」ことです。ピカソも「良い芸術家は真似をする。偉大な芸術家は盗む。」という名言を残しています。 Webデザインも例外ではなく、上達への近道は優れたWebデザインからいい所を盗み、自分のデザインに取り入れていくことです。もちろん盗作しろという意味ではありません。優れたWebデザインをよく観察し、なぜ優れているのかを分析し、そのポイントを自分のデザインに取り入れる。この作業を繰り返すことによって優れたデザインが自分の血肉になっていきます。 この観察、分析、自分のスキルに昇華していく作業を最も効率的に行えるのが模写だと思っています。ただし、何も考えずに模写しても何も身につかないので注意が必要です。 今回はWebデザインを模写するメリットと模写する際に意識するポイントをお伝えします。また、Webデザインを模写する手順も解説しますので、ぜひ最後までお付き合いください。 Webデザインを模写する3つのメリット まずはWebデザインを模写するメリットをお伝えします。 優れたWebデザインの良い点を分析できる Webデザインを模写する1番のメリットは優れたWebデザインの良い点を分析できることです。 いろいろなWebサイトを見る中でカッコいいサイトやオシャレなサイトに出会うことがありますが、普通は「カッコいいなぁ」とか「オシャレだなぁ」と思うだけで終わってしまいます。優れたWebデザインをたくさん見ることは大切ですが、ただ見るだけでは何も身につきません。 優れたWebデザインから何かを得ようと思うのなら、なぜそのサイトがカッコいいのか、オシャレなのかを分析する必要があります。Webデザインを模写すると、否が応でもそのサイトを観察しないといけません。そして、観察しながらサイトのフォントや余白の取り方、レイアウトや配色などを分析します。Webサイトを見るだけでは分からなかったことが色々と見えてくるはずです。 Webデザインの基本が分かる Webデザインには基本の形があります。例えばサイト上部にはヘッダーがあり、サイト下部にはフッターがあります。たくさんのWebサイトを模写しているうちに、この様な基本の形が分かってきます。 必ずしも基本の形を守る必要はありませんが、基本を全く無視してデザインしてしまうと使いにくいサイトになってしまうので注意が必要です。ほとんどのサイトではヘッダー内にナビゲーションがありますが、それを無視してフッターにしかナビゲーションを配置していなかったらサイトを訪れた人は迷ってしまいますよね。 この様にWebデザインの基本形を学ぶためにも模写は有効的です。 Photoshopなどのデザインソフトの使い方を学べる PhotoshopなどでWebサイトを模写することによって、ソフトの使い方を覚えることが出来ます。模写はデザインを自分で考えるという工程をスキップしているだけなので、実際に作るパーツなどは本番と一緒です。見本のWebサイトを1px単位で正確に模写することで、Webデザインに必要なPhotoshopの使い方を覚えることが出来ます。 「Webサイトの模写で覚えた操作＝実際のWebデザインで使う操作」なので、Photoshopのリファレンス本などよりもWebデザインに特化した操作方法を効率的に覚えることが出来ます。 Webサイトを模写する時に意識すること 何も考えずにただWebサイトを模写しても得るものは少ないです。僕がWebサイトを模写する時に意識していたことをお伝えします。 フォントのサイズや行間 メインイメージ、コンテンツ、ヘッダー、フッターでは様々なフォントサイズが使われています。メインイメージではフォントサイズを大きくし、ヘッダーやフッターではフォントサイズを小さくするなど見やすさを考慮したフォントサイズ選びが大切です。全て同じフォントサイズにすると情報の優先順位が分からなくなり見にくいサイトになってしまいます。 また、コンテンツの本文とリード文で行間を変えることもあります。リード文ではあえて行間を広げることで目立たせたりデザイン性を高めたりします。 1つのサイトでも色々なフォントサイズが使われているので、どの様な箇所でどの様なフォントサイズが使われているか意識して模写していました。 コンテンツの余白の取り方 コンテンツの余白は情報の固まりを明確にしたりデザイン性を高めるために大切です。全てのコンテンツが同じ間隔で並んでいたら、コンテンツの区切りが分かりにくくなります。 また、シンプルでオシャレなサイトは余白を大きく取ってる場合が多く、情報量が多いサイトは余白を小さめに取っている場合が多いです。余白の取り方ひとつでサイトの雰囲気がガラリと変わります。 Webデザイン初心者は余白を詰めがちで窮屈なデザインなってしまうことがあります。コンテンツとコンテンツの余白、画像とテキストの余白、フォントとフォントの余白などを意識することで余白の大切さが分かってきます。 配色 優れたWebデザインは色の使い方が絶妙です。僕は使っている色の数、色の面積、色と色の距離を意識しながら模写していました。 今でも配色は難しいと感じることが多く、ついつい色を使い過ぎてしまったり、逆に色を統一しすぎて面白味が無くなってしまったりします。 ほとんどのWebサイトではメインで使われているカラーがあります。このカラーをどんな所で使っているかを観察するだけでも勉強になります。 Webサイトを模写する手順 僕がやっていたWebサイトを模写する手順を紹介します。当時はPhotoshopがWebデザインの主流だったのでPhotoshopを使っていましたが、今はIllustratorやXDでも問題ありません。 【手順1】模写するWebサイトを探す 僕はWebデザインを集めたギャラリーサイトで模写するサイトを探していました。素晴らしいデザインのサイトが手っ取り早く探せるのでとても便利です。おすすめのギャラリーサイトは以下の記事で紹介していますので参考にしてみてください。 あとは、普段から優れたWebデザインのサイトを探す癖をつけておくと自然と模写したいサイトが見つかります。 【手順2】Webサイトのスクリーンショットを保存する 模写するWebサイトを決めたらそのサイトのスクリーンショットを保存します。ページの一部ではなく全体のスクリーンショットを保存しないといけません。 ページ全体のスクリーンショットは、Chromeの開発者ツールや拡張機能で撮影できます。おすすめの拡張機能は以下の記事で紹介していますので参考にしてみてください。 【手順3】Photoshopで模写する スクリーンショットをPhotoshopで開き、スクリーンショットのレイヤーを一番下に配置します。模写している際にスクリーンショットがずれないようにロックをかけておいた方がいいです。もしスクリーンショットが目立ちすぎて模写しにくい場合は、不透明度を下げるとやりやすくなります。 あとはスクリーンショットをなぞるように画像やテキストを配置していくだけです。1pxのズレもないように意識して模写しましょう。 画像は見本サイトの画像を使用してもいいし、フリー素材などに置き換えてもOKです。素材を使用する場合は出来るだけ似たような雰囲気のものを選びましょう。 まずは見本のサイトをそのまま模写するのがオススメですが、慣れてきたら自分のアレンジを加えるのもアリです。 Webサイトを手描きで模写する 僕はPhotoshop以外に手描きでも模写していました。 手描きの方がPhotoshopよりも速く模写できるので数をこなすことが出来ます。Webデザインを勉強し始めた頃は1日1サイトを目標にして模写していました。鉛筆やボールペンで模写したもにに色鉛筆で色を塗ることで配色の勉強にもなります。 Photoshopのように1px単位で模写することは出来ませんが、Webサイトのレイアウトや配色をざっくり把握するためにはオススメです。 また、模写した紙の裏や余白に「このサイトを模写した理由」や「どんな所がいいと思ったか」などをメモして言語化することによって学習効率がさらに高まります。 Webサイトの模写についてのまとめ Webサイトの模写はWebデザインを上達させるために効果的な方法です。レイアウト、配色、フォントなどを意識して模写することによって、Webデザインの優れたポイントを盗むことが出来ます。Photoshopなどのデザインソフトで模写するとソフトの使い方も身につくので一石二鳥です。 とにかく数をこなしたい場合は手描きでの模写がオススメです。1日1サイトなどを目標にしてみるのもいいと思います。 楽器やスポーツを始めるときもまずは真似から入ることが多いと思います。Webデザインもまずは真似から入って、自分の中にデザインの引き出しが増えてきたらオリジナル要素を加えていけばいいです。 以上、Webサイトを模写するメリットとやり方の紹介でした。

Photoshop

Webデザインにおすすめのアートボードサイズを紹介

Webデザインを模写する3つのメリットとやり方を解説