画像の使用を極力控えてかっこいいCSSデザインをやってみようというコンテストに参加してみました。参加して感じたこと思ったことなどを自分スタイルですが、ちょこっと文章にしてみました。よかったら読んでみてください。
ＧＷに画像の使用を極力控えてかっこいいCSSデザインをやってみように参加してみました。
今回のエントリーはこちらシンプルなさゆりふりかけスタイル
マークアップの制限があって難しかったですね。特に"大会の参加要項"のブロックで"部門別のルール"の枠組みでのコンテンツとマークアップの絡みが面倒に感じました。内容的には同じ位置づけに感じましたが、マークアップは
<h6>画像使用の制限</h6>と<p>画像は一切使用してはいけません。</p>となっている部分で、マージンが取れなかったとい点ぐらいです。
驚いたのは、自分が参加した際にはなかったエントリーでほとんど同じような成形をされていた方がいたのが驚きました。Tripletほとんど似ています。びっくりです。自分も今回の参加の狙いは、他の方のウィークポイントで差をつけようと思ったのですが、この方も同じような点に気をつけられていたのでびっくりしました。同じような意見をお持ちの方もいてちょっと安心もしました。
コンテストの趣旨
今回のコンテストの趣旨は、題材である公式HTMLのコンテンツにも書かれている内容です。いろんな受け取り方をしている方がいて、エントリーされているページもさまざま。
私の受け取り方が間違っているのかもしれませんが、以下の内容が趣旨であると思い、それに沿ってデザインしてみました。
ボーダーに頼らず、スペースと見出しのバランスのみでも、美しいデザインが出来ること
実際のところ、ボーダーなしは避けれなかったです。
自分が考える読みやすい文章
WEBでの読みやすさは、人それぞれ異なります。「読みやすい文章は・・・」なんて、語れる分際ではないので自分スタイルで気がついた点を取り上げておきます。
今回の私のエントリーは、1コラムデザインでしたので、以下の点において読みやすさという点を注意してみました。
- 見出しのフォントスタイル・カラー
- テキスト（パラグラフ）での文字間
- パラグラフ間でのスパン
- テキストをメインに考えた縦線
- コンテンツと全体とのカラーバランス
一番悩んだのが、コンテンツと全体とのカラーバランス
これはそのコンテンツ全体の中で重要な部分をどういったバランスで目立たせるかなんてことです。コレのおかげで全体のカラーバランスを考える羽目になり、少ない色数で作ろうと考えていたのに後半にかかってえらい時間を食いました。まだ、イマイチといった感が残っているところです。
テキストをメインに考えた縦線
他の方のエントリーを見ているとこの部分がウィークポイントかと思いましたので、取り上げてみることに。
自分が考える読みやすい文章は縦のラインが揃っていることと思います。テキストを中心に縦のラインをそろえるとユーザーも文字を追うのに苦労しなく、読みやすい文章に。
こんなことを取り上げておいて、実際自分の場合、後からから気がついたのですが、2箇所揃っていない点があって、今修正したいと思っています。
どんなことかというと例えを以下の画像で説明。（画像クリックで拡大）
今回自分の場合は、ボーダーでリスト部分を揃えてみました。
ボーダー無しで考えた場合、以下のような感じになります。ちょっと凸凹になります。ついでに見出し部分も凹んでいるとちょっと変ですね。
ボーダー無しにするなら、やっぱり縦のラインを揃えた方が読みやすいと思います。
見出し部分が凹んでいたり、テキストが出っ張っていたりといろんなエントリーをみかけました。読みやすさを求めるなら縦のラインは大切であると感じました。
ＤＴＰで活動されている方・されていた方なんかは、よく理解していると思います。文字詰めや空白のとり方・縦のラインを揃える。WEBデザイナーの方たちでこういったことをあまり、重要視していない方が多いと感じる今日この頃です。イラストレーターであれば、とっても簡単な作業ですが、CSS+HTMLは難しいですね。自分もそうですが、コーディングテクニックにとらわれるばかりに、大切な部分を見落としてしまいます。
今回参加してそんなことを痛感しました。いい勉強になりました。
もうひとつのコンテストもありましたが、なんか主催者側の思惑がみえみえなので釣られるのもアレだし。こっちのコンテストの方がいろんな意味で勉強になるかと思い参加しました。
時間のある方は参加してみてはいかがですか？私ももう一つエントリーしてみるつもりでいます。詳細は以下をご欄ください。
- 画像の使用を極力控えてかっこいいCSSデザインをやってみよう
- http://www.jam-graffiti.com/non-pic-css/
コメントする