まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
前回も引き続きワイヤーフレームの制作を行いました。
前回出席者の制作状況を確認しましたが、概ね完成が近い人が多いと思いました。
今回はデザイン作業全体のざっくりとした流れの説明ですが、
次回、本格的にデザイン作業に入りたいと思います。
なお休んでしまった人はワイヤーフレームの制作を進めてかまいません。
今回の授業内容は非常に重要で、レクチャー必須であるため進めますが、
終了後に時間に余裕があれば作業してかまいません。
みなさん全員が帰るまではここにいるつもりです。
私もワイヤーフレームを完成させてきました。困っていたら参考にしてください。
というよりそもそも困っていたら声をかけてください。
記事の最後に振り返りのリンクを置いていますので活用してください。
次回までにはデザイン作業を行える状態にしておきましょう。
この記事の目次
Photoshopの基本設定
Photoshopの基本設定から行いましょう。
まずはPhotoshopを起動し、前回途中まで制作して保存したPSDファイルを開きましょう。
ファイル名は「学籍番号-wire.psd」としていたかと思います。
ページデザインの制作 ①デザインの準備
いよいよページデザインに進んでいきましょう。
実はワイヤーフレームがしっかり作り込めていれば、
ページデザイン自体はさほど時間がかかる工程ではありません。
ヒアリング〜ワイヤーフレーム制作までの間で、構造や役割、仕組みや表現方法など、
制作内容や情報を共有してクライアントが納得できる内容になっていれば、
ページデザイン自体はある程度自分の思ったようにデザインすることができるからです。
では、デザインの準備手順は以下。
- PSDファイルをリネームする
- 優れたページデザインの表現を吸収する
デザインの準備① PSDファイルをリネーム・下絵を削除する
まずはページデザイン用のPSDファイルを準備しましょう。
制作したワイヤーフレームのPSDファイルをそのままデザイン用のPSDファイルに使用します。
手順は以下。
- ワイヤーフレームのPSDファイル「学籍番号-wire.psd」の名称を「学籍番号-design.psd」に変更する。
- 「学籍番号-design.psd」をPhotoshopで開く。
- 下絵レイヤーのロックを解除して削除する。
以上です。
下絵レイヤーなど使わないものは削除しておきましょう。
※ワイヤーフレーム作成中の人は、下絵を削除してしまうと先に進めません。ワイヤーフレームが完成してから下絵を削除しましょう。
デザインの準備② 優れたページデザインの表現を吸収する
次に、デザイン表現の面で参考にできそうなサイトを探すために、
再びアーカイブサイトをチェックしてみましょう。
これまで参考サイトを探すという工程は何度か行いましたが、
実はその度に見方・見るポイントが違っていたのは気が付きましたか？
一度目はウェブサイトにはどんなカテゴリがあるかを知るためにアーカイブサイトを探した時。
二度目は手書きデザインラフを制作するために好みのデザインの参考サイトを探した時。
実は「最初は全体、最後は個別」というページデザイン制作の順番にならっていて、
今回は最も的を絞った「細かいページデザインの表現はどんなものがあるか」の見方で、
自分のページデザインに組み込めそうなアイディアを探す工程です。
写真の扱いだったり、色使いだったり、素材感だったり、
優れたページデザインを生み出すには優れたページデザインを吸収することが重要です。
これらのサイトで使われている優れた表現を、どんどん自分の引き出しに入れていきましょう。
ではいよいよページデザインへの工程へいきましょう。
ページデザイン制作の流れは「最初は全体、最後は個別」です。この意識は忘れないように。
最初は引いて見た全体からデザインし、最後は寄って見た個別アイテムをデザインするのがコツですよ。
家を建てるのに一部屋だけ先に作らないでしょ？？
全体から作り始めて最後に内装施工をするでしょ？？
ページデザインの制作 ②全体のデザイン
デザインの準備が終わったらまず最初にサイト全体のデザインから進めていこうと思います。
サイト全体のデザインの方向性、配色や書体、背景などのテンプレート部分ですね。
全体のデザインの手順は以下。
- 全体の方向性を決める（統一感を持たせる）
- 全体の配色を決める
- 全体の書体を決める
- 全体の背景を決める
全体のデザイン① 全体の方向性を決める（統一感を持たせる）
全体の方向性は既に決まっていると思いますが念のため。
ページデザインをする前に念頭に置いてルールとして決めておきたいのは、「全体を通して統一感を持たせる」ことです。「この方向性」と決めたものは途中で部分的に変えないようにしましょう。もしどうしても変更したいのであれば、全体の見直しからやり直す必要があります。
レイアウトの4つの基本的なルールの反復では一貫性のないデザインは見る人を混乱させると伝えました。ページデザイン全体を通してもそれは同じことで、統一感のないデザインは違和感を生み出してしまい、目的達成には程遠い状態になってしまいます。多少見せ方を変えるのは問題ありませんが、大きくテイストを変えるのはリスクのほうが大きくなります。
これ以降の項目で配色や書体、背景やブロックごとのデザイン、ディテールのデザインなどが出てきますが、見る人に違和感を与えないために全体を通して統一感を持たせましょう。
ルールブックを作るイメージで方向性の構想を進めればいいと思います。
全体のデザイン② 全体の配色を決める
まずは全体のデザインの配色を決めましょう。
ページデザインの基本「最初は全体、最後は個別」は配色でも同じです。
ここでは第07回の配色の講義の内容や配色のツールの紹介の項目が特に役に立つと思います。
カラー別ウェブサイトの見本（MUUUUU.ORG）から探しても素晴らしい配色が見つかりますね。
色を決めたらレイヤーパネルに「配色専用フォルダ」などを作ってその中に色専用の別レイヤーを作るか、
組み合わせに使う色それぞれのカラーコードをメモしておきましょう。
龍弥デザインの制作手順
龍弥デザインの制作手順では、まずはメインカラーを決め、次にベースカラーを決めます。
2種類を決めたのち、全体の配色を見ながらアクセントカラーを決めるとうまくおさまります。
配色のツールの紹介の「ColorDrop – New colors」や「Color Hunt」から色の組み合わせを参考にしましょう。
全体のデザイン③ 全体の書体を決める
次に全体で使用する書体を決めておきます。
見出し・本文・英字の3書体を決める
具体的には「見出しで使う書体」「本文で使う書体」「英字部分で使う書体」の3つを決めるのが基本セットになります。見出しと本文はできればサイズにも細かいルールを設定した方がいいですが、見やすくかつ違和感のないサイズで決めておけば問題ありません。
ただ実際には書体も含めてワイヤーフレームで設計するため、
その時点ですでに決めている人が多いと思います。
Google Fontsも有効
なおPC内の書体だけでは選択肢が少ないので、Google Fontsなどを使用してもいいと思います。
教室のPCはダウンロードしてインストールしても消えてしまいますが使い方を覚えおいて損はありません。
記事を書いていますので、参考までに。
参考サイト：無料なのに美しい「Googleフォント」を自分のパソコンにインストールして使う方法｜KUROKO blog｜プレゼンを思考するメディア
Adobe Fontsも有効
AdobeアカウントがあればAdobe Fontsを使用できます。以下の動画を参照。
簡単でしょ？
現状のままでは使用できないみたいです泣
ちょっと調べてみようと思います。
龍弥デザインの制作手順
龍弥デザインの制作手順では、見出しは「22px〜36px」、本文は「14px 〜 16px」で一時的に様子を見て、全体のテイストが決まってから最終決定することが多いですね。そして、見出しと本文には「游ゴシック」や「Noto Sans JP」「Zen Kaku Gothic New（私のお気に入り！）」あたりを使用するのが無難です。
書体を決めたら次にいきましょう〜。
全体のデザイン④ 全体の背景を決める
次にサイトの背景を決めましょう。
背景に何をチョイスするかでサイト全体の雰囲気が決まる
配色の講義では、ベースカラーは画面の70%を占めると伝えました。
70%もの面積比率を占めるとサイト全体の雰囲気がほぼ決まってしまうだけに、
何を背景にチョイスするかが最も難しいところです。
色を使う場合、単一色なのか？複数色なのか？グラデーションなのか？
色ではなく素材を使う場合、どんな素材にするのか？素材の使い方を変えるのか？
・・・などなど選択肢は無限に存在するため非常に迷ってしまうところです。
しかし結局はシンプルが一番。
配色の講義で説明したベースカラーの選び方にあった通り、文字がどれだけ見やすいか？で決めるのが一番簡単です。これからページデザインのディテール部分を描いていくキャンバスになるので、
あまりに情報量の多い背景にすると視認性が下がることは念頭に置いておきましょう。
単色背景はベースカラーの塗りつぶしレイヤーにする
単色背景の場合、レイヤーパネルの一番下、左から4番目の「塗りつぶしまたは調整レイヤーを新規作成＞べた塗り」でベタ塗りレイヤーを生成し、先程配色を決めた色の中からベースカラーの色を選択。
素材感のある背景はベースカラーの塗りつぶしレイヤー + 乗算などしたパターンレイヤー
素材感のある背景の場合は先程のレイヤーの上に追加で「塗りつぶしまたは調整レイヤーを新規作成＞パターン」でパターンレイヤーを生成し好きなパターンを選択。さらにレイヤーの描画モードを「乗算」か「焼き込みカラー」「焼き込み（リニア）」を選択して、最後に不透明度で調整します。
詳しい使い方は以下を参照してください。
龍弥デザインの制作手順
龍弥デザインの制作手順では、基本的にはベースカラーを使いますが、
テイストによっては紙や布などの素材の不透明度を下げてベースカラーの上に重ねます。
デザインキーワードに「あたたかみ」などがある場合は非常に有効です。
ページデザインの制作 ③ブロック・ディテールのデザイン
さてここからはディテール部分のページデザインを組みあげましょう。
以下の記事を元に各表現の再現を行ってみましょう。
なお、Youtubeに以下のようなボタンの作り方もありました。
見たところ、このチャンネルにはその他のパーツの作成方法も掲載されており、
とても分かりやすくまとめられています。Webデザイナー必見かも？
ねいび / neibi design – YouTube
【Photoshop】メインビジュアル – ねいび / neibi design
【バナー作成】チュートリアル – ねいび / neibi design
自分なりの答えになる表現を見つけて試してみよう
いかがでしたか？ブロック・ディテールのデザインの表現は本当に様々あります。
今回取り上げたのは「現場でよく使われる」かつ「今日から使える」表現テクニックです。
つまりこれ以外にも、もっと発展的なものも存在します。
その表現が実際にどんな使われ方をしているかを様々なウェブサイトを見る中で発見し、
自分の引き出しにしていくことが常にクオリティの高いデザインを生み出す秘訣です。
当科目は皆さん自身が考えたデザインを制作するため、全員が違う表現になってくるはずです。
やりたい表現があれば都度声をかけてください。みなさんの時間が許す限りレクチャーします。
本日のまとめ
いよいよデザイン制作の流れに入ってきましたが、今回は順番や進め方にフォーカスしたお話になりました。
進められる人はどんどん進めてもらっていいと思いますし、もし授業時間外に時間があればいつでも声をかけてみてくださいね。
教員をじゃんじゃん使ってスキル・クオリティアップにつなげてください！
ワイヤーフレームの制作
では工程を振り返ります。
では下の手順の⑤⑥⑦⑧をブロックごとに繰り返して、ワイヤーフレーム制作を進めていきましょう。
ワイヤーフレーム制作手順⑤ グループ（フォルダ）を作って名前をつける
ワイヤーフレーム制作手順⑥ 下書きを見本に長方形ツールでブロックを作成
