超実践的！知っておきたいWebデザインテクニック【保存版】

本記事のテーマ

Webデザインの初心者から中級者まで実務で役に立つWeb制作に関わる情報を掲載していきます。

• コーディング編
• デザイン編
• 写真撮影・素材編

コーディング編

HTMLエディター

代表的なエディター

• DreamWeaver
• Atom
• Sublime Text
• Brackets

ホームページ制作を始めたい。コーディングを覚えたい。

コーディングをするのに代表的なソフトといえばAdobeのDreamWeaver。このソフトは多くの方に使われている一方で、とにかく高い。気軽にコーディング始めるにはなかなか初期投資が必要で、困ったという方も多いはず。

実はこのAdobe、DreamWeaverまでのいかないにしても、かなり優秀なBracketsというソフトを出しています。今回は初心者の方がコーディングをするのに気軽に始めれるBracketsというソフトを紹介します。

コーディングはこれひとつでOK！Bracketsを使ってみる

HTMLテクニック

Emmet

コーディングの速度がとにかく速くなりたい。そんなあなたにおすすめなのがEmmet！

実際の制作会社では、Emmetなしで仕事は考えられません。
htmlやCSSを十分に理解ができて余裕ができたら、Emmetを覚えていると有利になります。

コーディングが爆速になるEmmetとは

FontAwesome

アイコンをJPEGやPNG、SVGで作るのは結構手間がかかります。

その手間を楽にしたのがFontAwesome！よく使われるアイコンが網羅されています。

エンプロスの職業訓練ではFontAwesomeも授業で解説いたします。（2020年12月11日現在）

https://fontawesome.com

アイコンがもっと便利に簡単にFontAwesome

CSSテクニック

flexbox

CSSのfloatプロパティでデザインのレイアウトをしていたのは、もう過去のこと。今は便利なflexboxというプロパティがあります。

レイアウトするには必須のスキルで、覚えるのにはちょっとコツがあります。

エンプロスの職業訓練ではflexboxも徹底的に授業でこなします。

flexboxを使ってみよう！

jQuery・JavaScriptテクニック

jQueryやJavaScriptは覚えているにこしたことはございませんが、職業訓練で覚えるべきステップとしては、優先順位が低いです。職業訓練レベルでは、jQueryやJavaScriptをガリガリ記述できなくても問題ないです。実際、jQueryやJavaScriptを１から記述することは時間がかかるため、予算があまり取れない案件ではjQuery・JavaScriptのプラグインを使用する場合が多いです。まずはしっかりとHTMLやCSSを問題なくこなせるようになってください。

ただし、以下の簡単なjQuery・JavaScriptのプラグインは覚えていると役に立ちます。

• スライダー
• ライトボックス
• スムーススクロール
• ハンバーガーメニュー
• アコーディオン

【超簡単】画像を滑らかにズームするjQueryプラグイン

デザイン編

Illustratorテクニック

[手書きイラストに色を付けたい]ライブトレース機能を使ってみる(Illustrator)

Photoshopテクニック

時間がなくてもスグできる！めくれた写真の作り方

写真撮影・素材編

無料で美しい写真素材を! frickerのクリエイティブコモンズ(CC)

タダでできる？自作でとても簡単に！商品の撮影ブースの作り方