LogoMark.png

山口佳奈/卒業研究II

飲食店のためのWebサイト制作

現在の状況に柔軟に対応できるWebサイトの構築

mainvisual.jpg


Overview

Introduction / What is This

オープンソースのCMSであるWordPressを利用して、焼肉店「肉大将」のWebサイトを作成する。

Background and Purpose

現在焼肉店「肉大将」は各種グルメサイトを利用して集客・宣伝を行っており、掲載料やネット予約手数料が必要なグルメサイトも利用している。グルメサイトには様々なプランがあり、コストをかければかけるほど検索結果で上位に表示されるという仕組みになっている。また、グルメサイトの紹介ページに表示されている電話番号は店の番号とは違うものでこの番号で予約が入るとネット予約手数料を支払うことになる。

このようにグルメサイトでの集客・宣伝は恩恵もあるが費用もかかりそれがコロナ禍において負担になっている。集客・宣伝の手段として拡散力の高いSNSを活用する方法もあるが、掲載できる画像の容量や枚数、文字数などの制限がある中で店の情報を伝える必要がある。

グルメサイトと費用がかからず制限なく情報を詳細に伝えられるWebサイトを併用した集客・宣伝を行い、費用負担を軽減する。


Concept

Output

http://nikudaisho.wp.xdomain.jp/(制作中)

Tools

WordPress

Term

2021.04.16 〜


Survey

Present Status

グルメサイトに関する意識調査
株式会社「TableCheck」が20~60代の全国の男女1100名と20~50代の飲食店に勤務する全国の男女660名を対象にグルメサイトに関する意識調査を実施した。

Precedent

先行事例
Webサイトの制作にあたり焼肉店のホームページについて調査した結果、黒色や暗い色を使っているものやシングルページや縦に長いWebサイトが多いということが分かった。また、焼肉店以外の飲食店のホームページ調査も行った。

「飛騨牛焼肉 にくなべ屋 朧月 豊橋駅前大通り店」のホームページでも黒が多く使われており、縦に長い構成となっている。また、背景に和柄や和紙のテクスチャ画像を使用してページの外観が固定されているグルメサイトやSNSでは表現できないやり方で店の雰囲気を伝えている。

日本料理店「桜坂 ONO」のホームページでは、ページを開いたときに最初に表示される店内の写真から店の雰囲気を伝えている。ページをスクロールすると表示される店の紹介文では『四季を食す』という印象的な言葉が使われており、ナビゲーションメニューや予約ページへのリンクがページをスクロールしても常に表示されている。

レストラン「ミツバチ食堂」のホームページはイラストや手書き文字が多用されており、レストランのテーマである「季節感、素材感、土の温もり」が表現されている。

現地調査

Technique / Technology

Project Management


Schedule

https://docs.google.com/spreadsheets/d/1uMisxMFFv1UB3UXSBerLqxwiV0JJNuI6iItubaploDE/edit?usp=sharing

ToDo

https://docs.google.com/spreadsheets/d/13HMWxsQrHroIQMuEHxvP1oBjwMJeBVm5vrnsSqtVzSk/edit?usp=sharing






worklog




2021.11.23

フロントページにセクションを追加

メニューにコース料理とドリンクの情報を追加し、通常メニュー・コース料理、店の紹介文、店内の情報の項目も新たに加えた。

セクションの順番を変更

CSSでcontentにdisplay:flex;とorderを設定し、セクションの順番をorderで変更。上から、メインビジュアル、ニュース、店の紹介文、店内の情報、メニュー、フッターとなるように変更。

固定ページ属性の順序設定

固定ページの順番を変更。各セクションに対応する固定ページの編集画面から、それぞれ固定ページの属性にある順序(入力した数値が小さいほど上位に来る)を設定。

固定ページの親ページを指定

固定ページに親ページを設定して階層化する。



2021.11.16

合同審査準備

見出しの使い方が不規則で見辛く話の流れが分からないという指摘を受け、文章と見出しを修正した。「目的」と「まとめ」の内容に一貫性がないという問題にどう対処するか検討中。

参考

プレゼンテーションの基本構成
人が聴きやすい話し方・言葉選び



2021.11.12

中間発表準備

山口佳奈/卒業研究プレゼンの編集。

NEWS

抜粋文の設定、記事の編集。

MENU

抜粋文と記事本文の行送り設定。



2021.11.11

パーマリンクの設定

パーマリンク設定を変更し、各ページURLを取得・表示。
固定ページのパーマリンクを設定。

