XDを使って自主制作しました。架空の小さなベーカリーのサイトをデザインしました。ななファクトリーNa2factory|ななファクトリートップページに戻るAboutNewPostDesignHTML/CSSWordPressContactNa2factory|ななファクトリーtwitterへななファクトリーtwitterのフォローボタンNa2factory|ななファクトリーInstagramへななファクトリーInstagramのフォローボタンサイト内検索へななファクトリーサイト内検索へのボタンサイト内検索を閉じるななファクトリーサイト内検索フォームを閉じるNa2factory|ななファクトリートップページに戻るAboutNewPostDesignHTML/CSSWordPressContactNa2factory|ななファクトリーtwitterへななファクトリーtwitterのフォローボタンNa2factory|ななファクトリーInstagramへななファクトリーInstagramのフォローボタンサイト内検索へななファクトリーサイト内検索へのボタンサイト内検索を閉じるななファクトリーサイト内検索フォームを閉じるフリーランスWebデザイナー・ななふのデザイン、コーディングの勉強記録やTIPSなどHOMEDemoベーカリーコルネ自主制作の記録!デザイン→コーディング→WordPress化までやってみる。復習を兼ねてサイトのデザイン・コーディング・Wordpress化までの自主制作をしたいと思います。自主制作なので実際のお客様はいらっしゃいませんが本当に一つのサイト制作を任せて頂いたつもりで作業していきたいと思います。(^^)/サイトのデザインだけは昨年から少しずつ進めていたので、最初にデザイン編として書いていきます!Index架空のベーカリーのサイトを制作しますデザインはXDでやってみた今回のデザインのサイズデザインカンプに入っていない部分デザインカンプ(スマホ版)デザインカンプ(PC版)デザインは相変わらず、時間がかかるスポンサーリンクスポンサーリンクスポンサーリンク架空のベーカリーのサイトを制作します著者は群馬県在住なので、県内の個人経営されている小さなお店のサイトを作ってみたいと思ってます。添加物などが気になる人に向けて、添加物不使用をアピールしたい地産地消による地域貢献コンテンツに関するご要望パンの写真をよく見て貰える構成がよいお店のアピールポイントはトップページに載せて欲しいお店の休業日や営業時間、ご案内などをスタッフが簡単に更新できるようにしたいパンのメニューの写真を今後もどんどん載せていきたいが、簡単にできるようにしたい将来的にはスタッフブログも書けたらいいなと思っているSNSとリンクした宣伝もやっていきたい。新サービス「焼き立て食パンの受け取り予約システム」についてのご要望ホームページ内にバナーを設置して、そこから予約ページに飛べるようにしたい。予約システムは、既存の無料で利用できる物を使ってOK(あまり予算かけられない)できればシンプルな物で、店舗のスタッフが設定変更できるようにしてほしい店舗で食パンの焼きあがり時間を設定し、お客様が時間を選ぶスタイルにしたい。当日のみの利用を想定。日をまたぐ予約設定はしないこれらのご要望を満たすためのご提案として、WordPressでの制作となります!基本的なセキュリティやSEOについてもご提案できるといいなと思います。予約システムの部分をどう導入するかな?等の要検討ポイントが結構ありそうです(;・∀・)デザインはできるだけシンプルにし、主役であるパンを引き立てたいと思います。お客様が簡単に更新できる、使い易いサイトを検討していきます。ダッシュボードもシンプルに、変更箇所を分かり易く見せるようにしたいです。(ここらへんのノウハウはセミナーで教えてもらいました!!(^^)/)できればSNSからの集客についてもお手伝いのご提案までできれば、、、と思います。スポンサーリンクデザインはXDでやってみた今までのHTML/CSSのトレーニングも一応自分でデザインしてましたがデザインツールはPhotoshopでした。今回はAdobeXD(以下、XD)を使用します!XDも使えるようになりたいと思いながら、なかなか手を出せずに来てしまってたのでここはえいや!使って覚えるんじゃ!と強引に導入です。機能を活かしきれてない感じですがとりあえずワイヤーフレーム・デザインカンプ作成しました。時代の流れに従って、スマホページメインで進めました。1280で制作PCについて、今まで自分で作ったサイトはフルHD(w:1920)で制作したのですが大きすぎて見づらいのではないか?と感じていたので今回はもっと小さめに作ってみようと思いました。画像の書き出しサイズはRetinaディスプレイに対応して綺麗に見れる様にしたいです。(画像サイズのいい塩梅がまだまだつかみきれてないです💦)デザインカンプに入っていない部分お問い合わせページと予約システムページについて、デザインカンプには入ってません。これらはプラグインで実装しようと考えてまして、WordPress化の段階で画面見ながら調整していきたいと思います。デザインカンプ(スマホ版)スマホ版のデザインカンプです。これから大きく変更はかけないつもりですが実際に組んでいくと細かい点を変えたくなっちゃうかもしれません💦(;・∀・)トップページの画像はスライドショーで切り替える予定です。下の方にあるピックアップメニューも3つのメニューをスライドショーにする予定です。群馬県庁のMAPになるかも・・・・(^^;ななふ群馬県の県庁所在地は「高崎」ではなく「前橋」(どうでもいいですかね・・・)デザインカンプ(PC版)PC版のデザインカンプです。デザインは相変わらず、時間がかかるWordPressの構成を見据えると必要なページが結構あってシンプルなデザインなのに時間がかかってしまいました。細かい点も詰め切れていないような気がしますが・・・(-_-;)このデザインをたたき台として、今後色んなバリエーションを作っていきたいです!次回記事はデザイン編2としてinformationで使用しているアイキャッチ達の制作について書きたいと思います。ご覧になってくださいませ!!ありがとうございました。群馬県在住の40代女子です。2020年8月からWebデザインの勉強を独学でスタートし、2021年11月に開業しました。守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。自主制作物、テクニック等を紹介しています。ななファクトリーこちらもどうぞ!関連記事Demoベーカリーコルネ自主制作の記録!デザイン→コーディング→WordPress化までやってみる。2022.06.07DemoベーカリーコルネHTML/CSSWordPressHTML/CSSBrowsersync+Gulpでブラウザの自動更新。2021.07.28HTML/CSSWordPressサイト公開から約3か月。2022.07.31HTML/CSSスポンサーリンク2022年もどうぞよろしく!イラレで梅結び(トラ配色)自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編1】ひとまずトップページのレスポンシブ対応までコメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。スポンサーリンクお気軽にご相談くださいお仕事のご依頼はこちらからサイト制作のご依頼募集中です。こちらからお気軽にお問い合わせください。群馬県在住の40代女子です。2020年8月からWebデザインの勉強を独学でスタートし、2021年11月に開業しました。守備範囲はバナー・チラシ制作からWordPressでのサイト制作まで。自主制作物、テクニック等を紹介しています。文字を90度回転、親要素の両端に配置!レスポンシブ対応2021.06.152022.03.04イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます2021.04.212023.03.11自主制作の記録!デザイン→コーディング→WordPress化までやってみる。SwiperスポンサーリンクスポンサーリンクIndexIndex架空のベーカリーのサイトを制作しますデザインはXDでやってみた今回のデザインのサイズデザインカンプに入っていない部分デザインカンプ(スマホ版)デザインカンプ(PC版)デザインは相変わらず、時間がかかるスポンサーリンクWordPressオリジナルテーマ作りました!Demoサイト公開中です自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【WordPress】完成したよ!是非見てね自主制作の記録!デザイン→コーディング→WordPress化までやってみる。自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【コーディング編1】ひとまずトップページのレスポンシブ対応まで自主制作の記録!デザイン→コーディング→WordPress化までやってみる。【デザイン編1】シンプルなベーカリーサイトお気軽にご相談くださいWordPressで更新しやすいサイトを作りますアフターフォローもお任せくださいちょっとしたカスタマイズも是非ご相談ください!人気の記事イラレでもバナートレース30回達成!手順や手ごたえ等をまとめます2021.04.212023.03.11photoshop初心者がバナートレース30本達成!躓きまくりの過程とこれからのこと2020.11.062022.08.17自主制作の記録!デザイン→コーディング→WordPress化までやってみる。イラレで作ったSVGを外部ファイルで読み込み。TOPEnvelopeCONTACT。