ELEMENT, INC.

Webサイトのスキルを向上する上で一番役に立つのが、模写することです。模写することはデザインの基本を身につけることができる上に、デザインの意図や意味を考える良い機会になります。

今回は模写の役割やデザインの模写の方法について解説をしていきたいと思います。

Webサイトの模写の意味

模写と言われると、ただ真似をして作るイメージを持っていませんか？模写はただコピーをする作業ではありません。画像や文字の配置などのレイアウト、色の選択、フォントの選択などを考える作業がとても大事なのです。デザインをするには全て理由や根拠が必要になります。

技術を上げていくためには、まずプロのデザイナーからデザインを学ぶ必要があります。これはスポーツや学問など、様々な分野でも同じことが言えます。誰も最初は経験値がないからこそ、真似をして型を作ることから始めるのです。

Webサイトの模写には、デザインの技術向上にとても役に立ちます。Webデザインを手がける上で、初心者はデザインの基礎が固まっていないことが多いです。模写をすることで、プロのデザイナーの技術だけでなく、デザインの意図を盗むことがポイントです。

Webサイトの模写の方法

Webサイトを模写する方法はいきなりサイトをコピーするのではなく、手順があります。今回ご紹介する手順ですると、よりデザインのスキルを早く上げることができます。

参考にするWebサイトを選ぶ

模写をしたいWebサイトを選びましょう。自分が知っている会社のホームページや商品、サービスがあれば、そのサイトを選んでも構いません。

または、様々なWebサイトを集めたページもありますので、こちらを活用することもおすすめです。ジャンル別でサイトを検索できたり、色からサイトを選択することができます。

サイトの流行も知ることができるので、模写したいサイトを選ぶ時にとても役に立ちます。

Webサイトのターゲットやポイントを考える

いきなり模写をしたいと考えてしまいますが、まずはサイトのターゲット、コンセプトなどを考える必要があります。ターゲットやコンセプトによって、Webサイトの色やレイアウトは違ってきます。

文字の行間やフォント選びなど、細かなところまで考えるとデザインの意図が見えてきます。漠然と考えるのではなく、「２０代の若者をターゲットにしたイベントのデザイン」のような具体的に考えていくことが大切です。

Webサイトのワイヤーフレームを作成

Webサイトのポイントを考えることができたら、ワイヤーフレームを作成していきましょう。ワイヤーフレームはWebサイトの骨組みに当たる部分です。実際のデザインを手がける時もワイヤーフレームから作成していきます。

ワイヤーフレームはレイアウトを考える作業でもあるので、レイアウトを学ぶ工程にもなります。Webサイトを訪れるユーザーが見やすいデザインはどのようなものか、考えながらワイヤーフレームを作成すると、レイアウトの意図がわかります。

Webサイトを模写する

ワイヤーフレームが完成したら模写をしていきましょう。デザインはPhotoshopで作成をしていきます。基本的には模写するサイトと同じように作らなければいけません。細かな装飾も自分で作ることが模写のポイントです。

画像に関して、そのまま使用できない場合は他の写真で代用しましょう。実際に自分で作成することで気づくことが多いです。Webサイトの細かなデザインを自分の目で確かめながら、模写をしていきましょう。

模写で意識すべきこと

Webサイトのデザインを模写する上で意識すべきことをご紹介していきます。

デザインの意図を考える

模写で意識すべきことはデザインがどのように作られているか注意しながら見ることです。色、フォント、レイアウトの全ての意図を意識しましょう。デザイン初心者は意図を読むことが難しいですが、自分なりに考えることがとても大切です。

今後のデザインに活かす

デザインの模写では、自分で装飾や細かなデザインを作成していきますので、自分のデザインのストックになります。そのまま使うのはコピーになってしまうので、一工夫入れて使うのがおすすめです。

自分のデザインのストックが多くなれば、デザインの作業の効率も上がるので、模写をする度にオリジナルの装飾を作成していきましょう。

模写の練習に最適なWebサイトの探し方

Webサイトを探すのにとても便利なのが、ギャラリーサイトです。コーポレートサイト、ECサイトなどサイトの種類から、美容・スポーツなどのジャンルから検索することができます。

今回ご紹介しているサイトは日本のサイトが中心に載っており、最新のWebサイトも集められているので、今のデザインの流行やレイアウトなども学ぶことができます。

SANKOU! | Webデザインギャラリー・参考サイト集

縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG

Web Design Clip | Webデザインクリップ

まとめ

デザインの模写の役割や方法をご紹介しました。デザインの模写をしながら、スキル向上やデザインのストックの作成など、これからの仕事につながる作業です。