カフェのデザインカンプを作ってみよう！

01. 配色のカラーコードを確認する

今回使うのは次のカラーになります。

メインカラー	#f0f0f0	■
サブカラー	#613d31	■
アクセントカラー	#bbe9f6	■
文字の色	#2b2b2b	■

メインターゲットが男性と女性の両方なので、過度にどちらかを連想させる色味を避けつつ、最も目立たせる空豆のスープとの相性の良い色味を採用しています。色よりも写真に目が向くようにビビッドな配色も避けています。全体的に薄いグレーを使って落ち着いた印象も与えています。

02. 新規ファイルを作成する

まずは前回のレッスンで見た、新規ファイル作成を行います。先程作ったファイルをそのまま使っても構いません。前回レッスンを飛ばした方のために、ファイルサイズなどを再掲しておきます。

03. 背景レイヤーに色を付ける

1. まず背景レイヤーが選択されていることを確認しましょう。選択されていなければ、画面右側のレイヤーパネルで背景レイヤーをクリックします。
2. ツールパネルで、ペンキマークをクリックして、塗りつぶしツールに持ち替えます。ペンキマークがない場合は、グラデーションマークが代わりに表示されているかもしれません。その場合は、グラデーションマークを長押しして、現れた選択肢から塗りつぶしツールをクリックしてください。
   
3. 塗りつぶす色を指定します。ツールバーの下の方に色の付いた四角が2つあると思います。このうち左上の四角をクリックしてください。添付画像だと白い方の四角です。
   
4. 表示されたカラーピッカーの画面下部に、メインカラーのカラーコード（#f0f0f0）を記入して、OKボタンをクリックします。カラーコードは6桁です。英字は大文字でも小文字でも構いません。
   
5. ドキュメントウィンドウ内の白紙をクリックします。わずかですが色が変わったと思います。

これで背景に色が付きました。あとはこの上に各パーツを作成していきます。

04. ヘッダー部分を作る（エリアA）

エリアAを作っていきます。今回は「テキスト」ツールを使います。これもウェブサイトのデザインカンプを作る際は頻繁に使うツールです。ツールパネルのどのあたりにあるのか、感覚的に覚えておくと便利です。

テキストレイヤーを使う

1. テキストツールに持ち替えます。
   
2. 白紙上部の適当な位置（※）をクリックします。
   ※今回は練習でもあるので「上から何ピクセルにテキストを配置」というように厳密には決めません。
3. テキストを入力する前に、フォントや色などを指定しておきます。これらはプロパティ（属性）パネルで設定できます。プロパティパネルが見つからない方は、メニューバーのウィンドウをクリックして、「プロパティ」というパネルを見つけてクリックしてください。
   フォントの種類は游ゴシック体を選択します。
   色はカラーコード「#2b2b2b」を指定します。
   フォントサイズは30pxに指定します。
   
4. カフェの店名「Cafe de Init」を記入します。入力後にキーボードのCtrlキー（MacならCommandキー）を押したままEnterキーを押すと、文字入力が決定されます。
   このとき、文字が小さくて見づらい場合は、画面右下のズーム率を調整します。ズームはツールバーの虫眼鏡アイコンの「ズームツール」でも可能です。どちらでもやりやすい方で調整してください。
   
5. ズーム率を調整することで文字が見えやすくなりますが、テキストが中心がズレているかどうか、直感的に判断できません。そこで、中心にガイドラインを引きたいと思います。まずは「定規」と呼ばれる機能をONにします。
   
6. ドキュメントウィンドウの上と左に定規が表示されたと思います。次に、横側の定規の上にマウスカーソルを乗せて、ドラッグ・アンド・ドロップするように右側に動かします。すると、水色の線が表示されます。この水色の線を中心まで持っていってマウスを離します。今回は横幅1280pxなので、640pxのところが中心になります。キーボードのShiftキーを押しながら動かすと、キリのいい数値で調整できるので、簡単に中心に合わせることができます。
   
7. ガイドラインを引いてみると、先程入力したテキストが中心からズレていることが明確になったのではないでしょうか。これを調整する方法は、準備運動でも紹介した移動ツールを使う方法がシンプルで分かりやすいので、移動ツールに持ち替えましょう。
   
8. レイヤーパネルで、テキストレイヤーが選択されていることを確認してから、テキストを中央に移動します。先ほど引いたガイドラインに近づくと「ピトッ」と吸着するような動きをするので、移動時に表示されるピンクの線とガイドラインが重なるように調整しましょう。
   

これで店名を中心に配置することはできました。

Adobe Fontsを使う

次に、Photoshopの強力な機能の1つである「Adobe Fonts」との連携を紹介します。この機能は仕事として作品を手掛ける場合でも役立ちます。

かつてはPC1台ごとに年間5万円以上支払わないと使えなかった有償フォントなどが、Photoshopを契約していれば追加費用無しで使えます。（Adobeの判断によって将来的に変わる可能性はあります）

さっそくAdobe Fontsからフォントを追加して店名をかっこよくアレンジしてみます。

1. まずは、テキストレイヤーが選択されていることを確認してから、プロパティパネルにてフォントを選ぶメニューを開きます。フォント一覧がでてきたら、一覧の右上にあるCreative Cloud（クリエイティブクラウド）マークをクリックします。
   
   （アドビアカウントにログインを求められた場合は、ご自身で設定したアカウントでログインしてください）
2. Adobe Fontsのウェブサイトが開きます。ここで15,000以上のフォントを利用することができます。今回はフォントが決まっているので、検索欄に「livermore」と入力してキーボードのEnterキーを押してください。
   
3. 検索結果にでてきた「ATF Livermore Script」をクリックします。
   
4. 画面右上にある「3個のフォントをアクティベート」ボタンをクリックします。アクティベートされるとボタンが青くなります。
   
5. Photoshopに切り替えてください。再びプロパティパネルにてフォントを選ぶメニューを開いてみると、先程アクティベートしたフォントが表示されているはずです。今回はLivermore Script ATF」という名前のフォントが追加されています。アルファベット順で並んでいるので「L」で始まるフォントのあたりを探してクリックしてみてください。
   
   （しばらく待ってもフォントが追加されない場合は、一度Photoshopを再起動してみてください）
6. 店名にフォントが適用されたことを確認します。
   
7. フォントが変わったことで、少し中心からズレてしまったので、再び移動ツールに持ち替えて位置を調整してください。

これだけで店名がかっこよくなりましたね！無数のフォントが使えるということは、それだけで1つの武器です。

フォントに興味のある方は、フォントはどういうものがあるのか、どういうときにはどういうフォントが合うか、といった研究もしてみてください。

05. ステップ⑤ メインビジュアル部分を作る

エリアBを作ります。

まず画像をダウンロードしてもらいます。次に画像を配置する場所に下地となる長方形（プレースホルダー）を作ります。そしてダウンロードした画像をPhotoshopに読み込んで、クリッピングマスクという手法を使って加工していきます。

画像のダウンロード

メインビジュアルとして利用する画像は無料素材サイトからダウンロードします。

下記URLから無料素材サイトのGIRLYDROPにアクセスします。少し画面を下にスクロールするとダウンロードボタンがあるのでクリックしてダウンロードします。
https://girlydrop.com/cafe/11284

プレースホルダーを用意する

1. まずはメインビジュアルの画像を配置したいと考えている場所に、長方形を作っておきます。このような下地をプレースホルダーと呼びます。どのようになるのか、最初はイメージが湧きづらいと思いますが、いったん作業を進めてみましょう。
   では、長方形ツールに持ち替えてください。
2. 次に、添付ファイルを参考に、長方形を作ってみてください。
   属性パネルで各種数値を合わせてください。
   

   W	横幅です。Width（ウィドゥス）の略。
   H	高さです。Height（ハイト）の略。
   X	横の座標です。横の位置を数値で表したものです。
   Y	縦の座標です。縦の位置を数値で表したものです。
   カラー	目立つ色なら何色でも構いません。

3. 長方形1レイヤーの名前を変更しておきます。長方形1という名前の上をダブルクリックしてください。このとき、名前の上ではないところをクリックすると、名前変更ではなくてレイヤー効果と呼ばれるパネルが表示されてしまいます。その場合は、パネルを閉じて名前の上をダブルクリックし直してください。レイヤーには複数クリックする箇所が細かく指定されているので、誤操作が度々発生します。
   レイヤーの名前を「メインビジュアルのプレースホルダー」に変えておいてください。
   

埋め込み画像を配置する

1. メニューバーのファイルをクリックして、「埋め込みを配置」を選んでください。
   
2. 埋め込む画像を指定するウィンドウが開きますので、先ほどダウンロードした画像を選択してください。指定すると以下のようになります。
   
   サイズ変更もできますが、この段階ではとくに変更作業は必要ありません。
3. キーボードのEnterキーを押して、埋め込みを確定させます。

クリッピングマスクを作成する

クリッピングマスクという機能を使います。これは大変有用な機能です。さっき用意した「メインビジュアルのプレースホルダー」レイヤーと埋め込んだ画像を合体させることできます。合体と言われてもピンと来ないと思いますので、やってみましょう。

1. まずは、埋め込んだ画像レイヤーが、「メインビジュアルのプレースホルダー」レイヤーの1つ上にあることを確認してください。1つ上にあることが重要です。（もし1つ上ではなく、もっと上や下になっていたらドラッグ・アンド・ドロップして、移動してください）
   
2. 埋め込んだ画像レイヤー（添付画像では「IMG_2424」というレイヤー）を右クリックしてください。するとメニューが表示されるので、「クリッピングマスクを作成」という項目をクリックしてください。
   
3. すると、「IMG_2424」レイヤーと「メインビジュアルのプレースホルダー」レイヤーが合成されました。クリッピングマスクで合成すると、下（レイヤーパネルで下）のレイヤーの範囲からはみ出た部分は、見えなくなります。見えなくなっただけで、存在はしています。
   

クリッピングマスク内の位置を調整する

1. 「見えなくなっただけで、存在している」とはどういうことか、ここで体感してみましょう。移動ツールに持ち替えてください。
2. IMG_2424レイヤーが選択されていることを確認してから、IMG_2424を上に移動してみてください。見えていなかった下の部分が見えたのではないでしょうか。これが「見えなくなっただけで、存在している」という意味になります。
3. 引き続き移動ツールを使って、IMG_2424レイヤーをプレースホルダーの左上に角を揃えてみてください。左上の角を合わせただけでは、画像の中心がズレてしまうと思います。
   
4. メインビジュアルの中心を正確に知るために、もう一本ガイドラインを追加します。前回は横の定規をドラッグ・アンド・ドロップしましたが、今度は上にある定規をドラッグ・アンド・ドロップします。今回は大体で構いませんので、メインビジュアルの中心辺りまでガイドラインを持っていってください。
   
5. 自由変形はサイズだけではなく、位置も調整できます。サイズと位置を調整して、ガイドラインの中心と画像の中心がちょうど合うように調整してみてください。
   今回は練習なので、添付画像を見て属性パネルの数値を合わせてしまっても構いません。その場合は、いったん自由変形をキャンセルします。キーボードのESCキーを押すか、キーボードのEnterキーを押してください。そして、WとHとXとYの値を属性パネルで次のとおりに設定してください。
   W: 1337px
   H: 891px
   X: -57px
   Y: -91px
   

これでメインビジュアルの処理は完成です。プレースホルダー、埋め込み配置、クリッピングマスク、自由変形など、多くの機能について触れました。そのぶん作業も大変だったと思います。いますぐ覚えずとも、こういうことができる、という認識を持っておくだけでも今は十分です。

次ステップでは複雑な図の配置にも挑戦していきます。

06. 特徴ボックス周りを作る

エリアCを作ります。

カフェの特徴を表示する部分です。

このステップの作業まとめ

ここでは長方形ツールを複数組み合わせて、複雑なレイアウトを作成します。

アイコン専用のフォントであるFontAwesome（フォントオーサム）というツールの使い方も学んでいきます。

また、関連性の強いレイヤー同士を「グループ」に分けるPhotoshopの機能も学びます。（同じジャンルのファイルをフォルダに分けるようなものです）

長方形を作る

このエリアは背景に色を付けたいので、長方形ツールを使って枠となるボックスを作ります。

1. ツールパネルで、長方形ツールに持ち替えてください。
2. メインビジュアルの下に、横1280px、高さ484pxの長方形を作ってください。
   
3. 長方形の色をカラーコード「#613d31」に変更します。
   属性パネルの色を設定する四角をクリックして、カラーピッカーをクリックします。表示されるパネルの下部にカラーコードを入力して、OKボタンをクリックします。
   
4. このような外観になりました。
   

見出しを作る

次に「Welcome to Cafe de Init」という見出しを作ります。これには再びテキストツールを使います。店名を入力するときにも使いましたね。テキストを入力して、中央に引いたガイドラインと真ん中を合わせます。

1. テキストツールに持ち替えます。
2. （注：茶色い長方形の上でクリックしない）テキストツールに持ち替えてから（長方形1レイヤーが選択されたまま）長方形1レイヤーの上をクリックすると、長方形の左端から文字入力がスタートしてしまう特徴があります。
   今回は自由な場所に配置したいので、長方形から少し外れた場所をクリックして文字入力を開始してください。
   
3. 移動ツールに持ち替えます。
4. 今回のテキストレイヤーがレイヤーパネルで選択されていることを確認してから、茶色い長方形の上部に移動します。
5. さきほど店名を入力したときにテキストのカラーを#2b2b2bに指定したので、茶色の上では見づらいですね。
   
6. 文字の大きさや色は、入力した後でも変えることができます。属性パネルから色と大きさを変えましょう。色は#FFFFFFに、サイズは40pxに指定してください。
   
7. では、中心に移動します。移動ツールに持ち替えてください。店名のときのように、ガイドラインとピンクの線が重なるようにします。（このレッスンは練習なので、メインビジュアルとの距離は厳密には定めません）
   

特徴ボックスを作る

次に、お店の特徴を端的に伝えるためのボックス型のレイアウトを作ります。アイコンと英語のタイトルと解説の3種類の要素が1つのボックスに格納される複雑なレイアウトになります。

1. 長方形ツールに持ち替えます。
2. レイヤーパネルでなにもない場所をクリックして、どのレイヤーも選択されてない状態にしておきます。
   
   ※ ティンカリング）理由は、長方形ツールは別の長方形レイヤーが選択された状態で使うと、1つのレイヤーに2つのシェイプを作ってしまうという特徴があるためです。少し分かりづらいですね。時間に余裕がある方は、試しに長方形1レイヤーが選択された状態で長方形ツールで別の四角を書いてみてください。
3. 茶色い長方形の上に適当なサイズの四角を描きます。位置は後から直すので、今は気にしなくても大丈夫です。
4. 属性パネルで横幅と高さを調整します。横幅は320px、高さは250pxに指定します。
   
5. 長方形の色を無色にして、枠線の色を白にします。色の四角が2つあることに注目してください。左側は長方形の背景色ですね。右側が枠線（ボーダー）の色になります。どちらも操作方法は同じです。まずは添付画像を参考に、背景色を無色にしてみましょう。
   
6. 次に枠線を白にします。
   まずは枠線の太さを2pxに変更します。
   次に枠線の色を指定する四角をクリックします。
   最初は無色になっているので、ベタ塗りアイコンをクリックしてから、カラーピッカーを開きます。
   カラーピッカーにて、カラーコードに#FFFFFFを入力してください。
   
7. 最後に、枠線の角に少し丸みを付けます。属性パネルの最下部にある4つの入力欄に5pxと入力してください。初期設定では1箇所入れると4箇所全てに5pxと入力されます。
   

次にボックスの中身を作っていきます。最終的には、次のようなボックスを3つ作ろうと思います。

FontAwesomeでアイコンを作る

アイコン専用のフォントというものがあります。これはアイコンですが画像ではく、テキストデータとして作られています。文字を入力するように手軽にアイコンを使うことができるので、一緒に試してみましょう。　

FontAwesomeを準備する

1. まずは公式サイトからダウンロードします。いくつかバージョンがありますが、今回使用するのはバージョン4.7です。
   https://fontawesome.com/v4.7.0/get-started
   （最新版はバージョン5ですが、今回は4.7を使います）
2. 少し画面をスクロールすると「Download & Customize」という見出しの近くに「Download（ダウンロード）」というボタンがあるので、クリックします。
   
3. 「最新版（バージョン5）を使いますか？」という案内が出るかもしれませんが、今回は4.7を使いたいので、「No Thanks……」という目立たない方のボタンをクリックします。
   
4. ダウンロードしたZIPファイルを解凍します。解凍するとfont-awesome-4.7.0 2というフォルダができます。
5. font-awesome-4.7.0 2の中のfontsというフォルダを開いて、fontawesome-webfont.ttfというファイルをダブルクリックしてください。インストール画面が表示されるので、インストールして準備完了です。

FontAwesomeを使う

一番左のボックスにはカメラのアイコンが必要です。このアイコンがFontAwesomeになります。まずはFontAwesomeからカメラのアイコンを探す必要があります。さっそく見てみましょう。

1. FontAwesomeの公式サイト内にある「icons（アイコン）」ページにアクセスします。
   https://fontawesome.com/v4.7.0/icons/
2. すると検索欄があるので、ここで欲しいアイコンの名前を推測して入力してみます。今回はカメラなので、cameraと検索してみます。
   （※ティンカリング cameraではなくphotoやpicutureなどでも見つけることができます）
   
3. カメラのアイコンが存在していることを確認できました。cameraという名前が正しいことも確認できましたので、次はチートシートを開きます。
   https://fontawesome.com/v4.7.0/cheatsheet/
   
4. チートシートを開いたら、ブラウザの検索機能を使って「camera」を調べます。ブラウザの検索機能はWindowsならキーボードのCtrl+F、MacならキーボードのCommand+Fで立ち上がります。
5. カメラのアイコンを見つけたら、アイコンの画をマウスで選択してコピーします。（文字ではなく画をコピーします）
   
6. Photoshopにて、テキストツールに持ち替えます。
7. 長方形から少し離れた場所をクリックして先程コピーしておいたアイコンを貼り付けます。
   
8. 属性パネルでフォントの種類をFontAwesomeに指定します。
   

これでFontAwesomeを使うことができました。FontAwesomeは個人利用でも商用利用でも無償で使えるので、どんどん活用しましょう。

円を作る

アイコンの背景となる円を作ります。

1. 楕円形ツールに持ち替えます。
2. ボックス内に円を描きます。横幅50px、高さ50pxで指定します。（描くときにマウスで50pxの円を作っても、後から属性パネルで整えても、どちらでも構いません）
   
3. 移動ツールに持ち替えます。円を次の場所にピッタリ移動させてみましょう。上の枠線から20px、左右の枠線から135px、下の枠線から180pxのところに動かしてください。
   
4. 円の背景色をアクセントカラー（#bbe9f6）に変更します。属性パネルで変更してみてください。
5. 次に、アイコンを円の上に移動してみてください。成功する人もいると思いますが、下図のように失敗する人もいると思います。
   
   アイコンが円の裏に隠れてしまった人は、レイヤーパネルでアイコンと円のレイヤーがどういう順番で並んでいるかを確認してください。アイコン（テキスト）がレイヤーパネルで円より下にあると、隠れてしまいます。この場合は、レイヤーパネルでテキストレイヤーをドラッグして、楕円形1レイヤーの上に持っていきます。
   （※ティンカリング：成功した人も、レイヤーの順番を変えてアイコンが隠れるか試してください）
6. アイコンが円に比べて大きすぎるかもしれません。アイコンの大きさを変えましょう。アイコンはテキストなので、フォントのサイズで大きさを指定します。ここでは24pxにしましょう。また、カラーも#2b2b2bに変更しておきます。
7. 引き続き、移動ツールでアイコンを円の中心に移動してください。マウスの操作だけでは、ピッタリ円の中心に配置できないかもしれません。こういう場合は、いったん円の中心付近にアイコンを置いてから、あとはキーボードの矢印キーを押して位置を微調整します。微調整しながら円の淵から正確に何ピクセル離れているかを知るには、Ctrlキー（MacならCommandキー）を押しながらマウスを円の上に載せてみてください。ピンク色の計測ガイドが表示されます。
   

これでアイコンは完成です。

ボックス内の見出しを作る

1. テキストツールに持ち替えます。
2. ボックス内をクリックしてください。文字を入力する前に属性パネルで各種値を整えておきましょう。今回は、フォントは游ゴシック体、太さはボールド（太め）、サイズは24px、カラーは#FFFFFFです。
3. 「Photogenic」と入力して、Ctrl+Enter（MacならCommand+Enter）で入力を確定します。あとは移動ツールでボックス横幅の中心にくるように調整してください。
   

ボックス内の説明文を作る

1. このままテキストツールを使って、見出しの少し下に新しくテキストを作ります。ただし、今回は「クリックして入力」ではなく「右下に向けてドラッグしてから入力」してみます。横幅280px、高さ100px程を目安に範囲を広げてください。
   
   「クリックして入力」していたときは、文字を入力すればするだけ範囲が自動的に拡張されていましが。今回の「ドラッグして入力」する場合は、予め決めておいた範囲内でテキストが自動的に改行されます。範囲が限定されているときや、任意の場所で改行したいときはこの方が便利です。
2. 属性パネルでフォントの太さをミディアムに、サイズを18pxに、そしてサイズの右隣にある行送りを27pxに指定します。行送りとは、文字と文字の縦の距離です。
   
3. 次のテキストを流し込みます。テキストをコピペで入力することを「テキストを流し込む」と表現します。
   
   インスタ映え間違い無しのオシャレ空間です。他のお客様の映り込みにご注意いただければ、店内の撮影はすべて自由です。
   

グループ化する

今作ったボックスのレイヤーを1つのフォルダにまとめて管理しておきます。これをグループ化と呼びます。

1. まずレイヤーパネルで今回作ったボックス関連のレイヤーをすべて選択してください。キーボードのCtrlキー（MacならCommandキー）を押しながらクリックすると複数選択できます。
2. そして、レイヤーパネル下部にあるフォルダのアイコンをクリックします。
   
3. フォルダの名前をダブルクリックして、名前を「Photogenic」に変えておくと分かりやすくなります。

グループをコピー

文字をコピペするように、グループもコピペで複製できます。

1. レイヤーパネルでグループを選択して、キーボードのCtrlキー（MacならCommandキー）とCを押してコピーし、そのままキーボードのCtrl（MacならCommandキー）とVを押してペーストしてください。
   
2. グループが複製されましたが、名前が同じなので変えておきます。新しいグループは「Soup」にしておいてください。
3. 移動ツールに持ち替えます。
4. （注：この手順は失敗します）グループを移動してみてください。おそらくグループの一部だけしか動かないのではないでしょうか。いったんキーボードのCtrlキー（MacならCommandキー）とZを押して、もとに戻しておきましょう。
5. オプションバーにある「レイヤー」という選択肢をクリックして、「グループ」に変更します。これは移動ツールの操作対象になります。
   
6. これでもう一度グループを、ガイドライン中心に移動してみてください。思ったとおりの動きになると思います。移動し終わったら操作対象を「レイヤー」に戻しておきましょう。
   

スープボックスとコーヒーボックスを作り込む

課題作業

以上でボックスの操作は一通り紹介し終わりました。一緒に複製したスープボックスと、もう一つコーヒーボックスも作って、中身を以下の通りに変更してみてください。手順は、フォトジェニックボックスの作り方を見返しながら確認してください。

そして、移動ツールでグループを操作対象にしてから、均等にスペースが空くように３つのボックスを並べてください。微調整が少し難しいかもしれませんが、チャレンジしてみてください。

スープボックス

アイコン	cutlery（カトラリー）
タイトル	Soup（スープ）
説明文	雑誌で話題になった大人気メニュー「特製そら豆のスープ」をご用意してお待ちしております。一日限定30杯までとなっております。

コーヒーボックス

アイコン	coffee（コーヒー）
タイトル	Coffee（コーヒー）
説明文	コーヒーソムリエの資格を持つ店長が、不定期で店内にてイベントを開催して、美味しいコーヒーの淹れ方をお伝えしています。

07. ギャラリー周りを作る

次はエリアDです。（ワイヤーフレーム全体像）

ここからは正方形の写真が複数並んで表示されるギャラリー部分を作ります。

見出しを作る

ワイヤーフレームでは大文字でしたが、「Welcome to Cafe de Init」とのバランスを考えて、頭文字のみを大文字にすることにしました。

このように、ワイヤーフレームで決めたことをを完璧に真似する必要はなく、あとから「この方がいい」とベターな方向転換をすることは構いません。

1. ここは前ステップの「Welcome to Cafe de Init」と同じ手順になります。前ステップを読み返しながら着手してください。違う点は、文言とカラーです。ここでは「Gallery」と入力して、カラーコードを#2b2b2bに指定してください。
   

フォトボックスを作る

フォトボックスでは、メインビジュアルでやったのと同じように、まず画像配置場所となる下地のレイヤー（プレースホルダー）を作り、そこに埋め込み画像を配置して、クリッピングマスク機能を使ってから位置を調整します。

画像をダウンロードする

まずは1つ画像をダウンロードしておきます。下記URLにアクセスして「無料ダウンロード」ボタンを押してください。ダウンロードする画像サイズを指定するメニューがでるので、1280×720を選んでダウンロードしてください。

Pixabayの無料画像 – コーヒー ショップ, バリスタ, カフェ, ワーカー, コーヒー, 男

プレースホルダーを作る

1. 長方形ツールに持ち替えます。
2. 横幅300px、高さ300pxの正方形を作ります。Xは170px、Yは1354pxあたりに配置しておいてください。これらの値は属性パネルから指定できます。
   
3. 上の画像だと長方形の背景色が透明になっているので、属性パネルから分かりやすい色に変えておくと見やすくなります。

プレースホルダーを複製する

1. 移動ツールに持ち替えます。
2. プレースホルダーが選択されていることを確認してから、キーボードのCtrlキー（MacならCommandキー）とCでコピーして、続けてキーボードのCtrlキー（MacならCommandキー）とVでペーストします。
3. Y座標（縦）は同じでいいので、X座標を20px右にずらします。
4. これを繰り返して合計６個のプレースホルダーを作成します。上段と下段も20px離してください。
   
   

画像を当てはめる

1. メニューバーにて「ファイル ＞ 埋め込みを配置」を選択して、先程ダウンロードした画像を埋め込みます。埋め込むときにサイズを変更できるので、プレースホルダーの高さとだいたい同じになるくらいに調整して、プレースホルダーの上に移動してください。キーボードのEnterキーを押すと、埋め込みを確定できます。
   
2. レイヤーパネルで、今埋め込んだ画像とプレースホルダーの順番を確認します。
3. 画像レイヤーを右クリックして「クリッピングマスクを作成」を選択します。
   
4. 画像レイヤーを選択してから、メニューバーで「編集＞自由変形」を選択します。
   
5. 画像の位置や大きさを調整してください。ここは厳密ではなく、感覚で調整してOKです。
   

課題作業

ここからは同じ作業の繰り返しです。無料素材サイトからカフェにふさわしい写真を5点探して、ダウンロードしてください。ダウンロードするサイトは次のどちらかを利用してください。

Pixabay: 1.800万点以上の高品質なフリー画像素材おしゃれなフリー写真素材｜GIRLY DROP(ガーリードロップ)

その画像を使って、下図のようなギャラリーを完成させます。

08. コンタクトエリアを作る

次はエリアEです。（ワイヤーフレーム全体像）

ここは全て課題作業となります。1つ1つの作業手順はここまでのステップで解説済みですので、不明点はステップを見返しながら確認してください。

また、以下に最低限のヒントが記載してありますので、作業前に確認してください。

ヒント

• 店長の写真はコチラからダウンロードしてください。
  バリスタ コーヒー コーヒー文化
• 店長の写真は楕円形ツールでプレースホルダーフレームを作ってから、埋め込み画像を配置します。
• ボタンは長方形ツールに色を付けて、角を5px丸めます。
• 各種テキストのフォントは游ゴシック体です。

09. フッターを作る

エリアFです。（ワイヤーフレーム全体像）

こちらも全て課題作業となります。下の完成図を見ながら、作成してみてください。ここの作業も、1つ1つは解説済みです。カリキュラムを見返して確認してください。

ヒント

アイコンはFontAwesomeから適切なものを探してください
アイコン検索ページ（Icons）
https://fontawesome.com/v4.7.0/icons/

アイコンをコピーするページ（CheetSheet（チートシート））
https://fontawesome.com/v4.7.0/cheatsheet/

10. 課題に挑戦する

課題のクリア条件は下記のようになります。

• Cafe de Initのロゴのフォントを、Adobe Fontsから新たに選び直して変更してください。
• ステップ⑤（特徴ボックス）の「スープボックス」を完成させてください。
• ステップ⑤（特徴ボックス）の「コーヒーボックス」を完成させてください。
• ステップ⑥（ギャラリー）にて合計6個の写真を揃えて、ギャラリーを完成させてください。
• ステップ⑦（コンタクトエリア）を完成させてください
• ステップ⑧（フッター）を完成させてください
• カンバスのサイズ（高さ）を調整して、ファイルの下部に余分な空白がない状態にしてください。

すべての条件をクリアして、こちらの完成品サンプルと同じ画像を制作してください。

完成したらPhotoshopのメニューバーで「ファイル　＞　書き出し　＞　PNGとしてクイック書き出し」を選択して保存してください。

課題が終わればデザインカンプ制作は終了です。次のレッスンに進みましょう！