奈良県で、優しい素材を選び抜いたお菓子を作られている「やさい菓子工房ココアイ」さんのクラウドファンディングページのお手伝いをさせていただきました！

「自然の中で、ゆっくりとした時間を過ごしていただきたい」
「身体に優しいお菓子」
この熱い想いにあふれたクラウドファンディングのページは、ぜひ読んでほしいページになっていますので、ぜひ見ていただければと思います。

クラウドファンディングのページを見る

The post やさい菓子工房cocoaiさんのクラウドファンディングをお手伝いさせていただきました appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

サイトの内容によって、細かくは変わってくるので参考程度にしてくださいね（2020年9月からGoogleは、検索評価を「モバイル」に統一するので、モバイルの速度改善オススメです！）

改善前の状態

Googleが提供するサイトURLを入れると、サイトスピードを計測する「PageSpeed Insights」
改善前の状態で測定した結果　モバイル3点、パソコン47点

では、この状態からWordpress高速化に向けて、やった内容やポイントをご紹介していきます。

画像処理

サイトスピード測定した時に「改善できる項目」として上げられている
「次世代フォーマットでの画像配信」「オフスクリーンの画像遅延読み込み」「効率的な画像フォーマット」「適切な画像サイズ」
この4つが画像処理に関連する項目で、点数に占める割合が大きくなっています。

キャッシュとコードの管理

上記と同じく「改善できる項目」として上げられている
「テキスト圧縮の有効化」「レンダリングを妨げるリソースの除外」
この2点については、画像処理より少し専門的な内容になります。

サーバー、プラグイン、テーマ、その他

ここは「改善できる項目」の「サーバー応答時間の短縮」の内容になりますが、ここはサイトによって大きく変わってくる部分になります。

改善後の状態

改善後に測定した結果　モバイル88点、パソコン99点

モバイルが6秒から2秒に改善！これにサーバーの載せ替え、プラグインの絞り込みや、テーマ改善をすればもっと伸ばせる余地もある結果に◎

WordPress高速化は、調べたり時間をかければ自分でもすることができると思いますが、あちこち触って改善をしていく内容なので自力では少しハードルが高めです。
チャレンジしてみて厳しいな…と思ったら、ぜひ一度ご相談してくださいね。

The post 【2020年】WordPressサイトをスピードアップ！モバイルを6秒から2秒にした高速化のポイント appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

既存のWordpressに、プラグインではなくPHPで組んでみました！

全体の仕様

STEP1
プランごとの単価と、入力した人数をかけ算して、プラン合計に出力する
※人数は4人以上じゃなければ申し込み不可

STEP2
オプションごとに単価×数量＝金額をだして、オプション合計に合計金額を出力する

STEP3
STEP1とSTEP2の内容をそのまま申し込みするためのフォーム。
フォーム自体は「PHP工房様のMailForm01」と、Googleカレンダーを使用しています。

細かく全部書くと、とっても長くなるので、ある程度の知識があることを前提に書いています（すみません…！）

下準備

今回は、専用の固定ページに設置したい、編集もそのphpファイルで編集していけるように
・「page-○○.php」を作ってアップロード（それに合わせた固定ページも作る）
・「PHP工房様のMailForm01」をダウンロードして、設定項目を編集してFTPから「wp-content/themes/テーマフォルダ/keisan（好きなフォルダを作成）」して、ファイルをアップロードしておく

STEP1

<script>
document.addEventListener('change',function(e){
var t=e.target;
if(t.nodeName=="INPUT" ||t.nodeName=="SELECT"){
var num=1;
var f=t.form;
for(var i=0;i<f.length;i++){
if(f[i].name=="people_plan_total") continue;
if((f[i].type=="number" ||f[i].type=="radio") && f[i].checked ||f[i].type=="number") num*=parseInt(f[i].value);
}
f.elements["people_plan_total"].value=num;
}
});
</script>