リンクの設定

リンク元とリンク先アンカーリンクページ内リンクを設定。
リンクの位置とスムーズスクロールの調整。

カテゴリー

WordPressのカテゴリー設定。

phpの設定

header.phpのリンク設定と記述を変更。固定ページへのリンクを記述。



2021.11.05

作品概要の制作

概要集作成
イラストレーターで作成したPDFファイルの軽量化
イラストレーターで配置画像に枠線をつける

WordPress
WordPressの機能一覧
WordPressフッターの設定
WordPressカスタムメニュー
カスタムメニュー追加

SEO対策
SEO対策方法
上位表示の仕組みや対策方法



2021.11.04

MENU

functions.phpで抜粋文の文字数と省略記号を変更。
画像がクリック可であることが分かるようにホバーエフェクトを追加、画像が拡大されるエフェクトを設定。

フッターのレイアウト

columnの段差の修正とフォントの設定。
borderプロパティ追加、線の太さ、線と文字の間の設定。

余白の設定

Webサイトのアウトライン、marginとpaddingの調整。

WordPress設定

トップページの項目とフロントページを設定。
WordPressのファビコン変更、ギャラリーの作成。

調査

ヘッダー
Webサイトの大枠を作る
Webサイトのパーツ名



2021.11.03

フッターの情報

フッターに店名、営業時間、定休日を記載しサイトマップを追加。
アクセス項目にあるマップをフッターへ移動。

メニューバーの表示

メニューバーを上に固定、メニューの項目の整理。

メインビジュアル

キービジュアルの上に文字を表示、アニメーションの設定。

参考

2021.10.28

メインビジュアル

CSSでレスポンシブデザインを調整。
background-attachment:fixed;の設定を変更。

画像の加工

料理を美味しく見せる修整加工、明るさや色の調整。

サイトのデザイン

奏樹のWebサイトではメインビジュアルにスライドを使用、スライドの上に文字が載っている。またフッターに店の情報やSNSのアイコンを表示している。



2021.10.26

NEWS

タブレット・スマートフォン用に調整。画面幅が狭まると見出しの要素がはみ出してしまう問題を、MENU項目の見出しとCSSの様式を揃えることで解決。

メインビジュアル

店のロゴタイプの画像を消去し、営業時間の情報を移動。

メニューバー

カスタムリンクの設定。レスポンシブに対応させ、店のロゴタイプに合わせて色を変更する。

レスポンシブデザイン

WordPressテーマの構造max-widthやmin-widthの調整。



2021.10.21

メインビジュアル

スライドショーを作成して、店や料理の写真を映す。スライドの上に文章を追加して情報を伝える。スライダーをトップページにだけ表示させる。

メニューバー

WordPressのヘッダー画像とロゴを設定する。店のロゴタイプを左上に追加する。

MENU

写真の追加と編集、高画質化。

参考

2021.10.14

写真撮影、追加

新たに料理の写真を撮影、Webサイトに使う画像として使用する。

メインビジュアル

メインビジュアルに使っている画像を店の外観、店内、料理の順番に時間経過で切り替わるようにする。中段にある画像と紹介文をメインビジュアルに載せて、NEWSからMENUの項目へすぐ移動できるようにする。

スライドショー追加

キービジュアルをスライドショーにする。
スライドショーを追加できるプラグインを導入する。



2021.10.08

MENU

焼肉とホルモンの他のメニュー表示位置や大きさ。コースとメインの焼肉・ホルモンを大きく表示。その他、スープやドリンクなどの表示は目立ちすぎないようにする。

フッター

フッターの編集とフッターウィジェット追加、テキスト記載。

Webサイトのレイアウト

CSSで横並びのレイアウトを調整。

記事内でのアイキャッチ画像を非表示

トップページでは画像は表示され、投稿記事内では非表示になる。

参考

2021.10.07

写真

焼肉の写真と店内の写真の変更、NEWSの下側の余白の調整。

MENUの編集

ウィジェットの編集と右側にあるサイドバーを非表示、ページのレイアウトと右側の余白を調整。

サーバーの更新

https://www.xfree.ne.jp/login/member.php
次回更新:2022.01.31まで

参考

2021.09.30

NEWSの編集

MENUの編集

メインビジュアル

スライドショーの作成調整。



2021.09.22

WordPress

夏季休暇中の作業

WordPress編集

WordPress編集

参考

前期

山口佳奈/卒業研究I






PAGES

GUIDE

Last-modified: 2021-09-09 (木) 19:23:52