独学でWebデザインをやってみようとする場合、なぜか作業効率が悪かったり、作ってみたら最初考えていたようなデザインにならなかった、というとはないでしょうか？今回は、そんな人のための「目指すは脱・ド素人！Webデザイン初級ガイド」です。
]]>
ちなみに、そおらくこういう人にちょうど良いレベルだと思います。
- HTMLやCSSを自分で書いてページを作る事が出来る。
- 無料ブログなどを少しはカスタマイズできる。
- ソフトで簡単なサイトは作れるけれど、Webデザインの業務経験はない。
- 今まで手順を考えずに適当に思いつくままに作ってたけれど、もう少し本腰を入れてWebデザインをやってみたい！
想定する使用ソフトはAdobe Dreamweaver, Fireworks, Photoshop, Illustratorですが、記事内容はソフトの操作の解説ではなくワークフロー(作業の流れや手順)の解説なので、KompoZer, Aptana, GIMP, Inkscapeといったフリーウェアでも問題ありません。
ありがちな駄目パターン
Web制作の業務経験がなく、また独学であっても本やインターネットから十分に事前学習をしないまま挑むと、効率的なWebデザインのワークフローを知らないままに作業してしまいがちです。
例えば、こんな手順でサイトをデザインしようとして、失敗した経験は無いでしょうか。
「このデザイン凄く良いんじゃない？」と、頭の中ですごく格好良くて美しいデザインを考える。完成図を想像してテンションもMAX！
↓
「早速作ってしまおう！」と、考えたデザインをいきなりオーサリング・ソフトでコーディング。並行してパーツ画像の作成。
↓
「あれ？何かうまくいかない。」と、見れば、デザインが微妙どころか完全に最初のイメージと違う。行き当たりばったりなのでコーディングも右往左往で難航、時に袋小路。
↓
「ああ、やっぱセンス無いわ。」と、自力デザインを諦めて無料ブログやテンプレートを使う。もしくは、極端に手抜きのデザインを作って「ミニマルなデザイン！」と虚勢を張る。内心凹む。
最初は盛り上がってるのにいつの間にかフラストレーションまみれになったあげく、燃え尽きてしまう。そして大した成果も無し。完全自滅コースまっしぐらな感じですね。悔しいですよね、わかります。何せ僕がつい最近までそうでした。
どうすれば上手にWebデザインができる？
ここでいう「上手」とは凄くかっこいいデザインをという意味ではなく、いかにして、最初にイメージしたデザインをスムーズにサイトという形にすることが出来るか、というお話です。
さて、これはWebデザインに限った話ではありませんが、
- 全体を計画する
- 計画を細分化し手順化する
- 手順に沿って作業を進める
どんな作業や仕事をするにあたっても守るべき要点です。これをWebデザインに当てはめて制作工程を考えると以下のようになります。人やTPOによって多少違いは出ます。
1. デザインのコンセプトを決める。
全体を通して制作の背骨となるので十分すぎるくらい考え、調べ、まとめ、常に確認できるよう書き出すなどしておきます。
- コンテンツや、コンテンツによって伝えたいメッセージ、表現したい事は何か？
- 想定する利用者は具体的にどんな人たちか？
- 利用者に伝えたい事を最大限伝えるには、色、形、インターフェイス、仕組みなど、どんなデザイン(設計)にすればいいか？
- コンテンツ構造(サイトマップ)や、コンテンツへのナビゲーションはどう提供するか。(2009/11/9 追記：@xotakkさんにご指摘を頂きました。ありがとうございます！)
2. 頭に描くサイトデザインのラフを作る。
コンセプトが決まったら、ラフを作ります。ラフとは大雑把なイメージ図のことと思ってください。
- ラフの段階ではザッとイメージを描くにとどまるので、手書きが自由にサクッと描けておすすめ。
- 大きい紙ほどたくさんの情報を書き込めるのでA4～A3紙、大きなスケッチブックなども適しています。方眼紙(方眼目盛りノート)も活躍するでしょう。
3. ラフからグラフィックソフトで全体のデザインの完成図を作る。
この絵の完成図は「デザインカンプ」とも呼ばれます。細かいデザインもここでひとまず作り込みます。デジタルデータとして保存するので、後からの修正が容易です。
- 良いデザインを練るにはどれだけ引き出しを用意できるかが鍵になります。世にあふれる様々なデザインからインスピレーションを得る、素材となるものを集めたり作ってみたりする。描いたイメージに少しでも近づけるよう、また少しでも磨きをかけられるよう手足を尽くします。 ここで手と言わないのは「外に出てみましょう」という事です。インターネット上だけでも何とかなりそうですが、外に出ればあちこちにデザインやアイデアの素材が溢れかえっています。また、体を動かす事で脳も活性化し、インスピレーションを得られやすくなります。これを活用しない手はないでしょう。
- グラフィックソフト上での制作作業時のコツの一つとしては、方眼紙のようなグリッド(格子)機能や定規機能を上手に使います。例えば、グリッドの幅を10pxなどの区切りやすい数値に設定し、配置するレイアウトやパーツがグリッドに吸着するような設定にしておくと、配置やサイズ調整の作業効率がとても上がります。
4. デザインカンプに従って、オーサリングソフトでてコーディングをする。
ここからは、本格的にサイトを形作っていきます。
- まずはHTML(XHTML)だけでコンテンツをコーディングします。CSSデザインはこれが全て終わってからです。よく使うh1, p, li, などのタグで構造のみを書き上げます。例えるなら、本の見出しと本文といったようにです。見出しにh1～h6、本文段落にp、表にtable、リストにli、画像にimg。ここで構造化して書き出したコンテンツを、次のステップでグループ化し、さらにその後にCSSでデザインを与えて完成へと進めます。
- 次に、構造化されたHTMLをレイアウトグループごとに<div>～</div>のタグで囲んでグルーピングします。小さいレイアウトグループから順にグルーピングするとスムーズにいきます。たとえばブログのデザインを作っているとして、
- サイト全体のヘッダー(ナビゲーション)を囲む
- ブログの見出し、記事、トラックバック、コメントの各部分を囲む
- 「2」の全ての要素を包むように囲む
- サイドナビを囲む
- 「1～4」全体を囲む
上記はかなり大雑把ですが、実際はより細かい部分から順に囲むことになるでしょう。特に細かな部分では<span>～</span>タグも上手に使いましょう。過剰に細かく囲むとかえって複雑になり過ぎますので、必要なところだけ適度に。
- <div>～</div>
- ブロック要素というものに分類されるタグ。箱をイメージしましょう。これで囲むと、囲んだ前後は強制改行されます。大きなブロックを囲むのに最適です。
- <span>～</span>
- インライン要素のタグ。箱の中に入るものとイメージしましょう。これで囲んでも、囲んだ前後は強制改行されません。ある文中の一部の色を変えたりするなど、部分的に囲むのに使います。
5. CSSでデザインを与える
いよいよ見た目を作りこみます。デザインカンプ作成の段階で、レイアウトやパーツのサイズがピクセル単位で決まっているはずなので、考え無しにいきなりコーディングするのと比べればスムーズにコーディング作業が進むはずです。CSSデザイン時に必要な画像については、カンプから切り出したり、カンプの完成度によっては、あらためてパーツごとにファイルを作って作り込むなどします。
CSSでの「id」「class」の使い分け
- id =「#」
- ページ内で1度しか使われない要素に使う。
- class = 「.」
- ページ内で繰り返し使われる要素に使う。
6. ブラウザで表示をチェックする
Windows, Mac, LinuxといったOS。Internet Explorer, Firefox, Safari, Google Chrome, Operaといった様々なブラウザとバージョンなど、選択肢はたくさんありますが、想定利用者にあわせて必要な表示チェックと修正を加えましょう。
お疲れさまです！完成です！
長くなりましたが、以上がWebデザインの大まかなワークフローです。ひらめいたデザインをすぐに形にできないので、せっかちな人には多少の我慢が必要にはなりますが、ゴールと道順が明確になっている分ワークフローに乗って作業するほうが最終的には早くサイトを形に出来ます。また、途中で変更や修正が発生する場合も、事前に全体の骨組みがしっかり作られているのでコンセプトなどの軸がぶれないうえ、目に見える形でデザインが手元にあるので修正も容易です。
今回紹介した各手順の中で使える小技などは、またあらためて別記事にしたいと思います。あと、この記事に最適な良書の紹介(書評)もしようと思ったのですが、書いてみたらボリュームが大きくなりすぎるので別記事にしました。
ワークフローという「型」を何度も繰り返し作業することで身につけ、よりスムーズなWebデザインを楽しみましょう！
長文を読んで頂きありがとうございます。お疲れさまでした！
追記
- 誰のため？何のため？Webサイトを作り始める前に。 | Webクリエイターボックス
- 脱初心者後に考えると良い点が書かれています。ある程度基本的なサイト作りができるようになってから次に考えておきたい事。マーケティング要素を含めたサイトのコンセプト作りの例として。
]]>
/ MdNコーポレーション
