先週は様々なウェブサイトのタイプやカテゴリーを解説しましたね。
課題ではそれ以外のタイプ・カテゴリーにはどのようなものがあるかを皆さん自身で探しました。
今回は、前回レクチャーしたウェブサイトタイプ・カテゴリー、そして前々回に解説したウェブデザインでするべきこと・流れ、これらの内容を踏まえた上で手書きのデザインラフの制作を行いましょう。
この工程は第02回のトップページデザイン確定までのワークフローの③のデザインラフ（手書き）の制作にあたります。
前回、課題用紙を必ず印刷して持ってくるように指示しましたが、ちゃんと持ってきていますか？？
印刷できていない場合、持参し忘れた場合は以下を印刷してください。
ファイルを開く際に求められるID・PASSは以前紹介したものを使ってください。
こちらの課題提出は来週の講義中に行います。
デザインラフの制作 ① 3つのポイントと手書きデザインラフ
デザインラフとは？
どういったものがデザインラフなのか？がわからないですよね。
一般的にはPCでデザインを組む前にイメージを膨らませるために、手書きでデザインの骨組みを作ったものがそれになります。Google画像検索で探してみましょう。
いっぱいありますね。
これらが今回手書きするデザインラフの目指す状態です。
何が書いてあるかを細部までよく確認してみると、
「どこに何を配置するか」、「各ブロックの役割はなにか」、
「どういった動きをするか」などが手書きで書かれているものです。
こちらがまさにそれです。
なぜ手書きなのか？
手書きのメリットは、違うと思ったら消しゴムで消して何度でも書き直しができること。
「パソコンができないからデザインができない」というコメントをたまに見かけるんですが、
きっとそれはPCでは技術的に難しく、かゆい所に手が届かない時があるからですよね。
手書きなら細かい部分の調整も簡単にできます。
そして、後ほど出てきますがラフといっても書くものは図形だけではありません。
頭の中にあるもの、まだそこにはないアイディアを整理するために手を使って、配置したい図形も、載せておきたい説明も、使っておきたい写真も、実現したいものを手書きしましょう。
デザインラフ制作のための3点のポイントを書き込む
今回はせっかくなので、皆さんが所属している、中国短期大学情報ビジネス学科のウェブサイトのトップページデザインラフを作ってみたいと思います。
課題のやり方を説明します。
課題用紙に下記の3点が書いてありますね。
- クライアントの業種
- どんなサービスを提供している？
- メインターゲットは？
この3点を考えたらそれを用紙のそれぞれの枠に記入し、どんな項目が必要か？どんな配色にするか？どんな機能を持たせたいか？をしっかり考えながら、手書きでデザインラフを作ってみてください。
さて先ほどみなさんには、「情報ビジネス学科のWebサイトのデザインラフを作ってください」・・・と伝えました。
そこまでわかってるのなら、わかりきった3点のポイントなんて、わざわざ紙に書く必要なんかないんじゃないか？と思うかもしれません。
しかし紙に書くという行為自体にデザインを始める上でとっても重要な理由があります。
ポイントを紙に書く理由
それは頭の中の引き出しに付箋を貼ってキーワードを見つけやすくするためです。
ウェブの仕事に限らずクリエイティブな仕事をしている場合（どんな仕事でもだけど）、
自分の頭の中に「引き出し」というものができてきて経験とともに次第に増えていきます。
引き出しが増えるとその中から色々なアイディアが生まれます。
そして仕事をこなしていくと「この表現は前に好評だったから今回も使ってみよう！」ということもあるかもしれません。
・・・でも、好評だったことがあるからという理由だけで、
その表現を使っていいものなのか？というとそれは違います。
最も適した表現を見つけ出すことが、最も重要なんです。
キーワードを元に判断が簡単になる
経験を積んで知識が増え辞書のようになった頭の引き出しの中から、付箋のように貼ってあるキーワードを元に、最も適した表現を見つけ出します。
使う場所やタイミングなどの判断、配色や大きさなどの判断、
そもそもその表現が本当に適しているかどうかという判断、
様々な判断をしやすくするための最も効率的な作業が「紙に書き出すこと」なんです。
頭の中に漠然と持っているものも、書かずに考えているだけじゃ漠然としたまま。
書き出して初めてキーワードとして使うことができます。
クライアントから聞き出した情報を整理してアウトプット
例えば私の場合、ポイントはこういう風に書きました。
| クライアントの業種 | 岡山県にある短期大学。 |
|---|---|
| どんなサービスを提供している？ | コンピュータを使ったプログラミングなどや動画制作・写真の撮影・加工技術の習得など、より専門的な分野の技能習得を提供している。 また、一般事務職など、就職先の企業で即戦力となるような技術を細やかに指導し、習得させる。 特色として、地方テレビ局で放送される番組を学生が制作しており、番組制作の現場の雰囲気を肌で感じられることなどがある。 |
| メインターゲットは？ | プログラミングやメディア制作、事務職に興味のある高校生（10代）。またその親御さん（40〜50代）。 入学希望の高校生が親御さんに「こんなメリットがあるんだよ」と伝えやすいように、Webサイト上で入学のメリットをわかりやすく伝える必要がある。 また最大の比較・競合相手は専門学校となるので、本学のメリットを明確に示し専門学校との差別化を図る必要がある。 高校生はスマートフォン、親御さんはスマートフォンと比較的新しいPCなどでWebサイトを閲覧するという想定。 |
こんなふうにかなり細かく書きました。
デザイン制作は設計・問題解決であると伝えましたね。
設計するためにはクライアントから聞き出した様々な情報をインプットし、整理し、問題解決を施した状態でアウトプットする必要があります。
そこでこれらの情報から様々なキーワードを取り出してデザイン制作のヒントにしてみましょう。
例えば「どんな機能が必要なのか？」を考えた時、以下のキーワードを取り出してみます。
| メインターゲットは？ | 「高校生はスマートフォン、親御さんはスマートフォン&比較的新しいPCなどでWebサイトを閲覧するという想定。」 |
|---|
「スマートフォン」と「比較的新しいPC」というキーワードがありますね。
ということは少なくとも、「スマートフォン」と「比較的新しいPC」で、問題なくWebサイトを閲覧できるように作らなければいけない、ということがわかります。
これにより「スマホ対応が必要」という点と、「PCでは古いブラウザの対応は必要ない」というアウトプットができました。これだけ細かく書いてしまえば整理してアウトプットすることは簡単ですね。
機能面やコンテンツで必要、不要なものを考え出したのちにデザインラフを作ることで、結果的に、より緻密に計算され洗練されたクオリティの高いWebサイトを生み出すことができます。
トップページのデザインラフを描いてみよう
3つのポイントは書けそうですか？？キーワードの抽出はできそうですか？？
このセクションはいったんペンが走り始めたら案外スラスラと書けてしまうはず。
では3つのポイントの下にある「トップページデザインラフ」の枠にデザインラフの書き方に進みます。
まずはどういったものを書くのか？をおさらいします。
先ほども言いましたが、こちらなどは理想的です。
その上でも見本となるものが必要ですね。ということで次の項目です。
アーカイブサイトから好みのデザインを探してみる
トップページデザインラフを作るためにはまずは、参考サイトなどを検索してみるのが有効です。
トップページデザイン確定までのワークフローの1にもありましたが、
まずは見本サイトを探すところから始めてみましょう。
当ブログの記事に参考サイトをまとめているので下のリンクを開いてみましょう。
こういったサイトでまとめられているWebサイトデザインを参考に、
とにかく最初は「こんなデザインにしたい」という理想のデザインを想像して書いてみてください。
参考サイトの探し方・選び方
アーカイブサイトを使って参考サイトを探す、まではわかりましたが、
では何を基準に探したり、探したサイト群から選んだりすればいいのでしょうか？？
もっともおすすめの方法は・・・
- まずは漠然と自分の理想のデザインを決めておく。
（キレイ系・可愛い系・大人っぽい系・・・などなど） - それを元に参考サイトを数件ピックアップする。
（3〜5件あればいいかな） - ピックアップしたサイトのページ内（今回の場合はトップページ）に設置されている機能（ブロックやパーツ）を1サイトずつ整理して書き出す。
（お知らせ一覧・メッセージブロック・スライドショー・サービス一覧・バナー・・・などなど） - 整理した機能を元に、レイアウトなども参考にしつつ、最も理想に近い状態にパズルのように組み合わせる。
- 課題用紙にレイアウトを書く。
以上です。
ポイントは「機能でブロックわけすること」です。
参考Aサイト：◯◯◯◯◯◯◯◯◯◯（コーポレートサイト）
・ロゴ
・ナビ
・スライドショーブロック
・メッセージブロック
・サービス一覧
・お知らせ参考Bサイト：◯◯◯◯◯◯（飲食店店舗サイト）
・ロゴ
・ナビ
・動画
・instagramの画像一覧
・料理のメニュー
・・・といった感じでサイトごとにリストアップするとブロックや機能をわかりやすくまとめられます。
課題用紙の端っこや裏などに書いて、いつでも確認できるようにしておくと、後々の作業が滞りなく進められますよ。
「こんなデザインにしたい！」という好みもすごく大切
デザインラフを書く上でキーワードから必要・不要を決めることがまず重要ですが、もっと重要なものはデザイナー本人の「こんなデザインにしたい！」という思いです。
どんなクライアントでも、デザイナーの実績や作品を見て、「この人に作ってもらおう」と思って仕事を依頼するはずです。
それは、デザイナーが作り出すデザインのテイストや動きなど、デザイナーの技術に感動したり、方向性に共感するものがあるからに他なりません。
それはデザイナーの仕事が他人に認められた証拠。
それにより「デザインが気に入りました！」というお問い合わせがすごく増えてきます。
すごく誇らしいことです。
まずは情報の整理をして、その上で「自分なりのデザイン」を追求してみましょう。
あなたの個性をガンガン出していいと思いますし、それを見てみたいと思っています。
デザインラフの書き方のまとめ・着手
ではいよいよ課題をやってみましょう！
書き方をまとめます。
- 「クライアントの業種」「どんなサービスを提供している？」「メインターゲットは？」の3つのポイントを考え、課題用紙のそれぞれの記入枠に書き込む。
- ①で記入した内容から重要になるキーワードを抽出する。
- デザインラフの参考にする見本サイトをアーカイブのサイトから探す。
サイトごとに機能でブロック分けをしてまとめ、リストアップする。 - ③で収集した見本サイトのページデザイン、そしてブロックを参考にし、盛り込む機能やレイアウトを決める。
- ①②③④の情報を元にデザインラフを描く。参考を見ればわかるように、丁寧に書く必要はなく、機能やレイアウトが分かるレベルで書けていればよい。
以上です。
では時間を取りますので課題をやってみましょう。
まずは①「3つのポイント」をしっかり書き、そして②「キーワードを抽出する」作業を行います。
（目安：10分程度）
それが終わったら③「見本サイト収集・ブロックのリストアップ」および④「③を参考に盛り込む機能やレイアウトを決める」作業を行います。
（目安：10分程度）
最後に⑤「デザインラフを描く」を行います。
（目安：5分程度）
それぞれの工程の始まりと終わりに声をかけます。
それでは始めてください。
本日のまとめ
現段階では漠然としたもので十分
できましたか？？いきなり書けと言われてもなかなか難しいですよね。
けどデザインの仕事なんてそんなものです。
何もない状態からクライアントから得た情報や要望だけで組み立てていきます。
最初の「イメージ」や「アイディア」の段階でのデザインラフは漠然としたもので十分です。
ただ、クライアントが求めているものに+αの提案をしてあげると、
やっぱプロだな！！と思わせることができ、その後の進行を優位にすることができます。
そしてこのデザインラフ制作はウェブデザインの工程で非常に重要なセクションになります。
なぜなら、クライアントからヒアリングした内容の理解度が表れるからです。
自分のことをどれだけ理解してくれているか？ちゃんと話を聞いてくれたのか？？
ウェブサイトは安い買い物ではありません。
なのに、適当に話を聞いているデザイナーに依頼したくないですよね？？
課題は次回提出します
今回の課題は次回第05回講義の課題提出フォームから提出するようになります。
第06回の講義開始前までに課題用紙をスキャナで読み取り、JPG（拡張子：JPG||JPEG|jpg|jpeg）データの状態で保持しておいてください。いつものように提出フォームを使い、データを添付して提出してもらいます。
なお、JPG以外の形式ではフォームからの送信ができませんので注意してください。
