ウェブデザインB 第5回 - ウェブデザインB | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザインB 第5回

webdesignb05

ウェブデザインB 第5回

前回はワイヤーフレームを作り始めましたね。簡単に概要のみ紹介した段階で制作に取り掛かりましたが、今回は前回よりもさらに掘り下げてワイヤーフレームを制作する意味や、使うツール、作り方を紹介しようと思います。

ワイヤーフレームの制作

前回、ワイヤーフレームとは「設計図」「完成デザインの土台」だと説明しました。
では実際にはどういった使い方をするのか?といった点を考えていきましょう。

今回は一つのサイトを例にとり、「デザインラフ」「ワイヤーフレーム」「完成デザイン」を見てみたいと思います。

デザインラフ制作前のポイント

この「中山下スキンクリニック」様は、岡山市内一般皮膚科・美容皮膚科を新たに開院されるということでウェブサイトの新規制作のお問い合わせ・ご依頼をいただきました。

できたばかりのクリニックに伺うと、開院前にリフォームを行われたらしく、内装も素敵でとても綺麗な印象。また院長先生も気品があってとても素敵な方でした。

お話を聞いていると、一般皮膚科も美容皮膚科もどちらもバランスよく行われるということで、どちらかに比重を置いてデザインを組むというわけではなさそう。

また、院長先生の好きなデザインのテイストは「オリエンタル系」で、キーカラーはそれほど彩度の高くない落ち着いた「紫」で、診察券や封筒などにも使われている色。

・・・ここまでの内容で第2回で書いた3つのポイントは作れますね。

デザインラフに着手

ヒアリングができたらいよいよデザインラフの制作です。
今回はポイントを元にこんなデザインラフを描きました。

webdesignb05_02

これをクライアントに見せ、チェックバックをもらいます。

クライアントが思い描いたデザインと自分が作ろうとしているデザインには必ずと言っていいほど差異があります。差異がある限りはデザインを完成させることはできないのでその差異を埋める作業が必要になります。

ここをこうしてほしい。あれは必要、これは不要などなど・・・デザインラフを使って手直しをすることによって、出来上がりのイメージがもっとはっきりとしてくるため、ヒアリングの時には出てこなかった要望やアイディア、修正点がどんどん出てくるはずです。

出てきた要望やアイディア、修正点をデザインラフに反映させて再び見せる。
このやりとりを何度か行います。

ワイヤーフレームの制作

デザインラフでOKが出たら、今度はそれをワイヤーフレームに清書します。
今回はこんな感じのワイヤーフレームになりました。

webdesignb05_03

なぜワイヤーフレームを作るのか

前回の講義の説明で、ワイヤーフレームは実際のサイズを把握するため。
また、どこに何をレイアウトしていくのかを明確にするために作る、ということでしたよね。

それに加え、誰が見てもわかりやすい状態にする(清書する)ことで、滞りなくプロジェクトを進めるため、という理由もあります。

一つのサイトを制作するのに関わるのは自分とクライアントだけではありません。

例えば、もしこの仕事が代理店からもらった場合なら、まず代理店の担当者にレイアウトや仕組みを理解してもらう必要があり、その担当者を通してクライアントに見せることになります。当然担当者が理解できなければクライアントに見せることなんてできませんよね。

また例えば、サイトに使う写真をプロのカメラマンに撮ってもらうのであれば、どこにどんな写真が必要になるのかの指示が必要になります。明確な指示をしない場合にはカメラマンの考えや技術任せになってしまうため、思っていた写真と違った・・・ということも少なくありません。

複数の人間が見ることを想定して、手書きのものをそのまま出すのではなく、清書した状態で、相手に理解してもらうことが重要になります。

ワイヤーフレームはプロジェクトメンバーの差異部分を埋めるためのコミュニケーションツール、ということですね。

使ったツールと使い方

この3つのツールだけでワイヤーフレームは作れます。
念のため、大変参考になる記事を載せておきます。

参考:HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

完成デザイン

デザインラフ、ワイヤーフレーム、そしてPhotoshopでのデザインを終え、最終的に以下のデザインになりました。

webdesignb05_04

この状態でクライアントのOKがもらえれば、ようやくhtmlコーディングを始められることになります。

では、今回もワイヤーフレームを作りましょう。
前回出席している人は作り始めたデータを、前回欠席した人は前回の講義記事を見ながら作り始めてください。

Photoshopの基本設定

今回もまず設定から行います。Photoshopを起動してください。

Photoshop 実践 その3:クイック選択ツール・境界線を調整で切り抜き

さて、今回は新しく「クイック選択ツール」「なげなわツール」と「境界線を調整」を使った切り抜きを行います。
この方法は主に髪の毛などパスツールでは難しい切り抜きの場合に使用します。

Photoshop 実践 その3:クイック選択ツール・境界線を調整で切り抜き

課題の提出

今回はこの画像切り抜きの課題を提出しましょう。
注意点ですが、jpg以外は受け付けられないようになっていますので、
必ずjpgに書き出して提出してください。

では提出用にjpgで書き出してみましょう。
手順は以下。

  1. 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
  2. Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
  3. 一番下の「保存」をクリック。
  4. ファイル名をつける必要があるので自分の学籍番号を記入して保存をクリック。

では下のフォームに、書き出したJPGを添付して送信してください。

学籍番号(必須)
氏名(必須)
フリガナ (必須)
メールアドレス
課題ファイル

余裕があったらこれもやりたい

切り抜き③ ファイト!とポーズを取る女性

素材URL:ファイト!とポーズを取る女性|フリー写真素材・無料ダウンロード-ぱくたそ

切り抜き前

-shared-img-thumb-N112_fightpoze_TP_V

切り抜き後

N112_fightpoze_edit

余裕があればやろうね。
この画像を切り抜くには「ブラシ」や「焼き込みツール」を使うようになります。

本日のまとめ

ワイヤーフレームの役割や作り方について説明しましたがわかりましたか?

設計図や間取り図、コミュニケーションツールなどと説明しましたが、目的は一つです。
一番大事なのは、見せる相手に理解してもらうこと。

もしそれができていなければ何度も作り直さなければいけません。
何度も作り直すのは手間だし完成・公開が遅れてしまう原因になります。

作り直しを防ぐためにデザインラフの段階で3つのポイントをよく考えてまとめ、少しでも修正を減らすことが自分の作業を楽にしてくれます。その方が楽しいしね。

結局最初の段階でどれだけ真剣に考えるかで後々の手間数が変わってくるわけです。

デザイン業は、真剣に取り組んで、それを楽しめる人こそするべき職業だと思います。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE