Tumblr私がwebサイトのラフを作る時の流れを書いてみました。一般的な方法ではないかも知れないことを予め断っておきます。[...]私がwebサイトのラフを作る時の流れを書いてみました。一般的な方法ではないかも知れないことを予め断っておきます。他の人にとってはそうではないかもしれません...本エントリーはラフデザインのみ注力するため、既にコンセプト、ターゲット、サイト構成などは決まった状態と仮定します。(※本文中のショートカットキーは全てMacの場合です)希望デザインのヒアリング※委託業務の場合ですどんなデザインが希望かを先方にヒアリングします。この時にできるだけ、クライアントのイメージを明確にするため抽象的でも良いので沢山言葉を貰います。明るい、可愛い、ポップ、カッコいい、シンプル、落ち着いた...etc具体的にデザイン参考にしたいサイトがあるのなら聞いておきます。頂いた言葉と自分のイメージのギャップを埋めておきます。”シンプル”と言う言葉一つ取っても、人によって感じ方が違います。色についても同様です。この時に求めてるデザインがサイトのコンセプトとあまりにかけ離れてる時は提案しておきます。葬儀屋のサイトなのにピンクで可愛らしくとか。一般の方に受け入れ難いデザインになる場合は改善を提案します。追記:詳細をワイヤーフレームをつくる時に押さえておきたいポイントに記載しました。ページに入れるコンテンツを洗い出します。こららを盛り込んでワイヤーフレームを作ります。私はまず紙にざっと書きます。私は手を動かしてる方がイメージしやすいのでそうしてます。...汚い(笑)人に見せる事意識してないのでこんな感じです。クライアントに提出する時は、Illustratorで清書します。ワイヤーフレームに関しては下記記事も参考になります。DesignWalkerラフデザイン制作準備ワイヤーフレームでデザイン構成が決まったら、ラフデザインに入ります。最初に色とフォントを決めます。色の選定メインカラーを元に、近似色を1〜2色、アクセントカラーを1〜2色決めます。私は主にkulerかCOLOURloversを利用してます。配色に関しては下記のサイトが参考になります。Webクリエイターボックスwebデザイナーの色彩スキルを磨くエントリーまとめ*ホームページを作る人のネタ帳また、自分で決める場合はメインカラーからHSBの数値を変えると簡単です。Hだけ変更すれば同じトーン、Sは鮮やかさ、Bで明るさを調整して色が作れます。私は画像にしておきます。他者に渡して同じ色で作業してもらう事ができる、くらいですかね。フォントの選定サイトのデザインにあったフォントを選びます。本文はcssでフォントを指定するので、画像部分に使う書体となります。日本語、欧文、それぞれ1〜2書体ずつ。フォントプレビューソフトを使うと便利です。私はFontDocを使ってます。FontDocベースグリッド殆どのサイト制作で960pxグリッドを使用します。コリスこれにガイドラインを引いたのをベースとして用意しておきます。ガイドやグリッドにスナップさせるようにしておきます。photoshop→環境設定→ガイド・グリッド・スライスで、グリッド線10pixel、分割数2にします。ガイドの表示・非表示の切り替えで表示したり非表示にしたりしながらデザインしてます。デザイン後はひたすらワイヤーフレームに沿ってデザインしていきます。グリッドにスナップを使ってるので、オプジェクとは5px単位で整列されます。微調整は矢印ツールにして、キーボードの矢印で1pxずつ移動させます。shiftキーを押しながら矢印キーを押すと10pxずつ移動できます。別のツールを使ってる時でもコマンドキーを押すと一時的に矢印ツールに切り替わるので、その状態で移動することができます。※パスのアンカーポイントは拡大した状態で矢印キーを使っても1pxずつより小さい値で移動します。レイヤーはフォルダを使って整理しておくと作業しやすいです。最近ではレイアウトの自由度が上がったのでコーディングはあまり意識せずデザインしてます。ある程度形になったところで、(時間に余裕があれば)私は一日寝かせます。新しいアイデアが浮かぶことがあります。形になった時点で画像に書き出し、先方に確認してもらいます。問題無ければコーディング作業に進みます。以上が私のやり方です。他の方の方法も気になりますね。PMchakotay独学でこれだけ洗練されているとは素晴らしいですね。解説もとても分かりやすくて勉強になります。参考にさせていただきます。私はweb系の講師もしているのですが、受講生の方に貴サイトをご紹介させていただきたいと存じます。これからのご活躍もご期待しております。PMhiro>chakotayさんありがとうございます。端折ってるので後ほど各パート毎の詳細をエントリーしたいと思います。AMGadgetShop東京都と千葉県を中心にWEB制作の仕事をしています。リンクをたどってこちらのページにお邪魔しました。体系的に整理されていていいですね!じっくりと拝見させて頂きました。私もワイヤーフレームは手書きでSHOTNOTEにさらっと書いて、iPhoneに取り込み一緒に制作するメンバーの意見をもらったりして、その後必要に応じてIllustratorで清書してます。私もこうした情報を発信できるように自分のサイトにコンテンツを追加しようかな~っと思いました。すばらしい記事ありがとうございました。AMhiro>GadgetShopdさんありがとうございます。手書きはさらっとイメージを形にできるところが良いですよね。実際現場だと、その会社のやり方やプロジェクトの規模などでやり方は変化しますよね。他の方のやり方も見て私も参考にしたいと思います。PMHideDeliciousからきました。全体を通して他の人のWeb制作の作法を知る機会はあまりないので、勉強させてもらいました。自分の場合は、毎回ほぼ直感的に作業を進めてしまうのですが、一度手順をまとめておくと後で役に立ちそうですね。参考にさせてもらいます。PMmaruこんにちは!参考にさせていただきました!ところで、FontDocはMacだけなんですよね?インストールしようと思ったらMacの推奨バージョンしか書かれてなかったので...。PMhiro>Hideさんありがとうございます。人によって色んなやり方あると思います。私も直感的にやる事が多いのですが、今回はそれを形にしてみた次第です。PMhiro>maruさんFontDocはMacのみだったと思います。ユーティリティ」で検索すると同じ様なソフトが見つかると思いますよ。PM神澤ゆきえたまたま訪問しました。凄く解りやすく書いてあって、とても参考になりました。自己流であまり効率の良くない方法で悩んでいたので、とても良かったです!ありがとうございました。PMhiro>神澤さん独学だといろいろ悩みますよね。お役に立てて良かったです。コメントありがとうございます。悩んでいたサイトデザインの流れを少しずつ確立していく。自分も最初にラフスケッチを描くようになる。WEBデザイン始めました。こちらはデザインを起こす順序が書かれており、他人の進め方を見れ、非常に参考になります。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。