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

WEBCRE8TOR.COM

ウェブデザインB 第03回

webdesignb03

デザインラフ制作 ① 

デザインとアートの違いウェブデザインの工程はわかりましたか?

ここからはちょっと頭と手を動かしてみましょう。
今回からみなさんに、ウェブサイトのトップページデザインラフを手書きで作ってもらいます。

デザインラフとは?

どういったものがデザインラフなのかがわからない人もいるかもしれません。

一般的にはPCでデザインを組む前にイメージを膨らませるために、
手書きでデザインの骨組みを作ったものがそれになります。
Google画像検索で探してみましょう。

webサイト デザインラフ – Google 検索

いっぱいありますね。こちらとかがまさにそれです。

こちらに何が書いてあるかを細部までよく確認してみると、
どこに何を配置するか」、「各ブロックの役割はなにか」、
どういった動きをするか」などが手書きで書かれているものです。

なぜ手書きなのか?

手書きのメリットは、違うと思ったら消しゴムで消して何度でも書き直しができること。

「パソコンができないからデザインができない」というコメントをたまに見かけるんですが、
きっとそれはPCでは技術的に難しく、かゆい所に手が届かない時があるからですよね。
手書きなら細かい部分の調整も簡単にできます。

そして、後ほど出てきますがラフといっても書くものは図形だけではありません

頭の中にあるもの、まだそこにはないアイディアを整理するために手を使って、
配置したい図形も、載せておきたい説明も、使っておきたい写真も、
実現したいものを手書きしましょう。

情ビのサイトのラフを描いてみよう(概要説明編)

今回はせっかくなので、皆さんが所属している、
中国短期大学情報ビジネス学科のWebサイトを作ってみたいと思います。 

2021年4月現在、学科のサイトはまだ制作されていません。
もしかしたら皆さんの誰かが書いたラフを元に学科のWebサイトが作られるかも??

ウェブデザインB トップページデザインラフ課題

(なお欠席した学生へ、このPDFは提出用の課題であり、手書きで制作を行いますので必ず印刷してください。)

情ビのサイトのラフを描いてみよう(3点のポイント編)

課題のやり方を説明します。
配布(または印刷)した用紙に3点が書いてあると思います。

  1. クライアントの業種
  2. どんなサービスを提供している?
  3. メインターゲットは?

3点を考えたらそれを用紙のそれぞれの枠に記入し、
どんな項目が必要か?どんな配色にするか?どんな機能を持たせたいか?
以上をしっかり考えながら、手書きでデザインラフを作ってみてください。

さて先ほどみなさんには、
「情報ビジネス学科のWebサイトのデザインラフを作ってください」
・・・と伝えました。

そこまでわかってるんなら、わかりきった3点のポイントなんて、
わざわざ紙に書く必要なんかないんじゃないか?と思うかもしれません。

しかし紙に書くということ自体にデザインを始める上でとっても重要な理由があります。

ポイントを紙に書く理由

それは頭の中の引き出しに付箋を貼ってキーワードを見つけやすくするためです。

ウェブの仕事に限らずクリエイティブな仕事をしている場合、
自分の頭の中に「引き出し」というものができてきて経験とともに次第に増えていきます。

引き出しが増えるとその中から色々なアイディアが生まれます。
「この表現は前に好評だったから今回も使ってみよう!」ということもあるかもしれません。

・・・でも、好評だったことがあるからという理由だけで、
その表現を使っていいものなのか?というとそれは違います。

最も適した表現を見つけ出すことが、最も重要なんです。

キーワードを元に判断が簡単になる

lesson03_1辞書のようになった頭の引き出しの中から、
付箋のように貼ってあるキーワードを元に、最も適した表現を見つけ出します。
使う場所やタイミングなどの判断、配色や大きさなどの判断
そもそもその表現が本当に適しているかどうかという判断
様々な判断をしやすくするための最も効率的な作業が「紙に書き出すこと」なんです。

頭の中に漠然と持っているものも、書かずに考えているだけじゃ漠然としたまま。
書き出して初めてキーワードとして使うことができます。

クライアントから聞き出した情報を整理してアウトプット

例えば私の場合、ポイントはこういう風に書きました。

クライアントの業種 岡山県にある短期大学。
どんなサービスを提供している? コンピュータを使ったプログラミングなどや動画制作・写真の撮影・加工技術の習得など、より専門的な分野の技能習得を提供している。
また、一般事務職など、就職先の企業で即戦力となるような技術を細やかに指導し、習得させる。
特色として、地方テレビ局で放送される番組を学生が制作しており、番組制作の現場の雰囲気を肌で感じられることなどがある。
メインターゲットは? プログラミングやメディア制作、事務職に興味のある高校生(10代)。またその親御さん(40〜50代)。
入学希望の高校生が親御さんに「こんなメリットがあるんだよ」と伝えやすいように、Webサイト上で入学のメリットをわかりやすく伝える必要がある。
また最大の比較・競合相手は専門学校となるので、本学のメリットを明確に示し専門学校との差別化を図る必要がある。
高校生はスマートフォン、親御さんはスマートフォンと比較的新しいPCなどでWebサイトを閲覧するという想定。

こんなふうにかなり細かく書きました。

デザイン制作は設計です。
設計するためにはクライアントから聞き出した様々な情報をインプットし、整理し、
問題解決を施した状態でアウトプットする必要があります。

そこでこれらの情報から様々なキーワードを取り出してデザイン制作のヒントにしてみましょう。

例えば「どんな機能が必要なのか?」を考えた時、以下のキーワードを取り出してみます。

メインターゲットは? 「高校生はスマートフォン、親御さんはスマートフォン&比較的新しいPCなどでWebサイトを閲覧するという想定。」

「スマートフォン」と「比較的新しいPC」というキーワードがありますね。
ということは少なくとも、「スマートフォン」と「比較的新しいPC」で、
問題なくWebサイトを閲覧できるように作らなければいけない、ということがわかります。

これにより「スマホ対応が必要」という点と、
「PCでは古いブラウザの対応は必要ない」というアウトプットができました。
これだけ細かく書いてしまえば整理してアウトプットすることは簡単ですね。

機能面やコンテンツで必要、不要なものを考え出したのちにデザインラフを作ることで、
結果的に、より緻密に計算され洗練されたクオリティの高いWebサイトを生み出すことができます。

では3つのポイントの記述とキーワードの抽出をおこないましょう。
時間を取ります。

情ビのサイトのラフを描いてみよう(トップページデザインラフ編)

3つのポイントは書けましたか??キーワードの抽出はできましたか??
このセクションはいったんペンが走り始めたら案外スラスラと書けてしまうはず。

では3つのポイントの下にある「トップページデザインラフ」の枠にデザインラフを書いてみましょう。
まずはどういったものを書くのか?をおさらいします。

webサイト デザインラフ – Google 検索

先ほども言いましたが、こちらとかは理想的です。
その上でも見本となるものが必要ですね。ということで次の項目です。

参考サイトから好みのデザインを探してみる

トップページデザインラフを作るためにはまずは、参考サイトなどを検索してみるのが有効です。
トップページデザイン確定までのワークフローの1にもありましたが、
まずは見本サイトを探すところから始めてみましょう。

当ブログの記事に参考サイトをまとめているので下のリンクを開いてみましょう。

クオリティの高いWebデザインをアーカイブしている4つの厳選Webサイト。 

こういったサイトでまとめられているWebサイトデザインを参考に、
とにかく最初は「こんなデザインにしたい」という理想のデザインを想像して書いてみてください。

「こんなデザインにしたい!」という好みもすごく大切

デザインラフを書く上でキーワードから必要・不要を決めることがまず重要ですが、
もっと重要なものはデザイナー本人の「こんなデザインにしたい!」という思いです。

どんなクライアントでも、デザイナーの実績や作品を見て、
「この人に作ってもらおう」と思って仕事を依頼するはずです。

それは、デザイナーが作り出すデザインのテイストや動きなど、
デザイナーの技術に感動したり、方向性に共感するものがあるからに他なりません。

それはデザイナーの仕事が他人に認められた証拠。
それにより「デザインが気に入りました!」というお問い合わせがすごく増えてきます。
すごく誇らしいことです。

まずは情報の整理をして、その上で「自分なりのデザイン」を追求してみましょう。
あなたの個性をガンガン出していいと思いますし、それを見てみたいと思っています。

では時間を取ります。

現段階では漠然としたもので十分

できましたか??いきなり書けと言われてもなかなか難しいですよね。

けどデザインの仕事なんてそんなものです。
何もない状態でクライアントから得た情報や要望だけで組み立てていきます。
最初の「イメージ」「アイディア」の段階でのデザインラフは漠然としたもので十分です。

ただ、クライアントが求めているものにの提案をしてあげると、
やっぱプロだな!!と思わせることができ、その後の進行を優位にすることができます。

課題の提出

では先ほど制作したトップページデザインラフ課題を提出しましょう。
課題をスキャナー等で読み取り以下のフォームからJPGもしくはPDFで添付送信してください。
スキャナーなどがない場合はスマートフォンを使ってJPGもしくはPDFを生成する方法を以下のリンクにまとめておきます。

iPhone・iPadの場合

iPhoneのメモで書類をスキャンする方法 | iPhone Wave

Androidの場合

Google ドライブでドキュメントをスキャンする – Android – Google ドライブ ヘルプ

では、以下のフォームの必要項目に記入を行い、送信を行ってください。

なお、以下のフォームで提出できるのは、PDFおよびJPG(拡張子:JPG||JPEG|jpg|jpeg)のみになります。
それ以外の形式ではフォームからの送信ができませんので注意してください。

できればスキャナで読み取ったものを送ってもらった方がいいので、
提出期限を今週中(2021年04月30日23:59受付分まで)にします。
来週はGWだからね〜。

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

    本日のまとめ

    デザインラフの3つのポイントとトップページデザインラフは書けましたか??
    実は、ウェブデザインにおいてデザインラフの工程は非常に重要です。

    なぜなら、クライアントからヒアリングした内容の理解度が表れるからです。
    自分のことをどれだけ理解してくれているか?ちゃんと話を聞いてくれたのか??

    ウェブサイトは安い買い物ではありません。
    なのに、適当に話を聞いているデザイナーに依頼したくないですよね??

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE