私がwebサイトのラフデザインを制作する時の流れ

私がwebサイトのラフを作る時の流れを書いてみました。
独学で身に付けた方法であり、
一般的な方法ではないかも知れないことを予め断っておきます。
私にはやりやすい方法ですが、
他の人にとってはそうではないかもしれません…

本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。
(※本文中のショートカットキーは全てMacの場合です)

希望デザインのヒアリング

※委託業務の場合です

どんなデザインが希望かを先方にヒアリングします。
この時にできるだけ、クライアントのイメージを明確にするため
抽象的でも良いので沢山言葉を貰います。

明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた…etc

具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。

また頂いた言葉と自分のイメージのギャップを埋めておきます。
”シンプル”と言う言葉一つ取っても、人によって感じ方が違います。

感性

色についても同様です。

色の感性

この時に求めてるデザインがサイトのコンセプトとあまりにかけ離れてる時は提案しておきます。

例えば

葬儀屋のサイトなのにピンクで可愛らしく

とか。

ニッチな市場を狙いたいなら良いのですが、
一般の方に受け入れ難いデザインになる場合は改善を提案します。

ワイヤーフレーム作成

追記:詳細をワイヤーフレームをつくる時に押さえておきたいポイントに記載しました。

まず、ページに入れるコンテンツを洗い出します。

  • ロゴ
  • グローバルナビゲーション
  • キャッチコピー
  • バナー
  • 画像

など。

こららを盛り込んでワイヤーフレームを作ります。

私はまず紙にざっと書きます。
何を使ってワイヤーフレームを作るかは個人の好みがあると思いますが、
私は手を動かしてる方がイメージしやすいのでそうしてます。

ワイヤーフレーム

…汚い(笑)
人に見せる事意識してないのでこんな感じです。
クライアントに提出する時は、Illustratorで清書します。

また、ワイヤーフレームに関しては下記記事も参考になります。

ラフデザイン制作準備

ワイヤーフレームでデザイン構成が決まったら、
ラフデザインに入ります。

最初に色とフォントを決めます。

色の選定

メインカラーを元に、近似色を1〜2色、アクセントカラーを1〜2色決めます。

色

私は主にkulerCOLOURloversを利用してます。

配色に関しては下記のサイトが参考になります。

また、自分で決める場合はメインカラーからHSBの数値を変えると簡単です。
Hだけ変更すれば同じトーン、Sは鮮やかさ、Bで明るさを調整して色が作れます。

トーン

作った色はスウォッチに登録しても良いのですが、
私は画像にしておきます。

メリットとしてはIllustratorに配置して同じ色が使えるのと、
他者に渡して同じ色で作業してもらう事ができる、くらいですかね。

フォントの選定

サイトのデザインにあったフォントを選びます。
本文はcssでフォントを指定するので、画像部分に使う書体となります。

日本語、欧文、それぞれ1〜2書体ずつ。
フォントプレビューソフトを使うと便利です。
私はFontDocを使ってます。
FontDoc

フォント

ベースグリッド

殆どのサイト制作で960pxグリッドを使用します。
参考:ページの幅960pxを基準にして、設計するグリッドデザイン | コリス

これにガイドラインを引いたのをベースとして用意しておきます。

ガイドやグリッドにスナップさせるようにしておきます。

スナップ

photoshop→環境設定→ガイド・グリッド・スライスで、
グリッド線10pixel、分割数2にします。

グリッド

デザインのベース。

ベース

これら全部が表示されてる状態だと見辛い時もあるので、

コマンド+@ グリッドの表示・非表示の切り替え
コマンド+: ガイドの表示・非表示の切り替え

で表示したり非表示にしたりしながらデザインしてます。

デザイン

後はひたすらワイヤーフレームに沿ってデザインしていきます。

グリッドにスナップを使ってるので、
オプジェクとは5px単位で整列されます。
微調整は矢印ツールにして、キーボードの矢印で1pxずつ移動させます。
shiftキーを押しながら矢印キーを押すと10pxずつ移動できます。

また別のツールを使ってる時でもコマンドキーを押すと一時的に矢印ツールに切り替わるので、
その状態で移動することができます。
※パスのアンカーポイントは拡大した状態で矢印キーを使っても1pxずつより小さい値で移動します。

レイヤーはフォルダを使って整理しておくと作業しやすいです。

レイヤー

昔はコーディングできるかどうかも意識してデザインしてましたが、
最近ではレイアウトの自由度が上がったのでコーディングはあまり意識せずデザインしてます。

ある程度形になったところで、
(時間に余裕があれば)私は一日寝かせます。

一度離れてから見なおすといまいちな部分が見えてきたり、
新しいアイデアが浮かぶことがあります。

形になった時点で画像に書き出し、先方に確認してもらいます。

ラフ

後は先方とのやり取りで修正を加え、
問題無ければコーディング作業に進みます。

以上が私のやり方です。

完全な独学なので、
他の方の方法も気になりますね。

B!

Comment

コメント(10)

2011年6月23日@ 1:26 PM

chakotay

独学でこれだけ洗練されているとは素晴らしいですね。
解説もとても分かりやすくて勉強になります。
ぜひ参考にさせていただきます。
私はweb系の講師もしているのですが、受講生の方に貴サイトをご紹介させていただきたいと存じます。
よろしくお願いいたします。
これからのご活躍もご期待しております。

2011年6月23日@ 4:44 PM

hiro

>chakotayさん
ありがとうございます。
大分端折ってるので後ほど各パート毎の詳細をエントリーしたいと思います。

2011年6月24日@ 10:20 AM

GadgetShop

東京都と千葉県を中心にWEB制作の仕事をしています。

リンクをたどってこちらのページにお邪魔しました。体系的に整理されていていいですね!じっくりと拝見させて頂きました。私もワイヤーフレームは手書きでSHOTNOTEにさらっと書いて、iPhoneに取り込み一緒に制作するメンバーの意見をもらったりして、その後必要に応じてIllustratorで清書してます。

私もこうした情報を発信できるように自分のサイトにコンテンツを追加しようかな~っと思いました。すばらしい記事ありがとうございました。

2011年6月24日@ 10:42 AM

hiro

>GadgetShopdさん
ありがとうございます。
手書きはさらっとイメージを形にできるところが良いですよね。

実際現場だと、その会社のやり方やプロジェクトの規模などでやり方は変化しますよね。
他の方のやり方も見て私も参考にしたいと思います。

2011年7月6日@ 1:45 PM

Hide

Deliciousからきました。 全体を通して他の人のWeb制作の作法を知る機会はあまりないので、勉強させてもらいました。 自分の場合は、毎回ほぼ直感的に作業を進めてしまうのですが、一度手順をまとめておくと後で役に立ちそうですね。 参考にさせてもらいます。

2011年7月6日@ 4:43 PM

maru

こんにちは!参考にさせていただきました!

ところで、FontDocはMacだけなんですよね?
インストールしようと思ったらMacの推奨バージョンしか書かれてなかったので…。

2011年7月6日@ 5:34 PM

hiro

>Hideさん
ありがとうございます。
そうなんですよね、人によって色んなやり方あると思います。
私も直感的にやる事が多いのですが、今回はそれを形にしてみた次第です。

2011年7月6日@ 5:35 PM

hiro

>maruさん
FontDocはMacのみだったと思います。
でもwindowsでも「フォント ユーティリティ」で検索すると同じ様なソフトが見つかると思いますよ。

2011年7月17日@ 4:23 PM

神澤ゆきえ

たまたま訪問しました。
凄く解りやすく書いてあって、とても参考になりました。
同じく自己流であまり効率の良くない方法で悩んでいたので、
とても良かったです!
ありがとうございました。

2011年7月18日@ 4:05 PM

hiro

>神澤さん
独学だといろいろ悩みますよね。
お役に立てて良かったです。
コメントありがとうございます。

コメントする

Trackback(18)

6月24日のおすすめ記事

2011年6月24日@ 10:50 PM
[...] ■ 私がwebサイトのラフデザインを制作する時の流れ | Design Spice [...]

WEB DESIGN INFOMATION

2011年6月30日@ 10:35 AM
[...] 私がwebサイトのラフデザインを制作する時の流れ http://ow.ly/5paAt [...]
MORE

残すところあと数時間!2011年を振り返るとともに心動かされた記事を紹介 | Design Color

2011年12月31日@ 7:32 PM
[...] んで、悩んでいたサイトデザインの流れを少しずつ確立していく。まずは自分も最初にラフスケッチを描くようになる。 Design Spice | 「私がwebサイトのラフデザインを制作する時の流れ」 [...]

ラフデザインの方法 | WEBデザイン始めました。

2012年5月21日@ 8:45 PM
[...] https://design-spice.com/2011/06/23/website-rough/ [...]

これなら分かる!WEB制作を無料で「学べる」サイトまとめ | コムテブログ

2013年2月4日@ 8:33 AM
[...] webサイトのラフを作る時の流れ 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

もう一度見直してみよう!web制作の流れについてのまとめ | スターフィールド株式会社

2013年7月2日@ 4:21 PM
[...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice こちらはデザインを起こす順序が書かれており、他人の進め方を見れ、非常に参考になります。 [...]

ひとりでWeb制作できた!「知識0から学ぶ」すごいスライドやサイト27 | コムテブログ

2013年7月22日@ 8:39 AM
[...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

効率的に学べた!Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ

2014年1月6日@ 8:40 AM
[...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

WEBデザイン入門 第4回 | ラフデザインの作成

2014年1月16日@ 11:17 AM
[...] 他の方のラフ制作で参考になる記事 [...]

フリーも社内も助かった!Web制作フローが「完璧」にわかる資料や流れのまとめ | コムテブログ

2014年1月20日@ 8:38 AM
[...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

すごい役立った!Web制作に特化した「提案書」に入れておきたいこと、知識 | コムテブログ

2014年2月3日@ 8:34 AM
[...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

スキルが増えた!今後を生き抜くためにWebデザイナーも習得しておきたい技術 | コムテブログ

2014年3月17日@ 8:36 AM
[...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

実技(WEBプログラミング実習) | 東京の求職者支援訓練

2015年2月6日@ 12:43 PM
[…] 私がwebサイトのラフデザインを制作する時の流れ Design Spice […]

レイアウトデザイン基礎② – portfolio

2020年10月16日@ 2:25 PM
[…] 私がwebサイトのラフデザインを制作する時の流れ カテゴリー: 未分類 […]

LAYOUT DESIGN: 2021.07.20(TUE) – 今日の池冨さん

2021年7月24日@ 11:00 PM
[…] 私がwebサイトのラフデザインを制作する時の流れ Design … […]

学科 レイアウトデザイン基礎② – DEAUアカデミー WEBデザイナー養成(午前)科

2022年1月20日@ 6:17 AM
[…] 私がwebサイトのラフデザインを制作する時の流れ Design … […]

学科 レイアウトデザイン基礎③ – DEAUアカデミー WEBデザイナー養成(午前)科

2022年1月21日@ 6:32 AM
[…] 私がwebサイトのラフデザインを制作する時の流れ Design … […]