webデザイン

コーディング未経験なディレクター必見!中身を理解せずに“理解する”方法

  • このエントリーをはてなブックマークに追加

ウェブサイトを設計やデザインに合わせて構築する(コードを書く)ことを、コーディングと言います。ただ、その仕事の大変さはなかなか理解できないですよね。「なんだか面倒くさそうな作業だなー」くらいには思っていても、自分もそこを考えるのが面倒だから、それ以上踏み込まないという人も多いのでは?

なので、今回は実際の作業画面を見ながら…と言っても中身を理解する必要はありません。コーディングの中身は理解せず、どんな作業を行なっているのか理解を深めましょう。

画面バイリンガル

コーダー(コーディングをする人・コードを書く人)は、主にHTMLとCSSという2つの言語を使う、画面上では言わばバイリンガルな人達です。2つの言語と言っても、基本的には英語です。そう、言語と言うくらいですから、言葉なんです。イメージとしては、英語を使った2つの方言といったところでしょうか。皆さんが普段見ているウェブサイトは、この2つの言語同士の会話によって作られています。

ではなぜ2つも言語を使うのでしょうか?…それは、それぞれの言語に得意な分野と不得意な分野があるからです。しかも、この2つの言語だけではまだ表現方法に限界があるので、コーダーさんによってはもう1言語か2言語、またはそれ以上の言語を扱う人もいます。

作業する画面と公開されている画面

では実際の作業画面と、一般公開されている画面とを比較してみましょう。何度も言いますが、作業画面の中身を理解する必要はありません。ここではそれぞれの言語の得意な分野と不得意な分野を見てみましょう。

1つめの言語「HTML」の特徴

HTMLという言語は、文字を表示したり画像を表示したりすることが得意です。あくまで、“表示する”ということに特化しています。まずは作業画面で次のようにコーディングしてみます。

何やら日本語と暗号が並んでいますが、公開画面ではこのように表示されます。

作業画面では20行にも渡って指示を書いたのに、公開画面に表示されるのはこれだけなんですね。しかも、今回はこの記事のデモ用に書いているので、必要最低限の言葉数で書いています。実際にはSEOの設定やSNSでシェアされた時の設定など、もっと多くの行数が書かれると思ってください。

上記ページの例では、HTMLという言語はタイトルを表示させ、画像を表示させ、本文を表示させ、リンクを表示させるという役割を担っています。それぞれのデザインは閲覧するブラウザによって勝手に決められます。ちなみに、上の公開画面はChromeによるものです。Safariでの公開画面は下のようになります。

文字が明朝体になり、よく見ると行間も少し違います。“表示させる”という指示に特化したHTMLでは、どんな形で表示させるかという命令が苦手です。そこで、次のCSSが活躍します。

2つめの言語「CSS」の特徴

先ほどのHTMLで書いた作業画面に、“装飾”に特化したCSSという言語で指示を付け足します。それなら最初からCSSで全部書いては?と思うのですが、残念なことにHTMLで書かれたものがまず無いと、CSSは装飾を行うことができません。ということで、以下のようにCSSを書き足します。

かなりの行数の指示を書きましたね。これを書くことによって、公開画面には下のように表示されます。

↓Chrome

↓Safari

いよいよ、デザインがウェブサイトっぽい感じになって来ましたね。と同時に、ChromeとSafariのどちらでも同じイメージで表示されるようになりました。

…CSSであんなに長く書いたのに、この程度の装飾なのか!

と思った人もいると思います。それはまぁ、言葉で装飾を一つ一つ指示していくので、当然そうなります。英語ではなく日本語でもそうですよね。

「タイトルは太くして本文よりも1.25倍大きくして背景は白で余白は本文1文字分空けて薄い灰色にして文字の半分くらい下にずらして1文字分くらいボカシた影を付ける」

「リンクボタンは背景が白で下線は非表示にして色は水色で文字の太さはタイトルより少し細めの太字にして上下の余白は1文字分で左右の余白は2文字分にして角は1.5文字分丸くして文字と同じ水色を使って2ピクセルの太さの線で囲う」

などなど。日本語で書いても大変ですし、例えそれを英語で書いても大変なんです。ちなみにこれはスマホ版のコーディングなので、タブレット表示やPC表示にも対応しようとすると、さらに言葉の書き込み量が増えるワケです。

何となく、HTMLとCSSの関係性が分かって来たでしょうか?

実は作業画面も公開されている

普段は目にしないだけで、実はこの作業画面と同等のものはどのサイトでも見れる状態にあります。スマホやタブレットからでは難しいのですが、PCでウェブサイトを見ている最中に右クリックをすると表示されるメニューの中に、大抵どのブラウザでも「ソースを表示」というような項目が出てきます。

それを選択すると、先程の作業画面で紹介したような、このページを表示するために書かれている言葉の数々が別画面で開きます。試しに、今読んでいるこの記事のソースを表示してみてください。多分、頭が痛くなると思います(笑)。

最後に

以上のように、コーディングの実際の作業画面を見て来ましたが、いかがでしたでしょうか。今回の内容をまとめると、

ウェブサイトはHTML、CSS、またはその他の言語で書かれた言葉の羅列である」

ということです。日本語という言葉で説明しても大変なものは、ブラウザ用のコンピュータ用語で説明しても大変です。

コーディングのことを全く知らずにディレクション業を行なっている人は、今一度、「コーディング担当者は自分がデザインしていない初見の制作物を、ブラウザに言葉で伝えている。」ということを、認識しておく必要があるでしょう。頭の片隅にそれを意識しておくことでコーダーとの共通認識ができ、クライアントから修正内容を持ち帰る際には工数判断の手助けになるのではないでしょうか。

  • このエントリーをはてなブックマークに追加

コメントを残す

*