【初心者・入門者向け】WEBデザイン学習におすすめのサービス・サイト・本まとめ

WEBデザイナーの中で知らない人はいない程有名な１冊です。

少し分厚めな本ですが、「デザイナーじゃない人でもデザインが理解できる」ように分かりやすくデザインの基本原則について説明されています。

著者が外国の方で、少しユーモアも交えながらデザインについて解説がされているため、初めてデザインの勉強をする方にはとてもおすすめの本です。

この本を読んだ後に身の回りのデザインに目を向けてみると、必ずどんなデザインにも４つの基本原則が使われていることに気付くことができます。

モグモグさん

デザイナーだけではなく、ビジネスマンやエンジニアの方などにも

おすすめだよ！

「なんかダサいなあ」というデザインから脱することができます。

なるほどデザイン

posted with ヨメレバ

筒井美希エムディエヌコーポレーション 2015年08月

2024年5月29日【図解】UIとUXとは？違いや意味を簡潔に解説

かわいらしいイラストが表紙の「なるほどデザイン」は、イラストや写真が多く使われているため、視覚的、感覚的にデザインを勉強したい人におすすめの１冊です。

こちらの本は、デザイン４つの基本原則の他にも配色やフォントなど幅広く解説されているため、一気に広範囲に勉強したい人にはぴったりです。

デザインの基本だけでなく、デザインの考え方も同時に学べることができるとても面白い本です。

本を普段あまり読まない人は「なるほどデザイン」から勉強を開始してもオッケーです！

学習のポイント

ポイント

まずは上の2つの本を読んでデザインの理解を深めましょう！

その後は毎日1つでもサイトや日常から原則を見つけてメモやノートをつけることで自分のデザインでも自然と取り入れられるようになっていきます！

モグモグさん

読んで終わらずに、実際に自分の頭で考えて地道に継続しよう！

デザインツールでのデザイン制作スキル

続いてはデザインツールを用いてのデザイン制作スキルについてです。

Adobe(アドビ)のPhotoshopやIllustratorなどのデザインツールは、Webデザインをする人は誰でも使える必要があります。

デザインツールは、たくさん触ったり、デザインを制作したりしながら勉強するのが一番早く習得することができます。

モグモグさん

でも…こんな悩みあるあるですよね

最初はそもそもどうやってツールを触ったらいいか分からない
どんなものを作ったらいいのか分からない
サイトや本が多くあるがどれから手をつけるべきかわからない

Adobe公式チュートリアル

そんな方におすすめなのが、Adobe公式から学べるチュートリアルサイトです。

公式のチュートリアルがかなり充実しているので、他のサイトに手を出さず

愚直に地道に公式のチュートリアルで学習していくのがオススメです！

重要！

とにかく手を動かす！

Photoshopチュートリアルで学習

Illustoratorチュートリアルで学習

PhotoshopやIllustratorは、様々な機能や使い方があるため、最初はかなり慣れるまで難しいですが、チュートリアルを１つずつこなしていけば、徐々に慣れつつスキルを身につけることができます。

Adobe公式オンライン講座

チュートリアルの他にも、オンライン講座を無料で視聴することもできます。

動画のが学習がしやすい方はこちらもオススメです！

Photoshopオンライン講座で学習

Illustratorオンライン講座で学習

サンプルデータも無料でダウンロードできて、動画もわかりやすく解説がされているので、初心者の方でも安心して勉強をすることができます。

資格(おまけ)

モグモグさん

あくまでおまけ！

時間がある方は挑戦してみてもいいかもという程度です！

もっとデザインツールを勉強して極めていきたいという方は、

資格もあるのでこの機会にチャレンジしてみるのもいいかもしれません。

Photoshop資格をみる

Illustrator資格をみる

スキルも身につけて、資格も取得できて一石二鳥です。

学習のポイント

ポイント

まずは、上記公式のチュートリアルをコツコツ学習していきましょう。

その後、基礎はできているので自分の作りたいものを作って応用していくようにしましょう！

UIデザインツールでのアプリ画面などの制作スキル

続いてはUIデザインツールを用いてのアプリ画面制作スキルについてです。

UIとは、ユーザーインターフェイスと言って、一般的にユーザーと製品やサービスとのインターフェース全てのことを意味します。

例えば、アプリだったりサイトだったりをスマホで見たとき、画面上で見られるフォントやデザインなどの全ての情報がUIと呼ばれています。

詳細はこちらの記事も参考にしてみてください。

アプリやサイトをデザインするときには、

XDやFigmaなどがよく使われており現在主流です。

それぞれのおすすめのサイトをご紹介します。

Adobe XD

こちらも先ほど紹介したPhotoshopやIllustratorと同じ企業のAdobe社の製品のため、同じように公式サイトからチュートリアルが公開されていますのでそれで学習していきましょう。

補足

公式のチュートリアルは、常に最新になっていますし機能も網羅されているので

本や他サイトよりも安心して学習できます。

XDチュートリアルで学習

モグモグさん

やはりデザインツールはたくさん触れば触るほど

スキル向上に繋がっていくので、まずはチュートリアルでツールに慣れていくことから学習していこう！

Figma

Figma(フィグマ)とはDylan FieldとEvan Wallaceが共同開発した、初のリアルタイムコラボレーションができるデザインツールです。

複数人が同じデータに同時にアクセスをすることが可能なので、UIデザインを行うときにFigmaを使っている企業も多くあります。

Figmaは、Udemy（オンラインで勉強できる）というサービスでFigmaコースというカテゴリがあるので、そこで学習していくのがオススメです！

Udemyで学習

Udemyはコースによって料金も異なるので、レビューなどを見ながら自分にあったコースを選んでみましょう。

学習のポイント

ポイント

まずは、上記のサイトでツールに慣れていきましょう。

その後、基礎はできているので自分の作りたいものを作って応用していくようにしましょう！

XDもFigmaも両方使いこなせるようになれば、どのデザイン会社でも通用できるスキルを身につけることができます。

コツコツ手を動かして学習していきましょう。

WEBサイトの基本的なコーディングスキル

最後に、HTML/CSS(JavaScript)を用いてのWEBサイトのコーディングスキルについてです。

デザインを作るだけでなく、実際にサイトに実装するためにはコーディング知識が必要となります。

補足

コーディングは専門的な知識も多いため、会社によってはデザインとコーディングで部署を分けているところもあります。

学習するメリットも大きいので学習をおすすめします！

学習する意味

スキルの幅が広がる(コーディングもデザイナーがやる場合も多いです)
コードも含めたデザインをデザイン段階でイメージできる (コーディングがしやすいデザインにできる)
エンジニアと会話ができる
自分でサイトを作ることができる

コーディングを勉強するには、本から基礎を学ぶのがオススメです！

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

posted with ヨメレバ

Mana SBクリエイティブ 2019年03月18日頃

デザイン初心者の方でコーディング知識を身につけたい方へおすすめの一冊です。

活字が少ないので、読書が苦手な方でも学習しやすいです。

HTML5&CSS3デザインブック

HTML5＆CSS3デザインブック

posted with ヨメレバ

エ・ビスコム・テック・ラボソシム 2014年11月