現在、ご依頼の新規受付を休止しております。何卒ご了承下さい。

なかがみや nakagamiya.com

Home Home » Web » 制作・デザイン » 脱・ド素人!Webデザイン初心者向けのガイド、サイト制作の手順とコツ。

脱・ド素人!Webデザイン初心者向けのガイド、サイト制作の手順とコツ。


独学でWebデザインをやってみようとする場合、なぜか作業効率が悪かったり、作ってみたら最初考えていたようなデザインにならなかった、というとはないでしょうか?今回は、そんな人のために「目指せ脱・ド素人!Webデザイン初級ガイド」です。

ちなみに、そおらくこういう人にちょうど良いレベルだと思います。

ちなみに書いてる私は、ド素人を脱しただけの素人です。ハイレベルなWebデザインを目指される方は、本職の方が書いた濃い~記事を読むすごく勉強になりますよ

Webデザインの良書をお探しであれば、書評記事「Webデザイン全般や実際のワークフローについて要点や理論が学べる良書。」もどうぞ。

想定する使用ソフトはAdobe Dreamweaver, Fireworks, Photoshop, Illustratorですが、記事内容はソフトの操作の解説ではなくワークフロー(作業の流れや手順)の解説なので、KompoZer, Aptana, GIMP, Inkscapeといったフリーウェアでも問題ありません。

ありがちな駄目パターン

Web制作の業務経験がなく、また独学であっても本やインターネットから十分に事前学習をしないまま挑むと、効率的なWebデザインのワークフローを知らないままに作業してしまいがちです。

例えば、こんな手順でサイトをデザインしようとして、失敗した経験は無いでしょうか。

「このデザイン凄く良いんじゃない?」と、頭の中ですごく格好良くて美しいデザインを考える。完成図を想像してテンションもMAX!

「早速作ってしまおう!」と、考えたデザインをいきなりオーサリング・ソフトでコーディング。並行してパーツ画像の作成。

「あれ?何かうまくいかない。」と、見れば、デザインが微妙どころか完全に最初のイメージと違う。行き当たりばったりなのでコーディングも右往左往で難航、時に袋小路。

「ああ、やっぱセンス無いわ。」と、自力デザインを諦めて無料ブログやテンプレートを使う。もしくは、極端に手抜きのデザインを作って「ミニマルなデザイン!」と虚勢を張る。内心凹む。

最初は盛り上がってるのにいつの間にかフラストレーションまみれになったあげく、燃え尽きてしまう。そして大した成果も無し。完全自滅コースまっしぐらな感じですね。悔しいですよね、わかります。何せ私がつい最近までそうでした。

どうすれば上手にWebデザインができる?

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

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

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

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

1. デザインのコンセプトを決める。

全体を通して制作の背骨となるので十分すぎるくらい考え、調べ、まとめ、常に確認できるよう書き出すなどしておきます。

2. 頭に描くサイトデザインのラフを作る。

コンセプトが決まったら、ラフを作ります。ラフとは大雑把なイメージ図のことと思ってください。

3. ラフからグラフィックソフトで全体のデザインの完成図を作る。

この絵の完成図は「デザインカンプ」とも呼ばれます。細かいデザインもここでひとまず作り込みます。デジタルデータとして保存するので、後からの修正が容易です。

4. デザインカンプに従って、オーサリングソフトでてコーディングをする。

ここからは、本格的にサイトを形作っていきます。

  1. まずはHTML(XHTML)だけでコンテンツをコーディングします。CSSデザインはこれが全て終わってからです。よく使うh1, p, li, などのタグで構造のみを書き上げます。例えるなら、本の見出しと本文といったようにです。見出しにh1~h6、本文段落にp、表にtable、リストにli、画像にimg。ここで構造化して書き出したコンテンツを、次のステップでグループ化し、さらにその後にCSSでデザインを与えて完成へと進めます。
  2. 次に、構造化されたHTMLをレイアウトグループごとに<div>~</div>のタグで囲んでグルーピングします(※)。小さいレイアウトグループから順にグルーピングするとスムーズにいきます。たとえばブログのデザインを作っているとして、
    1. サイト全体のヘッダー(ナビゲーション)を囲む
    2. ブログの見出し、記事、トラックバック、コメントの各部分を囲む
    3. 「2」の全ての要素を包むように囲む
    4. サイドナビを囲む
    5. 「1~4」全体を囲む

上記はかなり大雑把ですが、実際はより細かい部分から順に囲むことになるでしょう。特に細かな部分では~タグも上手に使いましょう。過剰に細かく囲むとかえって複雑になり過ぎますので、必要なところだけ適度に。

※HTML5になると、header, section, articleといった、まとまりごとに意味のあるタグが定義されています。HTML5を使用するのであれば、適所、divの代わりにこれらのタグを使います。(2013/1/14追記)

<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デザインを楽しみましょう!

長文を読んで頂きありがとうございます。お疲れさまでした!

New »

Old »

“脱・ド素人!Webデザイン初心者向けのガイド、サイト制作の手順とコツ。” への1件のコメント

  1. […] 「脱・ド素人!Webデザイン初心者向けのガイド、サイト制作の手順とコツ。」という記事に関連する最適な本の紹介、書評です。 […]

Webデザイン全般や実際のワークフローについて要点や理論が学べる良書。 « iuser.jp へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

▼スパム対策(必須) * Time limit is exhausted. Please reload CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Home Home » Web » 制作・デザイン » 脱・ド素人!Webデザイン初心者向けのガイド、サイト制作の手順とコツ。

お問い合わせフォーム, 管理