Webデザインの基礎を学べるオススメの記事9選



Webデザインの基礎を学べるオススメの記事9選

Webデザインを仕事にして働きたい、Webデザインを学びたい!と思った時に、「一体何から学習をはじめてよいものなの?」と悩んでしまいますよね。

Webデザイナーの仕事とは、インターネット上に公開されている企業や商品・サービスのWebサイトを構築することです。Webデザインと呼ばれる分野は、Webサイトのデザインを決める、必要な画像や写真を準備する、それらをWebブラウザーで閲覧できるようにするためにHTMLというプログラム言語を使ってコーディングするという複数の作業の組み合わせで成り立っています。

このため、Webデザインに取り組むには、「デザインや色彩の知識」「掲載する画像を編集するための画像ソフトの知識」「HTMLやCSS、Javascriptなどのプログラミング知識」、主に三つの領域の知識が必要となります。今回は、これらの知識の基礎を学べる記事をまとめてみました。興味のある分野から、目を通してみてくださいね。

image

目次
  1. デザインや色彩の知識を学べる記事
  2. デザインを学べる記事
  3. 色彩 について学べる記事
  4. 画像ソフト の知識を学べる記事
  5. Photoshopを学べる記事
  6. illustratorを学べる記事
  7. プログラミング知識 を学べる記事
  8. HTMLを学べる記事
  9. CSSを学べる記事
  10. Webの仕組みを学べる記事
  11. まとめ

デザインや色彩の知識を学べる記事

デザインを学べる記事

image

1. レイアウトに関する5つのデザインのルール
Web系のクリエイター、Webデザイナー向けのニュースやテクニックを紹介するメディア、Creiveの記事です。

デザイナーさんの間では常識である、デザインルールについて解説してくれている記事です。Webデザインをするうえで、これらルールを知っているのと知らないのとでは大きく差がつきます。すっきりとしてわかりやすいデザインに近づくことができますよ。

2. 2017年の流行を先読み!ウェブデザインを考える際に気に留めておきたい7つのトレンド

Webまわりの流行情報を丁寧にまとめたブログbrian'z Imaginationが人気の、ブライアンねこ氏(@x93mg)の記事です。

国内外含めた2016年、2017年(予想)のWebサイトの最新の流行デザインがまとめられています。デザインの楽しさ、美しさだけでなく、文字や画像の配置やメッセージがどのように込められているか、またそれがユーザーにとってどういった効果をもたらすか?まで解説してくれているので、筆者の考え方も含めて、とても勉強になります。

色彩 について学べる記事

image

3. 配色パターンからWebデザインを考える

Webデザインについての最新情報を日々配信しているMana氏のブログ Webクリエイターボックス より、ちょっと古い記事ではありますが、色彩の三属性や、ぴったりの色彩の選び方、また、色彩から与えられるイメージをWebサイトに利用する方法など、色彩デザインの基礎を解説してくれている、とてもわかりやすい記事です。

4. カテゴリー別配色アイデア100

おなじく、Webクリエイターボックスより、配色の見本がずらりと並んだ使える記事です。自分の作りたいWebサイトのテーマに合わせて、配色のイメージを決めましょう。計画的な配色を行うと、統一感のあるすっきりとしたWebサイトができます。

 

画像ソフト の知識を学べる記事

Photoshopを学べる記事

image

画像出典:PHOTOSHOP VIP

5. フォトショップ初心者が確認したい 使い方・基本設定まとめ

PhotoshopやAdobe製品の最新テクニックを紹介しているサイト、PHOTOSHOP VIPはプロのデザイナーさんも参考にしている充実ぶりです。初心者向けの情報も多数まとまっており、その中でも、レイヤーとは何か?など、Photoshopの使い始めの最初の一歩を、親切に解説してくれている記事となっています。この記事を足がかりに、さまざまな機能をひとつひとつ習得していきましょう。

illustratorを学べる記事

image

画像出典:アドビサポート チュートリアル

6. アドビサポート チュートリアル

illustrator,Photoshopには充実した公式のチュートリアルページも用意されています。illustratorの操作が全く初めて、という方は「ベクターグラフィック」という概念や、どんなことができるの?Photoshopとの違いは?というところから解説してくれているillustratorの活用法を見るで概要を知ることから始めてみましょう。さっそくillustratorを使い始めたいという方は、Illustratorことはじめで、動画を見ながら作業をして、機能を身につけていきましょう。Illustratorことはじめのように、入門者用の動画は日本語になっているものが多いですよ。英語のチュートリアル動画も、日本語字幕がついていますので安心です。

 

プログラミング知識 を学べる記事

image

HTMLを学べる記事

7. これさえ見ればOK!今から始める人のためのHTMLの書き方とは?

当サイトTech 2 GOの過去記事より、HTMLが全くはじめてという方にもわかりやすく、基本のHTMLタグを解説している記事です。難しそうな専門書や勉強のサイトは苦手という方でも、気軽に読めるボリュームですよ。読みながら、お手元のテキストエディタで実際にHTMLを書いてみませんか?

CSSを学べる記事

8. スタイルシート(CSS)の基本的な書き方【初心者向け】

同じくTech 2 GOの過去記事より、スタイルシートとは何か?基本的な書き方は?を解説してくれているブログ記事です。 HTMLは理解したので、色をつけたり文字の大きさを変えたりしてみたい!という方、最初に試してみたい font と box についてやさしく解説しているので、ぜひ参考にしてください。

Webの仕組みを学べる記事

9. HTML初心者必見!Webページの仕組みをわかりやすく説明!

Tech 2 GOには、こんな記事もあります。作ったWebサイトをインターネットに公開するのもWebデザイナーの仕事ですが、Webの仕組みまではなかなか知る機会がないですよね。Webデザイナーなら押さえておきたいWeb全体の仕組みを、かんたんに解説してくれているので、一度は目を通しておくと、役に立ちそうです。

 

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

image Webデザインは本当に幅が広く、奥が深いものです。それだけに、これから始めたいあなたにも、努力次第でセンスと個性を生かして活躍できる可能性がありますよ。

もし、独学で進めるうちに分からないことが多くて詰まってしまったり、勉強の進め方に迷ったら詳しい人に相談してみたり、プログラミングスクールを活用することもおすすめです。ちなみにCodeCampでも1回分の無料体験レッスンを受けることができます。

マンツーマンの個人レッスンなので「今つまづいている箇所」や「どのようなサイトを作ってみたいか」など、ピンポイントで具体的なアドバイスがもらえるのが特徴です。 無理に自分1人で学ぼうとせず、周りの力を借りることも検討しながら、楽しくwebデザインを学んでみてください。

image

関連記事

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp