今回の実習の範囲
今回の実習では、下記4パーツをトレースして頂きます。
- Skillhubメソッド
- 学習フロー
- お客様の声
- CTA
※ファイル確認用。縮小していますので、トレースには使用しないでください。
トレース用の画像は、mihon04とmihon05の2つに分かれています。
当レッスンページの素材、下記のボタンからダウンロードしてご利用ください。
灰色の長方形について
見本内で灰色の長方形になっている箇所には、自作したアイコンやインフォグラフを挿入します。
自作アイコン・インフォグラフの作成は、実習編の後半で行います。
現段階では、見本のように挿入箇所の確保だけしておいてください。
お客様の声の背景画像
セクション全体の背景画像は、フリーの写真を使っています。
下記よりDLしてご利用ください。
https://unsplash.com/photos/UcYBL5V0xWQ
制作のポイント
1.Google Material iconsの挿入
下記のアイコンは、Google Material iconsを使っています。
Google Material iconsは、Font Awesomeなどと同じく「Webアイコンフォント」と呼ばれる、文字と同じようにアイコンを扱うことができるサービスです。CSSで簡単に色やサイズを変更したり、大きくしても画質が下がらないことから、Webページではよく利用されています。
デザイン制作時にGoogle Material iconsを使用する場合は、配布元のページを開いて、画像データ（SVGなど)をダウンロードする必要があります。
SVGのダウンロード
Google Material iconsのページを開きます。
https://fonts.google.com/icons
一覧表示されているアイコンの中から、使いたいものを選んでクリックします。
数が多いので、検索を使うと探しやすいです。
使いたいアイコンをクリックすると、SVGというボタンがあります。
クリックしてダウンロードしてください。
制作中のデザインに使用する
ダウンロードしてきたSVGをIllustratorで開きます。
アイコンを選択してコピー。
制作しているアートボードに貼り付ければOKです。
３つアイコンを設置してみてください。
アイコンのSVGに関して
ダウンロードしてきたSVGファイルは、削除しても問題ありません。
不安がある方は、制作中の素材フォルダに移動しておきましょう。
また、Google Material iconsを使用していることを、アートボード外に一言書いておくと親切な作りになるでしょう。特に自作アイコンとWebアイコン両方を使っている場合は、どちらかをメモ書きしておくとコーダーの負担も減ります。
ガイドと同じように、メモ書き専用のレイヤーを作っておくと扱いやすいです。
2.アイコン枠の配置
アイコンを載せている四角形は、ガイドのグリッド線に沿っているようで沿っていません。真ん中の位置を決めにくいですよね。
真ん中の四角を等間隔で配置するためには、整列パネルの“水平方向中央に分布”を使います。
同じ方法で、ピンクの三角形も配置してください。
3.学習フロー部分の分割枠
学習フローは12分割のグリッドを目安に作っています。
4カラム分で1つのブロック、矢印と仕切り線がガターの中央にきます。
画像とテキスト（エリア内文字）は、配置用に4カラム分の長方形を作ると揃えやすいです。
上図では水色で表示されている部分が配置用の長方形です。
線を使って作る矢印
線パネルを使うと、矢印を簡単に設定できます。
4.卒業生の声
背景
Illustratorで塗り-黒、不透明度-60%くらいの長方形を重ねています。
卒業生部分
顔写真は円でクリッピングマスクをかけます。
背景は半透明の円を作り、長方形でクリッピングマスクをかけています。
（もちろん、重ねてパスを合体させても構いません）
卒業生のメッセージタイトルに使っている、タブルクォーテーションはアイコンではなく円+文字（❝）で作っています。
5.2つめのCTA
前回作っていただいたCTAと全く同一です。
ドラッグで範囲選択して、丸ごとコピーしてください。