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

私が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ずつより小さい値で移動します。

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

レイヤー

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

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

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

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

ラフ

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

以上が私のやり方です。

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

Add Comment

本文

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

  2. hiro

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

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

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

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

  4. hiro

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

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

  5. [...] ■ 私がwebサイトのラフデザインを制作する時の流れ | Design Spice [...]

  6. [...] 私がwebサイトのラフデザインを制作する時の流れ http://ow.ly/5paAt [...]

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

  8. maru

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

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

  9. hiro

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

  10. hiro

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

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

  12. hiro

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

  13. [...] 他の方のラフ制作で参考になる記事 [...]

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

  15. [...] webサイトのラフを作る時の流れ 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

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

  17. [...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

  18. [...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

  19. [...] 他の方のラフ制作で参考になる記事 [...]

  20. [...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

  21. [...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

  22. [...] 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice [...]

  23. […] 私がwebサイトのラフデザインを制作する時の流れ Design Spice […]

PAGE TOP