脱！素人ブログデザイン

そう感じたことはないでしょうか？

今回は、そんな人のためのに少しデザインを完成させるまでのプロセスについてお話します。

まず、デザインを形にするにあたって様々なソフトが必要となってきます。
例として、私が使用しているソフトをを挙げますと、
Dreamweaver, Photoshop, Imageready, Illustrator, Fireworks 等があります。

Dreamweaver（大まかなデザインレイアウト作成）
Jedit（CSS編集）
Photoshop（画像の編集）
Imageready（画像の編集及びPhotoshopで編集した画像の書き出し）
Illustrator（イラスト・ロゴ等の作成）
Fireworks（レイアウトのドラフト作成・パーツ作成）

しかし、上記のソフトは高額なので、KompoZer, Aptana, GIMP, Inkscape といったフリーウェアでも問題ありません。

Web制作の業務経験がなく、また独学であっても本やインターネットから十分に事前学習をしないまま挑むと、
効率的なWebデザインのワークフローを知らないままに作業してしまいがちです。
例えば、こんな手順でサイトをデザインしようとして、失敗した経験は無いでしょうか。

「このデザイン凄く良いんじゃない？」と、頭の中で格好良くて美しいデザインを考え、完成図を想像してテンションMAX！
　　 ↓
「早速作ろう！」と、考えたデザインをいきなりオーサリング・ソフトでコーディング。
並行してパーツ画像の作成。
　　 ↓
「あれ？何か考えていたのと違う・・・」と、見れば、デザインが微妙どころか完全に最初のイメージと違う。行き当たりばったりなのでコーディングも右往左往で難航。
　　 ↓
「ああ、やっぱセンス無いなぁ～」と、自力デザインを諦めて無料ブログやテンプレートを使う。
もしくは、極端に手抜きのデザインを作って、内心凹む。

さて、このようにならない為には、上手に作るにはどうすれば良いでしょうか？

ここでいう「上手」とは凄くかっこいいデザインをという意味ではありません。
いかにして、最初にイメージしたデザインをスムーズにサイトという形にすることが出来るか、という意味です。

これはWebデザインに限った話ではありませんが、

1. 全体を計画する。
2. 計画を細分化し手順化する
3. 手順に沿って作業を進める

これは、どんな作業や仕事をするにあたっても守るべき要点です。
これをWebデザインに当てはめて制作工程を考えると以下のようになります。
人やTPOによって多少違いは出ます。

1. デザインのコンセプトを決める。
* コンテンツや、コンテンツによって伝えたいメッセージ、表現したい事は何か？
* 想定する利用者は具体的にどんな人たちか？
* 利用者に伝えたい事を最大限伝えるには、色、形、インターフェイス、仕組みなど、どんなデザインにすればいいか？
* コンテンツ構造や、コンテンツへのナビゲーションはどう提供するか？

2. 頭に描くサイトデザインのラフを作る。
コンセプトが決まったら、ラフを作ります。ラフとは大雑把なイメージ図のことと思ってください。
※ラフの段階ではザッとイメージを描くにとどまるので、手書きも自由にサクッと描けてオススメです。

3. ラフからグラフィックソフトで全体のデザインの完成図を作る。
これは「デザインカンプ」とも呼ばれます。細かいデザインもここでひとまず作り込みます。
デジタルデータとして保存するので、後からの修正が容易です。
良いデザインを練るにはどれだけ引き出しを用意できるかが重要になります。
いつもの世界から外に出て、世間に溢れる様々なデザインからインスピレーションを得たり、素材となるものを集めたりする。
インターネット上だけでも何とかなりそうですが、外に出ればあちこちにデザインやアイデアの素材が溢れています。

グラフィックソフト上での制作作業時のコツの一つとしては、グリッドや定規を上手に使います。
例えば、グリッドの幅を10pxなどの区切りやすい数値に設定し、配置するレイアウトやパーツがグリッドに吸着するような設定にしておくと、配置やサイズ調整の作業効率がとても上がります。

4. デザインカンプに従ってコーディングをする。
そして、ここからがアメブロでいうブログのCSSの編集になります。
CSSでデザインを考え、レイアウトしていきます。

ひらめいたデザインをすぐに形には出来ません。
せっかちな人には多少の我慢が必要にはなります。
しかし、手順をマニュアル化して作業するほうが最終的には早くデザインを形に出来ます。
また、途中で変更や修正が発生する場合も、事前に全体の骨組みがしっかり作られているので、
コンセプトなどの軸がぶれないうえ、目に見える形でデザインが手元にあるので修正も容易になります。

より、詳細にお話したいと思いますが、それは次の機会に。