<input type="radio" name="plan" value="金額" checked>プラン1
<input type="radio" name="plan" value="金額">プラン2
<input type="radio" name="plan" value="金額">プラン3
人数　<input type="number" name="people" value="0" step="1" min="4" max="500" placeholder="人数" pattern="\d*">
合計　<input type="text" name="people_plan_total" value="0" readonly> 円

名前などはわかりやすいものに変更してください。

STEP2

<script type="text/javascript">
<!--
function keisan(){
	// 設定開始
	// 商品1
	var list1 = document.form1.option1.selectedIndex * 10000; // 単価を設定
	document.form1.option1_price.value = list1; // 小計を表示
	// 商品2
	var list2 = document.form1.option2.selectedIndex * 5000; // 単価を設定
	document.form1.option2_price.value = list2; // 小計を表示
	// 合計を計算
	var total = list1 + list2;
	// 設定終了
	document.form1.option_total.value = total; // 合計を表示
}
</script> 

<select name="option1" onChange="keisan()">
<option value="オプション名前　数量：0">0</option>
<option value="オプション名前　数量：1">1</option>
<option value="オプション名前　数量：2">2</option>
<option value="オプション名前　数量：3">3</option>
<option value="オプション名前　数量：4">4</option>
<option value="オプション名前　数量：5">5</option>
</select>
<select name="option2" onChange="keisan()">
<option value="オプション名前　数量：0">0</option>
<option value="オプション名前　数量：1">1</option>
<option value="オプション名前　数量：2">2</option>
<option value="オプション名前　数量：3">3</option>
<option value="オプション名前　数量：4">4</option>
<option value="オプション名前　数量：5">5</option>
</select>
オプション合計　<input type="text" name="option_total" size="8" value="0"> 円

増やしたいオプションの分だけ、listとoptionを増やしてください。

STEP3

このメールフォームの部分は、先にダウンロードしたMailForm01の設定とあわせて、項目を作ります。

<form method="post" action="<?php echo get_template_directory_uri(); ?>/keisan/mail.php" name="form1">
STEP1、STEP2のHTMLと、STEP3のフォームを記載する
</form>

見積もりだけのプラグイン、注文/申し込みのプラグインそれぞれはあっても、見積もりしてそのまま注文/申し込みできるプラグインがなく（あるにはあったものの、条件が合わず）今回はがっつりと組んで実装してみました。
実際のページは 勝っちゃんの手ぶらでBBQ 様のサイトでご確認ください。

久しぶりにプログラムで頭うんうん捻らせました…！同じことで悩まれてた方はどうぞ参考にしてください。

The post 自動見積もりと、その内容で申し込みできるフォームを作る手順【事例あり】 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

楽天市場に出店されている お部屋のDIYショップ REROOM 様の、楽天市場の商品画像と商品ページで共有して使っていただける画像を制作させていただきました。

どちらでも使えるように正四角形で作りました！

スマホで見られることを中心に（詰め込みたい内容が多い部分はちょっと小さめになっちゃいましたが）大きめの文字でわかりやすさ第一 カラーリングはロゴの配色に合わせ、画像や文字の配置を行いました。

共有させておくと、運用しやすい・お客さんはわかりやすくてwin-winですね！

Photoshopデータも併せて納品可なので、運用中に画像や文字を自社で変更していただくのも◎

少人数で運営するECにオススメ

1．商品画像のスライドを見ないお客さんにも見てもらえる
2．編集がやりやすく、運用しやすい
というメリットがあります。

気になったら一度テストとして、お試しください。

The post 楽天市場の商品画像・ページ画像で共有して使える画像を制作させていただきました。 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

すでに運用をされているWordpressで制作した化粧品のサイトへ、絞り込み検索機能を設置させていただきました。

商品数が多い場合、絞り込みできるとササッと目的のものを探せて便利ですよね！

▼絞り込み検索画面

フリーワード検索や、プルダウン形式などでもOK！

▼検索結果

検索結果を、化粧品の価格順に並び替えすることも◎

ECサイトや記事が多い時に

絞り込み検索は、一見すると設置がむずかしく見えますが、有料プラグイン「FE Advanced Search」を使うのがオススメ。

※シンプルなものなら自作することもできますが、こればかりは「FE Advanced Search」イチオシです。

プラグインを使うとはいえ、デザインや設定、カスタムフィールド、テンプレートファイル作成とやることが多いので、WordPressテーマが作れるレベル程度になってからがいいように思います。

絞り込み検索をサイトに導入したいとお考えなら、一度ご相談ください

The post 既存WordPressサイトに絞り込み検索を設置・制作させていただきました。 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

このところの配送費の値上げなどで、できるだけお客様に負担が少ないように細やかな対応を…！といっても文章だけでの説明だと複雑よね…

ということで

●メール便の受け取りに関する注意バナー2点

●同梱と送料についての注意バナー2点

・個人のお客様が中心＝スマホ中心で見るということを前提としたバランス調整
・わかりやすく伝えたいものをギュッとまとめ、文章で補完できる/ある程度使いまわせるようにした内容

で、デザインさせていただきました。
文章を読まない方が増えてきている・流し読みしてしまうことが多いので、できるだけスッと頭に入れてもらうためには、目で見てわかる工夫が大切です。

まるめデンタルクリニック
お口の相談室（楽天市場）

The post EC/ネットショップ向けの注意書きバナーを制作させていただきました。 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

さすがにフルオーダーの制作は厳しいし、名入れできるカレンダーから「かわいい＆使える」のを選ぶ！！

とまぁ、探したものの、もう11月中旬にもなれば、いいなと思ったものは、ほとんど売り切れ…。
根気よく探しに探し回って、コレ！というものが見つかったので、こちらのカレン堂さんで発注させていただきました。

名入れカレンダー専門 カレン堂

ということで、フルオーダーではなく名入れの部分だけ制作してきましたー！

初めて名入れカレンダーを作ってみて、意外とサンプルや実例が見つからず、イメージが湧かなくて苦戦するはめに。
（もしかして、あまりデータ入稿するところが少ないのかも）

やっぱり1年を通じて使ってもらえるようなカレンダーを選択したので、名入れ部分だってこだわりたい！

と本日入稿したので、あとはドキドキしながら実物が届くのを待つばかり。ソワソワ。
こわだりの名入れカレンダーを作るなら、カレンダーを依頼する会社さんに相談がオススメです。

The post 年末年始の挨拶用に。名入れカレンダーのデザインをしました。 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

最初は「問題なさそうなくらいしっかり作りこまれているような…？」商品ステキー♪と思ってましたが、スマートフォンからだと、パソコン版に比べて画像や情報量が少なく、まさに「もったいない」状態。

ということで

・パソコン版と同じくらい、スマホで見た時に必要な情報が見やすく伝わるように
・制作データは商品別に仕分け、Photoshopデータごと一式お渡し

パッと見ただけでコレが欲しい！と衝動的に感じてしまう商品力の高さに、元々のパソコン版の商品ページの作りこみもあって、思わず私自身が「欲しいな～欲しいな～」と思いながら作業させていただきました。笑

集彩苑（公式ホームページ）
集彩苑（楽天市場）

1つ持ってるだけで、大人の女子力がグン！と上がりそうなアイテムばっかりなので、大人の女性らしさを求めたい方や、女性への贈り物に心の底からオススメ◎！！

The post 楽天・yahoo商品ページのスマホ最適化をさせていただきました。 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.

ヘッダーの制作と、細かな調整（実行委員会側であちこち編集できるようカスタマイズ）を行いました。

（昨年の2017年も制作させていただいたものの、天候不順で中止になってしまって、残念でしたが、今年は無事に開催されてホッとしました…）

イベント系となると、利用されるのは期間限定ですが、毎年行っているイベントとして定着して来年以降もずっと開催されていったら地域もニギヤカになりそうで期待大です。

https://yosano-kankou.net/kimono2016/

オマケ）お蔵入りになった2017年度版

The post 地域イベントサイトのヘッダー制作をさせていただきました。 appeared first on 京丹後市・与謝野町　ホームページ制作【ママチュデザイン】.