私がwebサイトのラフデザインを制作する時の流れ
- 6月
- 23
- 2011
私がwebサイトのラフを作る時の流れを書いてみました。
独学で身に付けた方法であり、
一般的な方法ではないかも知れないことを予め断っておきます。
私にはやりやすい方法ですが、
他の人にとってはそうではないかもしれません…
本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。
（※本文中のショートカットキーは全てMacの場合です）
希望デザインのヒアリング
※委託業務の場合です
どんなデザインが希望かを先方にヒアリングします。
この時にできるだけ、クライアントのイメージを明確にするため
抽象的でも良いので沢山言葉を貰います。
明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc
具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。
また頂いた言葉と自分のイメージのギャップを埋めておきます。
”シンプル”と言う言葉一つ取っても、人によって感じ方が違います。
色についても同様です。
この時に求めてるデザインがサイトのコンセプトとあまりにかけ離れてる時は提案しておきます。
例えば
葬儀屋のサイトなのにピンクで可愛らしく
とか。
ニッチな市場を狙いたいなら良いのですが、
一般の方に受け入れ難いデザインになる場合は改善を提案します。
ワイヤーフレーム作成
まず、ページに入れるコンテンツを洗い出します。
- ロゴ
- グローバルナビゲーション
- キャッチコピー
- バナー
- 画像
など。
こららを盛り込んでワイヤーフレームを作ります。
私はまず紙にざっと書きます。
何を使ってワイヤーフレームを作るかは個人の好みがあると思いますが、
私は手を動かしてる方がイメージしやすいのでそうしてます。
…汚い（笑）
人に見せる事意識してないのでこんな感じです。
クライアントに提出する時は、Illustratorで清書します。
また、ワイヤーフレームに関しては下記記事も参考になります。
ラフデザイン制作準備
ワイヤーフレームでデザイン構成が決まったら、
ラフデザインに入ります。
最初に色とフォントを決めます。
色の選定
メインカラーを元に、近似色を1〜2色、アクセントカラーを1〜2色決めます。
私は主にkulerかCOLOURloversを利用してます。
配色に関しては下記のサイトが参考になります。
また、自分で決める場合はメインカラーからHSBの数値を変えると簡単です。
Hだけ変更すれば同じトーン、Sは鮮やかさ、Bで明るさを調整して色が作れます。
作った色はスウォッチに登録しても良いのですが、
私は画像にしておきます。
メリットとしてはIllustratorに配置して同じ色が使えるのと、
他者に渡して同じ色で作業してもらう事ができる、くらいですかね。
フォントの選定
サイトのデザインにあったフォントを選びます。
本文はcssでフォントを指定するので、画像部分に使う書体となります。
日本語、欧文、それぞれ1〜2書体ずつ。
フォントプレビューソフトを使うと便利です。
私はFontDocを使ってます。
FontDoc
ベースグリッド
殆どのサイト制作で960pxグリッドを使用します。
参考：ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
これにガイドラインを引いたのをベースとして用意しておきます。
ガイドやグリッドにスナップさせるようにしておきます。
photoshop→環境設定→ガイド・グリッド・スライスで、
グリッド線10pixel、分割数2にします。
デザインのベース。
これら全部が表示されてる状態だと見辛い時もあるので、
コマンド+@ グリッドの表示・非表示の切り替え
コマンド+: ガイドの表示・非表示の切り替え
で表示したり非表示にしたりしながらデザインしてます。
デザイン
後はひたすらワイヤーフレームに沿ってデザインしていきます。
グリッドにスナップを使ってるので、
オプジェクとは5px単位で整列されます。
微調整は矢印ツールにして、キーボードの矢印で1pxずつ移動させます。
shiftキーを押しながら矢印キーを押すと10pxずつ移動できます。
また別のツールを使ってる時でもコマンドキーを押すと一時的に矢印ツールに切り替わるので、
その状態で移動することができます。
※パスのアンカーポイントは拡大した状態で矢印キーを使っても1pxずつより小さい値で移動します。
レイヤーはフォルダを使って整理しておくと作業しやすいです。
昔はコーディングできるかどうかも意識してデザインしてましたが、
最近ではレイアウトの自由度が上がったのでコーディングはあまり意識せずデザインしてます。
ある程度形になったところで、
（時間に余裕があれば）私は一日寝かせます。
一度離れてから見なおすといまいちな部分が見えてきたり、
新しいアイデアが浮かぶことがあります。
形になった時点で画像に書き出し、先方に確認してもらいます。
後は先方とのやり取りで修正を加え、
問題無ければコーディング作業に進みます。
以上が私のやり方です。
完全な独学なので、
他の方の方法も気になりますね。
独学でこれだけ洗練されているとは素晴らしいですね。
解説もとても分かりやすくて勉強になります。
ぜひ参考にさせていただきます。
私はweb系の講師もしているのですが、受講生の方に貴サイトをご紹介させていただきたいと存じます。
よろしくお願いいたします。
これからのご活躍もご期待しております。
コメント by chakotay — 2011年6月23日 @ 1:26 PM
>chakotayさん
ありがとうございます。
大分端折ってるので後ほど各パート毎の詳細をエントリーしたいと思います。
コメント by hiro — 2011年6月23日 @ 4:44 PM
東京都と千葉県を中心にWEB制作の仕事をしています。
リンクをたどってこちらのページにお邪魔しました。体系的に整理されていていいですね！じっくりと拝見させて頂きました。私もワイヤーフレームは手書きでSHOTNOTEにさらっと書いて、iPhoneに取り込み一緒に制作するメンバーの意見をもらったりして、その後必要に応じてIllustratorで清書してます。
私もこうした情報を発信できるように自分のサイトにコンテンツを追加しようかな～っと思いました。すばらしい記事ありがとうございました。
コメント by GadgetShop — 2011年6月24日 @ 10:20 AM
>GadgetShopdさん
ありがとうございます。
手書きはさらっとイメージを形にできるところが良いですよね。
実際現場だと、その会社のやり方やプロジェクトの規模などでやり方は変化しますよね。
他の方のやり方も見て私も参考にしたいと思います。
コメント by hiro — 2011年6月24日 @ 10:42 AM
[...] ■ 私がwebサイトのラフデザインを制作する時の流れ | Design Spice [...]
ピンバック by 6月24日のおすすめ記事 — 2011年6月24日 @ 10:50 PM