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

WEBCRE8TOR.COM

ウェブデザインB 第15回

webdesignb15

ウェブデザインBもいよいよ今回で最終回です。

この記事の目次

ページデザインの制作 ①デザインの準備

いよいよページデザインに進んでいきましょう。
実はワイヤーフレームがしっかり作り込めていれば、
ページデザイン自体はさほど時間がかかる工程ではありません。

ヒアリング〜ワイヤーフレーム制作までの間で、構造や役割、仕組みや表現方法など、
制作内容や情報を共有してクライアントが納得できる内容になっていれば、
ページデザイン自体はある程度自分の思ったようにデザインすることができるからです。

では、デザインの準備手順は以下。

  1. PSDファイルをリネームする
  2. 優れたページデザインの表現を吸収する

デザインの準備① PSDファイルをリネームする

まずはページデザイン用のPSDファイルを準備しましょう。
制作したワイヤーフレームのPSDファイルをそのままデザイン用のPSDファイルに使用します。
手順は以下。

  1. ワイヤーフレームのPSDファイル「学籍番号-wire.psd」の名称を「学籍番号-design.psd」に変更する。
  2. 学籍番号-design.psd」をPhotoshopで開く。
  3. 下書きレイヤー(フォルダ)のロックを解除して削除する
  4. 説明文フォルダ非表示もしくは削除する
  5. ワイヤーフレームフォルダ自体グループ解除(Ctrl + Shift + G)する。

以上です。
下書きレイヤーや説明文フォルダなど使わないものは削除しておきましょう。

また、ワイヤーフレームの制作ではないので「ワイヤーフレームフォルダ」自体が必要ありませんよね。しかし中身のレイヤーはそのまま使うため「ワイヤーフレームフォルダ」を「Ctrl + Shift + G」でグループ解除しておきましょう。

デザインの準備② 優れたページデザインの表現を吸収する

次に、デザイン表現の面で参考にできそうなサイトを探すために、
再びアーカイブサイトをチェックしてみましょう。

これまで参考サイトを探すという工程は何度か行いましたが、
実はその度に見方・見るポイントが違っていたのは気が付きましたか

一度目は手書きデザインラフを制作するために好みのデザインの参考サイトを探した時。
二度目はウェブサイトにはどんなカテゴリがあるかを知るためにアーカイブサイトを探した時。

実は「最初は全体、最後は個別」というページデザイン制作の順番に倣っていて、
今回は最も的を絞った「細かいページデザインの表現はどんなものがあるか」の見方で、
自分のページデザインに組み込めそうなアイディア
を探す工程です。

写真の扱いだったり、色使いだったり、素材感だったり、
優れたページデザインを生み出すには優れたページデザインを吸収することが重要です。

クオリティの高いWebデザインをアーカイブしている4つの厳選Webサイト。 

これらのサイトで使われている優れた表現を、どんどん自分の引き出しに入れていきましょう。

ではいよいよページデザインへの工程へいきましょう〜。
ページデザイン制作の流れは「最初は全体、最後は個別」です。この意識は忘れないように
最初は引いて見た全体からデザインし、最後は寄って見た個別アイテムをデザインするのがコツですよ。

家を建てるのに一部屋だけ先に作らないでしょ??
全体から作り始めて最後に内装施工をするでしょ??

ページデザインの制作 ②全体のデザイン

デザインの準備が終わったらまず最初にサイト全体のデザインから進めていこうと思います。
サイト全体のデザインの方向性、配色や書体、背景などのテンプレート部分ですね。
全体のデザインの手順は以下。

  1. 全体の方向性に統一感を持たせる
  2. 全体の配色を決める
  3. 全体の書体を決める
  4. 全体の背景を決める

全体のデザイン① 全体の方向性に統一感を持たせる

全体の方向性は既に決まっていると思いますが念のため。

ページデザインをする前に念頭に置いてルールとして決めておきたいのは、「全体を通して統一感を持たせる」ことです。「この方向性」と決めたものは途中で部分的に変えないようにしましょう。もしどうしても変更したいのであれば、全体の見直しからやり直す必要があります。

レイアウトの4つの基本的なルール反復では一貫性のないデザインは見る人を混乱させると伝えました。ページデザイン全体を通してもそれは同じことで、統一感のないデザインは違和感を生み出してしまい、目的達成には程遠い状態になってしまいます。多少見せ方を変えるのは問題ありませんが、大きくテイストを変えるのはリスクのほうが大きくなります。

これ以降の項目で配色や書体、背景やブロックごとのデザイン、ディテールのデザインなどが出てきますが、見る人に違和感を与えないために全体を通して統一感を持たせましょう
ルールブックを作るイメージで方向性の構想を進めればいいと思います。

全体のデザイン② 全体の配色を決める

まずは全体のデザインの配色を決めましょう。
ページデザインの基本「最初は全体、最後は個別」は配色でも同じです。

ここでは第07回の配色の講義の内容や配色のツールの紹介の項目が特に役に立つと思います。
カラー別ウェブサイトの見本(MUUUUU.ORG)から探しても素晴らしい配色が見つかりますね。

色を決めたらレイヤーパネルに「配色専用フォルダ」などを作ってその中に色専用の別レイヤーを作るか、
組み合わせに使う色それぞれのカラーコードをメモしておきましょう。

龍弥デザインの制作手順

龍弥デザインの制作手順では、まずはメインカラーを決め、次にベースカラーを決めます。
2種類を決めたのち、全体の配色を見ながらアクセントカラーを決めるとうまくおさまります。
配色のツールの紹介の「ColorDrop – New colors」あたりの色の組み合わせを参考にするのがいいと思います。

全体のデザイン③ 全体の書体を決める

次に全体で使用する書体を決めておきます。

見出し・本文・英字の3書体を決める

具体的には「見出しで使う書体」「本文で使う書体」「英字部分で使う書体」の3つを決めるのが基本セットになります。見出しと本文はできればサイズにも細かいルールを設定した方がいいですが、見やすくかつ違和感のないサイズで決めておけば問題ありません。

ただ実際には書体も含めてワイヤーフレームで設計するため、
その時点ですでに決めている人が多いと思います。

Google Fontsも有効

なおPC内の書体だけでは選択肢が少ないので、Google Fontsなどを使用してもいいと思います。
教室のPCはダウンロードしてインストールしても消えてしまいますが使い方を覚えおいて損はありません。

参考サイト:無料なのに美しい「Googleフォント」を自分のパソコンにインストールして使う方法|KUROKO blog|プレゼンを思考するメディア

龍弥デザインの制作手順

龍弥デザインの制作手順では、見出しは「22px〜36px」本文は「14px 〜 16px」一時的に様子を見て全体のテイストが決まってから最終決定することが多いですね。
そして、見出しと本文には「游ゴシック」や「Noto Sans JP」あたりを使用するのが無難です。

書体を決めたら次にいきましょう〜。

全体のデザイン④ 全体の背景を決める

次にサイトの背景を決めましょう。

背景に何をチョイスするかでサイト全体の雰囲気が決まる

配色の講義では、ベースカラーは画面の70%を占めると伝えました。
70%もの面積比率を占めるとサイト全体の雰囲気がほぼ決まってしまうだけに、
何を背景にチョイスするかが最も難しいところです。

色を使う場合、単一色なのか?複数色なのか?グラデーションなのか?
色ではなく素材を使う場合、どんな素材にするのか?素材の使い方を変えるのか
・・・などなど選択肢は無限に存在するため非常に迷ってしまうところです。

しかし結局はシンプルが一番
配色の講義で説明したベースカラーの選び方にあった通り、文字がどれだけ見やすいか?で決めるのが一番簡単です。これからページデザインのディテール部分を描いていくキャンバスになるので、
あまりに情報量の多い背景にすると視認性が下がることは念頭に置いておきましょう。

単色背景はベースカラーの塗りつぶしレイヤーにする

単色背景の場合、レイヤーパネルの一番下、左から4番目の「塗りつぶしまたは調整レイヤーを新規作成>べた塗り」でベタ塗りレイヤーを生成し、先程配色を決めた色の中からベースカラーの色を選択

素材感のある背景はベースカラーの塗りつぶしレイヤー + 乗算などしたパターンレイヤー

素材感のある背景の場合は先程のレイヤーの上に追加で「塗りつぶしまたは調整レイヤーを新規作成>パターン」でパターンレイヤーを生成し好きなパターンを選択。さらにレイヤーの描画モードを「乗算」か「焼き込みカラー」「焼き込み(リニア)」を選択して、最後に不透明度で調整します。

詳しい使い方は以下を参照してください。

調整レイヤー・塗りつぶしレイヤーで背景を作る

龍弥デザインの制作手順

龍弥デザインの制作手順では、基本的にはベースカラーを使いますが、
テイストによっては紙や布などの素材の不透明度を下げてベースカラーの上に重ねます。
デザインキーワードに「あたたかみ」などがある場合は非常に有効です。

ページデザインの制作 ③ブロック・ディテールのデザイン

さてここからはディテール部分のページデザインを組みあげましょう。

そのため、龍弥デザインの実案件の制作実績の中から、
ヘッダーメインコンテンツフッターなど各ブロック部分
さらにディテール部分の表現テクニックをピックアップして紹介します。

表現には星の数ほどのパターンが存在しますが、条件として、
現場でよく使われる」かつ「今日から使える」表現テクニックを紹介していきます。
使い方をマスターしたらそのまま実戦デビュー可能ですよ。

各テクニックは手順のみ紹介しますので、よく見て聞いて自分のものにしてください。
どのテクニックをどこでどう使うかそもそも使わず他のテクニックを探すなど、
それぞれの判断に任せます。

あくまで「この表現はこうして実現させている」というテクニックのレクチャーです。
だから全く「この通りをやれ」ということではありません。

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

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

ヘッダー・グローバルナビゲーション(サイト全体)

河野建設様のヘッダーはロゴとグローバルナビゲーションを配置した全ページ共通のブロック。
ただトップページのみスライドショーにオーバーレイするので表示開始時は背景を透明にし、
スクロールすることで背景色を表示させるようにしています。

では今回はスクロールし終えた固定状態の再現をしましょう。
手順は以下。

  1. ヘッダーブロックと同じ横幅のブロックを長方形ツールで作成し色を調整、上部にガイドを作成する。
  2. レイヤーパネル上で、ロゴやナビゲーションを❶の上にドラッグ移動する。
  3. 上部・左右に20〜40pxの余白を作り、その周りにガイドを作成する。
  4. ❷を余白のガイドに吸着配置し❷の下部にガイドを作成する。
  5. ❸の余白と同じサイズの余白を作り下部にガイドを引く。
  6. ❶の高さをガイドに合わせて調整する。

コンセプトブロックの背景(トップページ)

メインコンテンツのコンセプトブロックはウェブサイトでよく配置されるコンテンツで、
オーナー側からユーザーへ届けたいメッセージを掲載している極めて重要なコンテンツ。

こういった場合には、メッセージの内容から関連性のある写真を添えたり、
今回のようにブロックの背景にし、描画モードをうまく使うテクニックがよく使われます。

では同じテクニックを使って再現していきます。
今回はぱくたそさんの以下の素材をお借りします。

素材URL:東京駅丸の内正面通りからの夜景の写真を無料ダウンロード(フリー素材) – ぱくたそ

手順は以下。

  1. ブロックと同じサイズのブロックを長方形ツールで作成する。
  2. カンバス上に写真を配置、「Ctrl + T」で自由変形にして❶より少し大きいサイズにリサイズする。
  3. レイヤーパネルで❷を❶のブロックの一つ上にドラッグ移動する。
  4. ❷を選択した状態で「Ctrl + Alt + G」で「クリッピングマスク」を作成する。
  5. ❶のサムネイルをダブルクリックし、色をブレンドしたい色に変える。
  6. ❷の描画モードを、乗算or焼き込みカラーor焼き込み(リニア)にして不透明度か塗りの値を調整する。

以上で実現可能です。

コンセプトブロックのボタン(トップページ)

コンセプトブロックはオーナー側からのメッセージと言いましたが、
その役割は、サイトの説明や印象付けだけを担っているわけではなく、
「詳しく知りたい」という要求に応えるべく次のアクションを起こすために必要です。

そのためにボタンを配置しますが、背景が写真であるため、
外枠のラインとリンクテキストのみのシンプルなボタンにしています。

このボタンの作り方は以下。

  1. 適切なサイズのブロックを長方形ツールで作成する。(W:300px H:70pxくらいがいいかな)
  2. 移動ツールをクリック、Ctrl + Aでキャンバス全体を選択範囲にし、「整列」を使って水平方向中央揃えにしたのち、Ctrl + Dで全選択解除。
  3. レイヤーパネル最下部の「レイヤースタイルを追加」から「境界線」を選択し、以下の設定にしてOKをクリックする。
    サイズ:2px / 位置:内側 / 描画モード:通常 / 不透明度:100%
    塗りつぶしタイプ:カラー / カラー:#ffffff
  4. ❶の塗りを0%にする。
  5. テキストツールでテキストレイヤーを作成する。文字色を❸のカラーと同じ色(今回は#ffffff)にしておく。
  6. Ctrlを押しながら❶のサムネイルをクリックして❶の選択範囲を作り、❹を選択して「整列」を使って水平方向中央揃え・垂直方向中央揃えにしたのち、Ctrl + Dで全選択解除。

安全弁・バルブ整備の技術集団。創業四十年。⽇本⼀の安全弁整備技術で、日本の⽯油化学プラントを支える。 リセイ工業

安全弁・バルブ整備の技術集団。創業四十年。⽇本⼀の安全弁整備技術で、日本の⽯油化学プラントを支える。 リセイ工業

メッセージブロックのテキストの単色背景枠(トップページ)

リセイ工業様のトップページのメッセージブロックの見出しと本文のテキストは、
社長の写真とテキストを絡めるように重ねて配置しています。

しかしただ重ねただけでは読みづらくなるため、テキストの背景だけに単色背景の枠を作っています。
これは視認性の向上のためだけではなく、テキストとほぼ同じサイズの枠を作って、
テキストの強烈な印象づけを狙ったテクニックです。

このテクニック再現の手順は以下。

  1. テキストを打ち込む。
  2. レイヤーパネル上で❶の下に長方形ツールで同じくらいのサイズのブロックを作成して、❶と❷の色を見やすいように調整する。
  3. 1行ごとに❷を作る。

以上、簡単ですね。

メッセージブロックの画像の背景(トップページ)

上述のメッセージブロックで、今度は画像を印象付けるためのテクニック。
画像と同じサイズの長方形レイヤーを作って背後に移動させ、
上下左右少しだけにずらすというページデザインのクオリティアップの小技です。

再現手順は以下。
河野建設様で行ったように画像にクリッピングマスクを作ります。

  1. 適切なサイズのブロックを長方形ツールで作成する。(リセイ工業様の場合、W:720px H:420px)
  2. カンバス上に写真を配置、「Ctrl + T」で自由変形にして❶より少し大きいサイズにリサイズする。
  3. レイヤーパネルで❷を❶のブロックの一つ上にドラッグ移動する。
  4. ❷を選択した状態で「Ctrl + Alt + G」で「クリッピングマスク」を作成する。
  5. ❶を選択して「Ctrl + J」で複製する
  6. ❺を選択し「プロパティ」パネルから「アピアランス>塗り」をクリック、
    出てきたポップアップの上部4つのアイコンの一番右「パターン」をクリック、
    好きなパターンを選ぶ。(ドットやストライプが扱いやすい)
  7. ❻を移動ツールで左上や右下に移動する。「Shift + 十字キー」でキリよく移動できる。
    デザインによるが、右に50px・下に50pxほど移動するだけでもクオリティが上がる。

応用技として、レイヤーパネル上でパターンレイヤーの上に塗りレイヤーを配置し、
塗りに「Ctrl + Alt + G」でマスクをかけるとパターンの色を擬似的に変えることができます。
塗りの色を変えてみると楽しいよ。

岡山の皮膚科と美容皮膚科 中山下スキンクリニック

岡山の皮膚科と美容皮膚科 中山下スキンクリニック

ヘッダー・グローバルナビゲーション(サイト全体)

河野建設様ではグローバルナビゲーションの背景は単色でしたが、
中山下スキンクリニック様では単色だけではなくいくつかの層を重ねています。
全て「レイヤースタイルを追加」で実現できます。

レイヤースタイルの内容は以下。

  1. 「グラデーションオーバーレイ」を以下のように設定
    描画モード:スクリーン / 不透明度:〜50% /
    グラデーション:#ffffff・不透明度0%、#ffffff・不透明度70%程度
    スタイル:線形 / シェイプ内で作成にチェック / 角度:90° / 比率:100%
  2. 「パターンオーバーレイ」を以下のように設定
    描画モード:通常 / 不透明度:〜30% / パターン:適切なもの / 角度:0° / 比率:100%

意外と簡単ですよ。

日本と海外からの留学希望者をつなぐ、安心と信頼の留学サポーター 一般財団法人 日本留学支援機構

日本と海外からの留学希望者をつなぐ、安心と信頼の留学サポーター 一般財団法人 日本留学支援機構

各コンテンツのタイトルの装飾(サイト全体)

よく使われるタイトル装飾ですが、上下左右にラインを入れるというものがあります。今回は下部にボーダーを入れていますが、ただのボーダーではなく斜めのストライプパターンで装飾。
これもすぐ使えます。早速再現してみましょう。手順は以下。

  1. テキストレイヤーの10px〜20pxほど下に長方形レイヤーを作る。
    サイズはコンテンツ部分と同じ横幅と高さ10px程度。
  2. ❶を選択し「プロパティ」パネルから「アピアランス>塗り」をクリック、
    出てきたポップアップの上部4つのアイコンの一番右「パターン」をクリック、
    好きなパターンを選ぶ。

こちらも塗りのマスクで使えば色付きのパターンにできます。

自分なりの答えになる表現を見つけて試してみよう

いかがでしたか?ブロック・ディテールのデザインの表現は本当に様々あります。
今回取り上げたのは「現場でよく使われる」かつ「今日から使える」表現テクニックです。
つまりこれ以外にも、もっと発展的なものも存在します

その表現が実際にどんな使われ方をしているかを様々なウェブサイトを見る中で発見し、
自分の引き出しにしていくことが常にクオリティの高いデザインを生み出す秘訣です。

最後の課題提出

さて、集大成の課題提出です。いつものようにjpg以外は受け付けられないようになっていますので、必ずjpgに書き出して提出してください。

いつでも相談してください(提出期限内)

なお提出期限は、来週8/10(火)23:59までにします。
それまでの間であれば(ギリギリは難しいけど)いつでも相談してください

例えば「この表現はどうやったら再現できるか?」「使えそうな素材があるサイトを知りたい」など、
答えられることには全て答えたいと思います。

専用のページとフォームを用意しましたので是非使ってください。

学生専用質問・相談ページ

繰り返しますが、提出期限は、来週8/10(火)23:59までです。
それまでであれば(ギリギリは難しいけど)いつでも相談してください

課題の提出

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

  1. 上部のメニューバーの「ファイル」→「書き出し」→「Web用に保存」
  2. Web用に保存のウィンドウが出てきたら、プリセットの右のプルダウンメニューを「JPEG標準」に変更。
  3. 一番下の「保存」をクリック。
  4. ファイル名を以下のようにして保存をクリック。
    「ページデザイン課題」→ 学籍番号-design

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

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

    今日のまとめ

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

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

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

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

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

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE