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

WEBCRE8TOR.COM

ウェブデザインB 第10回

webdesignb10

ウェブデザインB 第10回

早いものでウェブデザインBの講義も2/3を終えましたね。
第10回ということなので、今回は今までのおさらいをしていこうと思います。

もう忘れてしまってるものもあるかもしれませんが、今回のおさらいでもう一度思い出して残りの1/3の講義に臨んでもらえればと思います。

今までのおさらい

おさらい その① Photoshopの基本設定(第1回)

Webサイト制作においてPhotoshopをWebサイト制作向けの設定にすることは、効率的にデザイン作業を行うための重要な要素になります。

毎回の講義の繰り返しになりますが、今回も基本設定を行いましょう。
Adobe Photoshop CC 2015を起動してください。

おさらい その② デザインでするべきこと(第2回)

Webサイト制作は「デザイン+コーディング(HTML・CSSなど)」の作業になります。
ではデザインでは具体的にどのようなことをするか?というと、以下のようになるという話でした。

ヒアリングで要望を抽出

まずクライアントの要望をヒアリングによって抽出していきましょう。
しっかりとクライアントの希望や要望を知ることで、
デザインを行う上でのヒントをところどころ見つけることができると思います。

ヒアリングは、依頼を行うクライアントのためであり、
何よりデザインを行う自分のための工程でもあります。

プランニング

抽出した内容からデザインでの最適解を見つけ出しクライアントに提案を行います。
経験を積み重ねることで自分の引き出しが増えていきますので、時には「経験上この仕様はあまりオススメできない」といったこともあるかもしれません。
そういった場合にはクライアントに随時確認を行いながら内容の再構築が必要になります。

十分に吟味した内容をもとに仕様書を作成し、クライアントに提出しましょう。

制作金額のお見積もり

プランニングした内容でOKをもらうことができれば、
その内容をもとに制作金額のお見積もりを作りましょう。

当然のことながら予算が限られていたら削らなければいけない制作内容も出てきます。
何度か内容と金額のすり合わせを行いましょう。

ページデザイン

ここでやっと実際のデザイン作業に入っていきます。
ここでは、最初に行った手書きのページデザインラフの制作やワイヤーフレームの制作、そして、みなさんが現在行っているPhotoshopでのデザイン作業を行います。

ここで大事なのは「100%まで作り込まないこと」。

クライアントが確認する前に100%まで本気を出して作りこんでしまうと、クライアントへのデザイン提出までに時間がかかってしまう上に、自分が本気を出して組んだデザインをクライアントのチェックバックでダメ出しをされたりすると怒りを覚えてしまうことがあります。(本当はダメだけど)

「何言ってんの?これ?本当にこれでいいの?」とか、
「絶対こっちの表現の方がいいのに」などなど、
クライアントとの溝ができてしまう原因になります。

当然のことながらデザインはチェックバックありきです。
全体の60%程度の段階でデザインを組んで提出し、
チェックバックをもらってから100%までつくり込みましょう。

修正作業

デザインが出来上がったら、それをクライアントに確認してもらいましょう。
チェックバックをもらって修正作業を重ねて完成させることで、ようやくデザイン作業は終わりを迎えます。

おさらい その③ デザインラフを描く(第2回)

みなさんにはまず、手書きのデザインラフを描いてもらいましたね。
デザインラフを描く上でも色々と考えなければいけないポイントがあります。

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

この講義では上の3点をポイントとして、
その内容に沿ったデザインラフを描きましたが、
このポイントは案件によって変わっていくものです。

実際にはもっと細かく考えをまとめなければいけない場合がほとんどです。

ポイントやラフはちゃんと考え込まれているかを確認するために一番いい方法は、
「一度離れて、もう一度見てみる」ことです。

プランニング中やデザイン中はその案件のことしか考えられないことが多く、他のことに目がいかなくなります。集中するのはとてもいいことですが、周りが見えなくなるといい方向には進みません。

一度頭を冷やして頭をフラットにし客観的に確認をすることで自分のアイディアを冷静に判断することができます。

しっかりと考え込まれていれば何度見ても理解できますが、
そうでなければ「なんでこんなデザインなの?」という疑問がわきます。

一度離れて、もう一度見てみるというのもデザインをする上で大事な作業です。

おさらい その④ ワイヤーフレームの制作(第4・5回)

ワイヤーフレームは、モニターで見た時の実際のサイズを把握するため、どこに何をレイアウトしていくのかを明確にするために作るもの、またデザイン設計の内容をプロジェクトメンバーの誰が見ても理解できるようにまとめたものでしたね。

誰が見ても理解できるもの」を作るのは本当に困難な作業だと思います。
ただ「誰が見ても見やすいもの」と言い換えればそれほど難しくありませんよね。

「どこに何がレイアウトされてどのくらいの大きさなのか」を一目で確認できればもう十分です。

あとは自分が作業しやすいようにワイヤーフレームのデータをそのままデザイン作業に使うことができるように作れば、そのワイヤーフレームの完成度はとても高いものになったと言えます。

おさらい その⑤ Photoshopの各ツールの使い方(第6・7・8・9回)

実際のWebサイト制作は「デザイン+コーディング(HTML・CSSなど)」の作業になります。
ではデザインでは具体的にどのようなことをするか?というと、以下のようになるという話でした。

レイヤーパネル

レイヤーパネルはレイヤーを追加したり削除したり順序を変えたり整理したり
Photoshopを使う上で基本中の基本であり最も重要なツールの一つだと説明しました。

使い方・解説は以下ですね。

文字パネル・文字ツール

文字パネル・文字ツールは、ウェブサイトの主役である「コンテンツ=文字情報」を扱うツールです。
文字を読みやすく、そしてより魅力的に見せるために適切なフォントファミリー(書体)やフォントサイズなどの指定をしなければいけません。

使い方・解説は以下。

特にこの「文字詰め」はプロの現場で必ずと言っていいほど行われています。
これをするだけで文字の読みやすさが本当に違うのでぜひ習得しましょう。

シェイプツール

シェイプツールは長方形や円形、多角形や角丸長方形だけではなく、カスタムシェイプと呼ばれる様々な形状を、拡大縮小しても劣化やデータ損失を起こさない「ベクター形式」で簡単に生成してくれるツールです。

解説は以下。

Webサイトデザインデータの課題

デザインの作り込み

ここのところ、なかなか時間を取れないままになってしまいました。
今回はちょっと長めに時間をとりますので、デザインを完成に近づけていきましょう。

なお、表現のアイディアに困った時は、参考サイトを見てみるのも手です。

課題の提出

今回は現時点まで作り込んでいるWebサイトデザインを提出しましょう。
jpg以外は受け付けられないようになっていますので必ずjpgに書き出して提出してください。

では提出用にjpgで書き出してみましょう。
手順は以下。

  1. 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
  2. Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
  3. 一番下の「保存」をクリック。
  4. ファイル名をつける必要があるので自分の学籍番号を記入して保存をクリック。

では下のフォームに、書き出したJPGを添付して送信してください。

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

本日のまとめ

第10回ということで、今回は今までの講義内容を振り返ってみました。
「あれ何だったっけ?」という時に過去の講義ブログを振り返るのもなかなか大変だと思うので、
「第10回にまとめをしてたよね」と思い出してもらえればいいかなと思います。

残り1/3、頑張って、楽しんで、Webサイトデザインの完成を迎えましょう。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE