カテゴリー:デザイン

表示タイプ
リスト表示へ
ボックス表示中

CSS講座 - 目で見るボックスレイアウト

2008年1月20日 21:34

CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな? とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓

CSSのボックスレイアウトを家を例えに説明した図

すべてを家に例えるわけです。
まず、widthは「家の幅」、paddingは「庭の範囲」、borderは「家の壁の厚さ」、marginは「隣の家との距離」と。
そう説明した上で、「庭の範囲(つまりはpadding)は自分の好みが反映される(つまり背景)。そして自分の敷地は壁までの範囲(つまりwidth+padding+border)。そして隣の家との距離はmargin」

こう例えると、なんとなくpaddingとmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth+padding+borderとなる理由も、上記の説明でなんとなくイメージできるかなと。

そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ!とか、なんでもいいのでコメントもらえたら幸いです。

ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д`)

▼作ってみたツール(Javascript)
[ツール] CSS講座 - 目で見るボックスレイアウト(Javascript)

要素を近づける

2006年12月 7日 14:56

ちょっとやってしまった話。
仕事の話だけど、ひとつ、レイアウトの話があった。
あまり時間なく、わりと急ぎでやったもの、というのもあるがまぁ言い訳かな…。
色々とサイトを見て、自分の中でデザインを考え、どうしたらその情報を良く見てもらえるか。
それを考えて出した答えのつもりだったのだけど…。

先輩に見せてチェックしてもらう。が。
かなりのダメ出し(´;ω;`)
色々指摘されたけど、どれもが「なるほど!」と思うものばかりだった。
それも、知っていることばかり。

人のデザインを見て、あれこれ考えたり、注文をつけたりするのはやはり簡単なんだ、ってことだと思う。
実際、自分が作り始めると、どうしても自分の考えや主観が強調されてまわりから見たらどうか? という目がなくなってしまう。
また、分かっていること・知っていることでも、ふと忘れてしまっているときがある。
今回のことで、またさらに認識を深めなければ、と思った要素を列挙してみる。

  • 分かりやすく、を意識する。(意味的に近いものは配置も近づける)
  • 更新があり、毎回内容が変わるものに関しては、どの要素が入れ替わり、どう意味するのか、ルールを作ってデザインする。
  • 小手先の見せ方の変化、ではなく大局を見据えたデザインを心掛ける。
  • 複数案のデザインを見せる場合は、意味のある、デザインの差別化を図る。
といった感じだ。
どれも、一度や二度は目にしている法則だったりするし、以前はそれを意識しながら作成していたりするのに、それがぽろ、っと抜け落ちてしまっていた。

初心忘れるべからず、とはよく言ったもんだ。

デザインとは

2006年9月26日 13:46

とりあえず備忘録的に日記を使ってみる。
書いておかないといっつも忘れるからな…。

目立たせたい所をしっかりと目立たせる。
簡単なようでむずかしい。
どれを目立たせたらいいか、の選別も必要になってくる。


削るデザイン。


必要なものを残し、必要ないものを削る。
そうしてデザインを洗練させていく。
足すデザインになってしまうと、
最終的にごちゃごちゃしてしまい、
一体なにを言いたいサイトなのかが
わからなくなってくる。
わかっていたつもりだけれど、
気付いてみたらあれこれ足しすぎていた。

あれもこれも。

欲張らず、素直に表現したほうが
やはり見る方としても見やすいはずだ。

また、デザインに取りかかる前の行程として、
作るコンテンツに合うコンセプトを見つけること。
サイトを見ていて、素直に頭に入ってくるデザインに
仕上げるには、やはりそれを考えることが必要だと思う。
もちろん、中には意表をついたものもあるが、
それはやっぱり、基本がわかっていて、
それから外れるからこそ、意表がつけるのだと思う。