文章を綴るようなマークアップ

こんにちは。デザイナーのマツグと申します。ネット環境が日常的なものになり、以前に比べてWebデザインというものが特別なものではなくなってきているように思います。

しかし、そのなかでデザインするのは得意だけれど、コーディングには苦手意識を持っているという方も多くいらっしゃるのではないでしょうか？

コーディング、プログラミングは理数系？

個人的な感想ですが、デザインは文系、文化的な印象で肯定的に受け入れられるけれども、コーディングやプログラミングと聞くとどこか理数系、機械的な印象を受け、敬遠されがちな部分もあるのではないかと感じます。事実、自分がそうでした。

何より計算や数字が苦手で、そんな意識から「とりあえずちゃんと見えるように組めればいいや」と適当なコーディングに走ってしまい、マークアップを疎かにしていました。

しかし視点を変えて、コーディングを数式や設計図でなく文章のようにして、文学的な視点で見てみると今まで不可解だったものが結構すんなりと理解できるようになれるものです。

文章を書く行為として考える

Webサイトを組む際、見た目をどんなにきれいに飾ったとしても、人間のように目に見える具合でどこが見出しなのか、どこが本文でどこが画像なのか、コンピューターはその内容を理解をすることができません。

そこで「ここが見出しですよ」「本文はこれですよ」「リスト表示で説明をしていますよ」など、それぞれのコンテンツの意味合いを示すタグを組み込み、コンピューターにこのコンテンツはどんな意味をもっているのかを明確に教えることがマークアップです。

少し小難しく聞こえるかもしれませんが、シンプルに言い換えると「コンピューターを相手に、分かりやすく文章を綴る」ということだと思います。

詩や覚書を綴るのと同じような感じで、サイトの内容を説明する文章を書けばいいと考えると数式や機械が苦手な文系デザイナーの方々でも少し身近なものに感じませんか？

相手に向けた、簡潔な美しい文章を

テキストライティングやタイポグラフィーなどに言えるように、やはり文章は分かりやすく簡潔なほど美しいものです。マークアップに関しても同じことで、シンプルで的を射たソースコードは美しく、相手（コンピューター）からも信頼されます。

きちんと見出しの優劣（head）をつけたり、文章を段落ごとに区切ったり（paragraph）、解説表（list）や語彙の定義（definition list）などを的確に盛り込み、分かりやすく起伏に富んだ内容にすることで、小説やエッセイなどと同じように、内容の詰まった優良な文章だと相手（コンピューター）からより高い評価を受けるのです。

ソースコードもデザインする

文章だけに留まらず、一流のブランドとして確立されているものは、外見の美しさだけでなく内部の構造までもしっかりと気を配り、その品格を作り上げているものだと思います。

Webサイトにしても、構造を担うコーディングまでもがデザインと考えて作り上げるとより良いものになるのではないでしょうか。

コンピューターに向けて、美しい文章を綴る。優れた文章がキレイに書けると気持ちがいいように、キレイで整ったソースコードが書けるとやはり気持ちがいいものですよ。