タグ

2011年9月1日のブックマーク (4件)

  • Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice

    レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ

    Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
  • Webデザイナー(私)によるタイポグラフィーレイアウトの注意書き

    私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー(私)によるDTPデザイン注意書き:Webと

  • CSSのnth-childで偶数/奇数行などn番目を装飾する方法 [ホームページ作成] All About

    CSSのnth-childで偶数/奇数行などn番目を装飾する方法リストやテーブル(表組み)など多数の項目が連続する要素は、1行おきに装飾を分けると見やすくなります。CSSのnth-child疑似クラスを使えば、偶数行(=2の倍数番目)だけの装飾、奇数行(=2の倍数+1番目)だけの装飾などを簡単に指定できます。表なら「n番目の列」のように列単位で色分けするのも簡単です。そのほか、先頭だけ、先頭から5つだけ、3個おき(=3の倍数)、最後から2番目だけ、最後だけ……など柔軟に指定できて便利です。

    CSSのnth-childで偶数/奇数行などn番目を装飾する方法 [ホームページ作成] All About
  • ユーザに自分ゴト化してもらうための3つの方法 (ユーザビリティ実践メモ)

    今回の実践メモでは、WEBサイト上でユーザの購買意欲を喚起するための方法についてご紹介します。 WEBサイトを見ているユーザの購買意欲を喚起するためには、ユーザに商品の購入を『自分ゴト化』してもらうことが重要であることが、これまでの弊社のユーザ行動観察調査から明らかになっています。 稿では、WEBサイト上での情報提供で、ユーザに『自分ゴト化』してもらうための3つ紹介いたします。 (1)「こんな人にオススメ」という情報を示す 例えば、以下の表現を比べてみてください。 上の例だと、これらの商品が自分に合っているのかどうかをユーザは判断することができません。 しかし、下のように「こんな人にオススメ」という情報を提示すれば、ユーザに「この商品は自分の状況に合っている」と認識させることができ、自分ゴト化してもらうことができます。 (2)商品価格をユーザに実感させる いくら自分の状況に合った商品があ