テレワーク時代に活躍するために
いま覚えたいWebスキルとは

この数か月で「テレワーク」や「リモートワーク」という働き方がとても身近になりました。
実際に4月からテレワークをしている方や、一時的にしていた方も多いのではないでしょうか。
Winスクールでも4月以降WEB系の講座を受講される方が増えてきています。

さまざまな目的の方がいらっしゃいますが、主には、

• 会社からWEB系を学びにきた
• ネットショップを始めたい
• 動画や画像編集を社員に学ばせたい
• Web関係やYouTubeで副業をしたい

という声をよく耳にします。

コスト削減のために、今まで外注に出していた会社のホームページの運営や、動画・バナーの作成などを社内で内製化しようとする企業が増えたこと、テレワークが身近になり自宅で仕事をするイメージがついたことで、法人個人問わずにWeb関係のスキルが注目されるようになりました。

つまり、プラスαやセカンドキャリアとして「Webスキル」を必要としている方が急増している！
ということです。

この記事では、これまでのキャリアに加えてもう一つ何かできることを増やしたい！今後のキャリアアップや副業につなげたい！という方に向けて、いま身につけておきたいWebスキルは何なのか、どんな準備が必要なのかをご紹介していきたいと思います。

Webスキルとは？

そもそも、「Webスキル」とは一体どんなスキルのことを言うのでしょうか？Webサイトを作ることはもちろん、素材の画像や動画コンテンツを作ることも、ネットショップの仕組みを作るための技術も「Webスキル」と言えます。また、「Webサイトを作る」と一言で言ってもさまざまなアプローチがあります。

・何もない状態から作る
最初のデザインやコーディングからすべてを0から作ります。
ただ、これはかなり高度なスキルが必要になります。
1人で0からWebサイトを作るためのスキルを習得するにはとても時間がかかってしまうでしょう。

・できているものを更新する
文章や画像・動画の差替え、ページの追加、YouTubeへのアップなど、
すでに完成しているWebサイトを「更新」する技術もWebスキルです。
また、全く0の状態からでなくてもある程度の知識があればWebサイトを作ることができます。

・アクセスアップのために分析する
サイトは作って終わりではありません。
そのサイトの目的を達成するために日々更新や修正を繰り返して運営していく必要があります。
このあたりは管理費として月々のちょっとした収入になったりもします。

Webサイトを作るためには何を学べばいいの？

Webスキルが何をするための技術かは明確になりましたが、では実際に何から学べばいいのでしょうか。
学ぶ内容は大きく分けて2つです。

１．Webで使用する言語
２．言語を効率よく作成するためのソフト操作

言語についてはこの後改めてご紹介しますので、先にソフトについてお話します。

Webサイトを作成するためのソフトウェアには有料と無料のものがあります。プロが現場で使うものは有料ソフトが多いです。Adobeの「Dreamweaver」は他のAdobe製品とも親和性が高いので広く使用されています。一方、無料のものでも機能的に優れたソフトはたくさんあります。Winスクールの「ホームページ制作講座」ではフリーソフトの「Visual Studio Code」を使用しているので無料で簡単に始めることができます。先ほど「できているものを更新する」という話がありましたが、これらも無料ソフトでも出来るのでコスパがとてもいいですね。

これだけは覚えておこう！WEBで使用する言語4選

ここからは少し専門的な話になりますが、Webサイトを作る上で必要な「言語」についてご説明します。
まずこの4つの言語を押さえておきましょう。それぞれ難易度もつけてみました。

この4つの言語はそれぞれ役割が異なります。

HTML （読み方：エイチティーエムエル）　★★☆☆☆

Webページを作成するために開発された言語です。文書を構造化する役割があります。なんだか難しそうな表現ですが、大丈夫です。HTMLは誰にでもできます！例えば、Wordなどで文書を作るときに見出しやタイトルを大きくしたり、重要な単語を太字にしたりしますよね。それと同じでHTMLは「HTMLタグ」というものを使って、見出しや重要な部分に印をつけていくだけです。

以下の画像のように

タグには大見出しの意味があり、
～
のタグで囲まれた文字はブラウザ上で一番大きく表示されます。

CSS （読み方：シーエスエス）　　★★☆☆☆

HTMLにスタイルを設定するための言語です。
「Cascading Style Sheets （カスケーディング・スタイル・シート）」の略で、
Webページにおいてレイアウトや文字の色・大きさなどを指定することができます。

今回の例では、先ほどHTMLで

に指定した文字は「文字色：白、背景色：オレンジ」に設定しています。

JavaScript （読み方：ジャバスクリプト）　　★★☆☆☆ ～　★★★★☆

HTMLと組み合わせて使うプログラミング言語です。普段皆さんが何気なく見ているほとんどのWebサイトで使用されていると思います。たとえば、Webページ上でスライドショーを表示したり、フォームに適切な文字列が入力されているかのチェックなど、デザインだけでなく機能性も兼ね備えています。トレンド感のあるWebサイトを制作するにはJavaScriptは必要不可欠です。

以下のコードは現在の日付と時間を表示するコードです。

これだけ見ると難しそうですが、JavaScriptは世界中のプログラマーたちが高性能・高機能なサンプルを作って公開しているので、1から何かを作るということは実際にはありません。多くのサイトでも出来合いのプログラムをアレンジして使用していることがほとんどです。

PHP （読み方：ピーエイチピー）　★★★★☆

JavaScriptと同様、プログラミング言語の1つです。動的にWebページを生成することができます。
、、、と言っても少しわかりづらいので例をあげると、ぐるなびや食べログで場所やジャンルを指定して検索するとそれに合わせた候補のお店の一覧が表示されます。これはもともと用意されていたページではなく、PHPが条件にあったページを作って表示させています。他にも、メール送信機能やショッピングカート、電子掲示板、ログイン認証など高度な機能を持たせることができるのが特徴です。

ちなみに、PHPのコードはこのように書きます。

まとめると、HTMLは構造、CSSはデザイン、JavaScriptは動き、PHPは動的なページ生成が主な役割となります。Webの仕事に興味がある方は、まずはこの4つの言語がどんな役割を果たしているかを覚えておくといいでしょう。

ちなみに、ここまでで紹介した言語はすべて英語や記号で書かれていました。
Winスクールの受講生でも皆さん最初に「入力する自信がない」とおっしゃいますが、実は全部入力する必要はありません。有料・無料に関わらずWeb用のテキストエディタには入力補助機能がついていますし、複雑なプログラムも出来ているものを探したり使いまわして使用するのが一般的です。
1から言語を書けなくても読めるだけでできることはすごく広がります！

国内CMSの〇〇％！驚異のシェア数
WordPressのここが凄い！

「CMS」という言葉が出てきました。CMSとは「Contents Management System （コンテンツマネジメントシステム）」の略で、HTMLやCSSの知識がなくてもWebサイトを構築し、管理することのできる便利なシステムです。日本でこのCMSを使用して作成されているサイトのなんと83%が「WordPress」でできています。
ちなみに、世界だとサイト全体の37%がWordPressでできているそうです。なんと3つに1つがWordPress。
これだけでもWordPressに興味がでますよね。さらに、WordPressは操作が簡単で無料で利用できます

WordPressには「プラグイン」という機能を拡張する仕組みがあり、5万種類以上リリースされています。
プラグインを使えば、自分のサイトを一瞬でショッピングサイトに変えることができます。また、「テーマ」という機能を使えば、スマホにも対応できる「レスポンシブデザイン」があっという間に作れてしまいます。

WordPressが使えれば他のスキル習得は必要ない？

ここまでの話で「え、じゃあもう複雑そうな言語なんて勉強せずにWordPressを使えばいいんじゃない？」と思われたかと思います。たしかに、WordPressだけでも高機能で見栄えのいいサイトは作ることができます。しかし、実はWordPressは先ほどご紹介したPHPで出来ているシステムなので、知識がないままに複雑なことをしようとするとちょっとしたことで修復不可能になってしまいます。また、細かいアレンジをしたいときにはHTMLやCSSの知識がとても役に立ちます。
もしきちんと仕事としてWebに関わりたい、既存のデザインをアレンジして一歩先に進みたいという場合はHTMLとCSSの知識があるとないとでは成果が大きく変わってきます。

つまり、Webスキルを身につけると言ってもすべての技術を「上級者レベル」で知っておく必要はありません。やりたいことを実現させるためには「HTMLとCSS」の基礎を学び、ある程度は読めて理解できるようになることをおすすめします！

【動画】Web系ソフトのデモンストレーション

素材としての画像や動画コンテンツを作成するためのソフト操作のデモンストレーション動画です。

・Photoshop：写真の加工や合成ができ、Webサイトのバナーやイメージ画像などを作成するソフトです

Play

・Premiere Pro：YouTuberも使用している動画編集ソフトです。

Play

・Illustrator：印刷物のほか、Webサイトのアイコンデザインなどに使用するグラフィックソフトです。

Play

最後に…

少し長くなりましたが、いかがでしたでしょうか。なんとなくWebのお仕事やWebに必要なスキルについてご理解いただけたでしょうか。繰り返しになりますが、今の仕事にプラスで考えるなら、既存のWEBサイトを更新するお仕事からスタートするのがおすすめです。いま多くの企業で必要とされているスキルです。
ご自身のスキルアップやキャリアアップのために何を学ぶ必要があるのか迷われている方は、ぜひお近くのスクールで「無料カウンセリング・受講相談」にご参加ください。電話・オンライン説明会も受け付けています。

関連記事