-本日のアジェンダ-
1限目
学科 ECサイトデザイン基礎⑤
デザインラフとは？
・デザインラフとは？
コーディング（HTMLとCSS）を知らない人に見せるもの
実際のWebサイトにするのには、HTMLとCSSでコーディングをする必要がありますが、クライアント（発注者）さまに、こんな感じのデザインにしましょうか？ こんな感じではいかがですか？ という感じで、完成のイメージを画像で作成。
●フォントの歴史と選び方と考え方
オールドタイプ
古くから良いと言われているフォント（オールドタイプ）のフォントは、好まれますし、使い勝手も良く実績豊富ですが、Webに対応していない場合、特にWebフォントに対応していなければ、画像文字にしなければなりません。
バンドルフォント（標準フォント）
Webサイトの閲覧者のパソコンやスマートフォンにインストールされているフォント。 OS標準フォントやバンドルフォントなどとも呼ばれます。
CSSによって標準フォントを指定することで、どんな環境でもある程度統一された表示が担保されるため、Webサイトの見栄えを安定させることができます。デバイスの進化も意識して下記にあるWebフォントを使わない（通信環境依存対策として）場合というのも視野に入れておきましょう。
プロポーショナルフォント
フォント（書体）の分類の一つで、文字ごとに適した幅が設定されたもの。各文字の表示枠が文字の実際の幅に合わせて調整され、例えば「i」は狭く、「W」は広く表示されます。また同じフォントでも太さやゴシックと明朝があったりしますので、同じルールでデザインされたフォントで様々な表現が可能になりますので、積極的に利用してみましょう。ちなみに、マイクロソフトが開発したメイリオは、CSSで太字と斜体が出来ません。文字を読み難くなる為にそう設定されているそうです。
Webフォントについて
Webフォントとは、あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、表示するCSS3から策定された技術です。
これまでのWebサイトでは、制作サイドであらかじめ要素ごとに使用するフォントを指定しておき、Webブラウザが各端末にインストールされているフォントを用いて文字を表示さ
せる方法が主流でした。しかし、この方法では、指定したフォントが閲覧者のPCにインストールされていないと、別のフォントが代用されてしまい、作成者が意図しない見え方になってしまう問題がありました。そこで有効な手段として注目を集めているのがWebフォントです。
ただし、昨今ではデバイスに上記にあるバンドルフォントが進化して標準搭載されているので、通信環境に左右される事を考えて使いどころの判断を考えるのもポイントです。
コーディングに向けての注意点
注意点① 配色はデザインラフですべて決定しましょう。
注意点② 16進数のカラーの表記なのかRGB表記なのかを統一しておきましょう。
正確な16進数のカラー「例： #ｆｆ００００」なのかＲＧＢ「例： rgb(255,0,0) 」のコードを控えておきましょう。コーディングの時は、出来上がったデザインから「スポイトツール」で正確なカラーコードを使いましょう。
注意点③ 透過表現は、RGBAか、PNG画像の利用か決定しておきましょう。
透過表現は、CSSで「 例：rgba(255,0,0,0.7) 」という記載方法が使えます。また画像そのものを透過表現する方法として、PNG画像を利用する方法があります。どちらをどの様に使うかもしっかりとイメージして準備をしておきましょう。
2限目
学科 ECサイトデザイン基礎⑤
コーディングに向けての注意点
●配色テクニック
・配色テクニック① イメージカラーを使う
メインカラーの傾向は、文字が読みやすいなどの可読性の問題から、明度を低くした色が使用しやすいとされています。
・配色テクニック② 真っ黒（#000）を避けるか否か？
グラフィックデザインの世界で使ってはいけない色の常識といわれているのが「真っ黒#000(Black)」です。
理由を一言で表すとこれです。純黒は目にキツイ、目が疲れるからです。
ただし、Webページで、よく「真っ黒#000(Black)」を見かけます。
それは、昨今の各デバイスのモニターは、データ（CSSコード）では「真っ黒#000(Black)」でも、実際にモニターで見ているものは、目にやさしくなるように微調整されている場合があります。
利用シーンや内容に合わせて使い方を考えてみましょう。
・配色テクニック③ 色を使わない
ワイヤーフレームやデザインカンプの作成などは白黒で作成することにより、配色イメージに引っ張られずレイアウトデザインを考えることに集中できるかと思います。最終的なデザインでもそれぞれの配色の脇役となる存在として使うことも可能です。「白」「黒」「灰」の「無彩色」を上手く活用するのも試してみましょう。
・配色テクニック④ 美しい配色バランス（3色がおすすめ）
配色の効果は、色相、明度、彩度、分量（面積）、配置によって変わります。
基本カラー3色を「70%：25%：5%」の比率にして配色すると、バランスの取れた美しい配色になるとされます。
●その他注意点
・注意点① 静止画像なので、補足事項は別途説明しておきましょう。
・注意点② 実はセクショニングは後回しでも良い？
デザインラフでセクションを意味するタグ（ header,nav,maiｎ,section,footerなど）を考えるのは、後回しでも大丈夫かもしれません！
当然意識しておくのはベストですが、これらのタグはHTML５からの登場で、それ以前は全て「div」でした。デザインラフの段階では「囲っている箱」として意識をしていれば、「デザインラフ」は成立するでしょう。
◎注意点③ リテイク（修正・出戻り・やり直し）に強いデータにしておきましょう。
バナーやロゴ・ピクトグラム、名刺やチラシなどと同じく、クライアント（発注者）さまの思いと異なることは多々あります。絶対にそうなると覚悟しましょう。
「かっこいい」「かわいい」など、素敵なデザインが出来るようになるのも大切ですが、実務では「リテイクに強い」事も重要なデザイナーの技術として求められます。「スマートオブジェクト化」し非破壊データの利用、アウトライン化のタイミングなどしっかりと作成をしながら復習しておきましょう。
3限目
学科 ECサイトデザイン基礎⑤
XDの活用について
・XDとは？
Adobeのアプリ
イラレフォトショの簡易版
ウェブサイトやモバイルアプリの外観（UI）を作成できる。
デザイン（ワイヤーフレーム/カンプ）
プロトタイプ（動作確認）
※プロトタイプ：実際の動きを見せられるもの
共有（フィードバックを得る）
XD上のフォルダ分けをコーダーに渡すこともあるため、
きれいに整理しておくとよい。
4限目
学科 ECサイトデザイン基礎⑤
課題制作
5限目
学科 ECサイトデザイン基礎⑤
課題制作
本日のテーマ
コーディングの準備をしましょう
WEBサイト制作の流れ
ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング
ワンポイントアドバイス
ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。サイトの完成イメージを画像でお客様に見せる為です。
ここでOKが出たらコーディングに進みます。
コーディングでは「デザインラフ通りに再現する事」が求められます。
HTML/CSSをしっかりと意識して作成しましょう。
逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。
ワンポイントアドバイス
実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai（Illustrator）なのかpsd（Photoshop）がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。
本日の課題
課題提出はありません。
今後のデザインラフ制作とコーディングに向けて、レイアウトのブラッシュアップや掲載内容（細かい文言など）を考え、まとめておきましょう。
メモ帳で構いませんので、必要な文言を全て書き起こしたテキストファイルを作成しておくといいでしょう。
本日学んだこと
デザインラフとは
配色テクニック
作成時の注意点
XDについて
感想
本日はデザインライフ制作に向けてのポイントなどを学んだあと、写真などの素材集めを行いました。
デザインラフはXDという新たに学ぶソフトで作成するとのことでしたが、イラレとフォトショの簡易版的なものだとのことでしたのでこの機会に使い方をしっかり学びたいと思います。
また、注意点でカラー表記をRGBなのか16進数表記なのか統一したほうが良いというものがありました。これまであまり気にせずどちらも混合して使ってしまっていたので、意識していきたいと思います。