## 学習内容をまとめるページを作成する
今回は、デザインの勉強内容をまとめるページを作成していこうと思います。
Webデザインについて調べたところ、多くの専門用語が登場してきました。そこで、デザインに関するインプットを始めましたが、
これは、学習内容を自分なりにアウトプットするいい機会だと思ったので、「デザインノート」と「デザインギャラリー」を作成することにしました。
## 「デザインノート」と「デザインギャラリー」
まず「デザインノート」については、Webデザインやグラフィックデザインについて学習した用語、考え方、制作時に意識したいことをまとめるページです。単なる用語の説明だけでなく、実際のWebサイト制作にどのように活用できるかも、自分なりに整理したものを、載せていくページにしたいと考えています。
次に、「デザインギャラリー」。こちらはバナーやWebパーツ、画像素材など、これまでに制作したデザインを掲載します。自主制作や学習の一環として作成した作品も含めたうえで、制作実績とは別にまとめていきたいと思います。
具体的には、作成したLINEスタンプに関するデザインの話や、ある特定の課題を決め、そのうえで作成したデザインを載せたいと思います。
## それぞれのページのトップ画像を作成する
というわけで、それぞれのページに掲載するトップ画像を作成したいと思います。
前回と同様に、画像はpixabayから探していこうと思います。
今回の画像については、以下のようなイメージで探します。
- デザインノート：学習帳（ノート）、鉛筆、黒板
- デザインギャラリー：美術館、絵画が並んだ様子
まず、「デザインノート」について、「学習帳」で画像検索をし、ピンとくる画像を探しました。
ノートにメモをとっている様子、それに加えてPCが映り込んでおり、これはWEBデザインのイメージ画像にはぴったりだと判断し、この画像としました。
次にデザインギャラリーについては、「画廊」で検索し、以下の画像としました。
この画像については、絵画だけでなく彫像もならんでいて、ジャンルに縛られないギャラリーであるイメージがより反映しやすいと考えこの画像としました。
これらの画像をもとに、ページ用の画像を作成していきます。
## ページ用の画像を作成する
今回は、Adobe Illustrator を使用していきます。
文字フォントについては、「Biz UDP ゴシック Bold」を使用し、色は前回と同様に白（#FFFFFF）に、本文の文字色（#374151）を組み合わせたものを使用します。また、白やグレーをイメージしたサイトのため、グレースケール加工を施します。そうしてできたのが、
これらの画像です。こうして、ページ用の画像が完成しました。
次回以降は、このデザインノートとデザインギャラリーの内容を充実させていこうと思います。
というわけで、今回の作業はここまでとします。
以下、作業ログ
今回の作業の目標
– 「デザインノート」「デザインギャラリー」の画像を作成し設定する
今回やったこと
– 画像のコンセプト決定
– Pixabayでの画像選定
– adobe illustrator での画像編集
– 「デザインノート」「デザインギャラリー」の画像の設定
学んだこと
今回もルールに則って、画像の選定から画像加工までできたと思います。
特に、サイトデザインからグレースケールにするという発想は、サイトの雰囲気を損なわない良い発想だと思いました。
またAdobe Illustratorについても、同じadobeのphotoshopの使用経験からそこまで違和感なく使用することができました。
次にやること
– ページの見た目のブラッシュアップ