過去に行った勉強会の内容について知りたいという要望がありましたので、Vol.2について資料を元に抜粋した内容をリファイン版として公開します。

WEBサイトの立体感

WEBサイトのデザインはシンプルでスッキリしたレイアウトが流行っています。シンプルなサイトデザインを作ったとき立体感が出ずのっぺりすることがあります。薄い印象のサイトはエンドユーザーの記憶にも残りづらいため、デザインの方向性としてあまり良くありません。そのため、最近のWEBデザインは、シンプルな中でも立体感を出せるよう、色々と工夫されるようになりました。

下記に立体感を与えるための手法や考え方の例を挙げます。

陰について

物体はそのものが形を持っているため、その凹凸により明るい部分と暗い部分ができます。暗い部分を「陰」とよびます。

画像の球体は、前面が盛り上がっているため明るく、端に進むにつれ奥にある部分が暗く、陰となります。

影について

影は太陽などの光源が物体に当たった場合、さらにその下の物体に落とす暗い部分です。単なる暗い部分ですが、「陰」と「影」は違うものだということを押さえて下さい。

明と暗の感じ方の違い

基本的に人間は、明るい方が手前にあり暗い方が奧にあると感じるので、白に近い色ほど手前に、黒に近い色ほど奧に引っ込んでいるように認識します。

位置による明暗の受け取り方

コンピューターは左上が原点です。横組みの文字は左から右に、改行して下へと読みます。そのため、WEBページは基本的に左上が原点となります。ドロップシャドウのように暗い部分があるオブジェクトは、右下を暗くしておくとあまり違和感を感じません。

グラデーションとドロップシャドウ

グラデーションやドロップシャドウは立体感を出すのによく使いますが、モニターの近くで見るWEBサイトではきつめにかけるとはっきりしすぎるので逆効果になりがちです。ほんのりと柔らかくかけることで、うるさくなく、かつ印象のある形となります。

ボタンなどの立体感

グローバルナビゲーションなど、ボタンに対してより立体感を出すには、グラデーション、ドロップシャドウの他に、上下左右に1pxのラインを入れる、袋文字を使うと良いです。また、日本のWEBサイトのボタンは日本語と英語の両方の名称を表記するケースが多いです。

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

WEBオペレーターのためのWEBデザイン勉強会Vol.8
～WEBサイト制作を請け負った場合のワークフローについて～

実際にWEBサイト制作を請け負った場合、色々と考えておけば良かったと思うことが出てきます。今回は、WEBサイト制作を請け負った時に必要なこと、考えておくこと、進め方について解説する予定です。

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

• 題目：WEBオペレーターのためのWebデザイン勉強会Vol.8
• 参加費：500円
• 定員：15名（先着順）
• 日程：2011年11月12日（土）18:00～20:00 ※開催時間にご注意
• 場所：インタークロス・クリエイティブ・センター（ICC） 308
• 住所：北海道札幌市豊平区豊平1条12丁目1-12
• WebサイトURL：http://www.icc-jp.com/ja/access.html

※PCを持っていなくても参加できます（持ってきても構いません）。
※当日は裏口からインターフォンを押して入室して下さい。
、キャンセルについては当日会場への電話連絡ができませんので、前日までに告知ページよりお願いいたします。

以上、よろしくお願いいたします。