3時間でWordPressを使ってパン屋さんのWEBサイトを作ってみた

架空のパン屋です。

長野県松本市のコワーキングスペースでハッカソン的な勉強会がありました。https://wbnagano.connpass.com/event/64097/

設定としては、ドメインを取得しており、WebServerにWordPressをインストール済み。
１８時から番組が放送なのでそれまでに間に合わせること。
WordPressを使わなくてもよい。

と言った感じです。

実際の作業は集まったメンバー（WordPress初めての方もいた）で教え合ったりしながら、全員がしっかりとサイトを完成させていました。

環境

環境は事前にローカル環境を用意して下さいとの案内だったのでローカル環境が多かったです。AWSでサクッとWordPressインストールしている方もいたり。

私はこちらを利用しました。 https://codeanywhere.com/

テーマ

テーマのコード（追加 CSS含む）を編集した方が数名、コンテンツをしっかり作っている方やなど様々でした。

時間的な問題もあって殆どの方が１ページ（TOPのみ）でした。

人気なテーマはデフォルトのTwenty Seventeenで有料のテーマの方もいました。

ほんとテーマは重要ですよね。ですが私は、、

 

プラグイン

覚えているプラグインはこれだけです。もっとあったかな？
そもそもプラグインを知らない方もいたりプラグインはあまり使われていない印象でした。

 

制作物

プロデュースが好きな私はこんな感じで考えました。

 

サイトを作る理由・目的・目標

  • 理由
    • 夕方の情報番組で紹介される。それに合わせてwebサイト見てもらい、集客につなげたい。
  • 目的
    • 夕方の情報番組を見た視聴者の集客（来店）
  • 目標
    • webサイトでお店情報の掲載

 

考えたこと
  • 完成後、近いうちに修正するのでは？
    • テーマが変更になる可能性があるので、テーマ編集をしない。なるべくテーマのデザインに依存しない。
  • 情報番組を見る視聴者
    • 放送中にサイトを見た方は来店率が高い（仮説）
      もしかしたら放送中に来るかもしれない。放送は１８時、閉店は１９時。
  • おすすめの商品は？
    • おそらく放送では、変化のあるパンが紹介されるだろう（予想）

 

やっとこと

時間がないので TOPページは固定ページ でウィジェットも使わず １カラム  にしよう。

イメージにはパンの画像必要だからカスタマイザーからヘッダにパンの画像を入れよう。

おいしいの押し売りは良くないけど、どうせ放送で「おいしぃ～」とか言ってるかもしれないので タイトルは おいしいパン屋＋[店名]  にしよう。

１９時閉店を伝えたから、サブタイトルに営業時間を入れます。

サイトで住所とか探すの嫌だから、店舗情報はページ上部に入れよう。

デザインには凝ることができないので、せめて動きがでるようにスライダーを使って、商品を分類した画像でまとめよう。

TOPページの画像のリンク先は商品詳細（投稿）にして、個々の商品を独立させたページにしよう。

カテゴリーは階層を深くしないで 商品分類＋お知らせ にする。

パーマリンクは /postname でいいね。

 

さて、作業の流れは

  1. TOPページにお店情報（目標の達成）
  2. 画像の整理、アップロード
  3. TOPページブラッシュアップ、画像挿入
  4. 商品詳細の投稿ページ作成（カテゴリーを増やす）
  5. TOPページブラッシュアップ
  6. タイムオーバー

目標の達成は達成したけど、目的までは足りなかったです。

 

まとめ

良かったと思う点

  • お店情報はタイトルやページ上部にいれたこと
  • 田舎？なので駐車場があることを記載
  • 商品詳細 投稿ページ

足りなかったと思う点

  • スライダーの設定（速度とか）
  • 画像の加工（素材が縦横バラバラ）
  • 商品詳細 投稿ページ が全て作れなかった

他の発表をみて

  • フォントで印象が変わる。（フォントがダサいとつらい）
  • サムネイルで画像が並ぶと綺麗に見える。
  • ○が必要。１つあると全体が柔らかい感じになる。サムネイルとかアイコンとか。
  • CSSがサクッと書けると、いろいろな事が解決できそう。

 

反省点を踏まえてブラッシュアップしたサイトを公開したいと思います。