WPサイトデザインのコツ(ちょっと知ろうCSS編)

前回、デザインカンプを受け取るコーダーが何を考えてWebサイトを作っているかについて、自分を参考に、お話ししました。今回はコーダーの主なお仕事である、CSSを書くこと、そのCSSについてちょっとだけ知ってみよう、というお話しです。

CSSは「Cascading Style Sheets(カスケーディングスタイルシート)」というもので、スタイルシートとも言ったりします。HTML文書に対して、人間の目に見える部分の「装飾」を一手に担っているデータです。

例えばこの見出しを実現しているCSSとは

この見出しは見出しレベル3<h3>というタグでマークアップされています。これに対しかけられているスタイルは以下のようなものです。


h3 {
font-size: 27px;
font-size: 2.7rem;
line-height: 1.1852;
margin-top: 2.3704em;
margin-bottom: 1.1852em;
}

フォントのサイズや行の高さ、上下のマージン(空白)などが設定されています。ですが、フォントの太さについての情報がありませんね。その記述を探して、CSSのファイルを上の方に遡ると、こんな記述がありました。


h1,h2,h3,h4,h5,h6 {
clear: both;
font-weight: 700;
}

見出しについて、各見出しレベルまとめて設定があります。回り込みを解除することと、フォントの太さについてです。文字の色については、ここにも書かれていませんが、さらに記述を遡ると、この文書全体を表す<body>タグについての指定で書かれています。


body {
color: #333;
font-family: "Noto Serif", serif;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
}

実際には、下記のような順でスタイルが記述されています。


body {
color: #333;
font-family: "Noto Serif", serif;
font-size: 15px;
font-size: 1.5rem;
line-height: 1.6;
}


h1,h2,h3,h4,h5,h6 {
clear: both;
font-weight: 700;
}


h3 {
font-size: 27px;
font-size: 2.7rem;
line-height: 1.1852;
margin-top: 2.3704em;
margin-bottom: 1.1852em;
}

<body>要素では文字の色、フォントの種類(ファミリー)の次に、フォントサイズや行の高さについての指定があります。文字色やフォントの種類についてはこのbodyに対して書かれた設定が反映されていますが、フォントサイズや行の高さについては、最後のh3について書かれた設定が反映されています。これがCSSの特徴と言えるカスケーディングの仕組みです。より詳細な指定で記載してあったり、元のものよりも後に記述することで、設定を上書きしていける一方で、特に指定がなければ親要素・先祖要素に遡って書かれているスタイルの設定が反映されます。

なので、最初の方に基本的な設定を書き、共通しているものはその設定を使い、特別な設定が必要なものを後回しに書いたり、詳細度をあげて記述することで、部分的に上書きしながら、全体のスタイルを書き上げていく、ということをしています。
つまり、レイアウトの中から共通項を見つけ出す作業をし、最初にまとめて書いてしまうということをやっています。なので、パターンを見出したり、共通できるものはまとめておきたい、というのがコーダーの頭の中には常にあるわけです。

カスケーディングの良さと難しさ

共通ものをベースにして、個別の設定をそのあとに書いていく、という基本の構造があり、効率よく書いていくというものの、ひとつのサイトに利用するCSSが3000行以上になることも珍しくありません。それらの構成を把握しながら、順序立てて書いていても、途中でスタイルが変更になったり、追加のレイアウトが増えて行ったり、などが繰り返されると、共通の部分がどこで、そのあとのどこでどう上書きされているかの関係性を見失ってしまう場合もあります。複数人で開発している場合には、ルールが必要にもなるでしょう。

全部それぞれ別々に書けばいいのでは?

身もふたもないですが、そういう風に考えることもできます。共通の部分など考えず、ひとつひとつ全て別々に書けば、思った部分だけを修正できるのではないか?しかし実際そういう風に書いたとするとCSSファイルはとても量の多いものになり、レイアウトに何か共通の修正が入った場合は、それぞれに直す必要もあり、手間がかかります。

これを避けるために、コーダーは共通部分はまとめたいと強く願うのです。

こういうのほんとありえない、、、になるわけですね。

Illustrator で文字のCSSを見てみる

CSSプロパティというウインドウパネルを出して、テキストを選択すると、そのテキストのCSSをみることができます。これらの積み重ねで、Webサイトはその形を成しています。

まとめ

CSSについてもっと詳しく知りたい方、書けるようになりたい方は、そのための教本を探していただくことにして、ここでは詳しく書きません(書ききれません)。以前、HTMLとCSSをちょっと書いてみる連載を書いたので、もっすごい基本的なマークアップやCSSの話をしているのでそちらをご覧ください。

次回からはもっと具体的な、デザインを作る時の考え方について書きます。

[ssba]

WPサイトデザインのコツ(コーダーの頭の中編)

Webサイトを作る時のデザイナの役割について前回書いてみました。今回は、デザインを受け取って実際に起こす作業をしているコーダーについて書きます。DTPもあとの作業である印刷の工程に知識のあることが作るものの質を変えるように、Webデザインも、デザイナのあとの工程にあるコーディングやそれを担う人が何を考えているか知ることで、デザインが変わると思っています。

デザインそれ自体も大事ですが、デザインカンプを受け取り、デザイナの思惑を読み取って、Webサイトとしての最終的な形を作る「コーダー」が何を考えて作業をしているのか、ちょっとのぞいてみたいと思います。

つまりは、私の頭の中か・・・・・。遊ぶことしかないようですけど。悪って何?

デザイナの意図を読み取ってデータにする

コーダーがデザインカンプを受け取って何をしているかというと、写真にもあるように、デザインデータから、CSSを書くためのあらゆる数値や情報を読み取ります。私はそれをデザインカンプをプリントしたものに、とにかく書き込んでおきます。あとから見返すことも結構多いので。WebサイトにするにはHTMLとCSSとでデザイン要素をデータに還元して、ブラウザが解釈して表示できるものに変換しているのです。また、画像データやアイコンなどのデータをデザインカンプから書き出す作業もします。

自動化できないの?

それができたらコーダーの仕事がなくなってしまう・・・・の、ですが、部分的に自動化することはできますし、試みられてもいます。Illustratorでは文字周りのCSSを書き出せるようになっています。それらを活用すると、コーダーの負担が減るかもしれないですね。

効率的にCSSを書きたい!コーダーの思い

Webサイトを仕上げていくとき、コーダーの頭の中には、こんな考えがあります。

  • CSSは後々でも管理しやすいように、わかりやすく簡潔に書くべき(なぜならWebサイトは繰り返し改善する=あとで修正の必要があるから)
  • HTMLに余計な要素を書くべきではない(マークアップにはルールがあり、正しく簡潔に書くことが求められている)
  • なるべく共通のパターンで整えたい、ルール化したい(そうしとかないとあとで分からなくなる)(毎回別々のレイアウトパターンのものを作るとかは手間である)

などです。
そんなコーダーをイラっとさせるのが、以下のようなこと。

こういうことがあると「デザイナーの気まぐれか?」「レイアウトはその時の気分かよ」「余白の取り方に一貫性とかルールとかないわけ?」などと、頭を抱えてしまうことになります。それでも、理由があれば、いいのです。「ここはこれまでの流れとトーンを変えて目立たせる必要があるので、フォントやレイアウトに差をもたせます」など、など。あればね。もしくは、本当に作るときに間違えてずれてしまった、とかならば、仕方ないのですが、問題は、読み取る方には「意図がある」のか「うっかり」なのかはっきりわからないことです。

話し合えばいい話。

デザインカンプだけから意図を探ろうとするのがまず、無理筋です。デザイナは、意志を持ってそのレイアウトを決めているなら、コーダーに向かって「見出しはこういうスタイル、空白は基本Xピクセルで、例外はどこのページのどの部分、本文サイズはどれぐらいで、行間はゆったりさせたいのでフォントサイズのX倍とっています」など、意図を伝えればいい。もしくはコーダーから疑問点を確認すればいい。ただし、社内ならともかく、デザインとコーディングを全く別の組織の人間が受け持つことも少なくないので、それらのコミュニケーションに手間がかかることもあって敬遠されるのかもしれません。
また、デザイナ側に経験やCSSなどの知識が乏しいと、何をどう伝えていいのかわからないこともあると思います。けれど、それを上手にするためには、まず一言伝えてみること以外に、上手くなる方法もないと思っています。

まとめ

デザインの後にあるコーディングのことに少し興味を持ってもらえたら何よりです。もしくは、効率だのパターン化だの、つまらん話だ、と思われましたかね?もちろん、デザインに素晴らしい意図が読み取れ、それがWebサイトを構成することに欠かせず、その効果を遺憾なく発揮してWebサイトの目的を達成するだろう、と信じられる場合には、こちらもやる気が出ますけど。なんとなくWFから指定された要素を組み込み、なんとなくこんなもんかで形にして、自分にだけわかるルールで整えて、それっぽくなったからOK?クライアントが気に入ればOK?で作ったものは、すぐわかります。コーダーだけじゃなくて、ユーザーも。
デザインデータをもとにせっせとそれを実現するのがコーダーの仕事ですけど、予算には上限が存在し、使える時間も限られている。しかも、一度作ってしまえば終わりではなく、何度も修正繰り返していく前提なのです。どんな細かい無茶振りな指定にも答えます!というわけにはいきませんからね。

わがままデザインにならないようにするには、何をポイントに考えればいいのか、このあとの回で書いていきたいと思います。

[ssba]

WPサイトデザインのコツ(はじめに)

また、連載を始めます。今度は、デザインの話。

私ごとですが、こないだツイッターを見ていたら、「CSS書ける人:Webデザイナー」という分類がされていて、捨てたはずの「デザイナ」という肩書きがまた自分に舞い戻ってきて苦笑しました。ウェブサイトの最終工程である「コーディング」をメインの仕事にしようと思った時に、デザインからは距離を置こうと決めたんです。なかなか離れられないのもほぼ業だなと(笑)。

ここでいうところの「Webデザイン」は直接CSSを書くことがなくても、むしろコーディングとか全然わからないけど、ウェブサイトの見た目を作ることがある、ウェブサイトのデザインをやってみたい、という方に向けて書きます。WPサイトデザイン、と題していますが、もちろんそれに限らず使える話なので、自分の作るWebデザインをもうちょっといいものにしていくにはどうしたらいいか?と思う方は是非読んでいただければと思います。
WPサイトの、どちらかというと設計について知りたいという方は、ちょっと前に書きましたので、そちらを参考にしてください。

Webサイト制作における「デザイン」の立ち位置

広義のデザインは、Webサイトの制作全ての段階で出てくるのですが、今回はとにかく見た目のデザインというところで、この「デザイン」という言葉を使います。

  

Webサイトには明確な目的があり、それを叶えるために、機能を検討し、その機能が正しくユーザーに認知されるように「見た目として表現する」のがWebサイトにおける「デザイン」の役割です。Webサイトは基本的に「文書」なので、それを見る人にとって情報が伝わりやすく、魅力的に見せることも、「デザイン」の役割です。機能の役割を示す「ビジュアル」であり、伝える情報を表現する「グラフィック」の両方を備えています。

サイトの目的と
デザインする個別のページが持つ役割を
正しく理解していなければいけない

Webサイトの制作における「デザイン」の役割を考えると、少なくともサイトを作る目的を理解し、可能ならビジネスモデルや収益モデル、ユーザーがどのように行動するのが理想的なのかを理解して、それをWFに見られる文書をもとにページの役割を理解してデザインに臨む必要はあろうかと。かといって、ディレクタが丁寧にその辺りの事情を説明しているのかは、わからないのですが。
デザイナ自身がコードを書かない場合、制作の過程でいうとデザイナの下流にいるのがコーダーです。私です。
私の元には、デザイナさんが描いたデザインカンプが元データとして渡されます。その時に、「どの辺がリンクとして機能するのか」「これはどこをどう操作するのか?」「このページを見た時に、ユーザーに促される行動は何か?」さっと理解できなくて首をひねってしまうことがあります。そういうデザインのサイトをそのままの見た目で作ってサイトに仕上げて公開したら、ユーザーも同じように首をひねってしまうかもしれませんね。

完成したら終わり。ではない!
Webサイトの「なんとか」サイクル

Webサイトは作って終わりではなく、成果を確かめながら、変化し続けるユーザーのニーズに対して改善し続けて行くことが「できる」媒体です。紙の本は一度出版され、読者の手に渡ったものを変更することはできません。読者が「この本は知りたい情報をすっかり得てしまった」と思って手放そうとする時(ニーズが変化した時)に「待って!また新しい情報載せるから!」ということはできません。でも、Webサイトならできます。なので、Webサイトは繰り返し改善します、すべきなのです。ここで出てくるのが、そうです、よく聞く「なんとか」サイクルです。

なんていうんだったか忘れて出てこなかったので、某大手検索サイトで検索したら、教えてくれました。あほな質問に、なんという親切な対応!神ってる!!
PDCAサイクルについては、よく聞くものだともうのでここでは特に取り上げません。実際のWebサイト制作のフローでどのようなタスクとして出てくるのかについて知りたい場合は、『ノンデザイナーでもわかる UX+理論で作るWebデザイン』のP17〜19あたりを参照ください。UXデザインサイクルについても読むといいと思います。

まとめ

Webサイトの制作においてデザイナさんに求められる役割がわかっていただけたかと思います。でも、これって、印刷物の制作とかと、そう大きく変わるでしょうか?目的を理解して伝えるべき情報を揃えて整理し、わかりやすく配置し、魅力的に見せる、そのことは同じだと思います。
違うといえば、見た目を作った後に、コーダーがそれを解釈してHTMLとCSSに起こすため、自分の思うようにならないことがあるのは確かですが。また、Webサイトには動きや機能があるので、その部分は「わからない、難しい」と感じるかもしれないですね。
本来ディレクタと話し合ったり、もっとコーダーとも相談して進めるのがいいと思っています。相互理解、大事です!

[ssba]

ウェブサイトは何でできているか(wdt連載1)

実は意味不明の文字ばっかりなんです・・・・・

ここで、「ウェブサイトはHTMLとCSSとJavascriptでできています!」と、迷わず即答できた方は、途中を読み飛ばしても大丈夫です。(お時間ありましたら、最後の方だけ読んでいただければ幸いです。)

厳密には、バックエンドにあるものとか、色々あるんですけれども、とりあえず、この記事では「見える範囲のこと」でお話進めさせていただきます。

文字ばっかり?しかも意味不明の??
なんのことですかそれは、と思った新人デザイナーの方、すみません、今回は、デザインの話よりも、ウェブサイトが何でできているか?という話です。でも、これを知っているのと知らないのとでは、今後の仕事のしやすさに、質に関わってくるので、もうしばらく、辛抱してお付き合いください。

あ、この先食べ物で例えるので、お腹の減っている方は閲覧注意です!

では「カレー」に例えてみましょう

唐突ですね。いつかの私の朝ごはんです。
カレーがウェブサイトある1ページだとしたら、HTMLとCSSとJavascriptって大体どの辺りのことだろう、というのを例えてみたいと思います。

玉ねぎ、ニンジン、ジャガイモ、肉(つまり具材):HTML
カレーのルー:CSSやJavascript

ざっくりですね、はい、ざっくりです。
この話の、何がツボかというと、同じHTMLでもカレーのルーにあたるCSSやJavascriptを変更すると、別の見た目に変えることができるということです。シチューのルーに変えたり、醤油とかみりんに変えれば和風に、というふうに、見た目や振る舞いが変わります。
でも、具材であるHTMLは、一緒。

余談ですが、出来上がったものが、カレーなのかシチューなのかぐらいは、人工知能のようなものでも判断できそうですけど、美味しいかどうかは人間にしか判断がつかないんじゃないかなあ、と思っています。カレーのルーを入れたら大体美味しくなる、っていうのが現実かもしれないですけど、本当のところの「美味しい」を決めるのは、具材自体が美味しいのが一番であろうな、と思っています。

HTMLってなんですか?

具材になるHTMLというものがどういうものか、ウェブサイトを見ながら、割と簡単に見てみることができます。

ウェブサイトを開いて、ページ上で右クリックします。すると、「ページのソースを表示」というような内容のメニューがあるので、それを選びます。

すると、下記のような、文字列が表示されると思います。

これが、HTMLです。何この呪文・・・・と若干引いても仕方ないです。意味がわからなくても構いません。最終的に完成したウェブサイトが、こういうものでできているということを覚えておくだけで、今のところ大丈夫です。
とはいえ、もう少しだけ、分かりやすそうなところを選んでみますね。

このページを見てみます。http://www.ccc-labo.net/blog/2016/02/post-156/

画面左側が、実際のサイトの表示で、右側がHTMLです。
左側に見える記事のタイトルや本文部分が、右側にあるHTMLに同じ部分が探せますでしょうか?

こんなふうに書いているHTMLが、CSSやJavascriptで味付けされて、ウェブページに仕上がっていく、というわけです。

CSSやJavascriptを見てみる

HTMLに比べて、CSSやJavascriptを実際のサイトで見てみるには、少々技が必要なのですが、細かいことなので今回は省きます。

CSSはこんな感じです。

ウェブサイトの見た目のほとんどはHTMLをCSSで装飾することでできています。
この画像に書かれているのはほんのわずかのことで、CSSは全体のレイアウトや、カラーリング、枠線、角丸やドロップシャドウなど細部の装飾も引き受けています。

Javascriptはこんな感じです。

これは、スマホで見たときに、メニューを右からスライドして表示させる部分のスクリプトです。Javascriptはこのように、ボタンをタップしたときに動いたりアクションをさせる、スライダーを動くようにする、などユーザーの操作に従って何か動く、変わる、という部分を引き受けています。

これを書くのはとても無理だ!・・・・と思って、正解です

デザイナーを目指している方にとっては、無理で当たり前です。これを書けるようになるというところを目指す必要はありません。別の仕事ですので。ちなみに、この記事を書いている私は、このわけのわからん文字列を書くのを仕事にしている人です。

でも、最終的にこういうものになって公開されている、ということだけは、ぜひ知っていてください。と、同時に、ウェブサイトを作るというとき、デザインというものは、とても、とても大事ですが、それだけでウェブサイトが出来上がるわけでは絶対にないということをわかっておいて欲しいです。

こういう文字列を書いてウェブサイトを仕上げる人を、コーダーとかフロントエンドエンジニアとか、言います。今回は話に出ませんでしたが、ウェブサイトを作るには、その裏の仕組み(フォームの送信だとか、管理画面を作って記事を投稿できるようにするだとかいうもの)を作る人がまた別にいて、それらはバックエンドとか呼ばれ、また専門的な知識を持つエンジニアさんやプログラマさんがいらっしゃいます。
さらにさらに、ウェブサイトを公開するためには、サイトにアクセスするためのアドレス(ドメイン)を取得・管理したり、ウェブサイトを公開する場所(サーバー)を借りたり、など、など、いろんなことが関わっています。

ウェブサイトは分業で成り立っている

デザイナは、これまでに挙げたことに、関わることもあれば、関わらないこともあるでしょう。けれど、ウェブサイトを作って公開するまでには、何が必要で、何を考えなければいけないか?ということぐらいは、知っていて損はありません。
この連載は、それを知る助けになるように、書いています。

デザイン以外のところは、誰かに頼むしかないのがウェブサイトの制作です。そのときに、相手がどんなことをしている人なのか、全く知らずに頼むのか、概要の概要ぐらいはわかっていて頼むかでは、頼まれた人の対応も違う、ということをわかっていて欲しいです。
ですが、周りを見渡すと、コーディングやプログラムについて知っているデザイナさんはほぼいませんし、もちろん、コーダーやプログラマもデザインについて知っているとは言い難いです。それぞれの立場の人が、もう少し視野を広げて自分の分野以外のことも、多少は、知っているのがいいんだろうな、というのが常に思っていることです。

ですが、それがとても難しいことも、よく知っています。
デザインも、コーディングも、プログラムも、それぞれの分野がとても底の深い世界で、勉強しても次々新しいものが出てきて、また勉強し直さなきゃならない、という世界ですので。

デザインとウェブサイトは対象の本質に迫るもの

さらに言うと、デザインそれ自体が、対象とするものに深く切り込んでいくものであるように、そのデザインを体現するウェブサイトも、対象に深く切り込んで出来上がるものだと思っています。
対象が、例えば企業であれば、その企業の成り立ちややってきたこと、これからのこと。ブランドやサービスであっても、それらの本質をつかむことから始まるのではないかと思います。そうなれば、経営やビジョン、戦略といったものと、デザインやウェブサイトが切り離せないことも、意識していただけたらと思います。ウェブサイトに、マーケティングや企業戦略という言葉がついて回るのは、そのためなのです。

ウェブサイトは何でできているか?

最初に、ウェブサイトはHTMLとCSSとJavascriptでできていますとか、書きましたが、それだけではないということも、おわかりいただけたかと思います。

デザイナであれば、ウェブサイトの見えるところだけを扱えばいい。そういう考え方も、もちろんあるでしょうが、ぜひ、発想を逆にして欲しいと思います。

今から作ろうとするウェブサイトは何でできているか?

具材、という話をしましたが、調理すべき具材とは何でしょうか?企業サイトであれば、その企業はどんな具材なのか?何を伝えなければならないのか?その為には、どんな料理に仕上がっていけば美味しさを伝えられるのか?これは、いつ、どこで、どのように伝えられれば、ユーザーにとって最適なのか?考えるべきところは、実はそういうところにあるのではないかと思います。

今すぐでなくてもいいですが、良いデザインは、深いところから表層へ向かっていくような流れで、作られていくものかなあ、と思います。

小難しくてすみません・・・・

連載の第1回目から小難しい話でした。このように、こ難しい話もしますが、わかりやすーい、明日からすぐ使えそうな話も、この先、しますので、ぜひこの連載にお付き合いください。

[ssba]