お昼ごはんは麺が好き。
こんにちはキイチです。
比較的朝ごはんはしっかり食べていると思うのですが、お昼になるとお腹が空きます。
お腹が空いているのですが、お昼ごはんは手早くすませられる麺が好きです。
特にラーメンが好きで、お気に入りは味噌ラーメン。
お気に入りのお店の味噌ラーメンを食べると、何となくその日は充実します。
私の幸せはラーメン一杯で賄います。
私はあまり調べてからお店に行くということをしません。ラーメン屋さんも調べません。
何故かというと、何を食べても美味しく感じるし、頻繁に新しいお店に行くわけでは無いからです。
逆にウェブ関係の仕事は調べることがとても多いです。
考えて、手を動かして、調べて、考えて、手を動かして、調べて、考えて…。
こんな感じです。
特に調べる作業は毎日している気がします。
なんだったら一日中調べものをしています。
Google先生に尋ねたり、本を読んだり…。
何を調べているのかというと、デザイン全般に関することはもちろん、HTMLやCSS、他にはJavaScriptにPHP他。
流行や、UI/UXに関する情報も出来るだけ新しいものをインプットしないとならない職業だと思います。
そんな中でも、HTMLとCSSは現時点のウェブデザイナーであれば必須だと思われます。
私はデザイナーでもプログラミング、コーディングは出来たほうが良いと考えています。あくまでも『出来たほうが』です。
特にHTMLとCSSは、ある程度解っていないとレイアウトする際に完成が想像がしづらいのではないでしょうか。
そう考える理由は、インターネットという環境が大きく関わってきます。
現在当たり前のように私達の周りにあるインターネットとデザインがどう関わるのか考察しました。
インターネットとデザイン
まるで蛇口を撚ると湯水が出てくるように、インターネットでは時間場所を選ばず情報を引き出せるようになりました。
情報インフラとして当たり前に存在し、あらゆる「モノ」を介してインターネットに接続できるようになると「モノ」の価値も形も変化していきます。
我々が水を利用するために水道の末端として蛇口があり、水を利用したお風呂であったり、トイレであったり、使用用途に合わせて様々な形にデザイン・設計されています。
さらに言えば、水を持ち運ぶための水筒やペットボトル、遊ぶための水鉄砲も水の流れの末端といえるでしょう。
水の話を情報に置き換えると、パソコンはもちろん、スマホ、テレビ、近年では自動車や家、あらゆるものが情報の流れの末端として置き換えられます。
当記事は主にパソコンやスマホで閲覧するウェブコンテンツのデザインに関する調査と個人的見解なので、自動車や家などは多少違いはありますが、情報端末のインターフェースをデザインする、情報をデザインするという意味で少々取り上げてみました。
ウェブデザインについてWikipediaの項目に下記のように定義されています。
ウェブデザインの内容は、ウェブサイト全体の情報設計、見た目を中心とするグラフィックデザインやGUIの設計、ウェブアプリケーションのUI設計構築など多岐に渡る。
ウェブデザイン – Wikipedia
あくまでも理想ですが、本来ならこれに具体的なマーケティングの要素も含めて、素材である情報を設計構築することが、ウェブデザイナーの仕事では無いでしょうか。
情報をどのように適切に閲覧者、エンドユーザーへ伝達するのか、情報を受け取ったユーザーの動向も想定したUI/UXを考えることになるでしょう。
そのUI（特にウェブコンテンツ）を構築するために、現時点ではHTMLとCSSは必要です。
HTMLとは何なのか
HTMLは1989年にティム・バーナーズ＝リーさんが提案、1990年に実用化され、改修され続け、現在はHTML5（2021年2月現在）です。
最初は研究員のデータや文献、論文を相互に参照しあうために作られたものだそうです。
HTML (Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)は、 Web サイトのコンテンツに構造を指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。タイトルが示すように、この記事では、HTML とその機能の基本的な理解ができるように説明します。
HTML の基本 – ウェブ開発を学ぶ | MDN
HTMLはプログラミング言語ではなく、マークアップ言語です。
マークアップ言語とは、見た目や文章の構造などを記述するため、それぞれの要素の文法や意味を形式的に与えられた言語です。
HTMLにおいては、要素の意味に合わせたタグと呼ばれるもので要素を括り、それらを記述（マークアップ）するものです。
例えば、大見出し「h1」の場合以下のようになります。
<h1>HTMLとWEBデザイン</h1> → 大見出し
しかし、同じ内容でも<p></p>というタグで括られると段落という意味になります。
<p>HTMLとWEBデザイン</p> → 段落
以上の内容は、文章の大見出しと段落に関してですが、当然他にも小見出しが「h2〜h6」まで、「p」は段落、リンクタグは「a」など要素に合わせたタグが存在します。
他にもタグで括らず閉じタグの無い、画像を表示する「img」他があります。
それらを組み合わせて、ウェブページが構築されます。
HTMLとウェブデザイン
私は、HTMLについてウェブサイトを構成する材料の１つ、建築物でいうと木材等の材料のようなものと捉えています。
理想とするウェブコンテンツ「家」があり、ヘッダ「天井」を構成するためのHTMLタグ「木材・材料」を用いて、その家に住まう人の生活を想像し括る感じでしょうか。
私がウェブデザイナーでもHTMLとCSSの構築が出来たほうが良いと考えるのは上記のような家とウェブコンテンツの仮定が成り立つからだと考えているからです。
建築設計する際でも、完成した家で生活する人を想像しながら、床や壁につかう材料を考え設計するのではないでしょうか。
同様にウェブコンテンツの見た目を設計するのであれば、文章を構成する要素の意味に合わせたHTMLソースコードを、ある程度想定ながら考えたりすることがあります。
少なくとも一昔前（10数年位）まではそうしなければ、いざコーディングの際に、面倒だったり、ウェブブラウザ間で表示の相違が生まれたりと作業が大変だった記憶があります。
ウェブブラウザ戦争なんていわれた頃も今となっては大昔となり、表示の差異も少なくなりHTMLも変化（進化？）し、CSSやJavaScriptの関わりも大きくなったことで、前述にあるほどHTMLソースコードを想像しながらデザインしなくても、大抵のことは可能になったとも言えます。
しかし、CSS等で味付けする以前の土台としてマークアップすることを前提としたUIのデザインを構築することは重要であり、コーディングを他者に委ねるのであれば尚の事だと考えます。
ウェブコンテンツではヘッダーにはheaderとか段落にはpとか、大まかに文章を構成するうえで必要になる要素はタグとして用意されていますが、中には何に属するのか分かりにくい要素があります。
それらの要素をdivで括るかspanで括るか、imgにするかfigureにするか、メニューを作成するさいにもulでリスト形式にするか、場合によってはdlにするか他、こういった状況によく直面します。
前述にもありましたが、建築物がウェブサイトとすると木材等の材料はHTMLとCSSと例えました。
建築デザイナーが建物を設計する際、所々で利用する材料となる木材などの性質をある程度、理解するようにウェブデザイナーも所々で利用するHTMLタグの性質をある程度は理解する必要があるのではないでしょうか。
意味のあるデザイン、意味のあるソース
ウェブページなどのウェブコンテンツを制作する際、そのデザインには意味があるべきだと考えます。
私が過去、そのように学んだからとも言えるのですが、意味が無いなら不要な要素ではないかと感じてしまうからです。
それは空間、白いスペースもその要素の一つです。
意味というのは、その要素の存在意義のことです。
例えば、人物が右を向いている画像があるとして、その人物の目線（この場合だと右）の先に物体があるのであれば、その物体が何かしら意味・意義（売りたいもの、知ってもらいたいもの等）のあるものでなければ、その画像ひとつで何を表現したいのか、何を言いたいのかわからなくなります。
それは空白・空間でも同じで、目線の先に見えてくる事象を想定して画像一点のデザインをします。
さて、そのデザインされた画像をどのようにしてHTMLに記述し、CSSで体裁を整えましょう。
素材としての写真を例にとって考えます。
ここに至るまで関わった人の意図が全て表現出来た写真が撮影できたのならば、写真一枚をウェブに最適化したファイルをimgタグで配置することが出来るでしょう。
ところがそうそう簡単にはいかないし、迫る納期、想定外の「鶴の一声」等のイレギュラーで理想の工程を順にこなせることは稀です。
例えとして、私が制作上のイレギュラー等を考慮したデザインとコーディングをしているのか少し思い返してみました。
- z-indexを意識する（重ね合わせコンテキスト、スタックコンテキスト、スタックレベル）
- 重ねたレイアウトを避ける
z-indexを意識する
当たり前なのですが、素材の重ね合わせがあることを前提に、素材の前後を想定しながら設計します。
背景用から最前面まで配置する要素を意識してデザイン、コーディングするということです。
そもそもウェブに限らず、グラフィックデザインは与えられた、又は自ら創造した素材をコラージュ（フォトモンタージュ）というオーサリング作業で一つにまとめることが、メインの作業になると考えます。
重ねたレイアウトを避ける
逃げの方法になりますが、はじめから重ねてレイアウトすることを避ければ、場合によっては重ね合わせコンテキストを意識することなくコーディングを行えるかもしれません。
意味のない重ね合わせなら、設計の段階から組み込まなければ良いだけのことです。
作業工程として後のことも考えながらとなると、大まかに、この2点が挙げられました。
もちろんこの2点が全てではなく、実際にはこれ以上に多くのデータを含めて、画像作成をしています。
ウェブデザインでは、この一つにまとめられたデザインデータをコーディング（HTML、CSSで記述）します。この時点で重ね合わせコンテキストは考慮されているので、ここからは本を書き写すように、ただただコーディング作業を淡々と行います。
コーディングは淡々とこなしますが、可能な限り後々のことを考えたソースになるようにしたいです。
自分は初期制作のみで、運用・管理は他者になる場合、会ったことの無い人にも分かりやすソースになっていることが望ましいと考えます。
クライアントは見た目が思ったとおりになっていれば、ソースがどうなっていても基本的には興味が無いです。
しかし、サイトの管理者やソースを改変・記述する方からすると、分かりやすくなっていることがモチベーションにも関わってくるでしょうし、ヒューマンエラーの原因を少なくする一つになると考えられます。
まとめ
世界最初のウェブデザイナーはティム・バーナーズ＝リーであったと言える。彼はWWWを発明し、1991年に世界初のウェブサイトを立ち上げた。
ウェブデザイナー – Wikipedia
繰り返しますが、デザインは設計です。
設計とアートは別のものであり、乱暴な分け方をすると設計には客観的な理由があり、アートは感性からくる主観的な理由付けがあると推察します。
客観的理由とは過去の統計から算出したデータ、人間工学などの学問・研究に基づくデータ、後は様々な経験から導かれるデータなどがそれに当たるのではないでしょうか。
経験がデータというとアートの感性に近いものがありますが、ちょっと違います。それを記事にすると長くなりそうなので、気が向いたら別の記事にします。
インターネットが情報インフラとして私達の周辺にある様々なモノが繋がり、IoTという言葉が生まれ当たり前となりました。
その中にあってウェブデザインの役割は、サイトオーナーの希望に沿った情報を伝え、ウェブコンテンツを利用するユーザーが望む情報を、望んだ形で得られることを手伝うことで、どちらにしても人が使う道具であると思われます。
ウェブコンテンツは人が「使う」道具であるならば、それを作るウェブデザイナーはある種、職人であり、であれば製作するための道具と材料にある程度こだわりと知識が必要なのではないでしょうか。道具というのは、PCであり、ソフトウェアを指しますが、材料は素材としての写真であったりイラスト、組み立てるためのHTML、CSS、JavaScript等が言えると考えます。
参考：ウェブデザイン技能検定 | ウェブにかかわる全ての人のための、国家検定
参考：IoT とは？ (Internet of Things – モノのインターネット) | AWS