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

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

デザインを学べる記事

1. レイアウトに関する５つのデザインのルール

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

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

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

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

色彩 について学べる記事

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

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

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

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

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

Photoshopを学べる記事

画像出典：PHOTOSHOP VIP

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

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

illustratorを学べる記事

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

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

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

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

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全体の仕組みを、かんたんに解説してくれているので、一度は目を通しておくと、役に立ちそうです。

まとめ

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

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

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