ウェブデザイン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を起動してください。

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

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

ヒアリングで要望を抽出

まずクライアントの要望をヒアリングによって抽出していきましょう。

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

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

プランニング

抽出した内容からデザインでの最適解を見つけ出しクライアントに提案を行います。

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

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

制作金額のお見積もり

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

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

ページデザイン

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

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

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

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

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

修正作業

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

この修正作業が時には何十回に及ぶこともあります。
ただ、「これやってみてほしい」という作業が一番作業費がかかります。

こういう仕事は何にどれくらい時間がかかるのかを計算して見積もり金額を算出し、
その想定作業時間を超えた場合は、超えた分も請求しなければいけません。
この部分をなぁなぁでやってしまうと後々自分の首を絞めることになります!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

レイヤーパネル

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

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

文字パネル・文字ツール

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

使い方・解説は以下。

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

シェイプツール

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

解説は以下。

PhotoshopでWebサイトデザインを行い、Illustratorも併せて使用する際、
多くの場合、Illustratorデータ内のパスデータのコピーペースト作業になると思います。

また逆にIllustratorでデザインを制作する場合、
PSD画像データを配置し、それを編集する場合はPhotoshopで編集を行うことになります。

同じAdobeのツールなので親和性は確かです。
それぞれのツールのいいところを活かしてページデザイン制作作業を効率よく進めましょう。

サイト・ページタイプ別ウェブデザイン 前編

ここからは前・後編2回に分けて、ウェブサイトのタイプの違いを知りましょう。
全体的なデザインテイストを決定していく流れの最初の段階になります。

しばらくPhotoshopの使い方のレクチャーが続きましたが、
現在、ウェブデザインBとしてのデザインレクチャーの面では、
トップページのデザインラフを書いてワイヤーフレームを作っている段階ですね。

ひとまず自分の書いたラフやワイヤーフレームと睨めっこする時間を作ってみましょう。
今回はパターン別のウェブデザインを参考に全体的なデザインテイスト・レイアウトを決めていく作業になります。

現状デザインラフを書いてワイヤーフレームの制作に取り掛かっていますが、
全体のデザインテイストやレイアウトなどを参考サイトを見本に練り直し・組み直しを行ってみてもいいですね。

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

また迷ってしまった時はアドバイスしますので遠慮せず聞いてください

プロモーション・ブランディングサイト

プロモーションサイト | Web Design Clip | Webデザインギャラリー・クリップ集
ブランドサイト | Web Design Clip | Webデザインギャラリー・クリップ集

プロモーションサイトはサイトに訪れたユーザーに対して商品やサービスを紹介して認知度の向上をはかり、商品・サービス名・内容・特徴を覚えてもらうことを目的としています。

ブランディングサイトは商品・サービスだけではなく、企業自体・事業自体のブランドイメージの向上を目的としています。

プロモーションサイトは期間限定ブランディングサイト恒常的に存在させることが多くなります。
次の項目の「コーポレートサイト」の一部として使うこともあり、デザイン要素が非常に多くなることがほとんどです。

プロモーションサイトもブランディングサイトも、ダイナミックな写真・動画の使い方テキストの扱い方などに特徴があり、ビジュアル主体でページデザインの展開を行います。スクロールアニメーションやパララックス(視覚差異)アニメーションなども、このタイプに使用することが多くなります。

プロモーション・ブランディングサイトの参考サイト

香るあかり。 | 無印良品

MINIO | ELECOM

コーポレートサイト

» コーポレートサイト| 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

みなさんも就職活動などでいろんな企業のサイトを見ていると思いますが、コーポレートサイトはまさにソレ。その企業がどんなことをしているのか?どんな人たちがいるのか?など企業に関する情報を掲載しているウェブサイトです。

そして、私のようなフリーランスのWebクリエイターはほとんどの場合このコーポレートサイトの制作がメインになってきます。

制作実績 | 岡山 Webサイト制作 龍弥デザイン

昔ながらのオーソドックスな2カラム・3カラム(2列・3列)で組まれていることも少なくなりませんが、最近では前項のプロモーション・ブランディングサイトのように1カラムでページデザインされているものも多くなってきています。

コーポレートサイトの参考サイト

各種産業機械設備の設計・製作・据付・メンテナンス 株式会社 松本鉄工

総合建設業・一級建築士事務所 河野建設株式会社

久本汽船株式会社 岡山県備前市日生町 船舶貸渡・船舶管理

本日のまとめ

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

そして次回はサイト・ページタイプ別ウェブデザインの後編です。
「ランディングページ」「ECサイト(ネット通販サイト)」「ポータルサイト」などの特徴を紹介します。
前・後編を見た上で、どんなタイプのレイアウトで全体をまとめるとふさわしいかを考えてみましょう。

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

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE