擬似クラス:has()の使い方

今回は、書籍リストのようなサンプルでお話します。

<ul>
  <li>Illustratorの本</li>
  <li>Photoshopの本</li>
  <li>HTML / CSSの本<span class="soldOut">売り切れ</span></li>
</ul>

うち、「売り切れ」のカラムだけスタイルを変えたいとします。
:has()を使うと、次のように「span要素を持っているli要素」だけをセレクタにすることができちゃいます。

/* spanを持っているli要素のスタイルだけを変える */
li:has(span){
  opacity: .5;
}

idやクラスも指定可能

:has()の括弧の中には、タグ名だけでなく、idやクラスも入れられます。
先ほどのCSSであれば、こんな表記も定義できるということです。

/* .soldOut要素を持っているli要素のスタイルだけを変える */
li:has(.soldOut){
  opacity: .5;
}

子要素でも孫要素でもOK

条件となる要素が何階層下にあっても大丈夫です。
これでも、

<!-- liから見ると、.soldOutは子要素 -->
<li>
  <span class="soldOut">売り切れ</span>
</li>

これでも、

<!-- liから見ると、.soldOutは孫要素 -->
<li>
  <p><span class="soldOut">売り切れ</span></p>
</li>

ちゃんと追っかけてくれます。

:has()を活用すればJavaScript要らず

ここからは実用例をご紹介。
サンプルはメール一覧みたいイメージですが、:has()を使って次のような機能を実装しています。

・チェックを入れた行の背景色を変える
・一つでもチェックが入っている場合、「選択したメールを削除する」のリンクを表示
・プルダウンでヘッダーの色を変えられるようにする

<table>
  <thead>
    <tr>
      <th>受信メール一覧
        <select>
          <option value="blue">Blue</option>
          <option value="pink">Pink</option>
        </select>
      </th>
     </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox">メール1</td>
    </tr>
    <tr>
      <td><input type="checkbox">メール2</td>
    </tr>
    <tr>
      <td><input type="checkbox">メール3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><a href="#">選択したメールを削除する</a></td>
    </tr>
  </tfoot>
</table>

/* カラムに下ボーダーをつける */
table tbody td{
  border-bottom: 1px solid #EEE; 
}

/* ヘッダーのデフォルトの背景色はブルー */
table th{
  color: #FFF;
  background: #42699F;
  display: flex;
  justify-content: space-between;
}

/* デフォルトでは「選択したメールを削除する」は非表示 */
table tfoot td:last-child{
  display: none;
  text-align: right;
}

チェックを入れた行の背景色を変える

例えばこんなのを実装すると、チェックボックスにチェックを入れたカラムの背景色が変わります。

/* チェックを入れたtd要素の背景色を変更 */
td:has(input:checked) {
  background-color: #EEE;
}

一つでもチェックが入っている場合、「選択したメールを削除する」のボタンを表示

さらにこんなのを加えると、チェックが一つでも入っている場合のみ、削除用のメニューが出るようになります。

/* 一つでもチェックが入っている場合は、「選択したメールを削除する」を表示（noneからblockに） */
table:has(input:checked) tfoot td{
  display: block;
}

プルダウンでヘッダーの色を変えられるようにする

最後にこんなのも。

/* プルダウンでpinkを選択時に背景色を変更 */
th:has(option[value="pink"]:checked){
  background-color:#E32A75;
}

プルダウンの選択によって、カラーが変わるようになります。便利！

まとめ

親から子を特定するセレクタはよく用いられますが、

/* divを親に持つp要素を指定する */
div > p{ }

has:()を使うと、その逆ができるようになるという事ですね。

/* pを子孫に持つdiv要素を指定する */
div:has(p){ }

役割としてはそれだけなんですが、最後にご紹介した通り、JavaScriptや各種プログラムがないと実装できなかった仕組みをCSSだけで作れるようになるので、アイデア次第では相当お役立ちの用法になるはずです。

ヒューマンアカデミー | スクール拠点が多くて通いやすい

スクールの場所	北海道 札幌 東北 仙台 関東 新宿・銀座・横浜・大宮・千葉・柏 東海 名古屋・静岡・浜松 関西 大阪梅田・大阪心斎橋・大阪天王寺・京都四条烏丸・神戸三宮 中国・四国 岡山・広島・香川高松 九州 福岡・熊本・鹿児島 沖縄 那覇
学習スタイル	・通学 ・オンライン ・通学＋オンライン
コースと受講期間	・Webデザイナーコース（6ヵ月） ・Webデザイナー総合コース（6ヵ月） ・Web動画クリエイター総合コース（12ヵ月） 各コースの学習内容・受講料を比較
就職・案件紹介サポート	あり
無料説明会のスタイル	オンライン・来校・電話

実は今回ご紹介するスクールのうち、日本全国に最もバランスよくスクール拠点を持っているのがヒューマンアカデミーです。
お住まいの地域によっては当該スクール一択となり、選択肢がないことに不安を感じるかもしれませんが、ヒューマンアカデミーはIT系に関わらず、資格取得や就転職を叶える数多くのコースを30年以上運営してきた実績あるスクールですので、安心して通うことができます。
最大10万円の給付金給付を受け取る事ができる教育訓練給付制度（一般教育訓練）を利用できる事も魅力です。

ヒューマンアカデミー

デジタルハリウッドSTUDIO by LIG | 制作現場のリアリティを体験

スクールの場所	上野・池袋・北千住・町田・川崎・大宮
学習スタイル	・通学 ・オンライン ・通学＋オンライン
コースと受講期間	・Webデザイナー専攻（6ヶ月） ・Webデザイン入門プラン（3ヶ月） 各コースの学習内容・受講料を比較
就職・案件紹介サポート	あり
無料説明会のスタイル	オンライン・来校

デジタルハリウッドSTUDIO by LIGの一番の魅力は、その名の通り教育のプロであるデジハリと、制作現場のプロであるLIGが共同で運営しているスクールである事。
Webデザイン制作現場のリアリティが反映されたカリキュラムなので、卒業後にすぐ即戦力になれる技術を身につける事ができます。
スクールの利用時間が、平日であれば最長22:00まで、まだ土日も開校と通いやすいのもメリットです。

また、仕事や家庭とのバランスが取れる用に考慮された「主婦・ママクラス」やオトナの学びにピッタリの「学び直し・リスキリングプラン」など、現代的なプランが用意されているのも大きな特徴。
通学を通じて、気の合う仲間との出会いも期待できそうです。

デジタルハリウッドSTUDIO by LIG

インターネット・アカデミー | 学習コースと使える給付金が豊富

スクールの場所	新宿・渋谷
学習スタイル	・通学 ・オンライン ・通学＋オンライン
コースと受講期間	・Webデザイナー入門コース ・Webデザイナーコース ・Webデザイナー総合コース ・Webディベロッパーコース ・Webデザイナー検定コース ・Webデザイナー転身コース 各コースの学習内容・受講料を比較
就職・案件紹介サポート	あり
無料説明会のスタイル	オンライン・来校

IT系に特化したスクールであるインターネット・アカデミーは、1995年設立という長い実績を持っています。
日本の民間教育機関で唯一「W3C」（ざっくり言うと、Webサイトを制作するための言語を管理している団体）のメンバーであるので、確かな技術が身につけられるスクールである事は保証付き。
実はスクールの母体はIBJというWeb制作会社なので、現場のノウハウもしっかり反映されたカリキュラムになっています。

また、数多くの給付金制度が利用できる点も魅力です。
・教育訓練給付制度
・専門実践教育訓練給付金
・自立支援教育訓練給付金（2024年3月末まで延長）
・高等職業訓練促進給付金（2024年3月末まで延長）

多彩な学習コースが用意されているのもインターネット・アカデミーの特徴です。
基礎学習に特化したプランはもちろん、プログラミング学習も含まれたもの、サイトの企画構成を学べるものなど様々なのですが、ほとんどのコースにおいて学習期間目安こそ設けられているものの、最長一年まで受講可能なので、仕事や家庭の事情で少し学習ペースを落としたくなった、などと言う時に助かります。

インターネット・アカデミー

失敗しないスクール選びのポイント4つ

Webデザインが学べる通学型のスクールはそれほど多くないのですが、選択肢が少ない中でも、自分にぴったりのスクールかちゃんとチェックする事は大切。
その際に確認しておきたいポイントはこちら。

・スクールの場所
・学習内容と受講期間
・就職・案件紹介サポートの有無
・オンライン学習とのバランス

スクールの場所

何よりも大切なのが、通学可能なスクールである事ですよね。
自宅の側だけでなく、職場の近くなども候補に入れられるはずです。
スクール拠点の選択肢が多いのはヒューマンアカデミーですが、平日は最長22:00まで、かつ土日も利用できるデジタルハリウッドSTUDIO by LIGも通いやすさの面ではおすすめです。

学習内容と受講期間

オフライン（通学）/オンライン関係なく、スクール選びで大切なのが受講期間と学習内容。
Webデザインの学習といっても、基礎に特化したコース、プラスアルファの技術も学べるコースなど多彩なプランがあり、それに応じて受講期間が変わりますので、無料説明会を利用して過不足のない学習コースを見つけるのが確実です。

受講期間に関しては、どのコースも最長1年間まで受講可能なインターネット・アカデミーのシステムはありがたいですよね。

就職・案件紹介サポートの有無

卒業後の就活・案件獲得に関しては、今回ご紹介した全スクールで支援があります。
ヒューマンアカデミーでは、就職率90%と具体的な数値が公表されていますが、その他のスクールに関しても、卒業生がどのようなフローでWebデザイナーになれたのかといった成功事例を無料説明会で聞いておくと、卒業後の自分の活躍イメージがクリアになってモチベーションも上がるはずです。

オンライン学習とのバランス

今回ご紹介したスクールは全て、オンライン学習と併用のカリキュラムになっているので、自宅などで好きな時間に学習することも可能です。
とはいえ、どこまでがオフライン（通学）学習推奨で、どこまでがオンラインでサポートされているのかといった棲み分けは各校それぞれ違うので、受講前に確認しておくと安心です。
全てのスクールで、無料カウンセリングや説明会が開催されています。

Lazyloadでできること

Lazyload（レイジーロード）は画像等、Webページ内の要素の読み込みを遅らせる仕組みです。
一般的に「Webページが表示される」とはつまり、 そのページを構成するテキストや画像、CSSファイルなどが読み込まれる事で完了しますが、例えば高解像度の画像を利用している、または多くの画像を掲載しているなど、読み込みが必要な総データ量が多いWebページほど表示に時間がかかります。

その回避策となるのがLazyload。
ページ下部にある画像など、すぐには入り用でない要素の読み込みは後回しにして、ページスクロール等で当該要素がユーザーの目に触れるようになったタイミングで読み込みを実行させることで、効率的にページを表示させるという考え方です。

Lazyloadを使うメリット

Lazyloadを使うと、ユーザーのストレス軽減はもちろん、SEO面の効果が期待できます。

ユーザビリティの向上

ユーザーがページにアクセスした際、当座の必要要素だけが読み込まれるようになるため、Webページが効率よく表示されるようになります。
結果、ユーザーをお待たせする事がなくなります。

ページ離脱率が下がる

アクセスしたページがなかなか表示されない場合、ユーザーが他のサイトへ移動してしまうケースがありますが、Lazyloadによってユーザビリティが向上すれば、それを防ぐ事ができます。
ページ離脱率が下がれば、Googleによるページ評価が上がる可能性があります。

Core Web Vitalsのスコアが上がる

GoogleがWebページを評価する基準に、Core Web Vitals（コアウェブバイタル）という指標があります。
Core Web Vitalsは3つのスコアから構成されていますが、そのうちの一つは「コンテンツの表示速度（LCP）」です。
要素の表示タイミングをコントロールする事でこのLCPが改善されれば、やはりページランクの上昇が期待できます。

Lazyloadの使い方

今回は3つの実装方法を紹介します。

・HTMLで実装する
・JSライブラリ「lazysizes」を利用する
・JSライブラリ「lazyload」を利用する

HTMLで実装する

まずはシンプルに、HTMLだけで実装する方法。
設定したい要素にloading属性を追加する事で、読み込みを遅延させる事ができます。

<!-- 遅延させたい要素に「loading="lazy"」を追加 -->
<img scr="画像のURL" loading="lazy">

loading属性の値「lazy」は、遅らせるという意味合いです。
その他、値には以下のようなバリエーションがあります。

JSライブラリ「lazysizes」を利用する

続いてJSライブラリを利用する方法をご紹介。
一つ目は、Google運営のサイトweb.devでも紹介されている「lazysizes.js」です。

使い方はカンタン。公式ページにアクセスして、

ライブラリファイルを参照するだけです。

<script src="lazysizes.min.js" async=""></script>

例えば任意の画像の読み込みを遅らせたい場合、img要素に以下のように記述します。

<img class=”lazyload” data-src=”image.png” src=””>

・「class=”lazyload”」と設定する
・遅延読み込みさせたい画像のパスをdata-src属性で定義する（src属性ではない）

余ってしまった(？)src属性の値には、プレースホルダー用のダミー画像を入れておくのがオススメです。

<!-- dummy.pngは、image.pngの読み込み前に表示されるダミー画像（軽い画像にしておく） -->
<img class=”lazyload” data-src=”image.png” src=”dummy.png”>

これだけで実装完了です。

JSライブラリ「lazyload」を利用する

もう一つ別のライブラリ「lazyload.js」もご紹介します。
実装方法は「lazysizes」とほぼ同じです。
公式ページからダウンロードしたJSファイルを参照して、

<script src="lazyload.min.js"></script>

読み込みを遅延させたい要素に、以下のように設定します。

<img class=”lazyload” data-src=”image.png” src=”dummy.png”>

・「class=”lazyload”」と設定する
・遅延読み込みさせたい画像のパスをdata-src属性で定義する
・ダミー画像を用意するならsrc属性に

lazysizesと大きく違うのは次。最後にlazyload()関数を実行する点です。

<script>
window.onload = function(){
  // lazyloadを実行する
  lazyload();
}
</script>

lazyload()関数が呼び出されるまでは機能しないので、何かしらの条件を満たした時のみlazyloadを動かす、なんて事が可能です。

Lazyloadの確認方法

実装したら、意図通り遅延読み込みができているかどうか確かめたいですよね。
Chromeであれば「検証」でお馴染みのデベロッパーツールで確認する事ができます。

サンプル
以下のように5つの画像を並べたWebページの遅延読み込みをチェックする例を紹介します。

STEP1：デベロッパーツールを開き、「NetWork」の「Img」を選択します。

STEP2：一旦ページをリロードしてから、改めてページをスクロールします。

スクロールするに従って、読み込まれた画像が増えていけば成功です。

まとめ

Lazyloadに代表されるように、ページの内容と技術の両方がGoogleの評価対象になる時代がやってきています。
Core Web Vitalsを意識して、ページのスムーズな表示を心掛けて行きましょう。

学習スタイル

オンライン / オフラインの組み合わせ方を自分で選べる

インターネットアカデミーは、自分の好きな学習方法を選択することができます。

・オンライン学習：好きな時に好きな場所で学習できます。
・オフライン学習：自分の知りたいことを講師にダイレクトで相談
・オンライン＆オフライン：両者のいいとこ取りで効率の良い学習が可能

さらにオンライン学習では、次の3つの学習方法が用意されています。

・ライブ授業：一般的な授業のように、講師がWebデザインの技術を解説してくれます。
・マンツーマン授業：講師から1対1で教えてもらえます。
・オンデマンド授業：動画による授業です。自分の好きなタイミングでいつでも閲覧することができます。

コース内容

続いてコース紹介。
インターネットアカデミーでは、Webデザインに関するコースがたくさん用意されています。

・Webデザイナー入門コース(公式ページ）
・Webデザイナーコース(公式ページ)
・Webデザイナー総合コース(公式ページ)
・Webディベロッパーコース（公式ページ）
・Webデザイナー検定コース(公式ページ)
・Webデザイナー転身コース(公式ページ)

以下、各コースを当サイト流に紹介していきます。

コースの特徴

Webデザイナー入門コース

主な学習対象はIllustrator / Photoshopです。
コーディングに関する学習は含まれていないので、当サイトとしては次にご紹介するWebデザイナーコースの方をお勧めします。
(学習内容：Photoshop / Illustrator)

「Webデザイナー入門コース」の学習期間目安は1〜3ヶ月

Webデザイナーコース

Illustrator / Photoshopに加え、HTMLやCSS等のコーディング技術も学べるので、ゼロからちゃんとWebサイトを作れるようになります。
(学習内容：HTML / CSS / JavaScript / Photoshop / Illustrator)

「Webデザイナーコース」の学習期間目安は3〜4ヶ月

Webデザイナー総合コース

Webサイトの制作技術に加え、その前段階である企画構成に関するノウハウも抑える事ができます。
(学習内容：HTML / CSS / JavaScript / Photoshop / Illustrator)

「Webデザイナー総合コース」の学習期間目安は6～8ヶ月

Webディベロッパーコース

こちらではWebサイトの制作技術に加え、PHPを学ぶこともできちゃいます。
PHPはエンジニア向けの言語なのでWebデザイナーの必須スキルではありませんが、少し触っておくとWordPressのカスタマイズや、エンジニアさんとの連携を求められるような案件も射程圏内になります。
(学習内容：HTML / CSS / JavaScript / Photoshop / Illustrator / PHP)

「Webディベロッパーコース」の学習期間目安は10～12ヶ月

Webデザイナー検定コース

基本的なWebサイトの制作技術を学習しつつ「Webクリエイター能力認定試験」の取得も目指せるコースです。
ちなみに当サイトは「Webデザイナーになるのに資格は必要ない」というスタンスです。
(学習内容：HTML / CSS / JavaScript / Photoshop / Illustrator)

「Webデザイナー検定コース」の学習期間目安は3～4ヶ月

Webデザイナー転身コース

こちらはコーディングスキルに特化したコースです。
Illustrator / Photoshopの学習を含まないので、HTMLやCSSだけ勉強したいんだよね、という方にピッタリです。
(学習内容：HTML / CSS / JavaScript)

「Webデザイナー転身コース」の学習期間目安は4～6ヶ月

案件紹介＆転職・副業支援

インターネット・アカデミーでは、お仕事支援についても手厚いフォローがあります。

個別面談

就職・転職に関する基本的な相談だけでなく、履歴書や職務経歴書の作成アドバイスまでしてくれます。
卒業後のサポートもあるので、学習を終えた後も安心です。

独自の求人情報

インターネット・アカデミー内に向けた求人情報が紹介されています。
中には受講生・卒業生限定の求人もあるとか。業界からスクールへの高い信頼の証拠ですね。

就職ガイダンス

各種Web業界の採用担当者などからお話を聞ける機会が随時設けられています。
インターネット・アカデミーのネットワークの力ですね。

グループ会社との連携

インターネット・アカデミーのグループ企業であるウェブスタッフで、案件のマッチングをしてもらうことができます。

利用可能な給付金一覧

インターネット・アカデミーには、各種給付金制度の対象となっている講座がたくさんあります。
国から信頼を得ているスクールであるという証とも言えますね。

教育訓練給付制度

厚生労働大臣指定の、キャリアアップを目的とした講座を受講するための給付金です。
条件を満たして対象の講座を受ければ、受講料のうち最大10万円が戻ってきます。

専門実践教育訓練給付金

こちらも国の支援による、各種専門分野でのスキルアップを目的とした給付金制度です。
インターネット・アカデミーは指定校になっていますので、条件の下で対象講座を受けることで受講料の最大70%が支給されます。

自立支援教育訓練給付金（2024年3月末まで延長）

インターネット・アカデミーには、ひとり親家庭のシングルファザー、シングルマザーさんを支援する自立支援教育訓練給付金の支給対象となっている指定講座もあります。

高等職業訓練促進給付金（2024年3月末まで延長）

母子家庭、父子家庭の親御さん達の生活費を支援するこちらの制度もインターネット・アカデミーでは利用可能です。
仕組み上、自立支援教育訓練給付金と組み合わせることで最大193万円まで支給されるので、受給額が受講料を上回る可能性もあります。

各種給付金制度の利用には条件がありますので、詳細は無料カウンセリングで確認して申請忘れのないように。

メリット

先述した通り、充実した給付金対象講座など、信頼あるスクールならではの特徴を持っているのがインターネット・アカデミーです。

日本のスクール業界で唯一のW3Cメンバー

W3Cとは、簡単に言うとHTMLやCSSなどのルールを定めている団体です。
インターネット・アカデミーはW3Cメンバーである日本唯一のスクールですので、安心して学ぶ事ができます。

Adobe CCは受講生限定価格で利用可能

もう一つおまけに、インターネット・アカデミーはAdobe社のゴールドスクールパートナーにも認定されています。
これは、IllustratorやPhotoshopを始めとしたAdobeのサービスを適正な環境で教える事ができると言う証。
Adobeのサービス使用に必要なライセンスも、インターネット・アカデミー限定価格で利用できます。

給付金の対象講座が多い

・教育訓練給付制度（公式ページ）
・専門実践教育訓練給付金（公式ページ）
・自立支援教育訓練給付金
・高等職業訓練促進給付金

すべてのスクールでこうした給付金の対象講座が設けられているわけではありませんので、可能性がある場合は必ず利用したいですね。

受講期間は最長1年間

最長1年まで受講期間を伸ばすことができるのもインターネット・アカデミーの特徴。
学習期間の延長に応じて追加料金が発生したり、サブスク型のスクールもある中、スケジュールに不安のある方は安心のシステムです。

横展開

インターネット・アカデミーではプログラミングやマーケティングなどのコースも充実しています。
Webデザインをマスターした後、さらなるスキルアップとしてこうしたスキルを追加受講しやすいのもいいですよね。

デメリット

学び方自由のインターネット・アカデミーですが、オフラインを活用しないと少々勿体無いかもしれません。

オンラインだけで完結したい方には持て余してしまう内容かも

オンラインのみでの学習の場合は、ちょっと高額に感じるかもしれません。

校舎は東京のみ

そのオフライン学習ですが、拠点は東京です。
通学を検討している場合は、圏内であるかどうか事前確認が必要です。

お仕事の「保証」はないが…

インターネット・アカデミーは、就職・転職を保証してくれるわけではありません。
最近では案件紹介を確約しているスクールもありますので、心細さを感じるかもしれませんが、この世界でやっていくには自力で案件を獲得する能力も必要です。
他校の案件保証とはある意味、そのスクールの信頼によって得られたお仕事と捉える事もできます。
先述したインターネット・アカデミーのサポートを得ながら独力でお仕事に挑む事で、案件獲得スキルをも鍛える事ができる、という考え方もあります。

評判・口コミ

マンツーマンでわかりやすい

他の受講生さんを気にせず、何でも聞けるのがいいところですよね。

まず（Webデザイナーやディレクターなど）職種の説明をしてくれた上で、自分の希望するキャリアとそれに合ったコースをお薦めしてくれたので安心して受講できました。

こちらは受講前のカウンセリング(無料)に関する感想です。
とにかく申し込ませよう！ではなく、親身になって受講プランを考えてくれるのは嬉しいですよね。

マンツーマン授業の予約が取りづらい

当たり前ですが、講師と受講生が1対1ということは、予約の枠が限られていると言うこと。
学習計画を立てて、早めに予約しておく事が大切なようです。

成功するWebデザイナーになるために：受講前に確認したい事

オンライン/オフラインのバランス感覚

自宅学習と通学の時間配分やスケジュールイメージを確認して、自分の生活に当てはめられそうか確認しておくと安心です。

受講コース

評判・口コミでも紹介しましたが、どのコースであれば求めているキャリアを実現できるか、事前に話を聞いておくとミスマッチを防げます。

無料カウンセリングはオンラインもOK

学習スタイル

オンラインでもオフライン(通学)でも、オンライン+通学でも学習可能

ヒューマンアカデミーは、いつでも好きな場所で学べるオンライン学習と、講師と直接コミュニケーションが取れる通学（オフライン）学習の2つの学び方が用意されています。
もちろん両方を組み合わせることも可能。
アプリケーションの基本操作はオンラインでマスターして、デザイン制作は通学して講師のアドバイスの下に進める、なんて活用法もできます。

講座・コース内容

ヒューマンアカデミーのWebデザイン講座には、次の3つのコースが用意されています。

・Webデザイナーコース
・Webデザイナー総合コース
・Web動画クリエイター総合コース

コース内容の違いと料金は公式ページで確認・比較できますが、以下、各コースをざっくり分析します。

コースの特徴

Webデザインの必須スキルが学べる「Webデザイナーコース」

Webデザイナーになるための基本スキル（HTML / CSS / Photoshop / Illustrator）がマスターできます。
ヒューマンアカデミーのWebデザイン講座の大きな特徴の一つが、スクールによっては別講座となっていることも多いWordPressやAdobe XDの学習まで含まれている点。
ポートフォリオ（自分の作品集）制作もカリキュラム内でフォローされているので、学習と合わせて就職活動準備も進められる構成になっています。

主な学習内容：HTML / CSS / Photoshop / Illustrator / WordPress / XD など
学習期間：6ヶ月

JavaScriptなど、一つ上の技術も身につく「Webデザイナー総合コース」

「Webデザイナーコース」で学べる内容に加え、JavaScriptやUI設計(Webサイトの使い勝手に関する設計)など、もう1ランク上の技術を身につける事ができるコースです。

主な学習内容：HTML / CSS / JavaScript / Photoshop / Illustrator / WordPress / XD など
学習期間：6ヶ月

Webデザインと動画、マルチで活躍したい人におすすめの「Web動画クリエイター総合コース」

さらにさらに、動画の制作技術も身につけられるのがこちらのコース。
Webデザインと動画制作は別コースとなっているスクールがほとんどなので、2 in 1になっている本コースは、どちらも制作できるマルチなクリエイターを目指す方におすすめです。

主な学習内容：HTML / CSS / JavaScript / Photoshop / Illustrator / WordPress / XD / Premiere Pro / After Effectsなど
学習期間：12ヶ月

3つのコースの内容・料金比較

案件紹介＆転職・副業支援

ヒューマンアカデミーのWebデザイン講座では、事前のキャリア相談はもちろん、就職活動準備や卒業生とのコミュニケーションなど、就活前、就活中、就職後の各フェーズに応じて力になってもらえます。

・ヒューマンアカデミーの就職率は90%
・就職相談
・就職アイテムの準備をサポート
・卒業後のフォロー

ヒューマンアカデミーの就職率は90%

公式ページに謳われている通り、ヒューマンアカデミーは就職率90%の実績を持っています。
学習内容はもちろんのこと、就職サポートがしっかりしている事がわかる数値です。

就職相談

多くの卒業生を排出しているヒューマンアカデミーのナレッジをしっかり伝授してもらう事で、初めてでもスムーズに進路を決めていく事ができます。

就職アイテムの準備をサポート

ヒューマンアカデミーでは、履歴書や職務経歴書の添削や面接のアドバイスまで面倒を見てくれます。
各コースで作成するポートフォリオと合わせて、万全な就活準備ができるように配慮されていますね。

卒業後のフォロー

最初の就職時はもちろん、それ以降の新たなスキルアップまでフォローされているヒューマンアカデミー。
卒業生限定のプランや講座が随時用意されています。
各種技術やスタンダードの変化等、Webデザインは移り変わりの早い世界。
常に寄り添ってくれる母校の存在があれば安心ですよね。

メリット

通学して学べる希少なスクール

「講師に会って直接相談がしたい」「オンラインだけだと怠けそう…」と言う場合は、通学できるスクールがおすすめなのですが、現在、通学可能なWebデザインのスクールはあまり多くありません。
ヒューマンアカデミーはその少ない選択肢の中の貴重な一校です。

スクール校舎は日本全国に23箇所

ヒューマンアカデミーは、日本全国にバランスよく、多くの校舎を持っています。
スクール拠点数ではヒューマンアカデミーはトップクラスです。お住まいのエリアによっては通えるWebデザインスクールはヒューマンアカデミー一択となるかもしれません。
スクール拠点一覧は公式ページの一番下にあります。

基礎コースでも様々な技術が学べる

前述した通り、ヒューマンアカデミーでは一番コンパクトな「Webデザイナーコース」にもWordPressやAdobe XDといった尚可スキルの学習が含まれています。
1つの学習コースの中でいろいろなスキルを体験できるヒューマンアカデミーの講座は充実の内容です。

教育訓練給付制度（一般教育訓練）が利用可能

ヒューマンアカデミーのWebデザイン講座は、上限10万円が支給される教育訓練給付制度（一般教育訓練）の対象となっています。
利用できる可能性があるようでしたら、ぜひヒューマンアカデミーは候補に加えたい一校です。

デメリット

オンライン学習のみだと高額かも

オンラインのみの受講であれば、より低額のスクールも多数存在します。
通学を全く利用しない場合は、ヒューマンアカデミーのコースは少々高く感じるかもしれません。

広く浅くの学習になる可能性も

先程はWordPressやAdobe XDなどの紹介が網羅されている点をメリットとしてお話しましたが、その分消化しなくてはいけない事が多くなる、という意味では多少タイトな学習になりそうです。
なるべく多くのスキルを身につけてWebデザイナーデビューしたい！と考えるのは当然ですが、相応の学習時間が取れるかなど、よく検討してムリのない選択をしたいですね。

評判・口コミ

操作は動画を繰り返し見て学習。わからないところは講師が親身になって解決してくれた

オンラインとオフラインの共存がヒューマンアカデミーの特徴。
両者を上手に使い分けるのが成功要因のようです。

常駐のWebデザイナーが教えてくれる

ヒューマンアカデミーは、通学時はもちろん、オンラインでも講師とコミュニケーションが取る事ができます。
学習環境に関わらず、すぐ質問できる体制が用意されているので安心して勉強できます。

受講料が高い

先述した通り、オンライン中心で受講された方からは高額に感じたという意見が多いです。

成功するWebデザイナーになるために：受講前に確認したい事

通学学習の利用について

ヒューマンアカデミーでWebデザインを学ぶのであれば、ぜひ活用いただきたいのが通学学習。
利用する場合はどのスクールに通うか、何曜日・何時頃なら行けそうか、通学スケジュールをシミュレートする事をおすすめします。

オンラインとオフラインのバランス

オンライン学習と通学学習の使い分けや、時間配分のイメージがつきにくいようでしたら無料説明会で卒業生さんのモデルケースを聞いておくと参考になります。
ついでに皆さんがどのようにWebデザイナーデビューを成し遂げたのか、成功事例も教えてもらうと励みになりますよね。
申込時には、選択式で事前に知りたい内容を伝えておく事ができるので、就職・転職に関する項目を選んでおくと、参考になる情報をたくさん用意して迎えてくれるはずです。

スクールの臨場感を体験してモチベUP

無料説明会は、オンライン・校舎来校・電話と選択肢が多いのですが、このチャンスを利用して来校してみるのも楽しいですよね。通学時間やスクールの雰囲気を確認する事もできます。
校舎にたくさん並んだパソコンや学習中の受講生さんを実際に目にすると、ワクワクしますよ。

ヒューマンアカデミーのWebデザイン講座

リダイレクトはfunctions.phpで設定できます

WordPressには、リダイレクト用の関数がちゃんと用意されています。

・他サイトへリダイレクトする場合：wp_redirect()
・同じサイト内でリダイレクトする場合：wp_safe_redirect()

functions.php内でこれらの関数を使えば、自分の好きなページを簡単にリダイレクトさせことができます。

wp_redirect()：他サイトへのリダイレクト

サンプル

以下は「https://sakana.com/maguro/」から「https://fish.com/tuna/」にリダイレクトさせる例です。

add_action('get_header', 'redirectFunc');

function redirectFunc(){
  // ページのURLを取得
  $url = $_SERVER['REQUEST_URI'];

  // URLに「maguro」が入っていたら「https://fish.com/tuna/」にリダイレクトする
  if(strstr($url, 'maguro')){
    wp_redirect('https://fish.com/tuna/', 301);
    exit;
  }
}

コードの内容は以下の通りです。

1.任意のページが表示されると、redirectFunc()関数を実行。
2.redirectFunc()関数内で、ページのURLを調べる。
3.URLに文字列「maguro」が入っている場合は「https://fish.com/tuna/」にリダイレクトする。

301リダイレクトでも302リダイレクトでもOK

コード内の「301」という表記は、301リダイレクトの場合の設定です。
「301」を省略すると、302リダイレクトとして処理されます。

301リダイレクトと302リダイレクトの違い

// 302ダイレクトにする例
if(strstr($url, 'maguro')){
  wp_redirect('https://fish.com/tuna/');
  exit;
}

wp_safe_redirect()：同じサイト内でのリダイレクト

サンプル

「https://sakana.com/iwashi/」から「https://sakana.com/sanma/」にリダイレクトさせる例です。

add_action('get_header', 'redirectFunc');

function redirectFunc(){
  // ページのURLを取得
  $url = $_SERVER['REQUEST_URI'];

  // URLに「iwashi」が入っていたら「https://sakana.com/sanma/」にリダイレクトする
  if(strstr($url, 'iwashi')){
    wp_safe_redirect('https://sakana.com/sanma/', 301);
    exit;
  }
}

301リダイレクト / 302リダイレクトの設定は、wp_redirect()関数と同様の考え方です。

301リダイレクトと302リダイレクトの違い：SEOへの影響は？

・301リダイレクト：ページを完全にお引越しして、URLを変更する場合に利用。
・302リダイレクト：諸事情で、ページのURLを一時的に変更する場合に利用。

どちらを用いても、
・ユーザーから見た挙動は同じです（ただページが切り替わるだけ）
・変更前のURLが受けていたGoogleによるページ評価を新しいURLへ引き継ぐことができます。SEO対策として有効です。

また、GoogleがURL移転をより早く認識してくれるのは301の方とされています。

例えばページAから無関係のページBへ、ユーザーを強制誘導するような用途で使ってしまうと、サイト評価に悪影響が出る可能性があるので注意が必要です。

学習スタイル

オンラインとオフラインのハイブリッド学習

デジタルハリウッドSTUDIO by LIGはオンラインとオフライン（通学）のハイブリッドスタイルです。
オンラインと通学での学習を組み合わせて、自分に合ったスケジュールを組み立てる事が可能です。
基本の学習は自分のペースでできるオンラインで進めて、細かい疑問点はオフラインで講師に直接教えてもらう、などと言った効率の良い学習ができます。
オフラインのスクール拠点は東京・神奈川・埼玉など関東圏が中心です。

コース内容

Webデザインに関するコースは大きく2つあります。

・Webデザイナー専攻（6ヶ月）
・Webデザイン入門プラン（3ヶ月）

「Webデザイン入門プラン」はデザインアプリ（Photoshop/Illustrator）の習得がメインになるため、Webデザインの技術を基礎からマスターするなら、コーディングまでカバーしている「Webデザイナー専攻」がおすすめです。

デジタルハリウッドSTUDIO by LIG

案件紹介＆転職・副業支援

案件紹介制度

提携エージェントによる案件紹介のサービスがあります。
LIGにデジタルハリウッド、エージェントと3つの強力な支えがあれば、卒業後の進路も安心です。

卒業後も受けられる就職・転職サポート

基本的な相談はもちろん、ポートフォリオや履歴書の添削等、面接練習もマンツーマンでサポートしてくれるので、社会に出てからふと迷いが出た時も安心です。
卒業後もずっと見守ってもらえるスクール、ということですね。

デジタルハリウッドSTUDIO by LIG

メリット

2社のブランド力で安心

LIGとデジタルハリウッド。
制作現場のプロと教育のプロである2社によって編み出されたカリキュラムが受講できるのが、デジタルハリウッドSTUDIO by LIGの強みです。

学習と制作のバランスがとれたカリキュラム

Webデザイナー専攻では、受講期間の6ヶ月のうち前半4ヶ月をアプリケーション操作やコーディングの文法を学ぶインプット期間、残り2ヶ月をオリジナルサイト制作のためのアウトプット期間としています。
どちらも大事な学習内容ですが、スクールによっては前者の技術学習のみのカリキュラムであったり、自主制作の時間が十分取られていなかったりということもあります。
このようにしっかりスケジューリングしてもらえると安心ですよね。

回数無制限の質問対応

学習内容に質問に関しては、オンラインおよびオフラインで、回数無制限で対応してもらえます。
メンターサポートもありますので、キャリアやメンタル面なども相談に乗ってもらえます。

アプリケーションを特別価格で購入可能

学習するアプリケーション（Photoshop/Illustratorなど）を割引価格で購入する事ができます。
全額自前のスクールもありますので、ありがたいですね。

主婦・ママクラス

デジタルハリウッドSTUDIO by LIGでは、子育てやおウチのコトを両立させながらWebデザインを学べる「主婦・ママクラス」が用意されています。
保育園申請書類のサポートなども行ってくれますので、興味のある方はぜひ相談を。

学び直し・リスキリングプラン

もう一つデジタルハリウッドSTUDIO by LIGで特徴的なのが「学び直し・リスキリングプラン」。
約2割が40代以上の受講者で、専用の交流会やセミナーなどが設けられています。
落ち着いた環境で学びたいという方は、こちらもおすすめです。

デジタルハリウッドSTUDIO by LIG

デメリット

オンラインだけで完結したい方には不向き

「通学の時間が取れるか不安」という場合はデジタルハリウッドSTUDIO by LIGのサービスを持て余してしまうかもしれませんので、オンライン専用のスクールを選んだ方が効率的です。

学習期間が決まっている

最近では、受講期間を複数の選択肢から決められるスクールや、サブスク式のスクールもありますが、デジタルハリウッドSTUDIO by LIGでは各コースの学習期間が定まっており、Webデザイナー専攻コースであれば原則6ヶ月で修了する必要があります。
ダラダラせずに緊張感を持って学習できると考えれば、こちらはメリットにもなりそうです。

評判・口コミ

実際の評判はどうでしょう。

受講スタイルを自分で決められる

やはり自分の生活パターンに合わせて、オンラインとオフラインのスケジューリングを自由にプランニングできるのがやはりメリットですよね。

スタジオは夜も利用可能で、トレーナーも常駐しているので便利

スタジオとはオフラインスクールの拠点、トレーナーは講師のことです。
日中忙しい方にとって、夜間を上手く活用できるのはありがたいです。

自分で積極的に動けない人には向かない

スケジューリングが自分次第であるという事が、デメリットに働くとデジタルハリウッドSTUDIO by LIGのカリキュラムは上手く活用できないかもしれません。強い意志を持って取り組む事が必要ですね。

成功するWebデザイナーになるために：受講前に確認したい事

説明会を有効利用

スクール選びの際、ミスマッチを防ぐためにぜひ利用したいのが無料の個別説明会。
デジタルハリウッドSTUDIO by LIGの説明会はオンラインでも開催してくれるので、気軽にお話を聞く事ができます。
とはいえ、ボンヤリと手ブラで参加しては勿体無い。
質問事項をしっかり用意して、自分と好相性のスクールかしっかり吟味するのが大切です。

自分のライフスタイルとカリキュラムがマッチするか確認

オンライン、オフラインのハイブリッド学習がデジタルハリウッドSTUDIO by LIGの特徴。
その学習バランスを自分の今のライフスタイルに上手く組み込めるか。こちらも事前に確認しておくと安心です。

自分のキャリアプランを具体的に描く

受講中のキャリア相談はもちろん、説明会でも、卒業後にどのような自分になりたいのか（副業したい、年内に転職したいなど）を伝えれば、具体的な回答やアドバイスをもらえやすくなります。
もし同じようなキャリアを実現した先輩の成功事例などが聞ければ、安心して入学できますよね。

主婦・ママ・オトナ向けプラン

「主婦・ママクラス」や「学び直し・リスキリングプラン」など、受講者の現在位置から考えられた現代的なカリキュラムが用意されているデジタルハリウッドSTUDIO by LIG。
興味がある場合は、こちらも是非検討したいですね。

デジタルハリウッドSTUDIO by LIG

コンテナクエリ（@container）で何ができる？

例えばこんなサイトを作りたい場合。
2つのオレンジ枠のリスト部分は、要素の並べ方（縦並び/横並び）以外の構成は同じです。

こんな時にコンテナクエリ（@container）を使うと「幅300pxを超えたら横並びにする」のように、掲載エリアのサイズに応じてCSSを切り替える事ができます。

コンテナクエリ（@container）のサンプル

先ほどのサイトを例にした場合のコードを見ていきます。
まずはHTML。オレンジ枠部分をcontainerクラスと命名し、中にli要素が入っている状態を想定します。

<!-- オレンジ枠のエリア -->
<div class="container">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

コンテナを設定する

コンテナクエリを利用するには、対応させるエリア（オレンジ枠に相当する部分）をコンテナとして設定します。
利用するプロパティは「container-type」です。
Flexbox（フレックスボックス）の「display:flex」や グリッドレイアウトの「display: grid」みたいな役割です。

/* コンテナとして設定 */
.container{
  container-type: inline-size; 
}

CSSを設定する

@containerを使って、スタイルシートを用意します。
考え方は、おなじみのメディアクエリ(@media)と同じです。

/* containerクラスが300pxを超えたら横並びになる */
@container (min-width:301px){
  ul{
    display: flex;
    justify-content: space-between;
  }

  li{
    width: 33%;
  }
}

メディアクエリ（@media）と何が違う？

メディアクエリ（@media）
ビューポート等、閲覧環境に応じてCSSを切り替えます。レスポンシブでお馴染みですね。

コンテナクエリ（@container）
要素のサイズに応じてCSSを切り替えます。

コンテナクエリでは、ビューポートやブラウザサイズに関係なく、要素自身の都合でスタイルを変える事ができます。
上手に使うと、より効率的なCSSを実装できます。

学習スタイル

オンライン学習

テックアカデミー(TechAcademy)のカリキュラムは全てオンラインです。
必要なアプリケーションを揃えたパソコンとネット環境さえあれば、学習自体はもちろん、各種質問や相談も好きな時に好きな場所から行う事ができます。

多彩なコース内容

テックアカデミーには様々なコースが用意されていますが、本サイトのスローガン「Webデザインで豊かに引きこもる」を目指せるのは以下のコースです。

Webデザインの基本スキルが習得できるコース
・はじめての副業コース
・Webデザインコース

プラスアルファのスキルが習得できるコース
・UI/UXデザインコース
・WordPressコース

案件獲得のノウハウが抑えられるコース
・デザイン実践ポートフォリオコース
・Webデザインフリーランスコース

おトクなセット受講
・Webデザインフリーランスセット

各コースで学習できる大まかな内容は以下の通り。
詳細は無料メンター相談で確認しておくと確実です。
受講期間や料金は、多くのコースで複数の選択肢(4週間・8週間・12週間・16週間など)が設けられており、それぞれの公式ページに一覧表が掲載されています。

テックアカデミーの無料メンター相談

コース	基本スキル		プラスアルファのスキル		案件獲得のノウハウ		おトクなセット受講
	はじめての副業 コース	Webデザイン コース	UI/UXデザイン コース	WordPress コース	デザイン実践 ポートフォリオ コース	Webデザイン フリーランス コース	Webデザイン フリーランス セット
	公式ページ	公式ページ	公式ページ	公式ページ	公式ページ	公式ページ	公式ページ
HTML/CSS	○	○	–	○	–	–	○
JavaScript/jQuery	○	○	–	–	–	–	○
Photoshop	○	○	○	–	–	–	○
WordPress	–	–	–	○	–	–	–
その他	–	–	Adobe XD	PHP	Adobe XD	–	Adobe XD

基本スキルが学習できるコース

「はじめての副業コース」

「はじめての副業コース」は、タイトルこそ副業となっていますが、将来的にWebデザインを本業にするための足がかりとしても十分頼れる内容です。

「Webデザインコース」

「Webデザインコース」は、基本スキルをしっかり学べるのは当然の事、自分のオリジナルサイトを作成する工程がカリキュラムに織り込まれているので、ゼロから作品を生み出すフローを経験する事ができます。

プラスアルファのスキルが身につけられるコース

「UI/UXデザインコース」と「WordPressコース」

Webサイトやアプリの見やすさやわかりやすさ等、使い勝手や利用感を主に提案するUI/UXデザインが学べる「UI/UXデザインコース」と、多くのサイトで利用されているWordPressのための「WordPressコース」。
どちらもWebデザイナーとしての必須スキルではありませんが、マスターしておくと手がけられる案件の幅が大きく広がります。

案件獲得のノウハウが抑えられるコース

「デザイン実践ポートフォリオコース」と「Webデザインフリーランスコース」

Webデザイナーになるために必ず必要になるのが自分の作品をまとめたポートフォリオ。
自力で用意する事も可能ですが、テックアカデミーのノウハウを借りて有効なポートフォリオを作る事ができるのが「デザイン実践ポートフォリオコース」です。

「Webデザインフリーランスコース」は、案件の探し方や見極め方から、実案件にチャレンジするまでの工程をテックアカデミーのメンターによるサポートを得ながら進める事ができる実践的な内容。

どちらのコースも制作技術の学習は入っていないので「はじめての副業コース」や「Webデザインコース」などに相当するスキルを抑えてからトライする必要があります。

おトクなセット受講

Webデザインフリーランスセット

テックアカデミーの以下3コースをまとめて申し込めるのが「Webデザインフリーランスセット」です。

1Webデザインコース
2.デザイン実践ポートフォリオコース
3.Webデザインフリーランスコース

内容を翻訳すると、それぞれこのような感じになります。

1.Webデザインコース→Webデザインのスキル
2.デザイン実践ポートフォリオコース→ポートフォリオ対策
3.Webデザインフリーランスコース→案件獲得術

つまり、フリーランスになるための全てが収まっている心強いパッケージという事ですね。

案件紹介＆転職・副業支援

テックアカデミーでは、お仕事紹介も充実。

・副業向け案件
・転職向け案件
・クラウドワークスとの提携案件
・受注から納品まで、テックアカデミーのメンターさんによるフォローがある案件

等、条件・コースによってさまざまなサービスが用意されています。

メリット

「プロの現役講師」に教えてもらえる

テックアカデミーの講師は、現場で活躍中のプロなので安心して頼る事ができます。

Adobe Creative Cloudコンプリートプランが「3ヶ月分無償」で使える

PhotoshopやAdobe XD等、Adobe提供のアプリケーション使用には有償のライセンス契約が発生します。
本来、こちらの契約料は利用者本人の負担となりますが、テックアカデミーでは、Adobeのアプリケーション学習が含まれるコースには、Adobe Creative Cloudコンプリートプラン（Adobeのアプリケーション全てが使える最上級プラン）のライセンス料3ヶ月分が無償になります。

「複数コース」の受講でスキル強化

「Webデザインフリーランスセット」のように、テックアカデミーでは豊富なコースを組み合わせて、自分の思い通りのカリキュラムを作る事ができます。

「Webデザインで引きこもる」がスローガンの本ページでは紹介していませんが、テックアカデミーにはエンジニアを目指すコースも充実していますので、デザインもシステム開発もできちゃう人になる、なんてことも可能です。

「無料の事前相談」でミスマッチなし

コース内容やお仕事事情について受講前に確認・相談を行う事ができます。
相談日程は公式ページ下のカレンダーから好きな日時を選ぶだけなので、気軽に申し込めます。
相談できる日程の確認

プライベートで安心の「チャットサポート」

受講中の各種質問はチャットを使って回答してもらえます。
チャット環境は受講生さんごと個別に用意されるので、他の受講者さんの目を気にせずやりとりする事ができます。

課題のレビュー回数が「無制限」

何度も改良を繰り返しながら完成に持っていくのがWebデザインの世界。
一つの制作課題に関して添削レビューは一回のみ、というスクールも多い中、テックアカデミーでは回数無制限でアドバイスを受ける事ができます。

マンツーマンの「メンタリング」

学習時やお仕事探しの際に不安や挫折感が襲ってきた場合に頼れるのがこちら。
技術面だけでなく、メンタル面からもしっかり支えてくれます。

デメリット

受講期間の選択が悩ましい

先述した通り、テックアカデミーでは1つのコースに関して複数の受講期間が設けられている場合がほとんどです。
期間が長いほど受講料も上がりますので、なるべく短期間で修了したい！と考えがちですが、急ぎすぎると何も身につかないまま終わってしまうので注意。

Illustratorの学習がない

Adobe PhotoshopとIllustrator。
Webデザインの業界で多く利用されている2つのアプリケーションのうち、テックアカデミーではIllustratorが学習できるコースがありません。
両方とも同じAdobe社のサービスで使用感が似ているため、Illustratorのみ独学することも可能ですが、どちらもちゃんと教えてもらいたい、という場合は別のスクールを選んだ方がよいでしょう。

評判・口コミ

オンラインなので、学習計画を自分で立てられる。

これはオンライン完結の魅力。
朝方、夜型、週末集中型など、自分の生活に合わせた学習スケジュールを作ることができます。

マンツーマンによる定期的なメンタリングが励みに。
学習内容だけでなく、転職や副業に関してもアドバイスがもらえます。

便利な一方、気持ちが閉じこもってしまいがちなオンライン学習を潤わせてくれるのがテックアカデミーのメンターさん。
「メリット」で紹介した通り、業界のプロが学習面やキャリア面、様々な角度からサポートしてくれるのは安心ですよね。

短期の受講プランを選んだ結果、消化不良な状態で卒業してしまった。

受講期間の選択を誤ってしまうと中途半端なカタチで学習機会が終わってしまうので、気をつけたいですね。

受講前に確認しておきたいのはこの3つ

テックアカデミーに関わらず、まとまった時間・料金を費やすことになるのがWebデザインの学習。
どのスクールでも大抵事前説明会やカウンセリングの機会などを設けているので、積極的に利用して間違いないスクール選びをしたいですね。

テックアカデミーの無料メンター相談

何を学べばいい？受講コースの相談

テックアカデミーの無料相談を利用する場合、ぜひ確認して欲しいのが各コースの特徴。
理想のキャリアを実現できるのはどのコースなのか、言語やアプリケーション等、各種技術の違いや特徴なども確認しておくと安心です。

自分にピッタリの学習スタイルは？受講期間の相談

次に聞いておきたいのが受講期間の選択について。

「一日○時間くらい勉強できそう」
「毎週末に集中して取り組む予定」

など、自分の学習プランを伝えて、ぴったりのカリキュラムをアドバイスしてもらうのがおすすめです。

実現したいのはこんな自分！お仕事の相談

こちらに関してはちょっと聞きづらいコトもあるかもしれませんが、遠慮は無用。

「副業で毎月○万円くらい欲しい」
「半年以内に転職したい」

など、あらかじめ具体的なゴールを決めてから相談すれば、実践的なロードマップを提案してもらえるはずです。

全てビューポートを基準とした単位です

ビューポートとは

今回ご紹介する単位は、どれもビューポートを基準とした単位であるという共通点があります。
ビューポートとは、ざっくり言うと画面の表示領域のことです。

スモールビューポートとラージビューポート

ビューポートのサイズは、当然ブラウザやスマホの大きさに依存しますが、もう一つ、ページスクロールなどによっても変化します。
例えばスマホでWebサイトにアクセスすると上部に表示されるアドレス部分、画面をスクロールすると縮小されますよね。
この操作によって、ビューポートのサイズは変わります。

うち、狭い方をスモールビューポート、広い方をラージビューポートと言います。

・スモールビューポート = Small Viewport (SV)
・ラージビューポート = Large Viewport (LV)

これがわかると、各単位の見分けがカンタンにつくようになります。
それでは、まずは高さに関する4つの単位から見ていきます。

高さに関する単位：svh / lvh / dvh / vh

高さに関する単位は、全て末尾がhで終わっていますが、これはheight（高さ）を表します。

svh

Small Viewport Heightの略。
名前の通り、スモールビューポートの高さを基準とした単位です。
「100svh」でスモールビューポートのサイズと同等になります。

スマホのヒーローイメージを、端末幅ピッタリにしたい！と言う時にはsvhが便利です。

/* 100svhでスモールビューポートと同じサイズに */
div{
  height: 100svh; 
}

lvh

Large Viewport Heightの略。
こちらはラージビューポートのサイズを基準とした単位で、やっぱり「100lvh」でラージビューポートと同サイズになります。

dvh

Dynamic Viewport Heightの略。
アドレスバーの有無などによってビューポートサイズが変わるとは先程お話しした通りですが、dvhでは、

・アドレスバーが出ている時：スモールビューポートのサイズを基準にする
・アドレスバーが出ていない時：ラージビューポートのサイズを基準にする

と言ったように、画面状況に応じたビューポートサイズに都度切り替わります。
「100dvh」で基準としたビューポートの高さとなる点は、他と同じです。

vh

それじゃあvhは？
以下、W3C（HTML周りのルールを決めている団体）の公式サイトからの抜粋です。

The UA-default viewport-percentage units (v*) are defined with respect to a UA-defined UA-default viewport size, which for any given document should be equivalent to the large viewport size, small viewport size, or some intermediary size.

意味合いとしては、それぞれのユーザーエージェント(ユーザーが利用しているOSやブラウザ等の情報)による、デフォルトのビューポートサイズが採用されますよ、言うことです。

デフォルトのビューポートは、大抵ラージビューポートと同じサイズになるので、100vh = 100lvhになる事が多いですが、定義上はvh ≠ lvh。
また、100vhは、100svh〜100lvhの範囲に収まる、と書かれています。

幅に関する単位：svw / lvw / dvw / vw

続いて、幅に関する単位です。末尾がw（width）に変わります。
考え方は高さと同様です。
幅に関してはビューポートサイズが変わることはまずないので、どの単位を使っても同じ結果になることが多いです。

svw

Small Viewport Widthの略。
スモールビューポートの幅を基準とした単位です。

lvw

Large Viewport Widthの略。
ラージビューポートの幅を基準とした単位です。

dvw

Dynamic Viewport Widthの略。
ユーザーの操作等によるビューポートの変化に対応したサイズが都度採用されます。

vh

ユーザーエージェントごとのデフォルトのビューポート幅を基準とした単位です。

比較に関する単位：svmin / svmax / lvmin / lvmax / dvmin / dvmax / vmin / vmax

ビューポートの高さと幅を比較して、大きい方、もしくは小さい方を採用するのがこちらの単位です。

svmin /svmax

・svmin：svhとsvwのうち、小さい方が採用されます。
・svmax：svhとsvwのうち、大きい方が採用されます。

lvmin / lvmax

・lvmin：lvhとlvwのうち、小さい方が採用されます。
・lvmax：lvhとlvwのうち、大きい方が採用されます。

dvmin /dvmax

・dvmin：dvhとdvwのうち、小さい方が採用されます。
・dvmax：dvhとdvwのうち、大きい方が採用されます。

vmin / vmax

・vmin：vhとvwのうち、小さい方が採用されます。
・vmax：vhとvwのうち、大きい方が採用されます。

まとめ

• ビューポートを基準とした単位がある。
• ビューポートとは、画面の表示領域のこと。
• ビューポートにはラージとスモールがある。
• 単位のバリエーション（svhなど）
  【高さ・幅】×【スモール・ラージ・ダイナミック・デフォルト】の掛け合わせ。
• 比較のバリエーション（svmaxなど）
  【広い方・狭い方】×【スモール・ラージ・ダイナミック・デフォルト】の掛け合わせ。

横スクロールに注意

例えば画面いっぱいに画像を広げたい時。
一見100vwなどが使えそうですが、実際に実装してみると横スクロールが発生するケースがあるんですね。
こちらに関してはビューポートに頼らない別の実装方法で回避することができるので、覚えておくと便利です。

CSSで使える単位がどんどん増えていって大変！

ビッグキーワードとは

Google等の検索エンジンで、検索頻度の高いキーワードをビッグキーワードと言います。
これだけだと当たり前なので、その特徴をもうちょっと掘り下げてみます。

検索需要が高い

広く使われている言葉や、知名度や話題性がある言葉はビッグキーワードになりやすいです。

・一般的な名称（例：転職、ソファ、旅行…）
・有名な固有名詞（例：Apple、iPhone、WordPress…）
・一定時期だけビッグになるキーワードも（例：各種流行り物、話題の物事など）

単語数が1語、もしくは少ない

「旅行」のような単一のキーワードに関して「旅行 長崎 日帰り」のように複数の語句からなるキーワードを「複合キーワード」と言います。
皆がよく使うという特徴から、ビッグキーワードは自然と単語数が少なくなります。
確かに「旅行 長崎 日帰り」よりは「旅行」の方が検索される確率は高いですよね。

スモールキーワードとは

ビッグキーワードとは対極に、検索需要が低いキーワードはこちらに入ります。
スモールキーワードにはこのような特徴があります。

・検索需要が低い
・複合キーワード

検索需要が低い

調べたいと思う人が少ないキーワードということになりますから、

・あまり認知されていない言葉
・話題性がない言葉

などは、スモールキーワードになりやすいです。

複合キーワード

先ほど挙げた「旅行 長崎 日帰り」のような複合キーワードもスモールキーワードの仲間に入る事が多いです。
複数の言葉が組み合わされたキーワードほど、その検索需要も限定的になるというのは納得ですよね。
こうしたキーワードは、需要がニッチであるという意味で「ロングテールキーワード」と呼ばれることもあります。

ミドルキーワード

ビッグとスモールの間のレンジとして「ミドルキーワード」という概念もあります。
それなりに検索されているキーワード、といった感じですね。

ところで、検討中のキーワードがビッグ、スモール、もしくはミドルのどれに相当するのか、どうやったらわかるのでしょう。
見当をつけるには、Google広告の「キーワードプランナー」が便利です。

キーワードの規模の調べ方

こちらはキーワードプランナーを使って「長崎」「長崎 旅行」「長崎 旅行 日帰り」の3組のキーワードを調べた画面です。

一定期間で各キーワードがどのくらい検索されたのかを「月間平均検索ボリューム」という項目で確認できます。
やっぱり「長崎 ＞ 長崎 旅行 ＞ 長崎 旅行 日帰り」の順に検索ボリュームが多いですね。

検索ボリュームの目安

どのくらいの検索ボリュームがあればビッグキーワード、もしくはスモールキーワードと考えられるのか？
明確に定義されているわけではありませんが、おおよそこのような範囲とされています。

ビッグorスモール、おすすめはどっち？

キーワード規模の見極めができるようになった所で考えたいのは、どちらを意識したサイト、ブログ運営をすればよいか。
一見検索需要の高いビッグキーワードに魅力を感じますが、私のオススメはスモールキーワード。
厳密にいうと「スモールキーワード圏内の複合キーワード」です。
理由を列挙します。

ライバルが少ない

以下は、ビッグキーワード「転職」の検索結果。1ページ目は大手転職サイトやリスティング広告でいっぱいです。

検索需要が高いキーワードには、当然競合ページや、内容によっては広告も多く存在する可能性があるんですね。

小規模な個人ブログや駆け出しのサイトで最も必要なのは、とにかく誰かの目に触れる事。
ビッグキーワードという大海ではその確率が下がってしまいますので、検索需要こそ少ないけれど、見てもらえる確率が高くなるスモールキーワード圏内が最初はオススメです。

検索意図がわかりやすい

先ほどから例に挙げているビッグキーワード「長崎」ですが、こちらはどんな目的で検索されてるのか想像しにくいですよね。

1.長崎がどこにあるか知りたい？
2.長崎で観光がしたい？
3.長崎に住みたい？
4.長崎で働きたい？

「長崎 旅行」であれば、2である事が明快です。
さらに「長崎 旅行 日帰り」なら、ユーザーが何を求めているかがもっとハッキリ見えてきますよね。
どのような記事がマッチするのかも容易にイメージできます。
このように、スモールキーワードでは記事の構想が浮かびやすい、という嬉しいオマケもついてきます。

クリック率も高い

Webページが折角検索ランキングに上がっても、それがクリックされなくては意味がありません。
そのためには効果的なページタイトルやわかりやすいディスクリプションを用意して…というのも大切なんですが、それ以前にユーザー側がどれほど本気で情報を求めているのか、というハナシもあります。

1.長崎
2.長崎 旅行
3.長崎 旅行 日帰り

最も熱心に情報を探しているのは、おそらく3で検索している人ですよね。
というように、複合キーワードを意識したページを提供できれば、ユーザーの積極性によって自然にアクセス率が上がる事が期待できます。

キーワードに囚われすぎないように

ビッグ＆スモールキーワードの調べ方や考え方について見てきましたが、あまりにキーワードを意識しすぎると、自分の書きたい事、書きやすい事とのバランス取りが難しくなって、サイト運営がしづらくなってしまう事があります。

書きやすさはより大事

有効なキーワードが見つかったとして、それに沿うような記事を無理やり捻り出すのは相当苦痛です。
人間は、本当に思っている事や興味を持っている事しか表現できません。
書き手の思いが入った記事にはエネルギーがありますから、キーワード分析など凌駕した結果を産むはずです。

自分のテーマから外れないことはもっと大事

誰しも、サイトやブログ運営を通じて、伝えると決めた事があるはずです。
キーワードの大小に囚われすぎて、その目的から外れてしまっては意味がありません。
伝えたい事にまつわるキーワードの候補がいくつかあって、その中からどれにしようかな？ぐらいの時に検索ボリュームを参考にする、程度がキーワードとの丁度よい付き合い方だと思います。

まとめ

• ビッグキーワードは検索需要が高く、単一語が多い
• スモールキーワードは検索需要が低く、複合キーワードから成り立ってる事も多い
• キーワードの規模は、Google広告の「検索ボリューム」で見当をつけられる
• 勧めるとしたら、ライバルが少なくて記事イメージが沸きやすい「スモールキーワード圏内の複合キーワード」
• サイトの育成には、自分のプランから離れない事が一番大事。キーワードはそのための参考程度に

最後に逆算的なハナシですが、そもそもハッキリしたコンセプトのある記事なら自然に何かしらの複合キーワードに結びつくはずなんですよね。
記事の構想を練る時点で「これはどんなキーワードに結びつくだろう？」なんて考えるのも有効かもしれません。

WordPressの投稿タイプは増やせます

そもそも投稿タイプとは

投稿の形式です。
WordPressであらかじめ用意されている投稿タイプは以下の通りです。

カスタム投稿タイプを使うと、上記に加えてオリジナルの投稿タイプを追加作成することができます。

投稿タイプを追加するメリット

投稿記事の分類方法を増やすことができるので、サイトやブログの内容に合わせた記事管理ができるようになります。

カテゴリーじゃダメなの？

WordPressの記事分類で真っ先に思いつくのは「投稿」でよく使う「カテゴリー」ですよね。
投稿タイプ内を仕分けるのがカテゴリーであるのに対し、カスタム投稿タイプでは、投稿タイプそのものを分けることができるので、より明確な記事の分類ができます。

また、カスタム投稿タイプでは、入力項目（タイトル、本文、抜粋文…）も自由に設定することができるので、記事の構成に合った編集画面を作ることができます。

投稿タイプの追加方法

利用しているテーマのfunctions.phpにregister_post_type関数を追加するだけで、投稿タイプを追加することができます。
register_post_type関数は、add_action関数で呼び出します。

サンプル
以下は、商品（item）という投稿タイプを追加した例です。

add_action('init', 'createPostType');

function createPostType() {
  register_post_type('item', [
    'labels' => [
      'name => '商品'
    ],
    'public' => true,
    'menu_position' => 5,
  ]);
}

「menu_position」の数字ですが、掲載位置によって値が決まっています。

5：「投稿」の下
10：「メディア」の下
15：「リンク」の下
20：「固定ページ」の下　など

その他の位置設定は公式ページ内で紹介されています（menu_positionパラメーターを参照）

管理画面を確認すると、「投稿」メニューの下に「商品」が追加されます。

投稿タイプの仕様をカスタマイズ

ここからは、投稿タイプの機能を整えていきます。

ラベルの設定

まずは管理画面上の表記に関して。
メニューを確認すると「投稿 ＞ 投稿一覧」に対して、商品の方は「商品 ＞ 商品」になってしまっています。

機能上はこのままで問題ないのですが、表記を揃えたいという場合は、labelsの中にall_itemsパラメーターを追加設定します。

add_action('init', 'createPostType');

function createPostType() {
  register_post_type('item', [
    'labels' => [
      'name => '商品',
      'all_items' => '商品一覧' // メニュー表記を「商品一覧」に
    ],
    'public' => true,
    'menu_position' => 5,
  ]);
}

labelsは、各種表示名を司るパラメーターです。
他にもいろいろな表記をカスタマイズできることが、公式ページで紹介されています（labelsパラメーターの欄を参照）

ブロックエディタの利用

投稿タイプをデフォルトで利用すると、ブロックエディタ（Gutenberg）が利用できません。
クラシック派のワタシにはむしろありがたいのですが、ブロックエディタを有効にするにはshow_in_restパラメーターを使います。
実装後のコードは、このチャプターの最後にまとめます。

アーカイブの利用

デフォルトで用意されている「投稿」では、カテゴリーや年月日ごとといったアーカイブを作ることができますよね。
追加した投稿タイプでもアーカイブを持たせたい場合には、has_archiveパラメーターを使います。
実装後のコードは、このチャプターの最後にまとめます。

カテゴリー、タグの利用

そのカテゴリーの利用についても、別途設定が必要です。
投稿ページ同様、カテゴリーやタグを利用したい場合はtaxonomiesパラメーター使います。
カテゴリーとタグの内容は、投稿ページと共用になります。
実装後のコードは、このチャプターの最後にまとめます。

コードまとめ

ここまで紹介した内容を実装すると、このようなコードになります。

add_action('init', 'createPostType');

function createPostType() {
  register_post_type( 'item', [
    'labels' => [
        'name' => '商品',
        'all_items' => '商品一覧
    ],
    'public' => true,
    'menu_position' => 5,
    'show_in_rest' => true,  // ブロックエディタ(Gutenberg)を有効にする
    'has_archive' => true,   // アーカイブを作る
    'taxonomies' => array('category', 'post_tag') // カテゴリー（category）とタグ（post_tag）を利用可能に
  ]);
}

管理画面を確認すると「商品」の下に「カテゴリー」「タグ」メニューが追加されています。

投稿タイプの入力項目をカスタマイズ

さあ、それでは早速記事を入力！と編集画面へ移動してみると…

追加した投稿タイプの初期状態では、入力できるのはタイトルと本文のみです。
抜粋文やカスタムフィールドなど、お馴染みの機能も利用したい場合は、supportsパラメーターで追加していきます。

以下は、タイトルと本文に加え、抜粋文とカスタムフィールド、リビジョン機能（記事の自動保存）を追加した例です。

add_action('init', 'createPostType');

function createPostType() {
  register_post_type( 'item', [
    'labels' => [
        'name' => '商品',
        'all_items' => '商品一覧
    ],
    'public' => true,
    'menu_position' => 5,
    'show_in_rest' => true,  // ブロックエディタ(Gutenberg)を有効にする
    'has_archive' => true,   // アーカイブを作る
    'taxonomies' => array('category', 'post_tag'), // カテゴリー（category）とタグ（post_tag）を利用可能に
    'supports' => array('title', 'editor', 'excerpt', 'custom-fields', 'revisions') // 入力項目の追加
  ]);
}

入力画面がリッチになりました。

その他、拡張できる内容は公式ページで紹介されています（supportsパラメーターの欄を参照）

さらに、別ページで紹介しているカスタムフィールドの追加設定も行うことによって、掲載したい記事構成にピッタリとフィットした入力画面を作ることができます。

まとめ

• 投稿タイプとは：投稿の形式のこと。デフォルトで用意されているのは「投稿」と「固定」
• 投稿タイプの追加方法：functions.php内でregister_post_type関数を実行する
• 投稿タイプの設定方法：register_post_type関数内のパラメーターを使って行う

カテゴリーを駆使すれば、全ての記事を「投稿」のままで管理することもできますが、投稿タイプレベルで分けてあげると、記事が明確に管理できるようになります。
カスタムフィールドで入力欄を自由に設定できる点も魅力ですよね。

どんなスクール？（特徴）

老舗オンラインスクールで安心の実績

多くのクリエイターを育ててきた実績あるスクールであるデジタルハリウッドによる「Webデザイナー専攻主婦・ママクラス」ですが、こちらのコース自体も開講から10年を迎え、安定して運営されています。
公式ページで謳われている以下の実績からも、安心して受講できるコースである事がわかりますね。

・卒業生：600名以上
・終了率：96.7%
・受講満足率：受講満足率97.7%
・就職率：87.5%

オンラインでもオフライン（通学）でも学べるから、おウチの仕事とも両立しやすい

スキマ時間に自宅で学習したい時はオンライン、集中モードで取り組みたい時はデジハリ校舎でじっくり制作。などのように自分らしくフレキシブルな学習スタイルを作れるのが「Webデザイナー専攻主婦・ママクラス」の特徴。
家事・育児などと両立できるようなシステムが考えられています。

主婦・ママの仲間を作りやすい

「Webデザイナー専攻主婦・ママクラス」はクラス制。当然受講生は主婦・ママだけなので、ライフスタイルの近い、話の合う仲間も見つけやすい環境です。
お互いに励まし合いながら学習することで、モチベーションをキープし続けながら楽しく受講できます。

キャリアデザインプログラム

「Webデザイナー専攻主婦・ママクラス」のコース名にもなっている「キャリアデザインプログラム」は、Webデザインの技術習得だけでなく、理想の働き方について考える機会がパッケージされたデジハリ独自のプログラムです。
「働く」とは「生きる」事の一部。
身につけたスキルでどのように生きていくのかまでプランニングできる、貴重な機会がカリキュラムに含まれています。

主婦・ママクラスならではの手厚いフォロー

その他、

・キッズスペースのある校舎
・シッターサービス（校舎や時間に条件あり）
・保育園申請用の在学証明書発行

など、一般のWebデザインスクールでは受けられないサービスが盛りだくさんです。

コースの種類一覧

「Webデザイナー専攻主婦・ママクラス」のコースは2種類です。

・キャリアデザインプログラム
・キャリアデザインプログラム就転職パック

講座・コース内容

キャリアデザインプログラム

「Webデザイナー専攻主婦・ママクラス」のベーシックパッケージがこちら。
Webデザイン必要なスキルをバランスよく習得する事ができます。

主な学習内容：Illustrator / Photoshop / AdobeXD / HTML / CSS / JavaScript / jQuery など
学習期間：6ヶ月

キャリアデザインプログラム就転職パック

「キャリアデザインプログラム」に「お仕事TRYプログラム」がついたセットです。
「お仕事TRYプログラム」は、受講中の制作課題として実案件に挑戦する事ができるデジハリ独自の仕組み。
クライアントの要求に叶った作品を納品する、という本番同様のワークフローを受講中に体験しておけば、卒業後も心に余裕を持ってお仕事する事ができます。

主な学習内容：Illustrator / Photoshop / AdobeXD / HTML / CSS / JavaScript / jQuery など
学習期間目安：10ヶ月

案件紹介＆転職・副業支援

家事や育児とのバランスを考えた働き方がしたい。
そんな望みにしっかり答えてくれる体制が「デジタルハリウッドSTUDIO 主婦・ママクラス」にはちゃんと整っています。

・お仕事TRYプログラム
・キャリアセンター
・Job Style Search

お仕事TRYプログラム

先述した通り、在学中から実案件に取り組めるプログラムです。
「キャリアデザインプログラム就転職パック」限定となりますが、制作現場で求められるクオリティやスケジュール感を受講中に体験しておくのは大きなメリットになります。

キャリアセンター

就職・転職に関する相談を引き受けてくれるのがこちら。
多くのクリエーターを育ててきたデジハリのナレッジをいっぱい伝授してもらえます。

Job Style Search

デジタルハリウッド在校生・卒業生専用の求人情報サイト。
正社員や派遣社員、フリーランス・業務委託など多彩な働き方が掲載対象になっているので、実際のお仕事探しだけでなく情報収集にも最適です。

「デジタルハリウッドSTUDIO 主婦・ママクラス」はこんな人にオススメ

主婦・ママの仲間を作って楽しく受講したい

共感できる、価値観の近い仲間を見つけられるのが「デジタルハリウッドSTUDIO 主婦・ママクラス」の魅力です。
逆に、世代や年齢を超えていろんな人と繋がりたい方、繋がり自体をあまり求めない方は、あえて本コースを選ぶ理由はないかもしれません。

制作技術だけでなく生き方や働き方までじっくり考える機会が欲しい

Webデザインのスキルだけでなく、生き方や働き方など、人生設計全体を考える機会を求めていた人には本コースの「キャリアデザインプログラム」は最適です。
逆に、技術の習得だけでいいというシンプルな受講スタイルを求めている方は、他のスクール・コースをオススメします。

自宅以外で制作に集中できる環境を確保しておきたい

「デジタルハリウッドSTUDIO 主婦・ママクラス」のようにオンラインでもオフライン（通学）でも学べるスクールは、実はそれほど多くありません。
日常を離れて今日はじっくりデザインを考えたい！なんて時には、オシャレなデジハリの校舎が役立ちます。

校舎通学圏内にない方や、そもそも通学を検討していない方は他スクールの選択肢もありますが、「デジタルハリウッドSTUDIO 主婦・ママクラス」には100%オンラインでも十分学習できる仕組みが整っています。
「キャリアデザインプログラム」や「お仕事TRYプログラム」など、本コース独自のコンテンツに惹かれた方は受講をおススメします。