【-HTML編-】1日15分で覚えるWEBデザイン-第1回

この記事はこんな方におすすめです

WEBデザインを始めたい方
プログラミング（マークアップ）をはじめたい方
WEBデザイナーに仕事を依頼する立場にある方
ワードプレスをカスタマイズしたい方

こんにちはデザイナー/アートディレクターのnobuです。

当ブログは「専門学校級を無料で」をコンセプトにデザインに関する記事をまとめています。

WEBデザインを覚えたいんだけど何から学べばいいんだろう。

今回はそんな方に向けて、WEBデザインの学び方をnob流の講座形式で解説いたします。

この記事を読むことでWEBデザインの基本的な流れや仕組み、学習方法がわかります。

連載では網羅的なロードマップを軸に解説を行います。初心者のうちはどうしても「何を調べたらいいかわからない」という状況になりがちなので、当講座では「調べたらわかる」ようになることが目標です。

記事を読むだけで、仕組みの理解や専門用語を身につけることもできます。

WordPressなどでサイトを立ち上げるときもHTMLとCSSの基本を理解していると何かとスムーズです！

WEBデザイナーに必要なスキルは大きく分けて２つ
HTML 仕組みはこれだけ【Hello Worldを出力する】
【Hello Worldを出力する】解説
HTMLタグ【HTMLの意味に基づいたマークアップ】
テキストエディタについて
正しいコーディングはSEO対策につながる【基本的なSEO対策】
htmlでは画像のサイズに注意する【サイトの表示速度】
htmlまとめ

WEBデザイナーに必要なスキルは大きく分けて２つ

WEBデザイナーには大きく分けて２つのスキルが必要になります。

デザインスキル
コーディングスキル

デザインスキル

ソフトを使いデザインを行うスキルです。コーディングスキルがなくてもWEBデザインを行うこともできますが現状あまり推進されていないようです。

WEBデザインは基本的に型が決まっていることが多いので、デザインの再現性が高いという特徴があります。逆に自由度はグラフィックなどに比べると制限されてしまいがちです。（もちろん凝ったWEBデザインもあります）

おすすめのデザインツール

adobe illustrator
adobe photoshop
adobe XD

デザインの基本については当ブログで詳しく解説していますのでぜひご活用ください。

コーディングスキル

仕上がったデザインをWEB上で表示するためには、コンピューターが理解できる言語に変換する必要があります。コーディングとは場所の指定をしたりボタンを押せるようにしたりする工程です。

今回の講座では主に、「コーダー（コーディングする人）になる」をゴールとしたロードマップに沿って解説していきます。繰り返しになりますがコーディングスキルを学ぶことでWEBデザインの型も一緒に学ぶことができます。

後述するフレームワークやテンプレートなどを使うことでデザイン工程もある程度カバー可能なので、デザイン未経験という方もコーディングから入って良いでしょう。

そして、コーダーの進化系として、webデザイナーとフロントエンドエンジニアに分岐します。webに携わるのであればコーディングスキルは必須なのでまずはコーディングを覚えて理想のキャリアパスを描くのがおすすめです。

フロントエンド・デザイナーの二刀流の人も居ます！

まずは基本であるHTMLからご紹介します。

HTML 仕組みはこれだけ【Hello Worldを出力する】

まずはコーディングの仕組みを知るためにHellow Worldという文字をgoogle chromeなどのブラウザで出力してみましょう。コーディング全般に関してはぶっちゃけこれが全てと言っても過言ではありません。

たったの2STEPなのでお付き合い頂けると幸いです。

①下の呪文（HTMLコード）を、パソコン内蔵のメモ帳にコピペして、「index.html」という名前で保存します。（macの場合は「mi」というテキストエディタがおすすめ→https://www.mimikaki.net/）

<!doctype html>
<html> 
<head> 
<meta charset="UTF-8">
<title>タイトル</title>
</head>

<!--ここから上は今は呪文と思ってOK-->
<body>

<p>Hello World</p>

</body>
<!--ここから下は今は呪文と思ってOK-->

</html>

※保存するときの拡張子(.html)に注意です！

②保存した「index.html」をGoogle chromeなどのブラウザにドラッグ＆ドロップしましょう。

ドラッグ＆ドロップすると「Hello World」がブラウザに出力されました。ざっくりですが、コーディング全般はこんな感じの「コードを書く」→「ブラウザで確認」の繰り返しでしかありません。

See the Pen by seison waten (@capplus1-design) on CodePen.

【Hello Worldを出力する】解説

HTMLには様々なタグが存在し、タグを使い分けることで主に文字や画像を出力します。

<p>Hello World</p>  <!--hellow worldを段落として出力してね-->

上記では<p>Hellow World</p>というHTML タグをブラウザに出力しました。（他の呪文は初期設定みたいな感じです、後ほど解説を書きますが初心者のうちはとりあえず呪文という認識でOKです）

pタグとは「段落」を表すタグで、今回の処理は「Hellow Worldを段落として出力してね」という意味でブラウザが認識してくれています。

世の中には様々なWEBサイトが存在しますが原理は全てこれと同じです。単純に言えば読み込むファイルがパソコン上（ローカル）にあるのか、WEB上（サーバー）にあるのかの違いだけです。

なので、「Hello World」を出力できたということはとても重要です。本格的なHP作成まで段階を追って複雑化していきますが基本仕様はこれだけです。

HTMLタグ【HTMLの意味に基づいたマークアップ】

HTMLタグは下記のような作りになっています。

様々なタグを並べて書くと、このように出力されます。

nobu流ではまず、<table>関係を除いた主要HTMLタグを全て覚えることをおすすめしています！と言ってもとりあえずは7個しかないのでぜひ覚えてみてください！

枠で囲んだ部分にタグを入れることで動きを確認できます。

<!doctype html>
<html> 
<head> 
<meta charset="UTF-8">
<title>タイトル</title>
</head>

<!--ここから上は今は呪文と思ってOK-->
<body>
<!--ここから-->




<!--ここの間に書く-->
</body>
<!--ここから下は今は呪文と思ってOK-->

</html>

HTMLでは「デザインの反復」を理解しているとスムーズなのでデザイン側をがっつり学びたい方はこちらの記事も合わせてどうぞ。

※主要タグはprogateのHTML & CSS初級編でも学習できます！

テキストエディタについて

今回はパソコン内蔵のメモ帳やmiを使いましたが、通常はコーディングに特化したリッチテキストエディタ（メモ帳の進化系）を使います。

miやメモ帳をおすすめしたのは、「特別なソフトがなくてもコーディングできる」ということをまず知って頂きたかったからです。練習では是非リッチテキストエディタを導入ください！

正しいコーディングはSEO対策につながる【基本的なSEO対策】

HTMLでの正しいコーディングはSEO対策につながります。

SEO対策とはgoogleなどの検索エンジンから訪れる人を増やすために行う対策です。検索結果に上位表示されることでサイトの自然流入を増やすことができます。（※検索順位はgoogleが決めていると思ってOKです）

SEO対策には、大きく分けて内部対策と外部対策がありHTMLでのコーディングは内部対策にあたります。

しっかりコーディングできていれば基本的に内部対策は問題ありませんが詳しくは、SEO対策の記事を追って公開します。

htmlでは画像のサイズに注意する【サイトの表示速度】

サイト表示速度はSEO対策やユーザビリティ向上においてとて重要です。できるだけ表示速度は早くしておきましょう。HTMLでは主に画像のサイズに注意していればOKです！

詳しくはWEB解像度講座で解説しています。

htmlまとめ

webデザインには大きく分けてデザインスキルとコーディングスキルがある
コーディングスキルはwebデザイナーにもフロントエンドエンジニアにも最低は限必要
HTMLなどを読み込むことでブラウザが情報を表示している
HTMLはHTMLタグを使ってコーディングする
主要HTMLタグをざっと覚えると学習効率が良い
コーディングにはリッチテキストエディタ（メモ帳の進化系）を使う
SEO対策には内部対策と外部対策がある

次回はCSSについて解説します！

次のページ【CSS編】へ

呪文の解説

<!doctype html><!--文書がHTML5で作成されていることを宣言-->
<html><!--HTML文書であることを示す-->
<head><!--文書のヘッダー部分を示す-->
<meta charset="UTF-8"><!--UTF-8という文字コードに設定する-->
<title>呪文の解説</title><!--文書のタイトルを示す-->
</head>

<body><!--文章や画像など、実際にブラウザの画面上に表示される内容を指定する-->
</body>
</html>