概要
サイト名
喫茶 佛蘭西 サイトを見る
サイト概要
大阪にある喫茶店のホームページ。
目的
外観だけではわからない店の中や店主の様子、提供している商品の紹介。
最終的なアクション
来客数の増加。
デザインイメージ
全体的に落ち着いた雰囲気にする。また、写真を多用することで店内の様子が分かるようにする。
使用色
背景色はクリーム色 アクセントカラーとして茶色を使用。
参考サイト
※職業訓練で作成したカフェのサイトを参考にしています。
制作時間
構想1時間
デザイン -時間
素材加工1時間
コーディング37時間(HTML7時間、CSS26時間、Javascript4時間)
計38時間
詳細
※職業訓練でWordpressを扱った後に制作したサイトです。まだPhotoshopやデザインカンプを扱う前に制作したため、デザインを固めずに制作しました。訓練中に制作したサイトを参考にしています。
大阪に実際にある喫茶店……つまり実家を題材にしたWordPressサイトです。両親が経営しています。昔からメディア掲載は断り続け、SNSはもちろん、ホームページの作成もしていません。特徴的な外観はまだしも、元宝飾店だった名残のある内装は店内に入らなければ見ることはできません。シャンデリアやステンドグラスが知られないままなのは勿体ないと思い、サイトを作成しました。
全体的に「程よい古さ」を感じられるサイトになれば良いなと思い作成しました。また、文字サイズをあえて少し大きめで制作してみました。両親が高齢であり、常連客もまた高齢の方が多いと聞いているためですが、老若男女、多くの人に愛されてほしいという想いもあります。
頑張ったところ
WordPressサイトでJQueryを使用するためにWordPressには元々JQueryが備わっているらしいのですが、うまく使えませんでした。また、「スクリプトをfunction($){ … }で括る」といった方法もうまくいかず…結局、「デフォルトのJQueryを無効化する」という方法を利用しました。
このサイトでは背景画像やその上の文字を固定してみました。「パララックス」といっていいかはわかりませんが、気に入っています。しかし、iOSやiPadOSのSafariでは正しく表示されないと後で知りました。::after疑似要素とpostion: fixed;を使用する方法やJQueryなどを用いて切り替える方法なども検討しましたが、複数の背景画像の固定や、一度に複数枚の画像の表示などに対応できないため、残念ながらiOSとiPadOSでは背景画像や文字の固定を諦めました。
この際にメディアクエリが役立ちました。
@media (hover: none) and (pointer: coarse) { … } で、少なくともiOSとiPadOSで固定背景が解除できています。
また、ページトップのヘッダーの表示制御やボタン、リンクには@media (any-hover: hover)を使用しています。
制作を終えて
ポートフォリオとしては初めてのWordPressサイトです。制作を通して、授業だけでは分からなかったことを知ることができたのは良い収穫だったと思います。
なお、サイトに使用している写真は両親に忙しい仕事の合間に撮ってもらったものです。少しぶれたりしていますが、悪しからずご容赦いただけますと幸いです。