自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【デザイン編①】シンプルなベーカリーサイト

HTML/CSS

こんにちは!

昨年の8月から年末までの期間、WordPressの実践セミナーに参加していました!

が、セミナー中に自分で実際に組み上げるところまで行けなかったので、
復習を兼ねてサイトのデザイン・コーディング・Wordpress化までの自主制作をしたいと思います。

自主制作なので実際のお客様はいらっしゃいませんが
本当に一つのサイト制作を任せて頂いたつもりで作業していきたいと思います。(^^)/

サイトのデザインだけは昨年から少しずつ進めていたので、最初にデザイン編として書いていきます!

 

スポンサーリンク
スポンサーリンク

架空のベーカリーのサイトを制作します

著者は群馬県在住なので、県内の個人経営されている小さなお店のサイトを作ってみたいと思ってます。

今回の架空のご依頼は、、、

「群馬県前橋市にある小さなベーカリー(パン屋さん)のホームページ制作」

※著者が前橋市に住んでいるとは限りませんよ~!(-“-)

店名:BAKERY COLNE (ベーカリーコルネ)

ホームページで叶えたい事(目的)

  • 店舗の認知と集客UP
  • 新サービスとして、「焼き立て食パンの受け取り予約システム」を導入したい

 

お店のアピールポイント

地域密着型の小さいパン屋さん

焼きたての食パンが看板商品

メインの客層はファミリー層

添加物などが気になる人に向けて、添加物不使用をアピールしたい

地産地消による地域貢献

 

コンテンツに関するご要望

  • パンの写真をよく見て貰える構成がよい
  • お店のアピールポイントはトップページに載せて欲しい
  • お店の休業日や営業時間、ご案内などをスタッフが簡単に更新できるようにしたい
  • パンのメニューの写真を今後もどんどん載せていきたいが、簡単にできるようにしたい
  • 将来的にはスタッフブログも書けたらいいなと思っている
  • SNSとリンクした宣伝もやっていきたい。SNSボタンの設置

 

新サービス「焼き立て食パンの受け取り予約システム」についてのご要望

  • ホームページ内にバナーを設置して、そこから予約ページに飛べるようにしたい。
  • 予約システムは、既存の無料で利用できる物を使ってOK(あまり予算かけられない)
  • できればシンプルな物で、店舗のスタッフが設定変更できるようにしてほしい
  • 店舗で食パンの焼きあがり時間を設定し、お客様が時間を選ぶスタイルにしたい。
  • 当日のみの利用を想定。日をまたぐ予約設定はしない

 

これらのご要望を満たすためのご提案として、WordPressでの制作となります!

基本的なセキュリティやSEOについてもご提案できるといいなと思います。

予約システムの部分をどう導入するかな?等の要検討ポイントが結構ありそうです(;・∀・)

デザインはできるだけシンプルにし、主役であるパンを引き立てたいと思います。

そしてお客様が簡単に更新できる、使い易いサイトを検討していきます。

ダッシュボードもシンプルに、変更箇所を分かり易く見せるようにしたいです。
(ここらへんのノウハウはセミナーで教えてもらいました!!(^^)/)

できればSNSからの集客についてもお手伝いのご提案までできれば、、、と思います。

 

デザインはXDでやってみた

今までのHTML/CSSのトレーニングも一応自分でデザインしてましたがデザインツールはPhotoshopでした。

今回はAdobeXD(以下、XD)を使用します!

XDも使えるようになりたいと思いながら、なかなか手を出せずに来てしまってたので
ここはえいや!使って覚えるんじゃ!と強引に導入です。

いつものように書籍でちょこっと使い方を学習して、
機能を活かしきれてない感じですがとりあえずワイヤーフレーム・デザインカンプ作成しました。

時代の流れに従って、スマホページメインで進めました。

まだ使いこなせないですが、XD、Photoshopに比べて動作軽いです!!

慣れてしまうと手放せないかもしれません(;’∀’)

 

今回のデザインのサイズ

スマホ:iPhoneX(横幅 375px)で制作

PC: Web 1280で制作

PCについて、今まで自分で作ったサイトはフルHD(w:1920)で制作したのですが
大きすぎて見づらいのではないか?と感じていたので今回はもっと小さめに作ってみようと思いました。

尚、画像の書き出しサイズはRetinaディスプレイに対応して綺麗に見れる様にしたいです。
(画像サイズのいい塩梅がまだまだつかみきれてないです💦)

 

デザインカンプに入っていない部分

お問い合わせページと予約システムページについて、デザインカンプには入ってません。

これらはプラグインで実装しようと考えてまして、WordPress化の段階で画面見ながら調整していきたいと思います。

デザインカンプ(スマホ版)

スマホ版のデザインカンプです。

これから大きく変更はかけないつもりですが実際に組んでいくと細かい点を変えたくなっちゃうかもしれません💦(;・∀・)

トップページの画像はスライドショーで切り替える予定です。

下の方にあるピックアップメニューも3つのメニューをスライドショーにする予定です。

尚、MAPにはGoogleMapをiframeで入れる予定ですが架空のお店で住所も架空なので、
群馬県庁のMAPになるかも・・・・(^^;

 

ななふ
ななふ

群馬県の県庁所在地は「高崎」ではなく「前橋」

(どうでもいいですかね・・・)

スマホ版のデザインカンプ

デザインカンプ(PC版)

PC版のデザインカンプです。

PC版のデザインカンプ

デザインは相変わらず、時間がかかる

WordPressの構成を見据えると必要なページが結構あって
シンプルなデザインなのに時間がかかってしまいました。

細かい点も詰め切れていないような気がしますが・・・(-_-;)

このデザインをたたき台として、今後色んなバリエーションを作っていきたいです!

次回記事はデザイン編②としてinformationで使用しているアイキャッチ達の制作について書きたいと思います。

また是非、ご覧になってくださいませ!!

ありがとうございました。


HTML/CSSWordpress
スポンサーリンク
この記事が気に入ったらシェアしてね!
na2factoryをフォロー
スポンサーリンク
フリーランス Webデザイナー

このサイト、
Na2 factory(なな ふぁくとりー)を運営している
"ななふ"と申します。
群馬県在住の40代女子です。

2020年8月からWebデザインの勉強を独学でスタートし、
12月にクラウドワークスでチラシ制作を初受注!
以降、細々とバナーやチラシ制作を受注しております。
2021年11月、フリーランスWebデザイナーとして開業しました。

このサイトでは、Webデザイナーになるべく自分が調べた事、
テクニック等を詳細に紹介していきたいと思います。
これからWebデザイナーを目指す方々や、活躍中の方々と
情報共有できたら嬉しいです!

詳しいプロフィールはこちら

na2factoryをフォロー
Na2 factory ななファクトリー

コメント

タイトルとURLをコピーしました