お店作り

カフェのホームページを作り始めよう!素人が作る飲食店HP

お店の準備も着々と進んでいく中で、集客の要となるお店のwebページをそろそろ本格的に考えていかないといけません。

今このブログを書いているのがワードプレスになるのですが、ブログを更新していくうちに少しずつワードプレスの扱いにも慣れてきました。

正直ワードプレスは最初は素人には結構ハードルが高いです。CSSもPHPも何も知らない状態からやり始めようとするとかなりしんどい。

私も図書館にせっせと通い、その手の本を何冊も読み漁り、見よう見まねで少しだけカスタムもわかってきたかなというところです。

ワードプレスを導入し、ブログを始めたときはWP(以下ワードプレスをWPと表記)のテーマを日本語で素人にもとってもわかりやすい「Simplicity2」を使用させていただいてました!

Simplisityについてはこちら

本当に使いやすく、初心者でもわかりやすいテーマです。使っている方も多いため、大概のことは調べれば出てきます。最初の導入にはもってこいのテーマでした。

このテーマでWebページを作ることもできます。

参考:初心者でも簡単に作れるWordPressのホームページ作成方法

参考の「初心者でも簡単に作れるWordPressのホームページ作成方法」を見ながらこのテーマを利用してそのままこのブログのサイトマップを作り直して、HPを作成してみました。

今まではブログをフロントページにしていましたが、新しく固定ページでフロントページと各インフォメーションページを作成し、HPらしいサイトマップへ変更するというやり方で何とか形になりそうだなと。とても分かりやすく素晴らしいサイトです。このような説明がわかりやすく色々あるので本当にありがたいです。

お店が完成するまで写真がないので、なんとなくここにはこういう写真を入れるとか、こういう内容を入れるとか想像しながら作っていくのですが。

あっという間に壁にぶち当たりました。

なんか、、、、全然おしゃれじゃない!!

やはりセンスです。素人が適当に作っているのでそれは当然です。

でも、Webデザイナーにおまかせするほどお金もないし、頑張るしかない!

とりあえず、とっても使いやすくて素人にはありがたいSimplisityを裏切り、簡単におしゃれになりそうなテーマを再探索することにしました。

Simplisityも素敵なんですけど、シンプルなのでセンスがすごくばれちゃうというか。。。。

そうしてテーマ探しをしていると問題が。

  • 日本語じゃない
  • レスポンシブウェブデザイン対応じゃない
  • 有料だったり
  • CSSでのカスタムがめっちゃ必要

と、Simplisityのありがたさを身に染みて実感しました。本当に素晴らしいテーマです。

色々検討した結果、「Dara」というテーマを使用してチャレンジしようということに決めました。

WPのテーマの一覧で見ていたら出てきたものです。なんとなくデザインが好みだったのと、レスポンシブWEBデザイン対応だったのが決定打でした。

まず、子テーマを作成して。(ここまではできるようになった)

さて、色でも変えようかなと思ったら、色を変えるボタンがない!!!

普通そうだとは思いますが、Simplisityはめっちゃ親切に簡単に色々変更ができたので、それに慣れているとうげーっとなります。

style.cssを端から端までチェックし、気になる色をせっせと変更したり、記事の幅を変えたり。

素人なりに少しずつわかってくるとなんだか楽しくなってきた!!

最初は本当にうえ~って感じだったけど、目が慣れてくるとなんとなくここら辺に書いてあるのかな?ってレベルではわかってくるようになります。

全然素人ですが、すっごいかっこよくも作れないですが、あるものを利用してできる範囲でやれば個人的にはそこそこ満足のいくものになるような気がします。あとは写真とかきれいにとってカバー!!ギャラリー機能も覚えたし、次はおしゃれな写真を撮らなくては!

あと、おしゃれにするには配色がとても大切だということに気が付きました。

配色ってとっても難しい。またまた図書館でWEBデザインの本を借り、配色についてお勉強。

自分でセレクトするのは無理なのでプロが提示してくれているサンプルの中から、好きな感じの配色を参考にしてカラーコードを打ち込んでいきます。

うん、なんか最初よりそれっぽくなってきた!上のSimplisityがビフォーで、下のDaraがアフター。

Simplisityのときは素人っぽさがにじみ出る、そこはかとなくダサい感じでしたが、Daraに変えてちょっとましになったような。ロゴがダサいのか。

 

なんかいい感じにはなってきたけど、やっぱりうまくはいかないです。やはり素人なのでトラブルだらけ。

モバイル画面の時に出るメニューバーの色がどうしても変わらない(;;)

グローバルメニューの色はCSSで変更してみましたが、モバイル表示の時だけなぜか色が反映されない。3時間くらい格闘するも分からない・・・

こうして少しずつHPの構成を考えながら、オープンまでにある程度の形にしていきたいと思います。