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

WEBCRE8TOR.COM

ウェブデザインB 第5回

webdesignb05

ウェブデザインB 第1〜4回分のPR・質問へのリプライ

今回の授業を始める前に・・・第1回から第4回の提出課題でもらった自己PRや質問に対するリプライをしたいと思います。

第1回分

WEBデザインで知りたいことは、
客観的に見て質の悪いデザインとはどういったものなのか
また、統一感のあるデザインはどういった点に気を付けているか知りたいです。

就く予定の職種はWEBクリエイター又はWEBデザイナーです。
WEBページ制作に非常に興味を持っています。

今はどのサイトにも、だいたい写真と言葉が添えられていますが、そこで注意する点などがあれば知りたいです。
自分はデザインやイラストに興味があるので、楽しみながら学んでいけたらなと思ってます。

私はカメラを使って写真を撮る事が好きで、スマホを用いた画像加工が趣味です。そんな中でPhotoshopを使えるようになり ウェブに応用出来ればいいな、と思いこの授業を履修しました。

私が将来就く予定の職業はWEBデザイナーです。きっかけは高校の時のWEBデザインの授業です。自分が考えた末に入力したHTMLが実際の画面に出てくるのが非常に楽しかったのを覚えています。そこから将来の職業にしたいと考えるようになりました。

また、WEBデザインについて1つお聞きしたいことがあります。marginなどで値を指定すると思いますが、その余白の値は、ラフの時点で決めるのでしょうか。

私はデザインの分野にとても興味があるので「ウェブデザインB」の授業をとても楽しみにしています。
授業ではグラフィックとウェブでのデザインの観点の違いなども知りたいです。
私は将来ウェブやグラフィックなどのデザイナーになりたく、就職活動でもクリエイティブ系に絞って活動しています。デザイナー職で大変なことや向いている人の特徴などデザイナーについても知りたいです。
これからこの授業を通してウェブデザインについて詳しく学んでいき成長につなげていきたいと思っています。

○授業に望むこと
プロの方とプロじゃない方の作ったウェブサイトの違いが知りたいです。講師の方が思う素敵なウェブサイトも見たいです。

○ウェブデザインのコレを知りたい
見やすさ重視で作っているのか、デザイン重視で作っているのかが知りたいです。

自分は今、Webデザイナーになりたいと強く思ってはいません。ですが、講義に影響を受け将来の夢の1つに出来たらと思っています。新たな発見が楽しみです。

何かをデザインするというのは得意ではないけれども好きなので受講してみました。パソコンでイラストをたまに描くのでPhotoshopを入れているのですがウェブデザインとイラスト用ではどう使い方が違うのかについて特に興味があります。

第2回分

もっと上手く配置を考えたいのですが、どこを修正すれば良くなりますか?

高校の時に学校を調べる際webページはたくさん見てきて興味を持つかどうかはデザインも大きく関わっていると思いました。その時感じた違いを思い出しながら、ターゲットにわかりやすく伝えるwebページを考えたいと思いました。

第3回分

自宅のパソコンには「Photoshop」がないので、GIMPで作成したんですけど大丈夫でしょうか

第4回分

幅1200px、高さ1000pxのサイズで作ろうとしましたが、それではラフの内容がほとんど入らなかったため、見本である幅1400px、高さ2890pxで作らせていただきました。それでもよろしいのでしょうか。

ウェブデザインB 第5回

前回はワイヤーフレームを作り始めましたね。簡単に概要のみ紹介した段階で制作に取り掛かりました。
今回は前回よりもさらに掘り下げてワイヤーフレームを制作する意味や、ツール、作り方を紹介しようと思います。

ワイヤーフレームの制作

前回、ワイヤーフレームとは「設計図」「完成デザインの土台」だと説明しました。
では実際にはどういった使い方をするのか?といった点を考えていきましょう。

今回は一つのサイトを例にとり、「デザインラフ」「ワイヤーフレーム」「完成デザイン」を見てみたいと思います。

デザインラフ制作前のポイント

この「中山下スキンクリニック」様は、岡山市内で一般皮膚科・美容皮膚科を新たに開院されるということでウェブサイトの新規制作のお問い合わせ・ご依頼をいただきました。

