CRI BOOT CAMP
作成日：2021/04/12 更新日：2022/01/27
#1 居酒屋サイトを作る
企画書の作成
Webサイトを作るときには、業務で作るものも自分だけで使うものでも、必ず「企画書」と呼ばれるものを用意します。 企画書には以下の内容が盛り込まれます。メイン要素（絶対必要）
・このWebサイトで実現させたい事（目的）・Webサイトが必要な理由と客観的なデータ（背景）
・目的を実現させるために必要なもの（目標・戦術・施策）
サブ要素（あればなお可）
・見てくれる人の層（ターゲット）の設定・競合他社/業界の立ち位置（ポジショニング）の確認
・制作費
・納期
なにか企画を行う場合、メイン要素の内容は必須です。Webサイトを作るときにはサブ要素の内容も決めていきましょう。 業務での制作の場合は、制作費や完成させる期日（納期）を決めてから開始するようにしましょう。
与件の整理
下記の企画書を見ながら、要件に沿ってWebサイトのデザインをやってみましょう。内容を読み解くことを「与件の整理」と呼びます。整理ができたら参考サイトを見つけ、デザインを行いましょう。
Adobe XD でデザインし、レスポンシブコーディングまでやってみましょう。
コーディングはVisual Studio Codeを使い、CSSはBEM記法を使ってSCSS で組んでみましょう。
与件:ワイン居酒屋サイト
■前提渋谷にあるワインを楽む居酒屋というコンセプトのお店「渋谷バル」。
おしゃれな店内と、写真映えする料理が魅力で、20〜30代の女性に人気のお店です。
■目的 集客を増やしたい
■背景 ネット予約が増えたので、店内のイメージや料理の写真を伝えたいので
■施策 ①写真を沢山掲載したい
②予約が簡単にできるデザイン的な仕掛け(UI・UX)がほしい。
□ターゲット: 20〜30代女性。女子会で使うことを想定
□サイトイメージ: ワインと料理が美味しそうに見えるイメージ
□サイトカラー
ベースカラー: 白、茶
メインカラー: 赤、オレンジ、こげ茶
今回はこのサイトのトップページのみを作ってみましょう。
※プロの現場の場合、このトップページ制作費であれば1〜3営業日で、予算は10〜20万程度です。
完成したら Slack（cbc-study.slack.com） の添削チャンネルでレビュー（質問や手直し）してもらいましょう。 誰でも無料で添削します。（担当者の時間が許す限り）
参考となる枠組み
BEMのメモ
- ブロック ：親要素 塊、コンポーネント
- エレメント ：子要素 ブロックの中にのみ存在できる要素
- モディファイア：Block(Element)の装飾の変化 色違いなど
ユーザーエージェントのメモ
またJavaScript（jQuery）をつかって、アクセスしている機器などのデバイス（ユーザーエージェント）が、PCなのかスマホ(SP)なのかを見分けて、SPの場合は要素を削除したり、表示させたり…といった手法も活用しましょう。
/* アクセスユーザー情報からPCなのかSPなのかを調べ、変数getDeviceにいれる */
let getDevice = (function(){
let ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
return 'sp';
}else{
return 'other';
}
})();
if(getDevice === 'sp'){
$(".削除したい要素").remove();
$(".表示させたい要素").css('display','block');
}else if(getDevice === 'other'){
$(".削除したい要素").remove();
$(".表示させたい要素").css('display','block');
}
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