CSSデザインコンテストに参加してみて感じ思ったこと

GWに画像の使用を極力控えてかっこいいCSSデザインをやってみように参加してみました。

CSSデザインコンテストに参加してみて思ったこと-entryfile_gif

今回のエントリーはこちらシンプルなさゆりふりかけスタイル

マークアップの制限があって難しかったですね。特に"大会の参加要項"のブロックで"部門別のルール"の枠組みでのコンテンツとマークアップの絡みが面倒に感じました。内容的には同じ位置づけに感じましたが、マークアップは

<h6>画像使用の制限</h6><p>画像は一切使用してはいけません。</p>となっている部分で、マージンが取れなかったとい点ぐらいです。

驚いたのは、自分が参加した際にはなかったエントリーでほとんど同じような成形をされていた方がいたのが驚きました。Tripletほとんど似ています。びっくりです。自分も今回の参加の狙いは、他の方のウィークポイントで差をつけようと思ったのですが、この方も同じような点に気をつけられていたのでびっくりしました。同じような意見をお持ちの方もいてちょっと安心もしました。

コンテストの趣旨

今回のコンテストの趣旨は、題材である公式HTMLのコンテンツにも書かれている内容です。いろんな受け取り方をしている方がいて、エントリーされているページもさまざま。

私の受け取り方が間違っているのかもしれませんが、以下の内容が趣旨であると思い、それに沿ってデザインしてみました。

ボーダーに頼らず、スペースと見出しのバランスのみでも、美しいデザインが出来ること

実際のところ、ボーダーなしは避けれなかったです。

自分が考える読みやすい文章

WEBでの読みやすさは、人それぞれ異なります。「読みやすい文章は・・・」なんて、語れる分際ではないので自分スタイルで気がついた点を取り上げておきます。

今回の私のエントリーは、1コラムデザインでしたので、以下の点において読みやすさという点を注意してみました。

  • 見出しのフォントスタイル・カラー
  • テキスト(パラグラフ)での文字間
  • パラグラフ間でのスパン
  • テキストをメインに考えた縦線
  • コンテンツと全体とのカラーバランス

一番悩んだのが、コンテンツと全体とのカラーバランス

これはそのコンテンツ全体の中で重要な部分をどういったバランスで目立たせるかなんてことです。コレのおかげで全体のカラーバランスを考える羽目になり、少ない色数で作ろうと考えていたのに後半にかかってえらい時間を食いました。まだ、イマイチといった感が残っているところです。

テキストをメインに考えた縦線

他の方のエントリーを見ているとこの部分がウィークポイントかと思いましたので、取り上げてみることに。

自分が考える読みやすい文章は縦のラインが揃っていることと思います。テキストを中心に縦のラインをそろえるとユーザーも文字を追うのに苦労しなく、読みやすい文章に。

こんなことを取り上げておいて、実際自分の場合、後からから気がついたのですが、2箇所揃っていない点があって、今修正したいと思っています。

どんなことかというと例えを以下の画像で説明。(画像クリックで拡大)

今回自分の場合は、ボーダーでリスト部分を揃えてみました。

テキストをメインに考えた縦線sample0001_gif

テキストをユーザーに読ませるのであれば、それを中心にして縦のラインを伸ばして、すべてのパラグラフをそろえた方が読みやすいかと思います。見出しは、各パラグラフの頭だしになるので、ちょっとはみ出して目立たせた方が、ブロックごとでのコンテンツの位置づけを視覚的に判断しやすくなります。

ボーダー無しで考えた場合、以下のような感じになります。ちょっと凸凹になります。ついでに見出し部分も凹んでいるとちょっと変ですね。

テキストをメインに考えた縦線-sample0002_gif

ボーダー無しで考えた場合、すべての文章のラインが凸凹してしまい、なんか読みにくいものになってしまいます。見出し部分も下のパラグラフよりも出ていたほうがいいかと思います。もしくは揃えて、文字の大きさやフォントスタイルを変えてメリハリをつけるのもいいかと。

ボーダー無しにするなら、やっぱり縦のラインを揃えた方が読みやすいと思います。

テキストをメインに考えた縦線sample0003_gif

できるだけ、縦のラインを気をつけてあげることでコンテンツは読みやすくなります。

見出し部分が凹んでいたり、テキストが出っ張っていたりといろんなエントリーをみかけました。読みやすさを求めるなら縦のラインは大切であると感じました。

DTPで活動されている方・されていた方なんかは、よく理解していると思います。文字詰めや空白のとり方・縦のラインを揃える。WEBデザイナーの方たちでこういったことをあまり、重要視していない方が多いと感じる今日この頃です。イラストレーターであれば、とっても簡単な作業ですが、CSS+HTMLは難しいですね。自分もそうですが、コーディングテクニックにとらわれるばかりに、大切な部分を見落としてしまいます。

今回参加してそんなことを痛感しました。いい勉強になりました。

もうひとつのコンテストもありましたが、なんか主催者側の思惑がみえみえなので釣られるのもアレだし。こっちのコンテストの方がいろんな意味で勉強になるかと思い参加しました。

時間のある方は参加してみてはいかがですか?私ももう一つエントリーしてみるつもりでいます。詳細は以下をご欄ください。

画像の使用を極力控えてかっこいいCSSデザインをやってみよう
http://www.jam-graffiti.com/non-pic-css/

トラックバック(0)

このブログ記事を参照しているブログ一覧: CSSデザインコンテストに参加してみて感じ思ったこと

このブログ記事に対するトラックバックURL: http://weblibrary.s224.xrea.com/x/mt/mt-tb.cgi/253

コメントする

アイテム

  • ff-logo-big

    ff-logo-big: firefoxロゴ

  • fmtube_image

    fmtube_image: fmtubesキャッチイメージ

  • mock.jpg

    mock.jpg: fm+tubesのモックページ(デザインレイアウト)。最終的にはこのスタイルでマルチブログで展開してみる構想。

  • mtdeinfo

    mtdeinfo: Movabletypeを勉強するならこのサイト。サンプルファイルもあって、情報も探しやすいです。とてもきれいに情報表示されていて、とても参考になります。

  • mytumblr

    mytumblr: 個人の趣味でのtumblrです。女性のポートレートなんかがおおいです

  • caputure_contextmenu

    caputure_contextmenu: tumblr caputureを右クリックコンテキストメニューで選択する

  • tumblrgallery

    tumblrgallery: tumblrを使ってWEBデザインGalleryを簡単に作ってみました。

  • psdtuts

    psdtuts: http://psdtuts.com/のイメージ画像

  • designflavor.

    designflavor.: http://www.designflavr.com/のイメージ

  • entrymain_template

    entrymain_template: ブログ記事の概要は、インデックステンプレート、ブログ記事のリスト(アーカイブテンプレート)、検索結果(システムテンプレート)の3つのテンプレートで共通に使われています。それぞれのテンプレートでの表示内容の違いをイメージに表してみました。

このブログ記事について

このページは、スカイが2007年5月 9日 19:10に書いたブログ記事です。

ひとつ前のブログ記事は「Geekなcolorパレット」です。

次のブログ記事は「Firefoxでちょっと使えるショートカットとブックマーク」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。