できたばかりのクリニックに伺うと、開院前にリフォームを行われたらしく、内装も素敵でとても綺麗な印象。また院長先生も気品があってとても素敵な方でした。

お話を聞いていると、一般皮膚科も美容皮膚科もどちらもバランスよく行われるということで、どちらかに比重を置いてデザインを組むというわけではなさそう。

また、院長先生の好きなデザインのテイストは「オリエンタル系」で、キーカラーはそれほど彩度の高くない落ち着いた「紫」で、診察券や封筒などにも使われている色。

・・・ここまでの内容で第2回で書いた3つのポイントは作れますね。

デザインラフに着手

ヒアリングができたらいよいよデザインラフの制作です。
今回はポイントを元にこんなデザインラフを描きました。

webdesignb05_02

これをクライアントに見せ、チェックバックをもらいます。

クライアントが思い描いたデザインと自分が作ろうとしているデザインには必ずと言っていいほど差異があります。差異がある限りはデザインを完成させることはできないのでその差異を埋める作業が必要になります。

ここをこうしてほしい。あれは必要、これは不要などなど・・・デザインラフを使って手直しをすることによって、出来上がりのイメージがもっとはっきりとしてくるため、ヒアリングの時には出てこなかった要望やアイディア、修正点がどんどん出てくるはずです。

出てきた要望やアイディア、修正点をデザインラフに反映させて再び見せる。
このやりとりを何度か行います。

ワイヤーフレームの制作

デザインラフでOKが出たら、今度はそれをワイヤーフレームに清書します。
今回はこんな感じのワイヤーフレームになりました。

webdesignb05_03

なぜワイヤーフレームを作るのか

前回の講義の説明で、ワイヤーフレームは実際のサイズを把握するため。
また、どこに何をレイアウトしていくのかを明確にするために作る、ということでしたよね。

それに加え、誰が見てもわかりやすい状態にする(清書する)ことで、滞りなくプロジェクトを進めるため、という理由もあります。

一つのサイトを制作するのに関わるのは自分とクライアントだけではありません。

例えば、もしこの仕事が代理店からもらった場合なら、まず代理店の担当者にレイアウトや仕組みを理解してもらう必要があり、その担当者を通してクライアントに見せることになります。当然担当者が理解できなければクライアントに見せることなんてできませんよね。

また例えば、サイトに使う写真をプロのカメラマンに撮ってもらうのであれば、どこにどんな写真が必要になるのかの指示が必要になります。明確な指示をしない場合にはカメラマンの考えや技術任せになってしまうため、思っていた写真と違った・・・ということも少なくありません。

複数の人間が見ることを想定して、手書きのものをそのまま出すのではなく、清書した状態で、相手に理解してもらうことが重要になります。

ワイヤーフレームはプロジェクトメンバーの差異部分を埋めるためのコミュニケーションツール、ということですね。

使ったツールと使い方

この3つのツールだけでワイヤーフレームは作れます。
念のため、大変参考になる記事を載せておきます。

参考:HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

完成デザイン

デザインラフ、ワイヤーフレーム、そしてPhotoshopでのデザインを終え、最終的に以下のデザインになりました。

webdesignb05_04

この状態でクライアントのOKがもらえれば、ようやくhtmlコーディングを始められることになります。
ワイヤーフレームの作り込みがまだだという人がいれば、講義終了後に進めて貰えばいいかなと思います。

本日のまとめ

ワイヤーフレームの役割や作り方について説明しましたがわかりましたか?

設計図や間取り図、コミュニケーションツールなどと説明しましたが、目的は一つです。
一番大事なのは、見せる相手に理解してもらうこと。

もしそれができていなければ何度も作り直さなければいけません。
何度も作り直すのは手間だし完成・公開が遅れてしまう原因になります。

作り直しを防ぐためにデザインラフの段階で3つのポイントをよく考えてまとめ、少しでも修正を減らすことが自分の作業を楽にしてくれます。その方が楽しいしね。

結局最初の段階でどれだけ真剣に考えるかで後々の手間数が変わってくるわけです。

デザイン業は、真剣に取り組んで、それを楽しめる人こそするべき職業だと思います。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE