デザイン設定箇所について
ワイヤーフレームが出来たら、サイトのデザインを固めていきましょう。 デザインする際には自分が好きなテイストに偏らず、扱うコンテンツの内容・ターゲット層（ペルソナ）にマッチするように心がけます。
ワイヤーフレームからデザイン図へと作り込んでいく方法は、人によって違います。下記の順番通りに行う必要はありませんが、最低限下記項目は設定するようにしてください。
1.配色を決める
ワイヤーフレームでは単色もしくは必要箇所以外入れていなかった“色”を設定します。
沢山カラーを使いすぎるとサイトに統一感がなくなりやすいので、配色に迷ったら３つの基本カラーを定めると良いでしょう。下記例のように、ベースカラー・メインカラー・アクセントカラーという３つに分類します。
このようなバランスで配色を行う事で、サイト内の各ページに統一感を出すことが出来ます。カテゴリーなど色分けをしたい場合も、メインカラーとトーンもしくは色相を合わせた配色にすることで統一感を持たせることが出来ます。
テキストリンク、背景色など必要箇所をカラーリングしていきましょう。
【例】
2.画像を入れる
四角いボックスだけを配置していたところに、それぞれ画像を入れます。 ブログのサムネイル(アイキャッチ)など、まだ決まっていないところも画像を入れてみて下さい。各記事で使用する画像まで決めていない場合は雰囲気が近そうなものでも良いですし、この時点で記事の画像を決めておくのもありです。
【例（上部のみ抜粋）】
ファーストビューの画像は重要！
フロントページのファーストビュー（ヒーロー）画像の選定には時間をかけましょう。
ファーストビューは「サイトの顔」。 ユーザーはまず、最初に見える画像とキャッチコピーでサイトを判断します。 ファーストビューに魅力が感じられなければ、ブラウザバックしてしまうでしょう。
このため画像も「ベネフィットを伝える」もしくは「ベネフィットを連想させる」ものが好ましいです（※キャッチコピーに自信があり、画像を使わない場合は除く）。
株式会社YOSHIDAのサイトでは、海外ネットワークを使うから低価格高品質であることをイメージした画像が入っています。前回のレッスンで使ったキャッチコピーに変えると、更にしっくりはまるのではないでしょうか。
ダイエット系ブログの場合は、男性にターゲットを絞っている場合は筋肉の写真でも良いでしょう。
ターゲットが男女両方で「誰にでもできるプチ習慣」を押すのなら、もう少し明るく抽象的な画像のほうが合いそうです。
下図ではベネフィットそのものではなく、連想アイテム（小道具）を入れました。 キャッチコピーが強い場合は、このような形でも雰囲気は伝わります。
3.アイコン・ボタン等を入れる
アイコンを使用する箇所、ボタンデザインにする箇所、そのほか装飾的な要素がある方はそちらもデザインに反映させていってください。
【例】
4.一覧・記事ページも同様にデザイン化
他２ページも同様にデザインファイルとして機能するところまで作り込んで下さい。
【例】
◆課題：デザインを作成してください
前回作成したワイヤーフレームを元に、デザイン図を作成して下さい。 それぞれテキストや背景の色、画像、アイコンなどを入れて「このデザイン図を見ればコーディング・サイト公開ができる」というところまで作り込んでみましょう。
作成したデザインのなかから、フロントページデザインのみを提出していただきます。
課題の提出方法
- サイト企画シート（サイト概要、ペルソナ、記事企画）URL
- フロントページのデザイン図（jpg形式）
の２点をSkillhubのクラスルーム「マイ課題」よりお送り下さい。 送信前にスプレッドシートはsupport@skillhub.jpへ共有をお願いいたします。
1.スプレッドシートの共有
右上の「共有」機能よりsupport@skillhub.jp に共有してください。
もう一度「共有」ボタンをクリックします。 赤線部「リンクをコピー」を使って、スプレッドシートのURLをコピーします。
Skillhubの提出エディターに貼り付けてください。
2.画像の書き出し
イラストレーターのアートボードウィンドウを開きます。
※表示させていない方はウィンドウメニューでチェックを入れてください。
フロントページをデザインしたアートボードをクリックします。
その状態でファイルメニューから書き出し-Web用に保存をクリックしてください。
保存オプションを設定するウィンドウが開きます。 1.ファイル形式をJPEG/中画質 2.アートボードサイズにクリップ、にチェック 3.保存ボタンをクリック
わかりやすい名前をつけて保存します。
保存したjpgファイルを、Skillhubの提出エディターにドラッグして下さい。
