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

Webデザイン・DTPデザイン

  • 公開日
  • 最終更新日

エンプロススタッフ

本記事のテーマ

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を1から記述することは時間がかかるため、予算があまり取れない案件ではjQuery・JavaScriptのプラグインを使用する場合が多いです。まずはしっかりとHTMLやCSSを問題なくこなせるようになってください。

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

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

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

デザイン編

Illustratorテクニック

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

Photoshopテクニック

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

写真撮影・素材編

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

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

お問い合わせ

エンプロスの職業訓練についてご不明な方は、まずは学科・コース入校から就職までよくある質問をご覧ください。

  • 職業訓練のエンプロスについて、ご質問ご不明点などございましたら、下記のお問い合わせフォームからお問い合わせください。お問い合わせについては、2営業日以内にご返答いたします。

    お問い合わせフォーム
    • 営業時間
      8:50〜18:00
    • 定休日
      土日祝
    • TEL
      079-287-1000