名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

近年、日本のほとんどの会社が自社ホームページを開設し、「WEBデザイナー」の需要が増えています。
WEBデザインの勉強をしたいけど何から始めたらいいか分からない方や、今の勉強法であっているのか分からないという方向けに、現場で働くデザイナーが今までに役に立ったWEBデザインの勉強法を紹介します。

WEBデザインの勉強法について

WEBは1990年代から発展を続け、現在では日本のほとんどの会社が自社のホームページを開設しています。WEB黎明期には無かったスマートフォン、タブレットといったデバイスも増え、サイズの違う端末でも問題なくホームページが見られるように「レスポンシブデザイン」と呼ばれるデザインも誕生しました。
このように常に進化し続ける流動的な業界なので、今回紹介する勉強法以外にも、常にデザインのトレンドを学ぶ姿勢を持ち続けることが重要です。

WEBデザインの勉強法

ここからは現場で働くWEBデザイナーが、今までに役立った勉強法を5つ紹介します。

WEBに関する知識を学ぶ

何から勉強したらいいか分からない方は、まずはWEBに関する一般的な知識を学ぶ必要があります。私たちがどのような仕組みでホームページを閲覧しているのかを正しく理解する事で、WEBデザインに取り入れることのできるアイデアを増やすことができます。

WEBデザインで使うソフトについて勉強する

ホームページ制作の現場では、PhotoshopやIllustrator、XDなどのAdobeのソフトを使ってデザインを制作することが多いです。写真のレタッチはPhotoshop、イラストの書き下ろしはIllustrator、ワイヤーフレームの作成はXDなど、それぞれ用途に合わせて使い分ける場合が多いので、少なくともPhotoshop、Illustrator、XDの勉強をすると良いでしょう。Adobe製品の他にも、Figmaというデザイン制作ツールもあるので自分に合ったツールを使って制作することをおすすめします。
Youtubeなどの動画サイトでは、これらのソフトを使った基本的なWEBデザインの勉強法、レタッチの方法などのチュートリアル動画が多数公開されているので、動画を見ながら真似するだけでも勉強になります。
他にも、マウスオーバー時の細かなアニメーション作成にはAdobeのAfter Effectsを使用することもありますが、複雑な動きを作らない限り使用する場面は少ないため、初学者の方であればPhotoshop、Illustrator、XDのスキルを磨くことを優先しましょう。

参考になるデザインのホームページをトレースする

「SANKOU！（URL：https://sankoudesign.com/）」などのギャラリーサイトには、WEBデザインのトレンドを取り入れた参考になるデザインが数多く掲載されています。これらの中から、デザインが気に入ったサイトや、自分に足りないスキルを磨けそうなサイトを選び、デザインをトレースします。プロが制作しているデザインをトレースすることで、最適なピクセル単位でのマージンの空け方、文字サイズや文字間、行間などが分かります。もちろん、これらの要素はサイトによって異なるので、サイトの雰囲気を捉えながら、数多くのサイトをトレースすることをおすすめします。

SANKOU！

デザインの引き出しとなるアイデアをPinterestで保存しておく

ホームページでよく使われるボタンや表などのアイデアはPinterestに保存しておくことで後から見返すことができます。優れたデザインを後から見返す事で、デザイン制作に行き詰まった時の助けとなります。デザインパーツごとにフォルダを分けて管理しておくのもおすすめです。

ファッション雑誌からレイアウト・見出しデザインを学ぶ

ファッション雑誌は秀逸なレイアウト・見出しデザインを使っている事が多く、WEBデザインでも応用できるアイデアが満載です。もちろん紙のデザインと考え方が異なる部分もありますが、一度WEBから離れて雑誌を読みながらデザインアイデアを探してみるのも良いでしょう。

今回のまとめ

今回はWEBデザイン初学者向けのWEBデザイン勉強法を紹介しました。何から勉強すればいいか分からないという方でも、今回紹介した勉強法を活用してデザインを制作してみましょう。