「WEBオペレーターのためのWEBデザイン勉強会」　第11回目の告知です。WEBに携わっているけど、上手くデザインできない、デザインするときにどのように考えたら良いのか分からない。そういった疑問を抱えている人たちが集まり、より良質なデザインを追求していきましょう！

WEBオペレーターのためのWEBデザイン勉強会Vol.11
～WEBならではの細かい作り込みを見ていこう～

第11回目は、WEBサイトの各パーツをどう作り込めば、より良質なものとなるのか、サンプルを作り込みながら解説していきます。

日程内容は下記となります。参加される方はATNDの告知ページから参加申し込みをお願いします。

• 題目：WEBオペレーターのためのWebデザイン勉強会Vol.11
• 参加費：500円
• 定員：20名（先着順）
• 日程：2012年6月2日（土）16:00～18:00　※開催日と時間に注意
• 場所：Garage labs(ガレージラボ)
• 住所：札幌市中央区北3条西14丁目2-2
• WebサイトURL：http://garage-labs.jp/?page_id=20

• 参加費は当日徴収いたします。
• PCを持っていなくても参加できます。
• キャンセルについてはATNDからお願いいたします。
• 参加定員についてはATNDの参加状況をご確認下さい。

何か分からないことがあれば、Twitter（@MarlboroLand）からメッセージにてお問合せ願います。

ミニマルデザイン

下記サイトの共通項は、最近のWEBサイトで定番のミニマルなデザインを持っています。

• http://www.rogerburkhard.com/
• http://www.rachelridings.com/
• http://www.oldguard.co.uk/
• http://8020.com/
• http://www.madebyon.com/
• http://www2.panasonic.biz/es/lighting/feu/
• http://colorbox.info/

ミニマルデザインの特徴

ミニマルなデザインの共通項を見ていくと、広い空間を大胆に使ってサイトを表現していることが分かります。また、色数を抑えることで情報をより確実に伝えることが可能です。

• 背景が白一色（無背景）
• 文字サイズが大きく大胆
• 必要な情報のみの表示
• 余白を多く取ったレイアウト
• グレースケール、または、色数が少ない構成

印象の強いデザイン

ミニマルとは真逆で見た目の第一印象を強く見せるデザインは昔から数多くあります。

• http://www.nisshin.com/
• http://www.aden-anais.com/
• http://www.okikoku.or.jp/
• http://swwwitch.com/mycom/Dw55/HTML/index.html
• http://tf.dtbaker.com.au/template/mommy_blog/index.html

印象の強いデザインの特徴

直線的なミニマルなデザインと違い、印象の強いデザインは、奥行きを感じさせるために背景、ドロップシャドウ、色合いなどを複雑に組み合わせて表現しています。

• 色のメリハリを付ける
• 情報で囲う
• 立体感を付ける
• 背景に凝る

手書き風のデザイン

印象の強さの方向性を変化させ、より自然に見せるサイトデザインも見かけるようになりました。海外では昔からこのような凝った作りのデザインが多くあります。

• http://www.kimaguren.com/index.html
• http://www.cookiesound.com/blog/
• http://www.artofattention.com/writings/
• http://swwwitch.com/mycom/Dw55/HTML/index.html
• http://www.noupe.com/
• http://mymd.microdiet.jp/campaign/supple_calorie_rc/lp-1.html

手書き風のデザインの特徴

手書き風デザインは、いかにデザインを自然に見せるかがポイントとなります。そのためにテクスチャ素材を多用したり、実際に手で書いた文字を加工してサイトに組み込むなど、より手の込んだ作り込みをしているものが多いです。

• より複雑なテクスチャ
• 紙を破いた感じ
• 手書き風フォント
• かすれた文字