> > >

【Webデザイナー必読】PhotoshopやHTMLなどのスキルを劇的に上げられる記事まとめ30選

shadow

Webデザイナーとしてのキャリアを歩み始め1年目。基本的なスキルを学び、業務をひと通りこなせるようになったものの、先輩デザイナーと比べると、差を感じてしまうという方もいるのではないでしょうか?

Webデザイナーはクリエイター系の職種であるため、「センス」が重要視されるシーンが多いです。しかし、“学び”によってスキルアップできるのもまた事実。むしろ、テクノロジーの発展が著しい業界ということから、プロとして仕事を続けるのであれば学び続けなければならないのは宿命かもしれません。

そこで、今回は「Photoshopを使ったデザイン」「HTMLなどの言語を使ったコーディング」「Webデザイナーとしてインプットしておきたい情報」に関する30記事をご紹介します。

目次

Photoshopなど、デザインに関する記事10選

1.良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと

1.yoidesigntte

この記事では、技術を学ぶ前の根本となるデザイン・レイアウトの基本を紹介しています。良いデザインとは「そもそも、どういうものか」ということから始まり、書体にいたるまで具体的な画像を交えおり、非常に分かりやすく書かれています。テクニカルな面のスキルアップだけでなく、「デザインの基本」という点から学んでみるのも良いかもしれません。

良いデザインって?技術を学ぶ前に知っておきたいデザイン・レイアウトの基本的なこと

2.センス上がった!タイプ別に分けたWebデザインの参考になるサイトまとめ

2.senseagatta

この記事では、デザインの参考になるものをページや職種、動きなどのタイプ別にデザイン分けて紹介されています。ダッシュボードの配色についてなど、具体例を含んで書かれているので、シチュエーションに合わせてデザインを学べるでしょう。

センス上がった!タイプ別に分けたWebデザインの参考になるサイトまとめ

3.Web制作者は知っておきたいwebサイトのレイアウト7選

3.webseisakusyagashitteokitai7

この記事では、現場で使われる頻度の高いデザインのレイアウトが紹介されています。それぞれのレイアウトのメリット・デメリットなどの紹介に合わせて。レスポンシブwebデザインから可変グリッドレイアウトまでまとめられており、Webデザイナーならチェックしておきたい記事です。

Web制作者は知っておきたいwebサイトのレイアウト7選

4.今更聞けない?!WEBデザイナーなら最低限しっておきたい有名フォントの数々

4.imasarakikenai_webdesigner_font

この記事は、Webデザイナーなら知っているべき定番のフォントをまとめた記事です。普段何気なく目にしていても、すぐに名前と一致しないことがありますよね。そういった時、こちらをチェックすればフォントのデザインと共に名称を確認することができます。

今更聞けない?!WEBデザイナーなら最低限しっておきたい有名フォントの数々

5.人気デザイナーが明かす!カラー配色の秘密テクニック10個まとめ

5.ninkidesigner_color10

この記事は、Creative Marketの人気デザイナーが実践している配色を選ぶ時のポイントが紹介されています。写真を利用したカラーパレットの作り方や、デザインの基本である「類似色」と「補色」の使い方など、意外と知らない情報を得られるでしょう。色の使い方がデザインの質を大きく左右することに気付かされます。

人気デザイナーが明かす!カラー配色の秘密テクニック10個まとめ

6.【保存版】バナーの作り方やデザインの参考になる記事やサイトまとめ

6.banatsukurikatamatome

高度なバナーを作成するのに役に立つ記事やサイトを紹介しています。効果の出るバナーの作り方やRetro Bannerなどデザインの参考になるサイトが書かれています。様々な種類があるので他の人と差をつけたい人は必読です。

【保存版】バナーの作り方やデザインの参考になる記事やサイトまとめ

7.新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップ

7.sinmaidesigner

この記事では、効果のでやすいバナーの作り方や、バナー作りの参考になる記事をまとめたものを紹介しています。バナー制作をする際のネタの行き詰まりを感じた時、参考事例が網羅的にまとめられているので、一度は目を通しておきたい記事です。

新米デザイナーは知っておきたい、“美しい”バナーを“効率的”に制作するための10のステップ

8.PhotoshopでのWeb制作効率を向上させる「JSX」とは

8.jsx_photoshop

この記事はPhotoshopのweb制作の機能を向上させる「JSX」を紹介しているものです。「JSX」の使い方、書き方などが画像付きで紹介されています。Photoshopで作業している人で、レイアウト機能などをさらに向上させたい人にとって参考になることが多いでしょう。

PhotoshopでのWeb制作効率を向上させる「JSX」とは

9.便利すぎるPhotoshopのプラグイン30選

9.photoplagin30

この記事はPhotoshopのプラグインが30種類まとめられている記事です。例えば、わずか数回のクリックであっという間にページのレイアウトを作ることができる「Velositey」などが紹介されています。Photoshopの作業効率を上げたいならば、チェックしておきたい記事です。

便利すぎるPhotoshopのプラグイン30選

10.ブックマーク必須!Photoshop基礎チュートリアル60まとめ

10. photo60matome

この記事はPhotoshopの基礎的なノウハウを60種類を紹介しています。また、基本的なテクニックにとどまらず、写真をヴィンテージ風にする方法や光のエフェクトでデザインをひと味違う加工をする方法などが書かれています。Photoshopの基本を紹介した記事ではありますが、日常的に利用しない方法などは忘れてしまいがちなので定期的にチェックしておきたいですね。

ブックマーク必須!Photoshop基礎チュートリアル60まとめ

HTMLやCSS、JavaScriptなどに関する記事6選

 

11.ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現!

11.desuninimanabuanime

この記事はCSSを利用したアニメーションを制作するときに参考にしておきたい記事です。ディズニーで培われた「動きを見ただけで理解できる」ようなアニメーションの基本原則を12種類まとめています。また、記事内でアニメーションの動作を確認することができる点が非常に便利です。

HTMLやCSS、JavaScriptなどに関する記事6選

12.初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選

12.syoshinshamuryouhtmlcss

実務を通してHTML5とCSSを学んできた人にとっておすすめな、基礎知識を“ほぼ無料”で学べるサービスをまとめた記事です。ほとんどのサービスが無料でできるので、スキルアップするためにいままで自分が使っていたノウハウは「どういう理屈」でなりたっているのかを振り返りたいときにチェックしておくと良いでしょう。

初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選

13.最新デザインが魅力的!すごい無料HTMLテンプレート素材24個まとめ

13.saishindesign_html

この記事はWeb制作をスムーズに行うことができる新作HTMLテンプレート素材をまとめて紹介しているものです。ヘッダー部分にビデオ動画などをフルスクリーン表示する、クリエイティブなHTMLテンプレートがあるWhiteなどいろいろ紹介されています。自分の好みに合わせたテンプレートが見つかるかもしれません。

最新デザインが魅力的!すごい無料HTMLテンプレート素材24個まとめ

14.フォーム周りで覚えておくと便利なCSS

14.formdeoboeru_css

この記事は、フォーム周りでCSSを使うときに便利なプロパティやスニペットをまとめたものを紹介しているものです。送信ボタンを画像にするやり方やフォーカス時にラベルをアニメーションさせる方法など、意外と「忘れがちなもの」が書かれています。とりあえずブックマークしておき、あとで読み返すなどの利用にも最適です。

フォーム周りで覚えておくと便利なCSS

15.かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

15.katsuteha_javade_imacss

この記事は少し前まではJavaScriptを利用していたが、CSSのみでできる小技を10個紹介しているものです。テーブルの偶数・奇数の行の色を変えるのに「:nth-child()」 を使えば隣接する要素の上から数えて n番目の行を装飾できるなど便利なものが書かれています。CSSのみで実装できれば時短にもつながるでしょう。

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

16.WebデザイナーのためのJavaScript、jQueryの勉強法

16.webdesigner_javas_jque

この記事では、Webデザイナー向けのJavaScript、jQueryの小技や書籍が紹介されています。記事の筆者がおすすめするJavaScriptのコア部分を学習するための書籍やjQueryのプラグインの活用例の書籍など、スキルアップを目的としている方であれば目を通しておきたいものがまとめられています。

WebデザイナーのためのJavaScript、jQueryの勉強法

Web制作の手間を省いてくれるアプリ・サービス紹介の記事7選

 

17.【Macアプリ】Webデザイナー向けの便利なおすすめMacアプリ18個

17.macapri18

この記事は、Macを利用しているWebデザイナーなら必見といってもよいでしょう。Webデザインをさらに効率化するためのMacアプリが紹介されています。豊富な拡張機能を備えているSublime Text3など、Webデザインをより快適にするものばかりなので覚えておいて損は無いでしょう。

【Macアプリ】Webデザイナー向けの便利なおすすめMacアプリ18個

18.Webサイトの作成を爆速化するWebアプリ約70種をまとめた「HelpMeBuild.io」がまさに救世主!

18.app_helpmebuild

この記事では、Web制作アプリがまとめられた「HelpMeBuild.io」が紹介されています。HelpMeBuild.ioはデザイン性の高いWebサイトを作成するのに便利なWebサービスを厳選しており、それぞれがどういった内容なのかコメントも書かれています。自分にあったサイトをこの記事を通して探してみてはいかがでしょうか。

Webサイトの作成を爆速化するWebアプリ約70種をまとめた「HelpMeBuild.io」がまさに救世主!

19.Web制作のための無料Webサービス・ツール40

19.webseisakutool40

この記事は、Web制作を効率化するための無料サービスを紹介したものです。最も人気な「オンラインフォトエディタ」や海外で人気の「Flcon」などのサービスなどが掲載されています。自分の用途に合わせてサービスを探すことができるでしょう。

Web制作のための無料Webサービス・ツール40

20.私がweb制作でよく使うサイト47+α 作業ごとリスト

20.webseisakudeyokutsukausaito47plus

この記事では、記事の筆者がWeb制作中に利用しているWebサイトが紹介されています。素材・webデザイン・コーディングなど項目ごとに分かれているのが特徴です。

私がweb制作でよく使うサイト47+α 作業ごとリスト

21.WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。

21.webdesignfreesozai

Webデザイナーにとって、悩みの種となりがちな「写真素材」。フリー素材とはいえ、商用利用が禁止のものも多く、どこから素材をあつめればいいのかといった状況に陥りやすいです。この記事では、商用利用OKなフリー素材に絞って紹介しているので、ブックマークしておき、利用するときに確認するといった使い方ができます。

WEBデザイナーご用達の本当に使える商用フリーの素材サイトをまとめました。

22.Webデザイナーは要ブクマ!フォントやテキスト関連の便利サイト20

22.fontmatome20

この記事ではWebフォントやテキスト関連の便利なサイトがまとめられています。例えば、日本語の無料フォントの表示確認ができる「フォントhack.jp」やアイコンをWebフォントとして配布している「Fontello」などです。より高度なデザインを目指すWebデザイナーの方にとって、ユーザーにとって“わかりやすい”レイアウトを心がけたいですよね。

Webデザイナーは要ブクマ!フォントやテキスト関連の便利サイト20

23.コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順

23.grunt_tasktool

この記事は、Web制作時のタスクを自動化してくれる「Grunt」というツールの導入から使い方までを紹介しているものです。Gruntではファイルの結合やCSS Spriteの生成などができることや、インストールの手順などが書かれています。面倒なタスクをまとめて自動化できてしまうのが非常に便利ですね。

コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順

Webデザイナーとしてインプットしておきたい記事7選

24.WEBデザインが短期間で上達した方法

24.webdesignjoutatsu

