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

本記事のテーマ

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

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

コーディング編

HTMLエディター

ホームページのコーディングを始めたいときにエディターが必要になります。有料のものから無料のものまで、様々なエディターがあります。無料のものだからといって、バカにできません。かなり優秀なエディターも多いです。まずはコーディングってどんなものかと知りたい場合は、無料のエディターから使い始めてみてもいいでしょう。

代表的なエディター

• DreamWeaver
• VSCode（Visual Studio Code）
• Atom
• Sublime Text
• Brackets

DreamWeaver

コーディングをするのに代表的なソフトといえばAdobe社のDreamWeaverです。Web制作会社で使用されているケースが多いソフトです。というのも、Web制作会社ではAdobeのPhotoshopやIllustrator、XDなどを使う場合が多く、それらをまとめたAdobe Creative Cloudを購入すると一緒にDreamWeaverも同梱しているためです。

DreamWeaverは単体購入もできますが、割高感があるのであまりオススメしません。購入するときは、PhotoshopやIllustratorが入っているCreative Cloudをオススメします。

DreamWeaverはWeb制作会社に就職したいという方にオススメのエディターです。

Brackets

DreamWeaverでは、なかなか初期投資が必要なので、躊躇してしまいます。興味本位でまだ本気で、コーディングがしたいわけではないときになかなか金額が出せませんよね。実はAdobe社はDreamWeaverの他にBracketsというエディターを出しています。これがなんと無料！！

無料だからといって、コーディングでできないことがあるわけではないので機能的に十分です。またDreamWeaverよりシンプルなため、操作が軽いです。

とにかく気軽にコーディングをはじめたいという方にオススメのエディターです。

今回は別記事にBracketsの紹介をしていますので、興味のある方は読んでみてください。

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

VSCode

Microsoft社が出すVisual Studio Code。現場では、略してVSCodeと呼ばれる場合が多いです。こちらも無料で拡張性の高いエディターです。

Webデザイナーやコーダーだけでなく、システム開発者など幅広い層に使用されているエディターのため、使い方を検索すると簡単に情報が手に入ります。

DreamWeaverを使っていたが他のエディターをつかって見ようと思われている方にオススメです。

下記のサイトからダウンロードすることができます。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

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も徹底的に授業でこなします。

flexboxを使ってみよう！

jQuery・JavaScriptテクニック

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

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

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

スライダー

最近では少し減ってきましたが、トップページのファーストビューでスライダーがよく使われています。使う頻度が高いため使えるようになった方がいい技術です。

ライトボックス

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

デザイン編

Illustratorテクニック

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

Photoshopテクニック

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

写真撮影・素材編

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

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