Webデザイン初心者のみなさん、トレースのメリットをご存知ですか？
こんにちは。僕はWeb系の会社でアルバイト中の大学生です。
この記事に来られた方は、多少なりともWebデザインに関心のある方ではないでしょうか。それでは、こんな疑問を抱かれたことはありませんか。
Webデザインってどうやって練習するんだ…?
練習するとき、何を意識すれば効果的なの？
Webデザインと一口にいっても、その業務内容には例えばこのようにいくつか種類があります(分類の仕方は一例です)。
3番の「デザインの作成」がWebサイトの全体の配色やボタンの配置などを行う過程で、初心者の多くが想像される「Webデザイン」ではないでしょうか。
したがって、本記事では「デザインの作成」を練習してみたい方へオススメの方法とそれによって学べることについてご紹介できればと思います。
ちなみに僕はアルバイトをしているといっても、主に4番の「コーディング」へ従事しているので、一緒に働くデザイナーさんへのあこがれは日々つのるばかりです。
この記事の内容もとに、お互いに上達していきましょう。
トレースがオススメです
結論から申し上げますと、練習の第一歩として「トレース」するのがオススメです。
トレースとは、Webサイトのビジュアルをそっくりそのまま自分で写して作ってみることです。
デザインにはありとあらゆる難しい理論が存在します。ぼくも勉強中で痛感していますが、いきなり理論ばかり学ぶと面食らうのでマネから始めよう、という方法ですね。
練習のイメージとしては、上の写真のように参考にするサイトを隣に並べて、Adobe XDなどのソフトを用いて模写していきます。
(具体的な方法については次の記事でご説明します。)
トレースで学べること
それでは、トレースすることでどんなことを学べるのか、以下のメリットについて詳しく説明していきます。
実際に練習される時もこういった点を意識するといいですね。
サイトのつくり
まず、サイトのつくり、すなわち構造的な面を学ぶことができます。
例えば、僕たち人間に頭があって足があるように、Webサイトにもヘッダー(頭)やフッター(足)が存在します。他のページに移動するためのナビなどもありますね。
Webサイトの全体を見渡して構成を観察することで、デザインを通して読み手に内容をどう伝えようとしているか、という制作者の目線が見えてくるでしょう。
サイトの配色
次に、Webサイトの内容を伝えるためにどのような色が使用されているのか、という配色を学ぶことができます。
たとえば、マテリアルデザインの配色は上記のようにメインカラー、サブカラー、アクセントカラーという3種類で構成されるというきまりがあります。
どの色がどの構成要素でカラーコードの値は何か、といったことを含めて色について詳しくなることができます。
▢ マテリアルデザインカラーの参考になるサイト
見出しのデザイン
見出しのデザインについては、長さやフォントを調べて学ぶのが有用です。
見出しの線の形状や幅や高さ、フォントの種類やサイズなどを専用のプラグイン(次の記事で紹介)などを活用しながら綿密に調べることで、
どのように見やすさがデザインされているのかを学ぶことができます。
余白の使い方
ユーザーが思っている以上にWebサイトにおいて重要なのが、
余白です。
と、このようにどれくらい余白を開けることでどんなイメージを持たせられるか、と言うことを感覚的にも定量的にも学ぶことができます。
アイデアの引き出し
これらを踏まえて、デザインアイデアの引き出しが増えると言えます。
たとえば、使い手目線では何となく押していたボタンにも、微細なグラデーションがかかっていたり、うっすらシャドウ(影)がついていたりするものです。
その細部のこだわりの有無がきっと、素人っぽいデザインとプロっぽいデザインの分かれ目なのかもしれませんからあなどれないですよね。
デザインソフトの使い方
さらに、トレースをしていくうえで、デザインに用いるソフトウェアの使い方を学ぶこともできます。
詳しくは次の記事でご紹介しますが、たとえば以下のようなソフトです。
こんな形を作るにはどうすればいいんだろう、というケーススタディを積み重ねることで、ソフトを効率的に操作することが出来るようになりますね。
それではトレースを始めましょう
今回の記事ではWebデザインをトレースすることで学べることを中心にご紹介させていただきました。メリットを知ったら、さっそく練習してみたくなりますよね。
具体的なやり方に関しては、次の記事にてご説明させていただきますのでお楽しみになさってください。
みなさまのwebデザインの勉強に少しでもお役に立っていれば幸いです。
最後までお読みいただき、ありがとうございました。
(文責・ランドゥ)
コメント