Webデザインをする上で「必ず」知っておくべきこと！[self reblog]※情報古いです

【このエントリーは会社員時代に書いた記事のリブログです。】
今回は2日連続の勉強会参加でした。

10/16（土）、Web制作に関わる方のためのセミナーイベント「CSS Nite」の久々の名古屋開催である『CSS Nite in NAGOYA, Vol.5』に参加してきました。

「初心者向け」をうたっているセミナーでしたが、ある程度経験を積んだ人でも聞きごたえのあるトピックばかりで、大変有意義な時間でした。

（後輩君も誘えば良かったと少々後悔しています。）

今回はセッションが3つありましたので、私の感想も3回に分けて書きたいと思います。

1つ目のセッションは、（株）マールの増田 悟さんによる「Webデザインに関わって行くために注意すべきポイント」。

Webデザインの初心者さんがぜひとも知っておかないといけない内容を、分かりやすく説明してくださいました。かいつまんでまとめます。

Webデザインをするうえで、まず知っておくべきこと

Webデザインには、紙面上のデザインと決定的に違う点があります。

その「違い」を知らないと、支離滅裂なデザインが出来上がってしまいます。それは…

1.Webサイトは、見る人の環境によって見た目が異なること。

標準のフォント（書体）だったり、文字のサイズだったり、画面そのものの大きさだったり、ブラウザごとの表示の違いっていうのもあります。

その「違い」を解消することは不可能です。

違いが発生するということを頭に入れた上で、多少違いが生じても、問題なくキレイに見えるようなデザインをすることが重要です。

2.Webでは、「デザイン」を考える前に「構造」を考える必要があります。

細かい装飾にこだわることは、あとからでも出来ます。しかし、一旦大まかなレイアウトを決めてしまうと、簡単に変更することは出来ません。

「そのデザインを何に使うのか」を考えてから制作を始めないと、意味の分からないデザインになってしまいます。そうなってからの軌道修正は大変です。

3.Webデザインにおける最小単位は、1ピクセル。

Webの世界でサイズを表す単位は、px（ピクセル）です。

pxには、たとえば0.5pxといった少数点以下の概念はありません。最小単位は必ず1pxになります。

1pxの違い。クライアントは気付いてくれないかもしれません。しかし全体として見た時に、必ず違いが出ます。

この1pxにこだわれるかどうか。それがデザインのクオリティの差に繋がります。

4.「グリッドデザイン」を知り、それを守ること。

「グリッドデザイン」（グリッドシステムとも言う）とは、Webデザインを作る際にキャンバス上に規則的なグリッド線（＝方眼紙みたいな基準線のこと）を引いておき、その枠に沿ってデザイン要素をレイアウトしていくというWebデザインのセオリーのことです。

グリッドデザインを取り入れることで、全体的なバランスが自然と良くなってきます。

また、デザイン要素のバランス向上だけではなく、コーディングする際の手間もずいぶん軽くなります。

具体的な手法としては、

1. 全てのカラム（要素）のサイズは、整数で。
2. 用意するカラム数･幅はあらかじめ計算しておくこと。
3. デザインは、絶対にグリッドからはみ出さないこと。
4. カラム数は、多めに作っておくと汎用性がUPし、いろいろ使い回しができる。

「グリッドデザイン」は、初心者さんには、最初「？？？」っていう概念かもしれません。

でも、これを知っておくのと、知らずに好き勝手にデザインするのとでは、デザインのクオリティにかなりの差が出てくると思います。

（この概念を知ったうえで、慣れてきたらあえてグリッドをはずす、っていうのは手法としてアリだと思いますが。）

【グリッドデザインの参考サイト】「グリッドデザインって何？」って人は参考にしてください。

• http://webdesignrecipes.com/css-grid-system-layout/
• http://non-designer.com/layout/layout03.html
• http://coliss.com/articles/build-websites/operation/css/css-the-golden-grid.html

「使うことを考えたデザイン」ができるかどうか！

このセッションで印象に残ったことが、「使うことを考えたデザイン」ができているか？という事です。

「本は“見る・読む”以外に特別な技術は必要ないけれど、Webサイトを見るために必要とされる技術はたくさんある。

だから、せっかくそのサイトを見に来てくれた人に対して、見やすく使いやすいサイトであることを考えよう」

これは講師の増田さんが話していた内容のまとめですが、まさにその通りだと思います。

ユーザーは見たい情報しか見ません。デザインを見に来ることが目的ではないのです。

見た目にキレイなデザイン、というのも大切ではありますが、もっと大切なのは「ユーザーが情報を見つけやすい」デザインやレイアウトであることです。

具体的なチェックポイントとしては、

1. グローバルメニュー
   ボタンがクリックされやすくする工夫が必要です。

   （ex.マウスが乗ると色が変わる、見るからにボタンっぽい色や形、クリックできる範囲を広めに取る…などなど）

2. メイン画像

   サイトの第一印象はここで決まります。そのサイトが何を伝えたいかを象徴するものになっているでしょうか？

3. フッター

   「ページはここまでです」という、ページの終わりを意識させるための要素です。 

   ページの一番下へ行っても今いるページのタイトルが分かったり、他のページへ移動しやすかったり…といった工夫が必要です。

4. メインコンテンツ

   今後の修正まで頭に入れ、汎用性を考えたデザインを作るのが◎

   後々の修正がやりにくいような作りにすると、後で苦労します。

5. サブコンテンツ（サイドバーとか）

   他のページのコンテンツの案内をしたり、ユーザーの次の行動をサポートしてくれる内容を記載するエリアです。ボリュームは適度に。

6. 背景

   小さいモニタを使用している場合、背景画像がほとんど見えない場合があります。逆にワイドモニタを使用のユーザーの場合は表示される背景エリアが広くなります。どちらの場合にも違和感なく見られるような背景の工夫を。

「Webデザイン」には、ルールがあります。

決して、「個性に走る」ことがデザインではありません。

まずデザインの基本ルール・セオリーを知っておくことが、初心者デザイナーのはじめの一歩なんだな、と強く思ったセッションでした。

おまけ：最初に、基本設計を作るときに細かいデザインパーツも作っておく！

これが、今回のセッションで一番感激したことなのですが、

見出し・ボタン・メニュー・テキストボックス・カラムパターンなどの、サイト内パーツのデザインをあらかじめ、全部作っておくということ！

フォローアップメールで、パーツ作成のサンプルデータを頂いたのですが、ぜひ見ていただきたい！

でも勝手に公開するのはまずいので載せませんが。

とにかく、最初にここまで作っておくなんて、ホント目からウロコでした！

これによって、サイト全体のデザインの統一感が出ますし、後々の制作もすごく楽になることでしょう。

自分も、あそこまでキッチリは難しいかもしれませんが、少しずつ真似してみようかな。。。