こんにちは！
昨年の8月から年末までの期間、WordPressの実践セミナーに参加していました！
が、セミナー中に自分で実際に組み上げるところまで行けなかったので、
復習を兼ねてサイトのデザイン・コーディング・Wordpress化までの自主制作をしたいと思います。
自主制作なので実際のお客様はいらっしゃいませんが
本当に一つのサイト制作を任せて頂いたつもりで作業していきたいと思います。(^^)/
サイトのデザインだけは昨年から少しずつ進めていたので、最初にデザイン編として書いていきます！
架空のベーカリーのサイトを制作します
著者は群馬県在住なので、県内の個人経営されている小さなお店のサイトを作ってみたいと思ってます。
今回の架空のご依頼は、、、
「群馬県前橋市にある小さなベーカリー（パン屋さん）のホームページ制作」
※著者が前橋市に住んでいるとは限りませんよ～！(-“-)
ホームページで叶えたい事（目的）
- 店舗の認知と集客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版のデザインカンプです。
デザインは相変わらず、時間がかかる
WordPressの構成を見据えると必要なページが結構あって
シンプルなデザインなのに時間がかかってしまいました。
細かい点も詰め切れていないような気がしますが・・・(-_-;)
このデザインをたたき台として、今後色んなバリエーションを作っていきたいです！
次回記事はデザイン編②としてinformationで使用しているアイキャッチ達の制作について書きたいと思います。
また是非、ご覧になってくださいませ！！
ありがとうございました。
HTML/CSSでのコーディングに興味がある方へ向けて、ななふが愛用しているおすすめの書籍を紹介します(^o^)
「作って学ぶ HTML＆CSSモダンコーディング」
イチからサイトをコーディングするとき、まずどのようにレイアウトを組めばいいのか・・・
ハンバーガーメニューはどう作ったらいいのか・・・
悩みはつきませんよね！
実際に手を動かして作ってみるのが一番理解が深まります。
どうせ作るならキレイなデザインのサイトがいいですよね。
この書籍は書籍自体のデザインも、サンプルサイトのデザインもモダンなので、モチベーション保って最後まで作っていけると思います！
おすすめポイントとして、ハンバーガーメニューの背景固定についても記載のある初学者向け本って珍しいです。（※CSSでできる簡易的な対策ですが、説明があるのが(・∀・)ｲｲ!!）
スマホ表示のメニューボタンがちゃんとbuttonタグで実装されており、簡易的ですがJavaScriptでメニューの開閉をする内容になってます。
本格的に作るにはもっとJavaScriptを駆使していく必要がありますが、最初の一歩としてやってみるにはちょうどいいと思います〜！
コメント