更新日 2021.07.30

#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--modifier
  • ブロック   :親要素 塊、コンポーネント
  • エレメント  :子要素 ブロックの中にのみ存在できる要素
  • モディファイア: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');
}
コピーしました
RSS https://cbc-study.com/rss.xml 
質問などあればSlackで! 誰でも無料でできます。
勧誘とかしないよー
cbc-study.slack.com