IT×英語×1対1×フィリピン スタッフブログ@Cne1 High Touch

CNE1 HighTouchは『英語×WEBデザイン』を『1対1』で『短期集中合宿』で学べる世界で唯一の『WEBデザインスクール』です。私達は「英語を」ただ単に学ぶことから、「英語で」働くためのITスキルを学び、世界で挑戦する生徒達をとことん応援します!

WEBデザインとは? 必要なスキルもご紹介します!

f:id:cne1hightouch:20170509130006j:plain

 

こんにちは。HTインターンのKYOSUKEです!

今回は、High Touchが提供する、WEBデザイン入門コースに関して

「WEBデザインがまだ何なのかハッキリとイメージができない。」
「WEBデザインについてもっと深く知りたい!」

という方々に向けた「WEBデザインを知ろう。」というテーマでお話ししていきたいと思います。
全て読んで頂いた後に、WEBデザインに少しでも興味を持って頂けたら幸いです。
では早速始めましょう!

WEBデザインとはなにか?

WEBデザインとは、 パソコンやスマートフォンなどに表示されるもののレイアウト、デザインを決めることを指します。
ホームページやウェブサービスのデザインも一概にWEBデザインと呼ぶことができます。

High Touchのホームページ、このブログの記事のデザインもすべてWEBデザインです。

WEBデザインの歴史は浅く、まだ30年にも達していません。
世に出始めた当初、WEBデザインで使える色は、たった16色ほどしかなく、画像を挿入することさえできなかったそうです。

ですが今では、WEBデザインでよく使われる、
RGBといわれる色表現で使用できる色の数は、なんと約1677万色に達しています。
(人間は条件が良ければ、約750万色を認識できると言われていますので、
十分すぎる色の数がWEBデザインでは表現することができますね!)

画像はもちろん、動画を挿入することも、今では可能となり、世界にあるデザインの数は無限大にあります。
歴史が短いにも関わらず、ここまで進化するとは驚きです。

これから先もどのようにWEBデザインが進化していくのか楽しみですね!

High Touchのホームページは動画と画像を使用して表現されていますので、是非デザインの観点から一度ご覧ください。

 

まとめ

WEBデザイン = インターネット上に表示されるホームページやブログなどのデザインのこと。

 

WEBデザインで必要なスキル

次は、WEBデザインを行う上での、必要なスキルをご紹介いたします!
これらを使いこなせるようになれば、あなたは立派なWEBデザイナー(WEBデザインを行う人のこと)です!
もちろん、これらのスキルは全てHigh Touchで学ぶことができます!(2週コースはIllustratorを除く)

今回はそれぞれ、深くまで説明いたしません。
それぞれの役割や機能を大まかに理解して頂ければ、WEBデザインがどのようなものかをイメージして頂けると思います。

それでは一つずつ見ていきましょう!

 

HTML(エイチ ティー エム エル)

HTMLは1990年に、WEBページを作成するための言語として生まれました!
HTMLは人気者です。なぜなら世界中のWEBページが、HTMLで作成されているのです!
Yahoo JapanやAmazon、いまご覧いただいている、High Touchホームページの全てにHTMLが使われています。

WEBページにある、文章や画像はHTMLがあるからこそ表示されるのです!

iPhoneがiPhone6、iPhone7と進化しているように、HTMLもHTML1.0、HTML2.0とリリースされています。

そして現在の主流は、HTML5です!

ちなみに一般的に言語というのは、日本語や英語など人間同士がコミュニケーションを取るためのものでありますが、
ITの世界で、言語(Language)というのは、

人間がパソコンやブラウザ(Safari, Google Chrome, Firefoxなど)とコミュニケーションを取るための言葉なのです!
(残念ながら、パソコンやブラウザは日本語や英語を理解してくれませんので、
我々がパソコンやブラウザが理解できる言葉でコミュニケーションを取るしかありません。)

HTMLは、ブラウザとコミュニケーションを取るための言語です。
パッと見ると、下の画像のような、暗号みたいなコードなのですが、

これをブラウザが読み込むと、見覚えのある、このデザインになります。

「コードは難しそうだ。」と先入観を持たれる方がいらっしゃるかもしれませんが、
できる限り、英語に近づけた言葉になっておりますので、英語を学ばれますと、理解するのも難しくありません。

 

CSS(シー エス エス)

WEBデザイナー達が、
「HTMLだけでは、文字の色や大きさも変更できないし、見た目が悪いなぁ。もっとオシャレにWEBページを作りたい!」
と思っている頃、HTMLはパートナーを見つけました!その名もCSSです!

CSSとは、HTMLの範囲の文字の色、大きさ、背景の色や配置場所を指定するための言語です。
ですのでHTMLとCSSはセットであると考えて頂いて結構です。

多くの参考書にも「HTML/CSS」とセットで説明がされています。

まとめると、

CSS = WEBサイトの見栄えをよくするもの

 

Java Script(ジャバスクリプト)& jQuery(ジェイクエリィ)

「HTMLとCSSだけでは、まだ寂しいし、物足りない、、もっとWEBページに動きをつけれないかなぁ。」
とWEBデザイナー達が悩んでいる時に、Java ScriptとjQueryが登場しました!

Java Scriptはよく「JS」と略されます。
「JAVA(ジャバ)」と言われる、プログラミング言語とは名前が似ておりますが、全くの別物です。
(僕はてっきり同じものだと思っていました笑)

Java ScriptとjQueryにより、WEBページには「動き」が生まれました!
これにより、WEBページの上に、新たなウィンドウ(ポップアップ画面)を自動的に表示できる等が可能となりました!

jQueryはJava Scriptの機能を簡単に使えるようにしたものなので、シンプルなコードで動きを表現できます。
ですがJava Scriptを理解しておくことで、jQueryに対する理解度も上がります。

今回は長くなりますので、説明を省きますが、
Java ScriptとjQueryを使い分ける場面もありますので、二つの知識を得ることはとても重要です。

 

Photo Shop(フォトショップ)

「WEBサイトに使う写真を加工して、もっと良い写真にできないかなぁ。」
とWEBデザイナー達の悩みを解決すべく、Photo Shopが生まれました。

Photo Shopでは、写真の加工(サイズ調整、色調整、透明度・合成など)はもちろん、画像やイラストの加工が可能となります。

 

Illustrator (イラストレーター)

「Photo Shopのおかげで、写真を加工できるようになった!
でも今度は、図形やロゴを書いたり、Photo Shopで加工した写真のレイアウト(配置)ができるようになりたいなぁ。」
とWEBデザイナー悩んだ末に登場したのが、Illustratorです!

Illustratorは写真の加工が得意ではないので、そのお仕事はPhoto Shopに任せています。
その代わりに、Illustratorは複雑な図形(ロゴなど)を作成し、
文字や画像といった複数の要素と共にレイアウトをすることを可能にしています。

Photo ShopとIllustratorはAdobe(アドビ)から提供されています。

 

おおまかにWEBデザインをする上での必要なスキルを説明いたしました。
それぞれの役割がどんなものか、イメージして頂けたでしょうか?

HTの4週間コースでは、上記で紹介いたしました、
全てのスキルを、しかも「英語で」学ぶことができます!
(2週間コース場合はIllustratorを除く)

 

最後まで読んでいただき、ありがとうございました。

CNE1 High Touchのホームページは下記からどうぞ!
 CNE1 High Touch "ENGLISH × WEB DESIGN"

このブログのソースはこちらから!

 WEBデザインとは? 必要なスキルもご紹介します!

 

■この記事を書いた人:
KYOSUKE (HighTouchインターン)