2016年4月19日

さまざまなスキルを身につけて仕事の幅を広げよう

独学でWebデザインを学習できる!デザイナー初心者が絶対に押さえておきたいサイト・記事14選

独学でWebデザインを学習できる!デザイナー初心者が絶対に押さえておきたいサイト・記事14選

Webデザイナーに求められるスキルは、HTMLやCSS、JQuery、WordPress、タイポグラフィ、配色、コピーライティングなど多岐に渡ります。

より多くの知識・技術を身につけていれば、Webデザイナーとして活躍できるチャンスは増えるでしょう。

本記事では、これらのスキルを身につける必要性を解説した上で、独学でも学べるサイトや記事をご紹介します。

 


独学でHTML5、CSS3を学習できるサイト・記事

HTML5に対応したモダンブラウザが普及し、モバイル向けのWebブラウザもHTML5に対応しつつあります。

以前であればJavaScriptを使わなければ実現できなかった動きのある表現も、HTML5とCSS3の組み合わせで実現できるようになりました。

HTML5は、2014年10月にW3Cによる勧告もされているため、標準技術といって良いでしょう。

ここでは、HTML5とCSS3について独学で学べるサイト・記事をご紹介します。

 

1.HTML5+CSS3 入門 / yoppa.org


http://yoppa.org/taumedia10/1695.html
「HTML5+CSS3 入門」では、HTMLの歴史やHTML5 の新要素の特徴のほか、HTML5を使用することでどのようなメリットがあるか解説。本記事には、CSS3を使ってレイアウトやデザインを行う方法も記載されています。

「HTML5+CSS3 入門」の記事はHTML5の利便性を体感するための内容となっているため、HTML5やCSS3を独学する際は最初に読んでおくと良いでしょう。項目ごとに例を示しながら説明しており、初心者が基礎を学ぶ際に役立つサイトといえます。

記事の最後には、ページ内で紹介されたサンプルファイルが添付されています。ダウンロードして実際に使ってみることで、理解を深めることもできるでしょう。

 

2.HTML入門、CSS3入門 / ドットインストール


http://dotinstall.com/lessons
「ドットインストール」は、HTMLやCSSをはじめ、JavaScript、PHP、Ruby、Pythonといったさまざまなプログラミング言語を動画で学べるサービスです。初心者から経験者向けまで幅広くコンテンツが用意されているため、自分のスキルに応じて学ぶことができます。

たとえば「HTML入門」では、HTMLの概要を学べるほか、ウェブサービスの画面やホームページを作成する際に必要な知識を身につけることが可能です。

また、「CSS3入門」では、CSS3の特徴ほかにもremとemの違いを学べ、transformによる要素の変形などを実践することができます。

HTML5とCSS3の基本を学びたい方や応用力をつけたい方は、一度活用してみると見識を深められるでしょう。

 

3.html5doctor  / HTML5.JP


http://www.html5.jp/html5doctor/index.html
「html5doctor」は、Richard Clark氏やBruce Lawson氏、Jack Osborne氏などが共同で運営している海外サイト。HTML5を活用する上で必要な情報を提供しており、「HTML5.JP」には日本語訳が掲載されています。

「html5doctor」はHTML5の雛形を提示しているほか、header要素やfooter要素、video要素などの説明を記載。サイトに寄せられたHTML5に関する質問への回答も掲載されているため、基礎を理解する上で役立つでしょう。

特にマークアップに関する記事が充実しているため、読んでいるうちに必要な知識が身についているかもしれません。

 

JQueryを学習できるサイト・記事

JavaScriptライブラリであるJQueryはWebデザインで広く使われており、Webデザイナーが身につけておきたいスキルの1つとなっています。

JQueryはJavaScriptを簡単に扱えるようにしたライブラリのため、比較的学びやすいのが特徴です。

JQueryでは少ない記述でサイトに動きをつけることができ、扱えるようになればWebデザインの幅が広がります。

 

4.CODEPREP


http://codeprep.jp/ja/books
「CODEPREP」ではJQueryの基礎を学ぶことができます。無料会員と有料会員によってサービス内容は異なります。
JQuery関連のコンテンツには以下のようなものが挙げられます。

・JQueryでつくるタップ切り替え

・JQueryでつくるパララックス

・JQuery UIでつくるドラッグ&ドロップリスト

・CSS3&JQueryでつくる2Dゲームモーション

「CODEPREP」は1冊10分から学ぶことができ、はじめは穴埋め形式になっているため気軽に学習することが可能です。また、学ぶ中でコードを自由に編集することもでき、さらに理解を深められます。

「CODEPREP」にある「ディスカッションボード」では利用者同士で質問することができるため、学んでいく上で疑問が生じたときは活用すると良いでしょう。

 

5.Progate


https://prog-8.com/
「Progate」は、HTMLやCSS、JavaScript、Ruby、PHPといったプログラミング言語が学べる無料サービスです。JQueryのレッスンもあり、初級編から上級編まで用意されています。

初心者が独学できるレッスンをコンセプトとしており、プログラミングを基礎から学び、応用力をつけたい人に役立つサイトとなっています。

「Progate」の特徴は、イラスト中心のスライド学習を採用していること。自分のペースで勉強を進めることができ、復習もしやすいことがメリットとなっています。

また、基礎を学んだ上で実際にWebページを作成できるため、プログラミングのスキルを着実に身につけることができるでしょう。

 

WordPressを学習できるサイト・記事

WordPressとは、世界各国で使われているCMSのこと。オープンソースで公開されているため、無料で使うことが可能です。

WordPressはカスタマイズ性が高く、無料で使用できる便利なプラグインが多数あることから拡張性にも優れています。

商用で使われることも珍しくないため、案件として接する機会も多いでしょう。

 

6.Webデザインレシピ


http://webdesignrecipes.com/category/wordpress/

「Webデザインレシピ」は、WebデザイナーのNori Takahashiさんが運営するサイト。本サイトには、WordPressに関する記事が多数掲載されています。

たとえば「はじめてWordPressのオリジナルテーマを作るとき」「WordPressでブログじゃないWebサイトを作るとき」など具体的な状況に応じた記事があり、自分の知識・スキルに合わせて学ぶことが可能です。

「Webデザインレシピ」の記事には基礎的な情報も記載されているため、初心者の人も理解を深められる内容になっています。記事によってはサンプルのダウンロードが可能なため、学びながら実践することで着実にスキルを身につけられるでしょう。

 

7.Webクリエイターボックス


http://www.webcreatorbox.com/tech/wordpress3-original-theme/

こちらのサイトは、Webデザイン系のブログで知名度の高い「Webクリエイターボックス」が運営しています。

本記事では、WordPressのオリジナルテーマの作り方を紹介。WordPressのテーマはどのように動くか、HTMLのテンプレートにWordPressの機能はどういった方法でつけるのかを詳しく説明しています。

サイト内にサンプルがあるため、ダウンロードしたファイルを参照しながら記事を読むことで理解を深められるでしょう。

「Webクリエイターボックス」には、オリジナルテーマの作り方のほか、WordPressをローカルにインストールする方法や、オリジナルテーマをアップロードする方法を解説する記事も掲載されています。

 

8.WordPress入門 / ドットインストール


http://dotinstall.com/lessons/basic_wordpress

再び「ドットインストール」からご紹介。

「ドットインストール」には「WordPress入門」という動画レッスンがあり、基礎的な内容から実践的なものまで全23回が公開されています。

「WordPress入門」では、WordPressの概要やインストールの方法のほか、記事の投稿、オリジナルテーマの作成、ファイルの分割、ショートコードの作成などを学ぶことが可能です。動画の長さは1本あたり約1分から3分となっています。

サイト内には「補足情報」が記載されており、WordPressを学ぶ上で大切なHTMLやCSS、PHP、MySQLなどの入門動画も用意されています。補足情報やほかの入門動画は状況に応じて活用すると理解が深まるでしょう。

 


タイポグラフィを学習できるサイト・記事

タイポグラフィは文字の体裁を整える技法で、Webデザイナーには必須ともいえるスキル。

普段何気なく見ている文字もタイポグラフィで適切に整えられており、ロゴを作るときやバナーを作る際もタイポグラフィの技術が必要となります。

たとえば以下の画像の場合、上部のテキストはタイポグラフィが施されていないため、文字同士の間隔が揃っておらず不自然な状態です。

このテキストをカーニング(文字同士の間隔調整)することで、自然な体裁になります。

このような技法がタイポグラフィであり、ほかにも行揃えや文字組、余白、グリッドなど身につけるべき知識はたくさんあります。

 

 

 

http://type.method.ac/
 

9.Webデザイナー(私)によるタイポグラフィーレイアウトの注意書き   / Webデザインレシピ


http://webdesignrecipes.com/typography-layout-system/

再びNori Takahashiさんが運営するサイト、「Webデザインレシピ」の記事をご紹介。

「Webデザイナー(私)によるタイポグラフィーレイアウトの注意書き」では、Nori TakahashiさんがWebデザイナーとして学んだタイポグラフィレイアウトの要点をまとめています。サンプルつきで注意点を記載しているため、それぞれ例を参照しながら読み進められる内容です。

具体的には、文字間や文字詰め、アクセントを使った工夫のほか、軸を使ったレイアウト、放射状のレイアウト、左右対称レイアウトなどを解説。

ページの最後ではタイポグラフィレイアウトを学ぶ際に参考となる書籍を紹介しているため、興味のある方はそちらも併せて読むと知識を深められるかもしれません。

 

10.デザインのレベルを上げる!レイアウトやタイポグラフィに関するまとめ / コムテブログ


http://commte.net/blog/archives/4547

「コムテブログ」の本記事は、デザインの質を高めるために大切なタイポグラフィやレイアウトの知識をまとめたもの。「レイアウト」「タイポグラフィの基礎」「+約物(やくもの)を調整」「印刷と色の知識」の4部構成になっています。

