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

WEBCRE8TOR.COM

ウェブデザインB 第13回

webdesignb13

前回はワイヤーフレームの制作を開始しましたね。
今回はその続きを行い、よりブラッシュアップし、デザイン作業につなげていきましょう。

さらに今回は仕組みの説明の記述を行います。
簡単に言えば、どのブロックにどんな要素が配置されていて、どんな機能をもっているか?
またその要素はどんな表現で表示されるのか?などをわかりやすく記述したものです。

今回は演習のために大幅に時間を使いたいのでレクチャーは少なめにしています。

Photoshopの基本設定

Photoshopの基本設定から行いましょう。
まずはPhotoshopを起動し、ワイヤーフレームのPSDファイルを開いておいてください。

ワイヤーフレームの制作 ②の続き

今回はようやく演習に時間を取れそうです・・・。
ワイヤーフレーム制作の解説の各回の内容を参考に制作の続きを行いましょう。

ワイヤーフレームの制作 ①

ワイヤーフレームの制作 ②

ワイヤーフレームの制作 ③

まずは説明書の制作を行いましょう。手順を説明しますね。

  1. ブロック分けをする
  2. ワイヤーフレームを調整
  3. Wordなどで説明書を作成する

ワイヤーフレーム説明書制作手順① ブロック分けをする

まずはワイヤーフレームのブロック分けをしましょう。
ワイヤーフレームは1ページ分の構成、いわばページ上の間取り図」という説明をしました。
間取り図である以上ブロックが存在しますので、それらを明確に分けていく作業になります。

では私が制作する予定のページの手書きデザインラフを参考にブロック分けをしてみます。
みなさんは自分のデザインラフを見ながらブロック分けをしてみましょう。

まずは大まかに

まずは大まかに捉えるところから始めます。

この手書きラフの場合、1ページ内に以下のブロックを設けています。

  • ヘッダー
    役割:ロゴ、ナビゲーション、ソーシャルボタンなど、ページ遷移を行う。
    場所:ページ最上部 / ページ毎の表示の有無:全ページ共通
  • スライドショー
    役割:ウェブサイトのオーナーが何者なのかを写真で視覚的に表現する。
    場所:ページ最上部(ヘッダーに重なる) / ページ毎の表示の有無:トップページのみ(遷移なし)
  • メッセージ
    役割:オーナーからの簡単なメッセージを掲載し、各ページへのリンクを促す。
    場所:スライドショーの下 / ページ毎の表示の有無:トップページのみ(遷移あり)
  • ニュース・ブログ
    役割:オーナーからのお知らせやブログなど現在の状況を掲載する。
    場所:メッセージの下/ ページ毎の表示の有無:トップページのみ(遷移あり)
  • 加盟店募集
    役割:協業企業の募集を行うために募集内容コンテンツに遷移させる。
    場所:ニュース・ブログの下/ ページ毎の表示の有無:トップページのみ(遷移あり)
  • フッター
    役割:主にオーナーに連絡を取るためのアクセス情報を掲載する。
    場所:ページ最下部 / ページ毎の表示の有無:全ページ共通

以上6つのブロックで構成されています。
これらのブロックに対し順に「A・B・C・D・E・F」とアルファベットで割り当てていきましょう。

  • A. ヘッダー
  • B. スライドショー
  • C. メッセージ
  • D. ニュース・ブログ
  • E. 加盟店募集
  • F .フッター

これで大まかなブロック分けができました。
付与する記号自体はわかりやすければどのようなものでもいいんですが、
私は制作側もクライアント側も順番的にわかりやすいアルファベット順にしています。

しだいに細かく

次に、A〜Fの各ブロックで配置されたアイテム・コンテンツそれぞれを一言で説明できるように、
先程の記号に加えて数字を付与します。「A. ヘッダーのブロック」を例に取って分けましょう。

以下のようになりました。

  • A-1. ロゴ
  • A-2. グローバルナビゲーション
  • A-3. ソーシャルボタン
  • A-4. お問い合わせボタン

これで明確になりました。この細かいブロック分けをブロック毎に行います。
メモ程度でいいので、このように細かいブロック分けを行ってみましょう。

ワイヤーフレーム説明書制作手順② ワイヤーフレームを調整

次にワイヤーフレームのデータを調整します。

「説明用」と「ワイヤーフレーム用」のフォルダを分ける

まずはグループ(フォルダ)の整理を行います。
手順は以下。

  1. 新規フォルダ「説明文」フォルダを作成してレイヤーパネルの一番上に移動する。
  2. 新規フォルダ「ワイヤーフレーム」フォルダを作成して「説明文」フォルダの一段下に。
  3. 既に存在していた手書きデザインラフ(下書き)レイヤーとワイヤーフレームで作成したフォルダ・レイヤーを「ワイヤーフレーム」フォルダの中にドラッグ移動する。

最初に説明用のレイヤーをまとめるための「説明文」フォルダを作り
レイヤーパネル上の一番上にドラッグ移動します。

次に、今まで作成したレイヤーをまとめるため「ワイヤーフレーム」フォルダを作り
「説明文」フォルダの一段下にドラッグ移動します。

さらに現状レイヤーパネルに存在している手書きデザインラフ(下書き)レイヤーと、
ワイヤーフレームで作成したフォルダ・レイヤーを「ワイヤーフレーム」フォルダにドラッグ移動します。

この「説明文フォルダ」に各ブロック・アイテム・コンテンツの説明に関するブロックのレイヤーと名称の表記のレイヤーをまとめます。

長方形ツールなどを使ってブロックに枠を付ける

ではまずブロックに枠をつけていきます。

見本は先程の画像ですが、この画像と違うのは手書きデザインラフにではなく、ワイヤーフレームのブロックに対して行う点です。

いずれも「説明文」フォルダの中に作成します。

手順は以下。

  1. 長方形ツールで対象のブロックと同じくらいのサイズのレイヤーを作る
  2. レイヤーパネルの最下部「fx」アイコンの「レイヤースタイルを追加」をクリックする
  3. 上から3番目「境界線」を選択して以下に設定にしてOKをクリックする
    「サイズ:5px」「位置:内側」「描画モード:通常」「不透明度:100%」
    「オーバープリント:チェックなし」「塗りつぶしタイプ:カラー」「カラー:#cc0000など」
  4. レイヤーの「塗り」を30%程度に設定する

これでブロックは作れます。

ブロック枠にテキストレイヤーで名称表記を追加

次にブロックのペアになる名称表記のテキストレイヤーを作成します。

こちらも見本は先程の画像ですが、ワイヤーフレームのブロックに対して行います。
その際「ロゴ」を「A-1. ロゴ」にしたように、細かく分けた際の名称を入力します。
こちらも当然「説明文」フォルダに作成してください。

細かいやり方は前回伝えたので、今回は以下の手順で行います。

  1. ブロックに重ならないように横書き文字ツールでテキストレイヤーを作成する
  2. 「A-1. ロゴ」など細かく分けた際の名称を記入する
  3. 文字パネルで色を「#ffffff(白)」にする
  4. レイヤーパネルの最下部「fx」アイコンの「レイヤースタイルを追加」をクリックする
  5. 下から2番目「光彩(外側)」を選択して以下に設定にしてOKをクリックする
    「不透明度:100%」「カラー:#cc0000などブロックの境界線と同色」
    「スプレッド:100%」「サイズ:5px程度」

これでブロックと名称のペアのグループが作成できたので、
「Ctrl + G」でグループ化してフォルダ名もテキストレイヤーと同じものにしておきましょう。

枠に入らない場合はカスタムシェイプを使う

こちらの見本画像のようにブロックに入りきらない名称表記があったりしますよね。
そういった場合は線を引っ張って名称表記を枠外に置きます。

そしてここでみなさんにプレゼントです。
ワイヤーフレームのブロック説明用にカスタムシェイプを自作しました。
一緒に使ってみましょう。以下をクリックしてダウンロードしてください。

素材URL:ワイヤーフレームの説明カスタムシェイプ

中身を開くと、「ワイヤーフレーム説明.csh」というデータが入っています。
cshとは「Custom Shapes」の略で、カスタムシェイプの拡張子です。

ダウンロードしたらPhotoshopを開いた状態でダブルクリックしましょう。
カスタムシェイプに「ワイヤーフレームの説明」というフォルダが追加されているはずです。

早速使ってみましょう。

左側ツールパネルの「長方形ツール>カスタムシェイプツール」と選択して、上部メニューのシェイプの枠をクリックし、シェイプのフォルダ一覧から「ワイヤーフレームの説明」フォルダを開き、3つ目の「右」をクリックします。

カンバスをクリックすると「カスタムシェイプを作成」ポップアップが出てくるので、「縦横比を保持」にチェックを入れ「高さ:10px」としてください。

するとカンバスにまち針のようなシェイプが配置されます。
●の部分をブロックに、線の部分の先に名称レイヤーを配置し、
「Ctrl + T」で自由変形にしてから「Shift + 回転」で角度を調整したり、
線の部分の長さを変えて位置を調整したりします。

シェイプの色を名称レイヤーと同じ色(#cc0000など)にしておくと見やすいですよ。

ブロックの作成と、ペアの名称表記の作成を繰り返す

あとはブロック、および細かいブロックに対してブロック・名称表記の作成を繰り返すだけです。

必ずしもきっちりとしたものを作る必要はありません。
次のテキストファイルでの説明をちゃんと書けていればいいんです。

ワイヤーフレーム説明書制作手順③ Wordなどで説明書を作成する

ここからはWordなどの文書作成ソフトで作った各ブロックの説明を記述していきましょう。
先程制作したワイヤーフレームの説明文はこの文書のためのものです。

この工程は「各ブロックの説明をテキストで記述」という極めてシンプルな内容です。
しかしシンプルであるからこそ能力やモチベーションが浮き彫りになる非常に怖い工程です。

適当に制作した成果物を適当に説明したのでは、
自分以外の人間にきちんと理解してもらうことはできません。
そして自分のデザインを適当に説明するデザイナーにクライアントは納得しません。

自分が制作したデザインは我が子のようなものです。
それを「素晴らしい!」と判断されるか、「う〜んイマイチ」と判断されるか・・・
すべては自分次第ですからね。

書式

説明書の書式ですが、ブロック毎に以下のようなまとめ方をすると誰もがわかりやすいと思います。

[A.ヘッダー]
・A-1.ロゴ
・A-2.グローバルナビゲーション
・A-3.ソーシャルボタン
・A-4.お問い合わせボタン

ヘッダーブロックは横幅いっぱいで表示し、左側に寄せる形でA-1とA-2を配置します。
A-2を固定表示にすることでページ遷移を容易にし、サイト内の回遊率の向上を目指します。
右寄せされる形でA-3およびA-4を配置、A-3のボタン群をクリックするとそれぞれのソーシャルアカウントに飛んでフォローを促すことで固定顧客につなげる道筋を作ります。
A-4はA-2よりも目につきやすいボタンで表示してお問い合わせにつなげます。

[B.スライドショー]



まずは[A. ヘッダー]のようにブロック名を記述すぐ下に細かいブロックを箇条書きする。
最後に、このブロックでは何がどう配置されるのか表示や動きはどうなるのか
その役割と効果は何を狙っているのかなどを事細かに記述します。

これをブロック毎に記述していきましょう。
困ったら以下を参考にしてください。

ワイヤーフレームに関しての仕組みの説明

以上です。

説明書を作成する時に使う文書作成ソフトはなんでも構いません。
ただクライアントが読める状態にしておく必要はあります。

課題の提出

さて課題提出です。
ワイヤーフレーム
説明書の計2ファイルを課題提出します。

今回は制作したワイヤーフレームをjpgで書き出し
説明書はdoc形式などで保存したのちにzip形式で圧縮して提出しましょう。

ワイヤーフレームの書き出し

ではまずワイヤーフレームを提出用にjpgで書き出してみましょう。
手順は以下。

  1. 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
  2. Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
  3. 一番下の「保存」をクリック。
  4. ファイル名を以下のようにして保存をクリック。
    「ワイヤーフレーム」→ 学籍番号-wire

説明書の保存

次に説明書を忘れないように保存し、フォーム提出用にzip形式で圧縮してください。
手順は以下。

  1. 説明書と名前をつけてファイルを保存
  2. ファイルを右クリックして、「送る」→「圧縮(zip形式フォルダー)」を選択してzipファイルを作る。
  3. ファイル名を以下のようにして保存をクリック。
    「ワイヤーフレーム」→ 学籍番号-wire_doc

以上です。

では下のフォームに、ワイヤーフレームを書き出したJPG、
そして圧縮したzipファイルを添付して送信してください。

    学籍番号(必須)
    氏名(必須)
    フリガナ (必須)
    メールアドレス(必須)
    課題ファイル
    ワイヤーフレーム (必須)
    課題ファイル
    ワイヤーフレーム説明書 (必須)
    質問・相談

    本日のまとめ

    ワイヤーフレームと説明書の制作はどうでしたか??
    時間がかかりましたがようやくここまで辿り着けました。

    もちろん実務上でもワイヤーフレームの制作は重要な工程のひとつですが、
    やり続けていくと次第に自分なりのやり方というものが出来てきていつしか定着します。
    使用ツールや順番、そして色使いや書体に至るまで、デザイナーごとに全然違います。

    しかしながら、ワイヤーフレーム制作の基本となる部分は何も変わらず、
    この講義で紹介した「ブロックを作成」「テキストで説明を作成」の流れです。
    そして最も重要なのはその先にあるページデザイン作業を見据えた設計をすることです。

    今回のページデザインに限らず「指標」として持っておいて欲しいのは、
    自分に説明して自分が納得するか」、「自分が説明して他人が納得できるか」、
    そして「他人が説明して他人を納得させられるか」の3つです。

    その実現のために、自分ができるあらゆる手段を用いて取り組み続けましょう。

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE