その線はdeviderですか？underlineですか？ 〜辻褄があったデザインとは〜
さてさて今日は１週間ぶりにウェブデザインについて書こうと思います。
ウェブデザインで頻繁に使用する線（ライン）について考えていきます。
はい、ただの「線」についての話です。
ウェブデザイナーは線一本にも、はっきりと意味を持たせる必要があります。また、それをうまく伝えるために日々頭を悩ませているんです。
たかが線、されど線なんですよね。
ではまず、こちらをご覧ください。
シンプルにテキストを線で区切った場合です。行と行のちょうど真ん中と、最上部・最下部に線を引いています。テキストと線の間隔は一定です。
ここでの線の役割はdevider（=区切るもの）と言えるでしょう。さらに最上部・最下部にも線があることで、区切るだけでなく囲みの役割も果たしていると言えるのではないでしょうか。
deviderと言うくらいですので、行ごとのテキストを区切りたい＝それぞれ別のものとして伝えたい訳です。
なのでこの場合、
・１行目のテキスト
・２行目のテキスト
・３行目のテキスト
・行を分ける線
という４つにグルーピングできます。
続いてはこちら。
最上部と最下部の線だけ消した場合です。こちらの線もdeviderですね。線の本数が減った分すっきりと見えますが、線自体の役割は初めの場合と変わりません。
では次に、この場合はどうでしょうか？
最上部の線だけ消した場合です。いかがでしょうか。何か違和感は感じませんか？
行と行のちょうど真ん中に線があるからdevider、と思いきや、最下部にも線があります。
これが辻褄のあっていないデザインだと私は考えます。
この場合、線をdeviderと言い切ることができません。上から１本目と２本目の線だけならdeviderと言えますが、３本目（最下部）の線はdeviderと言えるでしょうか？この画像内の要素だけで考えれば、答えはNoです。
最下部の線は、3行目のテキストと周りの余白を区切っている、とも言えますが、そうすると最上部にもラインが必要になってきます。
ではunderline（=下線）なのでは？と考えられるかも知れませんが、underlineなのであれば、その名の通り要素の下に配置されている必要があります。
↓こんな風に
線の役割がunderlineの場合であれば、
・１行目のテキストと１本目の線
・２行目のテキストと２本目の線
・３行目のテキストと３本目の線
という３つにグルーピングされる訳です。
要するに、先ほどの違和感を感じた場合は、このグルーピングがうまくいっていなかったことも相成って、辻褄が合わないデザインになっていたんですね。
↓（underlineなのであれば）赤い塗りつぶし部分が同グループなのに、テキストと線の間が空きすぎているから違和感
線の役割が変われば、配置の仕方も変わってきます。
「この線はdevider（区切るもの）だ！」もしくは「underline（下線）だ！」という風に、役割をはっきりとさせることで、細かい部分まで辻褄のあったウェブデザインにつながると思うのです。
今回の線についても、やはりこういうことが言えますね。
先述した違和感を感じた線の場合、deviderともunderlineとも言えない、言葉で説明しにくいデザインになっていたと思います。
なんとなくテキストを置いて、なんとなく線を置いて…という流れでなんとなくデザインをして、誰かからツッコまれた後に困るパターンですね。
自分のデザインを端的に言葉で説明できれば、自ずと辻褄もあってくるように思えます。
細かい部分まで神経の行き届いた質の高いデザインをしていきたいと考えつつ、明日からもまた線とにらめっこしていくのでしょう。
線さん、今後共お付き合いの程を。
