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

WEBCRE8TOR.COM

ウェブデザインB 第15回

webdesignb15

ウェブデザインB 第15回

ウェブデザインBもいよいよ今回で最終回です。
今回は最後の課題の提出がありますので、講義内容のロゴデザインを完成させながらウェブサイトのデザインを作り込んでいきましょう。

Webデザインの構築③ Webサイトのロゴデザイン

ロゴデザインの現在までの流れ

ロゴデザインも今回で3回目、現在までに以下の工程を終えました。

ベクター化の続き(最終回)

前々回・前回でベクター化までの一通りのレクチャーは終えましたが、
そもそも「⑦ ベクター化する」が終わっていない人もいると思います。
その場合は「⑧下絵レイヤーを削除する」にはまだ進まずに引き続きベクター化を行ってください。

ロゴデザイン課題その⑨ 配色する

それでは解説に進みます。
ロゴデザインのIllustratorファイルをダブルクリックで開いてください。

ロゴの配色はメインカラーを含め2色まで

ロゴの配色にもいろいろありますね。
単色だったり2色だったりそれ以上だったりグラデーションで組んでいたり・・・。

配色に関してはウェブデザインB 第11回の講義で学びました。

参考:ウェブデザインB 第11回 色の持つ意味

配色の参考として以下のような見本をアーカイブしたページなどが参考になると思います。

参考:ロゴストック|ロゴマークのデザインギャラリー
参考:Logospire – a logo inspiration gallery

講義で説明しましたが、Webサイトを構成する色(配色)は基本的に3つです。
それぞれ、ベースカラー、メインカラー、アクセントカラーと呼ばれており、
この3つを基本に構成されています。

その中でもロゴデザインで使われることが多いのはメインカラーです。

