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

WEBCRE8TOR.COM

ウェブデザインB 第4回

webdesignb04

ウェブデザインB 第4回

前回はみんなに描いてもらったデザインラフを、チェックポイントをもとにチェックを行いました。
具体的には以下のチェックポイントです。

これらのチェックポイントだけで見直しても100点満点のデザインラフはなかなかないと思いますが、それでもとてもいいものを描いている人が何人もいました。

さて、今日はそのデザインラフを使って、「ワイヤーフレーム」というものを作っていきます。

ワイヤーフレームの制作

前回、前々回とトップページのデザインラフを作りました。
今回はそれを、「ワイヤーフレーム」に落とし込みます。
さて、この「ワイヤーフレーム」とは何か?

ワイヤーフレームとは?

ちょっと分かりにくいかもしれませんが、これがワイヤーフレームです

lesson04_1

キャンバス上に四角形テキストが配置されてますね。
一言で言うと、「ページ上の間取り図」のようなものです。

これを使ってレイアウトを作り、ブラウザで見た時に、実寸でどんなサイズなのかpixel単位で確認できます。
前回、前々回と手書きラフを作ってもらいましたが、今度はそれを「設計図=ワイヤーフレーム」に書き換えます。

今回はデザインラフをワイヤーフレームに清書する作業を行います。
ということで、Photoshopでワイヤーフレームを作りましょう。

ちなみに手書きで作ったデザインラフはPhotoshopで作り込む事になるので、
ワイヤーフレームは実寸のサイズを考えてしっかり作り込んでください。

では制作にあたっての準備を行います。

Photoshopの基本設定

この講義の第1回目ではAdobe Photoshopを使いやすくするための各種設定のお話をしましたね。
今回も設定を行いますので、Photoshopを起動してください。

教室のPCはシャットダウンするたびに毎回初期化されてしまって設定が消えてしまうために毎回起動後に以下の設定をしなければいけません。

PSDデータを用意する

そして、今度はワイヤーフレームを作るPSDを用意します。

  1. Ctrl + N で新規ファイルを用意し、幅1200px、高さ1000px、カラーモードRGBカラー8bit、カンバスカラー透明に設定。
  2. OKをクリック。
  3. まず左右のガイドを作る。Ctrl + Rで定規を表示して、Shift + マウスのドラッグでガイドを引く。

ガイドですが、例えば、左:100px・右1100pxの位置なら、
左右の余白がそれぞれ100px、内側のコンテンツが1000pxのサイズの目安を作ることができます。

それぞれのツールの使い方

ではワイヤーフレームを作るために必要なツールの使い方を解説します。
手順は以下。

  1. べた塗りレイヤーで背景を作る
  2. 長方形ツールでブロックを作成
  3. 横書き文字ツールで文字を作成
  4. 2と3を繰り返す

以上になります。
また、左右以外にもガイドを引くことで、よりわかりやすく作業を進めることができます。

作業時間を取ります

実際に作業している状態のものを見せます。
それが以下のもの。

以上です。
少しはイメージできたかな??

ではここからはワイヤーフレーム制作の作業時間を取りますので、
準備が終わった人から自分の手書きデザインラフをワイヤーフレームとして清書する作業を始めてください。
見本は上の画像、作業工程は上述の通りです。

もしデザインラフがまだできていないという人がいれば、
友達に聞いたり以前の講義を見直したりして完成させましょう。

ワイヤーフレームはWebサイト制作の基本中の基本

ワイヤーフレームできましたか?正直私はあまり作りません。
けどワイヤーフレームはWebサイト制作の基本中の基本なので覚えておいて損はありません。

ではこのワイヤーフレームを制作したPhotoshopのPSDファイルに名前をつけて保存を行ってください。
ファイル名は「wire-自分の学籍番号」にしてください。

注意点として、自分が管理できない場所にデータを保存してしまうと、PCの再起動時に削除されてしまう恐れがあります。自分が管理できる場所にデータを保存してファイルをなくさないようにしてください。

課題の提出

今回は制作したワイヤーフレームをjpgに書き出して提出しましょう。
注意点ですが、jpg以外は受け付けられないようになっていますので、
必ずjpgに書き出して提出してください。

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

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

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

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

本日のまとめ

今回からワイヤーフレームの制作に取り掛かりましたが、簡単に理想形を言うと、「完成デザインの着色前の段階」、いわばワイヤーフレームは完成デザインの土台です。

ここで設計ミスをしてしまうと後々の修正が大変になりますので、じっくりと作りこんでみましょう。

もちろんそのまま本デザインに移行するので実寸のサイズを考慮して作らなければいけませんが、Photoshopのようなツールのいいところは何度でも作り直しができるところです。

自分が書いた手書きデザインラフを、思い描く完成形に少しでも近づけるために、よくにらめっこしながらワイヤーフレームを作っていくといいと思います。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE