サイトカンプの制作チュートリアル
視聴が終わったら、課題に取り組んでください。
サイトデザインの前に知っておくこと
- 解像度の話（72dpi）
- カラー（RGBとCMYK）
- サイトの横幅、ブラウザシェアの話
- レスポンシブ・ウェブ・デザインについて
- モバイルファースト開発について
サンプルサイト「イルソーレ」
- moodle内【素材配布】イタリアンレストラン・イルソーレ大阪より素材ダウンロード
- カンバス作成
- デザイン
- png書き出し
よく使うショートカット
※macならctrlは⌘です。
- 半角英数「V」／移動ツール
- ctrl+「D」／選択範囲の解除
- 半角英数「T」／テキストツール
- ctrl+ENTER／テキスト入力終了
- ENTER／変形・移動の確定
- ctrl+「:」／ガイドの表示・非表示
- ctrl+「T」／レイヤーのフォルダごと移動
- デスクトップの画面キャプチャ
- Mac：「shift」「command」「3」の 3 つのキーを同時に長押し
- Win：キーボード「Prt Sc Pause」ボタン
レイヤーやスライスの命名規則
- ttl／タイトル
- mv／メインビジュアル
- gnav／グローバルナビゲーション
- btn／ボタン
提出課題：デザインカンプ1点（選択式）
デザインカンプ1点（8/25 14:00締切）
※どうしても手元にソフトがない場合は、手書きでサイトを作成して、スマホやデジカメ撮影して提出。
参考サイト
カラーやイメージ、業種などで参考サイトを探すことができます。
- イケサイ
- SANKOU
- I/O 3000!
- MUUUUU
- WEB デザインの見本帳 S5-Style
- ズロック
- straightline
- bookmark
- Web Design Clip
選択用テーマ（好きなものを1つ選ぶ）
テーマ1／大教ZOO（動物園）
| クライアント | 大教ZOO（だいきょう・ずー） |
|---|---|
| 概要 | 今年8月オープン。日本初・大学内の動物園。 |
| ターゲット | 地元・柏原市のファミリー（子供は小学校低学年） |
| 売り | しまうま、ライオン、キリンなどの動物はもちろん、ミーアキャットなどの珍しい動物もいます。敷地が広く、お子様が小動物と触れ合えるようなスペースもあります。また、今年の春にはメスのレッサーパンダの「モモ」も仲間入りしました。 |
| 弱点 | 動物の種類は15種類と少ない。 |
| ゴール | チケットの予約（オンラインか電話） |
| 問合せ | 072-976-3211 |
| 住所 | 〒582-8582 大阪府柏原市旭ケ丘４丁目６９８−１ |
| リクエスト | カラフルでポップな感じにしてほしい。 |
テーマ2／喫茶サンクン（カフェ）
| クライアント | 喫茶サンクン（きっさ・さんくん） |
|---|---|
| 概要 | 今年8月オープン。大学内のカフェ |
| ターゲット | 大教生 |
| 売り | JAZZが流れるおしゃれでレトロテイストの静かなカフェ。世界中を旅したバリスタの木村さん（55）が、世界各国のこだわりの豆を取り揃えている。ホットケーキやサンドイッチなどのシンプルな軽食も人気。 |
| 弱点 | 値段が高い、メニューが少ない、せまい |
| ゴール | 来店（サンクン広場） |
| 問合せ | 072-976-3211 |
| 住所 | 〒582-8582 大阪府柏原市旭ケ丘４丁目６９８−１ |
| リクエスト | シンプルで落ち着いたトーンで作成してほしい。 |
テーマ3／第36回大教大・納涼花火大会（イベント）
| クライアント | 企画：大教大、協賛：柏原市 |
|---|---|
| 概要 | 8月26日（金）19:30開始 |
| ターゲット | 地元柏原の住民 |
| 売り | 規模は3,000発と控えめなものの、キャンパス内では大教大生による出店（わたあめ、から揚げ、かき氷、ベビーカステラ）や出し物（ステージ）などがあり、リーズナブルにお祭りを楽しめる。子供やお年寄りも来やすいように、出店などはお昼から開催。コロナ感染対策も徹底している。 |
| 弱点 | アクセスが悪い。バスが1時間に1本しかない時期もある。 |
| ゴール | 観覧 |
| 問合せ | 072-976-3211 |
| 住所 | 〒582-8582 大阪府柏原市旭ケ丘４丁目６９８−１ |
| リクエスト | モダンでかっこいい感じにしてほしい。 |
制作共通のポイント
重要
Webデザインはアート（自己表現）ではありません。未経験者がWebデザインを自己開発するのは無謀です！！！！お手本は無限にありますが、閲覧者＝ターゲットが見やすく、わかりやすく、ゴールにたどり着けるストーリーやデザインが大切です。まずは参考サイトをマネするようにしましょう。
- コンセプト、ゴールの確認
- ターゲットとペルソナを考える←Webサイトを見る人なので、例えばファミリーでいうと保護者になる。子供ウケする子供用のデザインではなく「子供・孫を連れていきたい」と思わせるデザインを目指す。
- 参考サイトなどをふんだんにみて、どんなコンテンツやカラー、写真・イラストがターゲットに刺さるか、よく吟味する。（参考サイトを見せてもらう場合もあります）
- 手書きでもいいので、必ずワイヤーフレームを描く。
ダミーのサイトではありますが、作るからにはしっかりと企画をして楽しくデザインしてみましょう。
提出課題の合評
最終日の対面授業にて合評予定。
