【Web制作の現場】実践！Webデザインを始めよう！

今日は、いつもと違って、ワークショップ形式で進めていきたいと思います。

初の試みですので、ぜひご協力いただければと思います。

さて。

今までは、マークアップが中心のお話でした。

今回は「実践！Webデザインを始めよう！」ということで、

みなさんに、実際に手を動かしてもらおう！というコーナーです。

マークアップもデザインも、上達するには「数をこなすこと」です。

実際に手を動かすのです。

そして、他人に見てもらって、コメントをもらうのです。

これが、一番の上達の早道です。

あとは、これらを繰り返すだけ。

机上の空論では、何の役にも立ちませんからね。

では、今回のワークショップの手順をご紹介しましょう！

※Photoshopでのデザインを前提にお話をしていきます。

目的

基本的なレイアウトとデザインの手順を体験する。

手順

【１】好きなサイトを選ぶ

まずは、自分の好きなサイトをピックアップ！

【２】サイト全体をキャプチャする。

• キャプチャ用のソフトがあるので探してみてください
• 僕が使ってるのはGoogle Chrome用の拡張機能

【３】ガイドを引いていく

キャプチャしたデータをPSDで開き、各コンテンツのガイドを引いていく。

意識して欲しいのは、大枠のレイアウト構造。

ヘッダー、メインコンテンツ、サイドナビゲーション、フッターなど。

色の使い方、どんな要素（バナー、リンク、タイトルなど）が入っているか。

まずは、俯瞰してサイト全体を見渡してください。

【４】ブロックをつくっていく（ワイヤーフレームの作成）

ガイドが引けたら、それぞれの要素を四角（薄いグレー）で囲んで、ワイヤーフレームを作っていく。

この段階では、レイアウトの作り方を学んでもらいます。

デザイン要素は全く必要ありません。

意識して欲しいのは、大枠コンテンツ間の「マージンのとり方」です。

レイアウトの重要なポイントになってきます。

綺麗なサイトとそうでないサイトは、ここで差がつきます。

【５】要素の配置

ワイヤーフレームができたら、テキストの流し込みと写真の配置をしていきます。

画像は、サイトから引っ張ってきてください。

意識して欲しいのは、Webデザインとは「レイアウトとパーツデザインの組み合わせ」ということです。

ここでも、それぞれの要素のマージンを意識してください。

あと、フォントサイズ、色、行間。

Webデザインはパズルのようなものです。

サイトは、小さなパーツの組み合わせでできています。

この感覚を掴んでください。

そうすれば、ある程度きれいなサイトが作れるようになります。

【６】パーツの作り込み

要素の配置ができたら、パーツの作り込みを行います。

ボタンだとか、背景だとか、細かいデザインをしていきます。

ということで。

あとは、実践あるのみ！

真似をして、パクッて、自分のスキルにしてください。