「レイアウト」では、余白の使い方や文字・画像配置などをサンプル付きで解説。「タイポグラフィの基礎」では、文字の見た目を良くするための調整方法を紹介しています。また、「+約物(やくもの)を調整」では記号類を調整する際の注意点を記載。「印刷と色の知識」では、筆者が考える最低限知っておくべき印刷の知識を説明しています。

デザインのレベルを上げたい方は、本記事を読んでおくと参考になるかもしれません。

 

11.基本的だけど大切なタイポグラフィのシンプルな14のルール / コリス


http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html

「基本的だけど大切なタイポグラフィのシンプルな14のルール」は、海外のタイポグラフィに関する記事「Simple rules for good typography」を意訳したもの。本記事では、印刷やWebデザインに役立つタイポグラフィの基本的なルールを紹介しています。

具体的には、フォントのサイズやレディング、カーニング、アクセント、ボディテキストなどに関する注意点を記載。サンプルが提示されているため、どのようなことに気を付けるべきかイメージしながら読み進めることができるでしょう。

本記事で紹介されている14のルールには、それぞれ補足説明があります。簡潔な内容のため、比較的短い時間でポイントを押さえられる記事といえるでしょう。

 

配色を学習できるサイト・記事

適切な配色をするためには、センスだけで色を選ぶのではなく、基本を学ぶことが必要です。

もちろんセンスも大切になりますが、理論で裏打ちすることにより、さらなるレベルアップを期待できます。また、クライアントから説明を求められたときにも筋道立てて説明ができるでしょう。

「自分には配色のセンスがない…」と悩んでいる方も、基本を押さえれば適切な配色が可能になるはずです。

 

12.色彩センスのいらない配色講座


http://www.slideshare.net/marippe/ss-9003317

「色彩センスのいらない配色講座」は、配色に関して身につけておくべき知識を全39枚のスライドで解説している資料です。こちらの資料は、色の3属性として色相や明度、彩度の意味を記載しているほか、ベースカラーの選び方や色の分割方法、適切な色面の比率など配色の基礎を簡潔に説明しています。

色の選び方や押さえておくべき注意点などは、スライド上で例を示しながら解説。本資料はイラストやサンプルの画像を見ながら読み進められるため、初めて配色を学ぶ方にとっても理解しやすい内容といえます。

配色の基礎をこれから身につけたいという方は、この「色彩センスのいらない配色講座」を読んで内容を理解しておくと、今後の活動に役立てられるでしょう。
 

13.配色パターンからWebデザインを考える / Webクリエイターボックス


http://www.webcreatorbox.com/tech/web-design-color-scheme/

再び「Webクリエイターボックス」の記事をご紹介。

「配色パターンからWebデザインを考える」という記事では、Webサイトの印象に大きな影響を与える色彩について、身につけておくべき基礎知識や配色パターンの見つけ方などを説明しています。

具体的には、色彩の三属性やぴったりの配色を探す方法を解説し、効果的な配色を用いているWebサイトの例を提示。項目ごとに図やサンプルがあり、それぞれ簡潔な説明が記載されています。

「ぴったりの配色を探す方法」の項目の最後にはリンクがあり、こちらはオンラインツールによって配色をWebデザインに取り込む方法を紹介する記事です。興味のある方は、そちらも読むと見識を広められるかもしれません。

 

コピーライティングを学習する必要性 / 学習できるサイト・記事

Web制作の依頼を受けた際、コピーをどうするか相談を受けたことはないでしょうか。

コピーライティングはWebデザイナーの仕事ではないと考える場合もあるかもしれませんが、コピーライティングまで一気通貫で引き受けられれば、単価アップや他のデザイナーとの差別化につながると考えることもできます。

 

 

14.効果が3倍あがる! コピーライティングのテクニック【完全保存版】 /  LISKUL


http://liskul.com/copywriting-2503

「効果が3倍あがる! コピーライティングのテクニック【完全保存版】」は、商品・サービスを魅力的に伝えるコピーライティングの技法が記載されている記事です。

本記事では、コピーライティングを作る前にやっておくべきことやコピーを作るための4ステップのほかにも、効果的な訴求4パターン、文章の組み立て方、レイアウトを見せる際に有効な手法を紹介。それぞれ例を示しながら効果的なテクニックを解説しており、良いコピーであるか検証するための方法も記載されています。

本記事を読めばコピーライティングの手順や押さえておくべき法則を学ぶことができるため、基本的な知識を身につけたいWebデザイナーの方はぜひ参考にしてみてください。

 


まとめ

いかがでしたでしょうか?

今回ご紹介したスキルは多くありますが、習得している技術が豊富であればあるほど活躍の機会は増えてくるでしょう。

Webデザイナーとしての市場価値を高めるために、より多くのスキルを身につけていけるとよいですね。

 

クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

すべての案件を見る

いきなり相談に行くのは不安な方へ

フリーランスになった時、どんな案件を提案されるのかメールでわかる!

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。