スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

PhotoshopでWEBサイトのラフデザインを作る

記事タイトル枠

こんにちは!急に暑くなりましたが皆さまいかがお過ごしでしょうか?
第4回目の授業は、WEBサイト作成における大切な作業、ラフデザイン作成についてです。

ラフデザインとは、WEBサイトをブラウザで見た時のイメージそのままを、PhotoshopやIllustrator、Fireworksなどデザインソフトで作った静止画のことです。
また、このラフデザインを元にコーディングを行うための、設計図であり部品でもあります。

今回は、コーディングの一段階手前であり、コーディングで無駄な苦労をしないための、ラフデザインの作り方を考えていきたいと思います。

ラフデザインが大事な理由

WEBサイトを作る、と聞くと、その作業のメインはHTML、CSSのコードをカタカタ入力すること(これをコーディングと言います)と思われるかもしれません。

それは決して間違いではないですし、これをしないとブラウザでページは見られません。慣れるまではここに一番時間もかかるでしょう。
しかしコーディングはサイト作成の最後の過程であり、ここまでの過程でしっかり基盤ができていたら、(普通のサイトであれば)実はそれほど苦労する部分ではないのです。

実際、サイト作成の課題を終えた人たちから、「初めにもっとちゃんと考えといたらよかった!」という声を本当によく聞きます。
コーディングを始めると、【もう後戻りできない】感覚になります。コーディングの途中で、例えば「ここの幅ちょっと変えよう」というだけでもその修正には結構な労力を要するということが理由でしょうか。

たいてい、「(まだちょっと考える余地はあるけど)取り敢えずこんな感じで進めてみて、だめそうなら後で修正すればいっか」という気持ちで進めると、上のように後悔することになります。

実務でも、クライアント側と制作側とのイメージを完全に一致させるためにラフデザインの修正は何度もすることがあります。
これで行きましょう、とラフデザインのOKが出ないと次のコーディングには進みません。逆にコーディング作業が始まってからのデザイン修正依頼には、追加料金を設けていたりもします。

前置きが長くなりましたが、つまりは「ラフとか言ってるけど、完成形をしっかりイメージしてカッチリ作りましょう」ということです。

以下が、ラフデザイン作成の大まかな流れです。

  1. コンセプト・ターゲット・サイト構成を決める
  2. デザインの方向性を決める
  3. 手書きでレイアウトを書き出す
  4. ファイルを用意する
  5. デザインする
  6. レイヤーパネルの整理をする

私のやり方に偏っているところがあるかもしれませんが、まずはこの手順をなぞってみて、慣れてきたら自分のやりやすい方法を取り入れてください。

コンセプト・ターゲット・サイト構成を決める

デザイン以前のこの部分は、WEBサイトをどのように活用するかという戦略であり、デザインの素にもなる最重要な部分です。
制作を委託されている場合は、クライアントとよくよく話し合って、後々ぶれないようにします。

簡単には、

  • その企業や団体がどういうものか
  • その企業や団体がどういうところを目指しているのか
  • ターゲットはどのような人か
  • WEBサイトを作る目的は何か
  • どのような内容を、どのような構成で盛り込むか
などが挙げられますが、ここは内容のボリュームが大きいので詳しくはまた別の回に取り上げたいと思います。

制作会社や外注デザイナーであれば、この部分は営業さんなどが既にクライアントと相談済みのはずなので、上記の項目については情報として与えられます。

デザインの方向性を決める

この部分も、上の項目と合わせてクライアントと話し合っておきます。

サイトのイメージの希望をできるだけ多く、具体的に聞き出しておきます。自分のサイトを作る場合は、思いつく限り書き出します(きれいな、やさしい、親しみやすい、すっきりした、爽やかな、健康的な…など)。

クライアントがはっきりとイメージを持っている場合もあれば、そうでない場合もあります。そういう時は、WEBサイトがたくさん集まった下記のようなサイトを見せて、どのサイトがイメージに近いか、それはどの部分がそうなのか(色づかいなのか、写真が大きいところなのか、レイアウトなのか)、詰めて聞いてみましょう。

時に、個人的な趣味や好みを押し出しすぎて、業界のイメージとはかけ離れたデザインをしてしまうこともあります。
奇をてらう目的で敢えてそうするのでなければ、同業の大手企業のサイトや、競合他社がどのような雰囲気のサイトを作っているかということを研究してみるといいです。

手書きでレイアウトを書き出す

最初のクライアントとの相談の中で、WEBサイトの顔であるトップページに載せるコンテンツを決めておきます。ロゴ、グローバルナビ、メインビジュアルなど基本的なものに加えて、新着情報、キャンペーン・イベント情報、サービス概要、企業理念など、これもWEBサイトをどう活用しようとするかによって変わってきます。

トップページに載せる内容を洗いだしたら、どれをどう配置するか簡単にサムネイルをいくつか手書きします。

サムネイル

サムネイルとは、そのまま訳すと「親指の爪」ですが、「元は大きなものを、小さく縮小表示させた画像」というような意味で使われています。

思いつく限りのいろんなレイアウトのパターンを並べて書き出すことで、だんだん自分の中のイメージも固まってきます。

最終的には一つに絞って、それを大きく(A4いっぱいぐらいに)下絵として描き直しましょう。

下書き

ファイルを用意する

では、いよいよPhotoshopでの作業に入ります。

カンバスサイズの設定は、横幅はサイトの幅+200px、縦幅は、後で内容の増減により変えればいいので適当に入力します。

ここで、「じゃあサイトの幅はいくらにすればいいの?」と思いますね。

答えは今のところ、750px~980pxの間です。
今のところ、というのは、2011年6月現在よく普及しているPCモニタ(ディスプレイ)のサイズに合わせてあるからです。

小さめのモニタ(ちょっと古いデスクトップPC用モニタ等)で閲覧しそうな人をターゲットに多く含むようであれば760pxまで、そうでなければ950px程度が目安かなと思います。

大手サイトでは、富士通が750px、NECが760px、Yahoo!JAPAN・楽天市場は950px、という具合です。
ちなみにこのブログの横幅(メインの白い部分の左端から、右サイドのグレー部分の右端まで)は、930pxです。

実際に参考にしたいサイトの横幅を知るには?

デザイン初心者のみなさんであれば、参考にしたいサイトをじっと眺めて、どこをどうマネしようか考えていることと思います。
ディテールもそうですが、サイト全体の横幅やメイン領域、サブ領域、余白などの幅がそれぞれ何pxなのかも気になりますね。

そういう時は、ブラウザで参考にしたいサイトを開いている状態で、キーボードの[Alt+PrntScr]を押しましょう。
これで、アクティブウィンドウ(現在選択されているウィンドウ)のスクリーンショットがコピーされます。

キャプチャ

そして、Photoshopで新規ファイルを開きます。
カンバスサイズは自動的にさっきコピーしたウィンドウのサイズが設定されているので、そのままOKします。

新規ダイアログ

新規ファイルが開いたら、[Ctrl+V]でペーストすると、さっきのブラウザ画面が貼り付けられます。

[ウィンドウ]メニューから情報パネルを呼び出します。

長方形選択ツールで調べたい部分の幅ぴったりに選択範囲を取ると、情報パネルの「W」の値に幅が出ます。

横幅を調べる

私はだいたい上記の方法でしますが、ものさしツールを使ってもいいかもですね。
ブラウザ上でサイズの測れるWEBツールなんかも色々ありますが、今回は割愛します。

さて、サイトの幅が決まったら、カンバスサイズはそれの+200pxということでした。

これは、サイトの背景のデザイン用の領域です。200pxというのは決まりではないので好きに設定してください。
サイトの背景は単色のベタ塗りなのか、グラデーションなのか、パターンを敷くのか、そういうのが分かるようになっていればOKです。

まず、サイトの幅にガイドを引く

新規ファイルが開いたら、まずガイドを引いておきましょう

部分ごとのサイズが大体イメージできているのであれば、ヘッダー、メインビジュアル、グローバルナビ、メインエリア、サイドエリア、フッター、とそれぞれのエリア間の余白が分かるようにガイドを引いておきます。
中の部分はデザインを作りながら変わっていくかもしれないという場合は、サイトの幅の分だけ取り敢えず引いておきます。

ガイドを引く

この後、作業しながらガイドが邪魔になることもあるので、[Ctrl+:]で表示・非表示を切り替えながら作業します。

また、[表示]メニューの「スナップ」をONにしておくと、レイヤーなどが整列しやすいです。ただこれも、微妙な移動や変形に支障がある場合があるので、適宜ON・OFFを切り替えます。

デザインする

あとは手書きのラフを元にデザインしていけばいいのですが、これがなかなか難しいですね。

こうしたいな、というイメージがあっても、ソフトの操作に慣れないうちは遠回りしてしまうことも多いです。
これはもう経験を積むしかないので、修行と思って辛抱しましょう。
遠回りしているうちに操作を覚えたり、意外な機能を発見したりして悪いことばかりじゃありません。

配色などどうデザインすればいいか分からない

これも大きな悩みです。でもデザインには一定の理論があり、それを学ぶことで解決するものも多いです。
是非、デザインについての書籍やWEB上の記事をいくつか読んでみてください。

私自身もほぼ独学ですので正しいかどうか分かりませんが、いろいろ学びかじったことを元に、今のところデザインの際に気を付けているポイントを記しておきます。少しでも参考になれば。

使う色を初めに決めておく
画面が寂しくならないようにあちこちに色を付けたりパターンで塗ったりしたくなりますが、多色使いはデザイン初心者にとっては高度です。まずは、ベースの色(一番面積の広い背景の色)、サブの色(次に面積の広い色)、ポイントの色(一番強く、サイトの性格を表す色)を決めます。
決める順番は、初めにポイントカラー(キーカラー)を決めてから、それに合うようにサブカラー等を決めていく感じです。

ポイントカラーの他に色を足したい場合は、扱われる面積比にもよるかと思いますが、取り敢えずトーン(鮮やか・淡い・鈍い・明るい・暗い)を同じにしておけばちぐはぐになることは少ないと思います。
使う色を決めたら、スウォッチパネルに登録しておきます。部分的なイラストやバナー等は除き、ページの土台となる部分には決めた色しか使わないぐらいのつもりで。

色を選ぶ

使うフォントも初めに決めておく
ページタイトル画像に使うフォントはコレ、見出し画像に使うフォントはコレ、英字の場合はコレ、と決めておきます。会社のロゴがあるのなら、それとケンカしないようなものを選びましょう。性格の強い個性的なフォントを何種類も使うと、画面がうるさくなるので気を付けます。

フォントについて参考になるのがこちらの記事。

本文は文字のアンチエイリアスをオフにする
バナーや項目の画像に入れる文字はアンチエイリアスをオンに、そうでない普通のテキストの部分はオフにします。
その方が、実際にブラウザで見た時のWEBページにイメージが近いからです。

文字のアンチエイリアス

余白に気を使う
要素と要素の間をどれくらい開けていたら読みやすいか、心地よく画面が見られるかを考えます。
縦の余白は何px、横の余白は何px、とページ全体で統一するといいです。

その他、細々あると思いますが、また別の機会にまとめたいと思います。

とにかく、伝えたい人(ターゲット)に伝えたいことを的確に伝えるにはどうしたらいいか、どうしたら読みやすく理解しやすいかと考えることが大事です。

あとは色んなデザインを見て、マネしてみて、自分のこだわりも取り入れつつ研究を重ねましょう。

レイヤーパネルの整理をする

余裕があれば作業中にレイヤーを整理しながらデザインを進めますが、最後にレイヤーの整頓をしましょう。
レイアウトのパーツごとに大きくグループにしておいて、それぞれの中でも部品ごとにグループに分けておくと、次にファイルを開いたとき、また別の人にファイルを渡した時に編集がしやすいです。
非表示レイヤーや空っぽのレイヤーなど不要なレイヤーは削除しましょう。

レイヤーパネルを整頓

ラフデザイン作成について、以下のような記事もありました。

今日は長かったですね。お疲れさまでした!

関連記事
このエントリーをはてなブックマークに追加
ページトップへ戻る

コメントの投稿

非公開コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。