Facebookならブルー(カラーコード:#3b5998)、
NTT docomoはレッド(カラーコード:#CC0033)、
Starbucksはグリーン(カラーコード:#00704a)などなど・・・

企業それぞれにブランドイメージカラーがあります。
どのサイトを開いてみてもロゴはブランドカラーで配色されていますね。

もちろんセブンイレブンのように3色だったりと、単色だけではない場合もありますが、
企業がブランドイメージカラーを持っていればその色がメインカラーになる場合が多いでしょう。

ロゴを複数色にしたいということなら最も面積の多い部分にメインカラーを使うのが一般的です。
ただしロゴデザインは文字の部分を除いて、モノクロの印刷物などでも表現できるように配色しなければいけません。
また複数色にするとバランスの取り方が難しくなる場合がとても多いので制作の難易度もそれなりに上がります。

「塗り」「線」指定の場所

Illustratorではパスを書くとあらかじめ決められた色で線と塗りがつきます。
ロゴデザインの場合、パスの内側にある塗りだけで表現することが多く、
線があるとしても最初に設定された線は使わずに新たに設定することがほとんどです。

色指定はウィンドウの左側、ツールバーの下部にあります。
下の画像のように、左上が塗り、右下が線の指定になっています。
ここで指定を行うことで色表現を行っています。

webdesignb15_01_01

初期設定の塗りと線を指定する

あぁでもないこぉでもないと色を色々と試しているといつの間にか無茶苦茶な指定になっていることはよくあることです。そんな時は初期設定の塗りと線の色に戻しましょう。

初期設定の色は、塗りが白(カラーコード:#ffffff)、線が黒(#000000)です。

webdesignb15_02_01

画像のように塗りと線の枠の左下に、二つを小さくしたようなアイコンがあります。
これをクリックすることで塗りと線が初期設定の色に戻ります。

塗りと線の色を入れ替える

初期設定の塗りと線にすると、塗りが白、線が黒になることは前述しました。
では塗りを黒に、線を白に反転させてみましょう
色を反転させるには塗りと線の右上にあるアイコンをクリックします。

webdesignb15_02_02

ちなみに、塗りの枠をクリックすれば塗りの枠が前面に移動してきて色の指定が可能になり、
線の枠をクリックすれば線の枠が前面に移動してきて色の指定が可能になります。

線の消し方

ロゴデザインの場合、線は使わず塗りだけにすることがほとんどです。線を消してみましょう。
前項で線の枠クリックすれば前面に移動してきて色指定が可能になるといいましたが、
色指定を削除するのもここから行います。

webdesignb15_02_03

赤い斜線は色指定を削除するときに使います。
線の枠を前面に出し、赤い斜線をクリックして色指定を削除してみましょう。

色変更の仕方

では塗りの色を変更してみましょう。
塗りと線の枠のところ、現在線が前面にある場合は塗りを前面に移動します。
前面に移動するには塗りをクリックします。

webdesignb15_02_04

塗りをクリックすると塗りの枠が前面に移動して、調整が可能な状態になります。

webdesignb15_02_05

次に、スウォッチを開いて色を選びましょう。

スウォッチとは、カラーやグラデーションやパターンがあらかじめグループ化されていて、
ワンクリックで色やグラデーションやパターンを変更することができる
もの。

もしスウォッチが左のパネルにない場合は、
上部メニューの「ウィンドウ」の中の「スウォッチ」をクリックすると表示されます。

ちなみに目的の色がすでにある場合はこの作業は必要ないので飛ばしても構いません。

webdesignb15_02_06

選択するとオブジェクトがその色に変わります。

webdesignb15_02_07

この画像ではロゴ全体を一つのオブジェクトにしているので全体の色が変わりますが、
パーツ分けすればそのパーツそれぞれの色を変更することもできます。

グラデーションのつけ方

単色ではなくグラデーションをつけたい場合は以下のようにします。

右側のグラデーションパネルを開きましょう。

webdesignb15_03_01

次に左上のグラデーションを有効にするボタンをクリックします。

webdesignb15_03_02

クリックすると下にグラデーションスライダーが出てきます。

webdesignb15_03_03

グラデーションスライダーの下側にある2つか3つほどあるツマミをダブルクリックするとスウォッチパネルが表示されます。好きな色を選択して不透明度を調整してみましょう。

webdesignb15_03_04

なお、「位置」というボックスがありますが、これは色の開始位置です。
0に近づければ左へ、100に近づければ右へグラデーションの色の開始位置が移動します。

またツールバーにあるグラデーションツールを使うと、
グラデーションの角度や長さを調整することができます。

webdesignb15_03_05

グラデーションに変わりましたね。
いろいろとグリグリいじってみましょう。

ロゴデザイン課題おまけ ロゴデザインをデザインデータに配置する

では最後の課題提出のため、制作中のデザインデータにロゴを配置します。
デザインデータを開くためにPhotoshopを起動し、基本設定を行なってください。

Illustrator側でオブジェクトを選択してコピーする

まずはIllustrator側の作業です。
制作したロゴをグループ化し、そのグループをコピーします。

コピーはキーボードを使ってショートカットキーで行いましょう。
コピーのショートカットキーは「Ctrl + C」です。

Illustrator側での作業はこれだけです。

Photoshopのキャンバスにロゴをペーストする

コピーができたら今度は貼り付けです。
Photoshopにウィンドウを切り替え、キャンバスへのペーストを行いましょう。

ペーストもキーボードを使ったショートカットキーで行いましょう。
ペーストのショートカットキーは「Ctrl + V」です。

Ctrl + Vを行うとポップアップウィンドウが出てきますね。
そのウィンドウでペーストの形式をラジオボタンで選択するようになっています。

その中の「スマートオブジェクト」を選択して「OK」ボタンをクリックしてください。

webdesignb15_04_01

ペーストするとロゴの周りに四角の枠ができています。
「Shift + 左クリック矢印」を押したまま四角にある小さな四角をドラッグしてサイズを調整します。
目的のサイズになったらEnterキーを押して確定してください。

webdesignb15_04_02

これでペーストができました。

webdesignb15_04_03

サイズの再調整をしたい場合は、貼り付けたロゴのレイヤーを選択した状態で「Ctrl + T」を押すとサイズ調整の状態に戻すことができます。また「Shift + 左クリック矢印」を押したまま四角にある小さな四角をドラッグしてサイズを調整しましょう。

サイズの調整を使ってサイトタイトル文字とのサイズを合わせたりしましょう。
文字だけのサイトタイトルにロゴが入るだけで結構印象が違ってきます。

トップページデザインのまとめ

ここで、残りの時間でトップページのデザイン仕上げに取り掛かりたいと思います。
それではページデザインで重要な項目を再びクローズアップしていきます。

全体的なテイスト・方向性・構成を決めるために参考サイトを探す

サイトの全体的なページデザインのテイスト・方向性を決め、
ページに何を配置するかの構成などを決めるため参考サイトを探しましょう。

みなさんの制作予定のサイトに活かすために、色・レイアウト・ブロックなどの構成・機能など、
まずはクオリティの高いサイトの真似をして練習をするのが上達の鍵になります。

全体的なテイストがここで決まりますね。

配色・レイアウトなどのコツ・ルールを学ぶ

配色やレイアウトにもコツやルールがありましたね。
さらなるクオリティアップに有効ですが、何より迷った時に従う指標になります。

当然経験が増え引き出しが増えれば迷うことも少なくなりますが、
その時こそ、既存のルールやコツを超越した自分なりのルールやコツを作りましょう。

パーツ別デザインレイアウトパターン

ウェブサイトは役割を持った様々なブロックで構成されています。
以下はそのブロックごとのレイアウトパターンの紹介です。
ここは実際に見て自分の引き出しに落とし込む重要な工程になります。

特にメインコンテンツは数え切れないほどのレイアウトパターンがあります。
既存のルールやコツを超越した自分なりのルールやコツを有効にしたレイアウトばかりです。

この段階にたどり着く前に諦めてしまう新人デザイナーが非常に多いですが、
諦めず引き出しを増やす作業を怠らない人にこそチャンスが回ってきます。

ページデザインを楽しもう

上述したコツやルールなどは現時点では非常に有効です。
便利に使って、あとは楽しんでページデザインを組むだけです!

わからないことは聞いてください。
アドバイスが欲しければ言ってくださいね。

課題の提出

では最後の課題を提出です。
今回もjpg以外は受け付けられないようになっていますので、
必ずjpgに書き出して提出してください。

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

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

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

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

今日のまとめ

ロゴデザインの構想から実際に配置するまでを3週にわたって紹介してきました。

今回でウェブデザインBの講義は終了となります。
みなさん、よくついてきてくれました。

この講義では主に、ウェブデザインのデザインの部分をレクチャーしてきましたが、
講義を通して一番伝えたかったことは、デザインすることはとても楽しい工程なんだということです。

あらかじめ誰かに決められたルーティンワークのフォーマットを追いかけるばかりの作業では
「考えること」を忘れてしまい、自分の財産である「引き出し」を増やすことがとても困難です。

デザインは解決法、設計です。
自分なりの解決法、経験に基づいた設計を行うことができるようになれば、
きっとみなさんの武器になって、困難を楽しめるようになると思います。

後期のウェブデザイン演習を受講する人は夏休み明けもよろしくお願いします。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE