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

WEBCRE8TOR.COM

ウェブデザインB 第2回

webdesignb02

ウェブデザインB 第2回

デザインとアート、その違い

デザインの話に入る前に・・・
デザインとアートって何が違うと思いますか?

よくわからないけどちょっとした違い?
言葉が違うだけで同じ意味?

おそらくこんな風に漠然とふわっとした感じで捉えている場合が多いと思います。
けれど、デザインとアートにははっきりと違うところがいくつかあります。

それは目的対象を考えるととてもわかりやすいもの。
かなり端的に言えばこのようになります。

アートの目的は「自己表現」、目的対象は「自分」
デザインの目的は「コミュニケーション」、目的対象は「他人」

デザインは設計

デザインは他人に情報を伝達することが目的。
受け取り手がどれだけ理解するかが重要になり、伝えることができなければ成功したとは言えません。

デザインとは一言で言えば「設計」です。
想定されるターゲットが「見やすい」「分かりやすい」「使いやすい」と感じられるよう綿密に計算された上で設計されたものを初めて「デザイン」と呼ぶことができます。

アートは表現

アートは自分の感情や考え、インスピレーションを感じたものを表現することが目的。
自分のために行い、作品を見た受け取り手の感想や感情などはそれほど重要ではありません。
発信者の思想や志向などで表現されるため受け取り手の感想は様々になります。

デザインでするべきこと

今回講義で習得していくのは、デザインです。
ではデザインを通して、何をするべきなのでしょうか?

この講義にならい、ウェブサイト制作を前提に考えてみましょう。

ヒアリング

ウェブサイト制作を始める時、まずクライアントが何を求めているかを知る必要があります。
依頼内容知るためにはしっかりと話を聞かなければいけません。つまりヒアリングです。

例えばこれは龍弥デザインのヒアリングシートです。

webdesignb02_01

(ちなみにこのヒアリングシートは頂き物で、龍弥デザイン用に調整したものです。)

WEBサイト制作前やデザイン制作時に欠かせないヒアリングシートを作り直してみた | WEBとかデザインとか | アスパラブログ | アスパラガス

どういった内容を確認しなければいけないのか?
どういった要望があるのか?を全てまとめて書いてあるので、
ちょっと面倒なアンケートくらいのボリュームがあります。

ただ、これだけの項目数があっても最低限です。
こうしてまずは依頼内容をヒアリングし、
共有することからデザインは始まり
ます。

またヒアリングの際もクライアントに対して「こういうことですよね?」
という確認をこまめにしておくことがポイントです。

「自分はこう言った受け取り方をしていますが、間違ってないですよね?」という確認をすることで、クライアントもこちらがどれだけを理解しているかを把握できて、考えの差異を最小限にとどめることができます。

このヒアリングを怠るとプロジェクトに対してお互いの理解のズレが生じてしまい、プロジェクトを進めることができなくなり、最悪の場合、想定していなかった仕様や修正に対応しなくてはいけなくなり、希望の納期までに納品できなくなってしまうこともあります。

ヒアリングは最初に行いますが、最大の難関で最も重要な工程です。
情報の整理は後からすればいいことですが、できる限りたくさんの制作に必要な情報を聞きださなければいけません。

プランニング

ヒアリングした内容から、制作内容のプランニングを行います。

「お問い合わせフォームを設置したい」
「営業日をカレンダーで表示したい」
「お知らせなどを自分で更新できるようにして欲しい」

などなど、ヒアリングに成功していたらクライアントからの要望が出てきているはずですので、これをわかりやすくまとめましょう。複数人でのプロジェクトでしたら、自分だけではなく、プロジェクトメンバーが見てもわかりやすくまとめる必要があります。

誰にでも見やすくまとめられていたら、そのまま仕様書として使えます。(これデカイ)

制作金額の見積もり

プランニングが終わると、その内容をもとに暫定の制作費用額を算出することができるようになります。制作費用額の内容によっては、「予算オーバーだからここを削ります!」だとか「この金額なら予算に余裕があるからこんな機能を追加したい」というようなこともあります。

当然の話ですが、ほとんどのクライアントは予算が限られていて、「この予算内で・・・」とか「どれくらいかかるものなんでしょうか・・・」などと、お金の話になるとすごく慎重になります。予算のあるクライアントさんは本当に一握りで、年に一度巡り会えばラッキーくらいに思っていればいいと思います。

ページデザイン

全体のプランニングが固まったら、今度はそれをページデザインに落とし込んでいきます。
ここで初めて見た目という意味での「デザイン」を制作し始めるわけです。

多くの場合「デザイン」とはこのページデザインのことだと思われていますが、実はページデザインは多くの工程の中の一つにすぎません。

修正作業

デザインは出来上がって終わりではありません。出来上がったページデザインをクライアントにチェックしてもらい、修正や微調整を行ってようやく完成の状態になります。

デザインラフ制作 ① 

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

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

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

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

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

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

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

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

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

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

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

ポイントを紙に書く理由

それは、
頭の中の引き出しにポストイットを貼って、
キーワードを見つけやすくするため
です。

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

引き出しが増えるとその中から色々なアイディアが生まれます。

「この表現は前に好評だったから今回も使ってみよう!」
ということもあるかもしれません。

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

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

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

lesson03_1辞書のようになった頭の引き出しの中から、ポストイットのように貼ってあるキーワードを元に、最も適した表現を見つけ出します。

使う場所やタイミングなどの判断配色や大きさなどの判断そもそもその表現が本当に適しているかどうかという判断、様々な判断をしやすくするための最も効率的な作業が「紙に書き出すこと」なんです。

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

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

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

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

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

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

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

例えば「どんな機能が必要なのか?」を考えた時、「メインターゲット」の「高校生はスマートフォン、親御さんはスマートフォンと比較的新しいPCなどでWebサイトを閲覧するという想定。」を取り出してみます。

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

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

機能面で必要、不要なもの。コンテンツで必要、不要なもの。

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

なお、デザインラフを作るために、参考サイトなどを検索してみるのも手です。

参考サイト

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

それでははじめ。

課題の提出

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

けどデザインの仕事なんてそんなものです。
何もない状態でクライアントから得た情報や要望だけで組み立てていきます。

そもそもデザインラフはまだ「イメージ」「アイディア」の段階です。
漠然としたもので十分です。

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

課題の提出ですが、今回だけでは時間が足りないし、じっくり考えたいという人もいますよね?
というわけで今回の課題の提出期限は来週の講義が始まるまでにします。

来週の講義が始まるまでに僕に提出してください。
課題自体を忘れてきちゃったら不受理になりますので要注意です。

本日のまとめ

デザインは単に見た目を作ればいいわけではありません。
デザインは「設計」であり、見た目を整えるのはページデザイン
ということになります。

特にウェブサイトの場合、見た目を整えるために機能性を無視してしまうと、
見た目はいいのにデザイン性はない、という不思議なサイトになり、
それは検索結果の順位などに直結していきます。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE