こんにちは。
中小企業のウェブ関連の会社で働くやなぎはらめいです。
仕事内容としてはコーデイングを中心にSEO、サイト運営、マーケティング、広告管理などをおこなっています。
仕事内容も楽しく、充実した毎日を過ごすことができています。
そんな私ですが今回は、初心者が一人でウェブサイトを作るための知識を書いていこうと思いきます。
インターネットが発達し、生活する上で必要不可欠となりましたね。何かわからないことがあったら調べたり、クラウドを利用したり、ショッピングで利用したり。
インフラと言って間違いないです。
そんな現代でホームページを作ることができるということは大きなスキルになります。
ホームページ制作を副業としてお金を稼ぐ方やフリーランスとして仕事にしている人も数多くいます。
これからホームページ制作をしてみようと思う方や、今後ウェブ制作会社に勤めたいという方は是非一読してみてください。
HTML（エイチ ティー エム エル）
一度は聞いたことある方は多いでしょう。
いわゆる、プログラミング言語のひとつです。（正確にはマークアップ言語といいます。）
ウェブに関わる言語の中でもっとも基本的な言語です。
Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略してHTMLと言います。
HTMLにはバージョンがあり、これから学ぶという方はHTML5を学ぶとよいでしょう。
ホームページを作るにはHTML5を学ぶ必要があるっていうのは分かったけど、まだぼんやりとしか分からないよ
じゃあ、もっと分かりやすくするために直接HTMLを見てみましょう。
実は誰でも簡単に見ることができるのよ。
今、このページを見ていると思いますが、ブラウザ上で「右クリック」→「検証」を押してみてください。
謎の文字がいっぱい表示されましたでしょうか？
これがホームページを作っているコードです。ソースコードとも言います。
ホームページを作るためにはこのコードを書く必要が出てきます。
CSS（シーエスエス）
CSSというのはCascading Style Sheets（カスケーディング・スタイル・シート）の略称です。
HTMLと同じでホームページを作るために最も基本的な言語のひとつです。
CSSはデザインなどの見た目を作るための言語です。
文字の色を変えたり、大きさを変えたり、ブロックを並べたりということをします。
イメージとしては、HTMLでモノ（文字）を置き、CSSで配置場所を決めたり、色を塗ったりするという感じですね。
なるほど…！
HTMLとCSSは一緒に学べる参考書が多いです。プログラミング初学者にもおすすめできる言語なので是非、一度、学習してみてください。
職種的にはなんて呼ぶの？
このようなコードを書く人たちの事を「コーダー」「マークアップエンジニア」「フロントエンドエンジニア」などと呼びます。
会社によって呼び方が変わったりするところも多いですが、基本的には後者の方が上級職種なイメージがあります。
目指せフロントエンドエンジニア！ですね
デザインの知識
ホームページをつくるためにはデザインの知識が必要です。
バナーなどの画像制作やサイト全体のデザインを作成します。
職種でいうと「ウェブデザイナー」や「UI/UXデザイナー」が行っていることですね。
デザインをするためには様々なツールやソフトを使う必要があります。具体的には「Photoshop（フォトショップ）」や「Illustrator（イラストレーター）」「XD（エックスディー）」といったソフトです。
どれもAdobe社のソフトですね。ウェブ業界ではほとんどの会社がAdobe製品を使っています。もしウェブデザイナーになりたいのであればAdobe製品を使えるということは必須の条件になると思います。
因みにですが 、「Photoshop（フォトショップ）」や「Illustrator（イラストレーター）」 は有料のソフトです。「XD（エックスディー）」は無料版と有料版があります。XDは実は最近のソフトなのです。
デザインのツールとしてはこの3種類が多く使われています。
ふむふむ…デザインのソフトは、「Photoshop（フォトショップ）」や「Illustrator（イラストレーター）」「XD（エックスディー）」が多く使われているんだ！
そうなんです。デザイナーになったら毎日触ることになるわよ。
うーん…。いっぱいソフトがあることは分かったけど
一体どれを使ったらいいの？
そうね…どれもデザインのツールなのは間違いないけれど、どのソフトも得意なこと、不得意なことがあるわ…！
次の項目で、各ソフトについて説明していくわね。
Adobe Photoshop（フォトショップ）
基本的に写真の加工を得意としています。
色相や光量を変えて写真を映えらせたり、画像にエフェクトをかけたり、写真の特定の場所を切り抜いたり様々なことができます。
ソフトの名前にフォトと付いているだけあって写真の加工が一番得意です。
だからといってバナーなどがつくれない訳ではないです。一緒に働いているデザイナーさんは、バナーや広告の作成やサイトのデザインなどほとんどの事をフォトショップで行っています。
有料のソフトです。
Adobe社 Illustrator（イラストレーター）
次はIllustrator（イラストレーター）です。通称イラレ。
広告の作成やバナー作成によく使われています。またイラストを描くツールとしてもよく使われています。世界中で使われているデザインはこのソフトを使っているはずです。
ウェブデザインだけにとらわれず、印刷物（タオルや本など）のデザイン、商品パッケージのデザイン、ロゴ製作などもこのツールが使われています。
筆者の私はフォトショよりもイラストレーターが得意です。
こちらも有料のソフトになります。
Adobe社 XD（エックスディー）
ホームページのデザインを作成するのに特化しているツールです。
特徴としては他のツールよりも軽く、直感的で覚えやすいです。なにより無料でも使えるというのが素晴らしいですね。
簡易的なバナーの作成などもすることはできますが、イラストレーターやフォトショップよりできることというのはどうしても少ないことや、新しいソフトのため採用しているデザイン会社が少ないのでウェブデザイナーを目指している方にはあまりおすすめはしません。
使いやすいのは間違いないです。私がもっとも得意とするツールですし。簡単なバナーであればこのソフトで完結させています。
デザインにちょこっと触れてみたい方やとりあえず最初のホームページを作ってみたい方はこのソフトをいれてみるのもいいのかな、と思います。
どうかしら？わかった？
とりあえずホームページを作ってみたいだけだしXDをいれてみることにするよ！
うんうん、私はそれをおススメするわ。
まとめ
以上が、ホームページを作るために必要な最低限のスキルです。
実際の仕事では、コードを書く人、デザインを決める人で分かれているところが多いです。
でもどっちのスキルももっていると一人でホームページを作ることができますし、自分の市場価値を上げることができます。
また、仕事をしているとデザイナーとエンジニア（コーダー）で意見がぶつかることがあります。そんな時に自分とは違う職種のスキルや知識が少しだけでもあるだけで、意見のぶつかり合いもすくなくなるのかなぁ…と思います。
いかがだったでしょうか、これらの知識もデザインとコードが書ければ自分だけのホームページが作れます。