サイトカンプの制作チュートリアル
moodleにて視聴が終わったら、課題に取り組んでください。
サイトデザインの前に知っておくこと
- 解像度の話（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点（次回授業にデータを書き出して持ってくる
- サイトの横幅は1100px、アートボードは1400px
- 制作はトップページのカンプのみ
- 下記の3つのテーマから、好きなテーマを1つ選ぶ
- ペルソナを制作する（手描きでもOK。合評の際見せてもらう可能性があり）
- サイト内のコンテンツ、タイトル、本文はそれらしいものを考える。
- ロゴマークやキャッチフレーズは余裕があれば考える
- ワークフロー通り、ワイヤーフレーム、コンテンツを考えてから着手すること
- 写真素材は「ぱくたそ」などの著作権フリーサイトからダウンロードして使う。もしくは自分で撮影したもの。
- pngデータをmoodleに提出。ファイル名例「カンプ_三浦.png」
- 複数の課題に取り組んでもかまいません←加点対象
※手元にソフトがない場合は、フリーツールやエクセルなど、または手書きでサイトを作成して、スマホやデジカメ撮影して提出。
参考サイト
カラーやイメージ、業種などで参考サイトを探すことができます。
- イケサイ
- SANKOU
- I/O 3000!
- MUUUUU
- WEB デザインの見本帳 S5-Style
- ズロック
- straightline
- bookmark
- Web Design Clip
選択用テーマ（好きなものを1つ選ぶ）
テーマ1／大教ZOO（動物園）
| クライアント | 大教ZOO（だいきょう・ずー） |
|---|---|
| 概要 | 今年8月オープン。日本初・大学内の動物園。 |
| ターゲット | 地元・柏原市のファミリーの保護者30代後半ママ（子供は小学校低学年） |
| 売り | しまうま、ライオン、キリンなどの動物はもちろん、ミーアキャットなどの珍しい動物もいます。敷地が広く、お子様が小動物と触れ合えるようなスペースもあります。また、今年の春にはメスのレッサーパンダの「モモ」も仲間入りしました。 |
| 弱点 | 動物の種類は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サイトを見る人なので、例えばファミリーでいうと保護者になる。子供ウケする子供用のデザインではなく「子供・孫を連れていきたい」と思わせるデザインを目指す。
- 参考サイトをふんだんにみて、どんなコンテンツやカラー、写真・イラストがターゲットに刺さるか、よく吟味する。（参考サイトを見せてもらう場合もあります）
- 手書きでもいいので、必ずワイヤーフレームを描く。
- イルソーレは練習用のサイトですので、イルソーレの画像とテキストだけを差し替えただけのものはNGです。
ダミーのサイトではありますが、作るからにはしっかりと企画をして楽しくデザイン制作をしてみましょう！
提出課題の合評
最終日の対面授業にて合評予定。
