Webディレクターになったときに、これは勉強して良かったな、と思ったこと｜HTML・CSS編

こんにちは、株式会社Wiz（ワイズ）でWebディレクターをしているKudoです。

「ワイズの想いに共感してくれるWebディレクターを集めたい！」
という想いから、私たちの仕事ぶりをnoteで発信しています。

今回は、まったくの未経験からWebディレクターなった私が、勉強しておいてよかったと思ったことの一つとして、HTMLやCSSについてお話ししたいと思います。

ちなみに私の場合は、そもそもHTMLやCSSを学んだのは、Webサービスとかスマホアプリを自分で作って世に出したい、と思ったのがきっかけでした。
縁があって今ワイズのWebディレクターをしておりますが、その当時は「Webディレクター」という職種があることすら知りませんでした（笑）

ただ、業務上「知っておいてよかった」と思う場面はしばしばありますので、よかったら参考にしてみてくださいね。

先にお伝えしておくと、HTMLやCSSについての詳しい解説は一切しませんので、HTMLやCSSについて知りたい！と思っている方のご期待には沿う記事ではないことは、予めご了承くださいm(_ _)m

未経験からWebディレクターとしてのキャリアを積み上げていきたい方、ディレクションについて勉強したいけど、どんなことから勉強したらいいかわからないetc...、そんな皆さんの目に留まったら嬉しいです。

HTMLとは？

ハイパーテキスト・マークアップ・ランゲージ
HTML（エイチティーエムエル、HyperText Markup Language）は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
（中略）
ハイパーテキストでは、ウェブページから別のウェブページにリンクをはったり、 ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。 

引用：HTMLクイックリファレンス

要するに、私たちが普段使っているWebブラウザ上に、「Webページ」として文字や画像、動画などもろもろの情報を表示してくれているのがHTMLというマークアップ言語なのですね。

CSSとは？

スタイルシートとCSS
CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、ウェブページのスタイルを指定するための言語です。 
（中略）
CSSは、HTMLと組み合わせて使用する言語です。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

引用：HTMLクイックリファレンス

HTMLで記述して表示させるだけだと、以下の画像のように文字や画像が画面の左上から順番に表示されるだけなので、味気ないページになってしまいます。

引用：udemy「HTMLとは？これを読めば初心者でも必ずHTMLが書ける！」

CSSでスタイルをつける（装飾する）ことで、文字の色や大きさを変えたり、画像を横並びにしたり、メニューボタンやサイドバーなど機能ごとに見た目を区別させたりなど、UI・UXを意識したデザイン・レイアウトに作り込むことが可能です。

なぜWebディレクターがHTMLやCSSのことを知っておくべきなのか？

所属する会社にもよるかもしれませんが、Webサイトを実際に作るのはエンジニアなので、日々の業務の中でWebディレクターがHTMLやCSSのような言語を書く場面は基本的にはありません。

ただそれでも、基本的なマークアップ言語について知っておいた方がよい大きな理由が2点あるのでご紹介していきます。

①エンジニアとのコミュニケーションがしやすくなる

「スムーズになる」ではなく「しやすくなる」と言っておきます。知識が及ばず、ワイズのエンジニアさんたちには迷惑をかけまくる日々です。すみません……汗

非常におおざっぱな言い方ですが、HTMLは「タグ」で表示したい内容を囲みながら記述していきます。タグの例をいくつか挙げると、

<h1>・・ページのタイトル
<h2>～<h6>・・見出し（セクションのタイトルや小見出し）
<img>・・画像
<a>・・リンク
<div>・・パーツやコンポーネントのひとまとまり
<meta>・・ページ全体にかかわる設定（検索画面に表示されるタイトルやディスクリプションの指定etc...）

などなど、たくさんのタグがあります。
さらに、CSSにも書き方のルールが色々あり、少しだけ例をみてみると、

font-size : 16px ・・文字の大きさを16ピクセルに
color : pink ・・文字の色をピンクに
width : 100px ・・コンテンツの幅を100ピクセルに
margin : 10px ・・コンテンツの周りに10ピクセル余白をいれて

などなど…

Webディレクター業務のひとつであり、一番大きなウェイトを占めるのは、どのようなメディアを作りたいか、方向性を考え、決定することかと思います。
そして、ディレクターが考えたワイヤーなどをもとに、デザイナー・エンジニアがWebページを作成していきます。

エンジニアがページを作成していく中で疑問があった際など、エンジニアとディレクターは常にコミュニケーションをとるのですが、例えば、

「ここのテキストを<h1>にしようと思うけど大丈夫？」
「メタ情報に入れるタイトルとディスクリプションはどうする？」
「ここ修正しようとすると結構CSSいじらないとだから工数かかるかも…」

みたいなやり取りが行われます。
そんな一つひとつの会話に対し、「<h1>ってなんでしたっけ」「メタ……？」「CSSいじるって何？」みたいなことをしていると日が暮れてしまいますよね（笑）

なので、最低限の知識はもっておくようにしておきたいですね。

②制作にどれくらいの日数がかかるか想像しやすくなる

HTMLやCSSでできること・できないことについて知っておくと、これから制作しようとしているWebページができるまでにどれくらいの日数がかかりそうか、というのが想像しやすくなります。

例として、以下の画像のような「商品のランキング（一覧）ページを作りたい」というときの話をしてみます。

実際のページはこちら：https://012cloud.jp/ranking

「商品の画像や説明を表示する」これはHTMLやCSSだけでもできます（そんなに日数はかからなそう）。
ですが、商品の画像や説明などの情報をどこかにデータとして保存しておいて、編集したり、追加できるようにしたい、となるとHTMLやCSSだけではできない（それなりに時間がかかる）ものになります。

もちろん、細かい日数については、やりたいことを伝えた上でエンジニアに確認・相談をします。
ただ、事前にある程度想像できていると、無茶なスケジュールでエンジニアに制作を依頼したり、依頼主から「〇〇までに完成させてほしい」という依頼があった際に、「できます」と安請け合いするのではなく、「〇〇の機能だけであればそこまで時間はかからないですが、●●の機能を追加しようとするとちょっとエンジニアに相談が必要です」といったように、ワンクッションいれて相談ができますよね。

ワイズのメディアを成長させたい方、お待ちしています！

今回は、Webディレクターになったときに知っておいてよかったことの中から、HTML・CSSについてお話しました。
マークアップ言語・プログラミング言語は他にもまだまだ存在し、奥の深い世界だなぁと思います。

ノーコード、ローコードのような形で、これらの言語を使わなくてもサービスを作れるようにはなってきましたが、一方でプログラミング教育が小学校で必修化されるなど、プログラミングが身に着けるべき教養になりつつもあるので、子どもたちに負けないよう、基礎だけでも押さえておいて損はないのではないでしょうか。

ワイズでは、多くのメディア制作・改修を日々行っており、Webディレクターとして一緒に活躍してくださる方を募集しています。

・これまでに培ったWebディレクターとしてのノウハウを活かしたい
・未経験からディレクションにチャレンジしたい
・作りっぱなしじゃなくてちゃんとメディアをグロースさせたい
・サイト制作の立ち上げに関わりたい
・Web業界のプロフェッショナルを目指したい

そんな方々のご応募をお待ちしています！