WEBデザインの上達に欠かせない「模写」の方法

こんにちは！
デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。

WEBデザインのスキルアップするためには、参考サイトの模写がおすすめです。
やり方を間違わなければ、簡単かつ効率的にWEBデザインが上達する方法です。
今回は、WEBデザインの模写の手順やメリット、注意点を紹介します。

WEBデザインの模写とは？

WEBデザインの模写とは、既存のウェブサイトやデザインの構成を参考にして、同じようなデザインを自分で再現する練習方法のことです。
色使い、レイアウト、フォント選びなどのデザインの基本を学び、実際のデザインのバランス感覚が養われます。

上達が遅いデザイナーの特徴

「どこか素人臭い。」
「思うようなデザインが出来ない。」
「そもそも、良いのか悪いのかの判断が付かない。」

このような悩みがあるデザイナーの根本的な2つの原因は、デザインの基礎が身に付いていないこととトレンドを習得出来ていないことにあります。
決してデザインセンスが無いからではありません。

WEBデザイナーに必要なセンスについて、こちらの記事で詳しく解説しています。

2024.05.31

【初心者向け】デザインセンスの磨き方

こんにちは！ デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。 「自分はデザインセンスないから無理かも」と感じたことはありま...

この2つを習得するためには「模写」が一番効率が良いです。
プロのデザイナーでも、日々デザインを模写・研究しています。

デザインは地味で地道な作業の連続で、デザインスキルを上げるには時間がかかります。
ただ、デザインの良し悪しを見分ける目とツールの使い方を地道に身に付ければ、表現の幅もどんどん増えていきます。

WEBサイトの模写の方法

参考にするWEBサイトを探す

参考サイトなどで模写するサイトを探します。
はじめは、きれいに情報整理がされていて、コンテンツもしっかりあるシンプルなサイトを選びましょう。

参考デザインを分析する

いきなりデザインを始めるのではなく、まずはよく観察し、それぞれの構成要素を分析しましょう。
検証ツールを使って、コンテンツ幅や余白の大きさ、フォントサイズなどを細かく調べます。

どれも正解はありません。
デザインを再現する上で、なぜ参考デザインが良いと感じたのかを、要素を分解して調べていきます。

情報をまとめていくことで、参考サイトの「デザインのルール」が見えてきます。
ルールを明確化することは、「模写」からオリジナル化していくために不可欠です。

参考デザインを模写する

参考デザインのスクリーンショットをデザインツールで横に配置し、模写していきましょう。
1pxにこだわって、できるだけ完璧に模写してください。
模写するときは以下の点に気を付けましょう。

さらに、なぜこのデザインなのか？まで意識しながら模写しましょう。
よく見ないと気付かない部分まで、こだわって再現することが自分のスキルアップにつながります。

デザインの意図を説明できるようにする

模写でデザインが再現出来たら、参考デザインがなぜその形や色、レイアウトで構成されているのか、目的や理由を汲み取りましょう。

デザインに含まれる意図とは？

デザインの意図を理解し説明できることは、単なるデザイナーから「課題を解決するプロ」に成長するための重要なステップです。
意図を汲み取って、細部まで手を抜かずにこだわれる人が、クライアントが求める成果を、高いクオリティーでデザインで表現出来る一握りのWEBデザイナーになりえます。

オリジナル化する

模写したサイトをオリジナル化出来ることで、はじめて実際の業務で役立ちます。

オリジナルサイトの目的・概要を決める

WEBサイトのターゲットや目的を決め、サイトのコンテンツを作成しましょう。
情報の設計が出来たら、ワイヤーフレームから作成します。

情報設計を意識したワイヤーフレームの作成方法はこちら

2024.11.14

UXを高める情報設計を意識したワイヤーフレーム作成

こんにちは！ デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。 ワイヤーフレームは、サイトを形にする設計の最初のステップです...

模写サイトのデザイン要素を変える

サイトの目的を意識してフォント・カラーなどを決めていきましょう。

模写サイトのレイアウトを変える

コンテンツに応じて、レイアウトを変えましょう。
模写サイトのデザインのルールは変えずに、情報に応じたレイアウトを採用します。

まとめ

はじめてWEBデザインを模写するのは、時間がかかるかもしれません。
この模写を何度か繰り返すことで、確実にプロレベルのWEBデザインスキルが身に付きます。
WEBデザインの基本から、トップレベルの優れたテクニックや引き出しを増やし、さらにはクライアントやユーザーのニーズに応えられる一握りのWEBデザイナーを目指しましょう！