この記事では、Webデザインのスキルを短期間で向上させたノウハウが紹介されています。Webデザイナーとして最低限必要な能力は「求められているデザインをできる限り速く提供する」こと。それをクリアするための方法などが書かれています。筆者の体験談をもとにして書かれているので説得力がありますね。

WEBデザインが短期間で上達した方法

25.売れるサイト作成に必須!たった4つのWEBデザインの基本法則

25.webdesignkihonhousoku

この記事はWebデザイナーの方は身につけておきたいWebデザインの考え方を紹介しているものです。コンバージョンを生むための法則として40%が正しいターゲットにアプローチできているかどうか、40%が商品の品質、20%がデザインやコピーライティングなどのセールステクニックである、というエド・バーネットの40/40/20の法則などが書かれています。機能的なデザインにするためにぜひ読んでおくべきでしょう。

売れるサイト作成に必須!たった4つのWEBデザインの基本法則

26.Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法

26.saitopafomansu5

この記事はWebサイトのパフォーマンスを上げる方法を紹介しているものです。CSS,JavaScriptの配置の「悪い例」「良い例」をそれぞれ具体例と共に載せているので非常に理解しやすいです。基本的なところからさらにWebデザインのクオリティを向上させたい方は必見です。

Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法

27.Web制作のための、Illustratorの独学法

27.webseisaku_illustrator

この記事では、Webデザイナー向き、Illustratorの学び方を紹介しています。記事の筆者がおすすめするロゴ、アイコン制作の勉強方法などが書かれています。ノウハウを紹介した記事が多いですが、こうした学び方にフォーカスした記事も、スキルアップのためには読んでおきたい記事です。

Web制作のための、Illustratorの独学法

28.ウェブデザイナーにお勧め!フォントやタイポグラフィの知識・テクニックを学ぶまとめ

28.webdesignerfontchisiki

この記事は、フォントやタイポグラフィの知識と必ず役に立つテクニックの学び方を紹介しているものです。デザインのルールである、可読性・視認性・判読性の3つから読みやすい書体の選ぶ方法などが掲載されています。プレゼンの時などにも、活用できるので、覚えておいて損はない方法です。

ウェブデザイナーにお勧め!フォントやタイポグラフィの知識・テクニックを学ぶまとめ

29.WebデザイナーによるWeb制作のときに気をつけてることや制作フローとかいろいろ

29.sakuseifuro

この記事では、Webデザイナーが制作を行うときに気をつけておきたいことやWebサイトの作成フローを紹介されています。ターゲットとゴールの設定や、作成ポリシーを決めるなどの制作準備から作成まで細かく書いてあります。作成フローを理解することが、効率的なスキルアップに繋がるでしょう。

WebデザイナーによるWeb制作のときに気をつけてることや制作フローとかいろいろ

30.私が出会った優秀なWebデザイナーに共通した26の特徴

30.yushuwebdesigner26

この記事では、筆者が出会った優秀なwebデザイナーの特徴が紹介されています。新しいことに挑戦する、1つのデザインから多くを読み取るなど優秀なデザイナーには共通点があるということがわかります。スキルに伸び悩んでいる方であれば、こちらを参考にしてみると刺激になるかもしれません。

私が出会った優秀なWebデザイナーに共通した26の特徴

今回は、Webデザインのスキルアップを目的とした30記事をご紹介しました。クリエイティブ力と、効率化できるノウハウの両方を合わせて学ぶことで、より高度なデザインを実現できるでしょう。「新しさ」と「わかりやすさ」が求められる職種なだけに、学ぶモチベーションとスキルを向上していくためのキッカケになれば幸いです。



本ブログは、会計ソフト「MFクラウド会計」を提供しているマネーフォワードが運営しています。

経理の時間を80%削減するクラウド型会計ソフト

MFクラウド会計・確定申告はクラウド型会計ソフトです。クラウドだから「いつでもどこでも」使えて、自動入力で経理がカンタンに。

MFクラウド会計


会計ソフト「MFクラウド会計」 請求書作成ソフト「MFクラウド請求書」