WordPressでリフォーム会社のホームページ作成事例

webの森の制作事例紹介です。

株式会社住まいる工房様　http://www.smilekoubou.co.jp/

キャラクター、ロゴ、イラスト、webデザイン、写真撮影、WordPressを使ったCMSシステム、スマホ対応を施工させていただきました。

１）一番気になることに答える表紙

ごちゃごちゃした表紙ですが、デザインスッキリ、おしゃれに、高級感、の正反対を狙っています。
もっと安そうなサイトにしたかったのですが（汗）
表紙、これっていったいいくら？
マウスを乗せると価格がわかるようになっています。

２）表紙下のメインコンテンツ

ひたすら漫画描き描きがんばりました(^o^)楽しかった（ホントは大変だった）

３）スタッフの皆さんに写真撮影協力いただきました

４）ブログは、お客様の声を紹介するブログ

お客さまの声は、記事を書くスタッフのログインIDを識別して、顔写真のアイコンが出るようになっています。
どのスタッフからの声なのかわかります。

５）固定ページ

WordPressはブログツールですが、「投稿」と「固定ページ」の２種類の投稿ができます。
投稿は、日記のように時系列に並び、新しい記事が上にきて、古い記事はどんどん過去の方へ移動します。
固定ページは、時系列は関係なく、管理画面から決めた順番の通りにずっと表示させて置くことができます。
これが普通の無料ブログと、CMSの違いです。
ブログなんだけど、普通のホームページのように見えます。

このように表を入れたり、見出しを中に入れたり、すべて管理画面から入力するので、納品後はお客様（WordPressのオーナーさん）にて、自分で更新ができます。

６）お問い合せフォーム

WordPressが便利なことのひとつに、プラグインを利用すればどこでも自由にお問い合せフォームを表示させることが出来ることです。

お問い合せの内容は管理画面にて設定でき、項目の変更や追加もできます。

（これは素人には少しハードルが高いです。タグを勉強しないといけません）

松本市で「インターネットで地域活性化セミナー」2013年4月5日

webの森が南信支部の事務局をしている「水上浩一EC実践会」の、松本地区でのオリエンテーションセミナーが開かれますので案内します。

【日時】2014年4月月5日(土)13時00分～16時30分

【場所】松本商工会議所4F会議室　 【参加費】1,000円

「全国EC実践会」は全国13カ所で展開しており、ネットショップやネットを使った集客や売上アップの方法を学ぶ、少人数型実践勉強会です。
長野県では「ずくだせ長野」という名前で開催しており、webの森はその南信支部のお手伝いをしています。
地元で仲間を作りながら一緒に勉強することで、何かとつらいことが多い「ネットショップの経営」や「ホームページ運営」の基礎体力をつけ、成果の上がるショップになれるよう、仲間と一緒に成長しませんか？。>>ずくだせ長野本部はこちら　>>facebookページ

長野市、佐久、飯田で10回近く開かれ満員お礼の大好評セミナーです

このセミナーは長野市と飯田で、３年ほど前から、すでに10回近く開かれていて、
そのたびに60席ほどの会場が満員御礼になるくらい好評です。
とても忙しく全国を飛び回っている先生なので、滅多に聞くチャンスがないので、ぜひ、ホームページの運営やwebマーケティングについて興味があるお友達がいらっしゃいましたら、
お誘いいただき参加していただけると嬉しいです。

貴重な事例やノウハウ満載で、目からウロコがオチまくり・・・・

「こんなところまで教えてくれるの！？」というような、全国のネットショップや企業サイトでの貴重な実例やノウハウが惜しげもなく教えてもらえます。

今までの参加者さんからは、このセミナーだけでもすごくためになって、目ウロコでしたと喜びの感想をいっぱいいただいています。

私は南信実践会の事務局をしていますが、このセミナーは、南信実践会に参加の 丸山 淳治さんが、水上先生のセミナーに感動してくださり「ぜひ松本の皆さんにも聞いて欲しい」と熱心に開催に向けてがんばってくださいました。
実践会に入ってくれないと困るとかそういうことは全然なくて、興味本位で聞きに来ていただくだけでも十分なのですが、今まで「こんなにすぐに実践で役に立つセミナーは初めてだった」とお礼の声をいただいたりして嬉しかったので、
もしちょっとでも皆さんが困っていることや何か壁にぶつかっていることがある時にお役に立てたらいいなぁという気持ちから、水上先生をお呼びしました。

EC実践会って何？

実績に直結するノウハウを共に学ぶ機会です。ぜひご参加ください。

セミナーでは、長野県内はもちろん、浜松・広島・沖縄・秋田・熊本といった地方の、どこにでもある地元のお蕎麦屋さんやお肉屋さん、酒屋さん、車屋さん達が実際にインターネットを活用して売上をあげた方法を紹介してもらえます。

はるか彼方の話ではありません。同じ長野県内でもこのセミナーで決断した28社が参加し、成果をあげた事例が満載です。

月商１０００万円店舗を多数輩出し、全国15カ所で展開しているEC 実践会の短期間劇的売上アップの秘密を公開。セミナーではEC 実践会説明会も兼ねています。

WindowsIEで、リッチエディタが使えない時・・・手のひらマークが犯人

とあるネットショップの管理画面が、推奨ブラウザがIEなので、いつもはIEを使わないのですが、この操作をするときだけはIEを使います。

ところがある日突然、リッチテキストエディタの中に入れなくなってしまいました。

ボタンもTマーク、Bマーク、消しゴムその他、どれを押しても無反応で、

中のパーツやテキストを選択したいのに出来ない状態。

IEのバージョンのせいなのかと思いサポートセンターへ電話して聞いてみても、ブラウザのキャッシュを削除してくださいとか、互換ブラウザになっていないか等、一通り試してみたのですがまったく解決しません。

検索もいろんな言葉で検索してみたのですが、検索キーワードが悪かったのでしょうか、

「IE　リッチエディタ　使えない」　「IE　エディタ　選択できない」

「IE　Windows7　エディタ　不具合」

出てきません。

他のPCのIEで同じ画面にログインしたところ普通に使えることが判明しました。

IEのバージョンは11で同じ。

これは自分のPCだけ何かがおかしいと、アドオンをことごとく削除したりいろいろしたのですが

結果、すごく簡単な答えでした。

IEについているボタンを片っ端からいろいろクリックしていったところ、手のひらのマークがありまして、

ん？何だろこの手のひら・・・と思ってクリックしたら、

手のひらのボタンがオフになりました。

そしたらなんと普通にエディタが使えるではありませんか！

何、この手のひらはっ(ﾟ〇ﾟ;) ？？

手のひらツールで検索すると、

「手のひらツール」は、タッチパネルやペンタブレットなどのデバイスを使っていると追加されるIEの機能

とのことです。これが何故かこれがオンになっていた為に起こった現象のようです。

２ヶ月くらいずーっと不便してました。
半日悩んでしまいました。


ちなみにその通販ショップの管理画面だけの問題ではなく、WordPressなど他のブログツールのリッチエディタも使えませんでした。
（普段IEを使わないので気がつかなかった・・）

【ブログ入門 3】WordPressのビジュアルエディタの使い方＜どの改行方法が見やすいですか？＞

さてここで問題です。どの改行方法が見やすいと思いますか？

その１　ほとんど改行なしで、段落のみで見た目を空ける、改行する場所はブラウザやデザインに任せる

その２　文章を書く人が、「このあたりで改行すれば見やすいかな？」となんとなく、見やすい位置で改行を入れる

その３　文と文の間は空いていた方が読みやすいので、なるべく短く区切り、前後にEnterを押して段落をいれて、見やすく整える

その４　マルで改行、一区切りついたところで段落をいれるという法則に従う

もうおわかりかもしれませんが、インターネットで文章を書く作法としては、その４がベストと思います。
その１でも文法的に間違ってるということはないのですが、

その１にした場合、デザインで、文章を入れるボックスの横幅がうんと広かった場合、目で次の行への移動を追うのが大変で、年がいってきて目が弱くなってきた人にはかなりきついです。

かといって、その２みたいに、著者が勝手に、「このへんで改行したほうが見やすいだろう」と判断して、文章の区切りでもない場所で改行を入れるのは、
音声読み上げソフトで読み上げた時に、変な区切りの発音になってしまいます。

しかも、デザインの方で文章を流し込むボックスの横幅が短かった場合、

このようなことも起こりますよね。

 自分の好きなところで見た目で改行を入れてしまうと、文章を流し込むボックスが
変わったときにこのように読みにくい状態になってしまいます。

文章はデザインがどのようになっても、意味は同じ状態で伝わるように書かないといけないので、
無理矢理変なところで改行をいれない方が良いのです。

となると、ましてや「その３」はかなり困った作法違反です。

世の中には自分と同じスマホで見ている人だけではないので、
インターネットの世界の文章は、「どんな環境の人にも、（大きなモニターの付いたPCで見てる人、ノートパソコンで見てる人、タブレットで見てる人、スマホで見てる人、ガラケーのような文字だけのような情報で見ている人、音声ブラウザで読んでいる人、そしてロボット検索エンジンさん）
どんな環境の人にも平等な情報を与えましょうという方向を推奨しています。

自分が読みやすいだけではだめで、
せっかく多くの人に読んでもらいたいのだから、音声読み上げソフトで読んでもらった時でも正確に情報が伝わるように書きましょう。

その３の方法をとると、「ひとりのあわれな少女が道を歩いていました」というのは１文ではなく、
「ひとりのあわれな少女が」　と　「道を歩いていました」　は別の段落ということが意味づけされてしまうのです。
人間の見た目からは、詩のような文章に見えますが、インターネット界からは、「これは前の文章とは別の段落」と思われています。
インターネットの言語は検索エンジンが読みますから、検索エンジンも意味を理解するのにちょっと苦労するかもしれません。
できるだけ検索エンジンにわかりやすく意味を伝えることは、このブログの読者さんは興味があると思うので付け加えておきますね。

（補足）
もちろん、すべての文章がこの通りの法則でなければいけないという話ではありません。
基本を理解したうえで、「でも私は詩のように文書を書きたい、スタイルシートで、行間を空ける方法など知らないので改行を２回繰り返していれています」という方がいても全然かまわないです。
正しい、ネット上の文章の書き方を、小学校の作文の時間で教えてくれればいいんですが、
今のところそんな授業もないようなので、基本のキの字と思って紹介しているだけです。
マルまでの文章が長い人もいるので、そういう場合は点で改行もありだと思います。個人でアレンジするのは全然かまわないと思います。
このブログは、難しい話をいかにやさしく解説するかということに目的を置いているので、つまり文章が長くなりがちなので、わかりやすくするために、点で改行も多くいれています。
そしてこの基本のキの字を知っているかどうかで、WordPressのビジュアルエディタの使い方のコツがつかめるので、長くなってしまい返ってわかりにくいかなぁ～・・・と心配しつつ紹介しています。

【ブログ入門 2】WordPressのビジュアルエディタの使い方＜段落と改行の違い＞

段落と改行２回は違います

WordPressに限りませんが、ブログの編集画面でわりと戸惑うのが、改行したいのに、Enterを押すと段落が入ってしまうこと。

それより前に、改行と段落の違いをわかっておかないといけないので、それがちょっと説明が難しいのですが、

小学生低学年のときに習った、改行と段落の違いを思い浮かべて下さい。

文章には段落を入れるべきところと、改行だけで良い場所とあります。

段落は、意味の区切りなので、しっかりと改行と段落は違うとうことを意識した上で、前の文章と一区切り置きたいところは、改行を２回、３回繰り返すのではなく、段落を入れましょう。

人が見た「見た目」では改行２回も段落も同じように見えますが、インターネットの世界では段落と改行はしっかり意味が違います。

段落だけに適用できるスタイルというものがあり、この１行だけを見出しにしたかったのに、他の行まで一緒に見出しになってしまい困った！ということがあります。

それは、段落と改行が理解できていないことから起こります。

見出しは段落だけに適用されるので、

これは見出しにしたい！と思ったら、前後に段落をいれて、

前後の文章とこの見出しは違うとうことをしっかり意識しましょう。

Enterを押すと、段落。段落ではなく改行にしたい場合はShift＋Enter

ビジュアルエディタの中では、Enterを押すと段落になり、前後に段落のマークが入ります。（人間界には見えていませんがインターネットの世界には見えます）

この人間界に見えないけど、インターネットの世界に見える文字が「タグ」といいます。

難しくなるのですが、タグを理解しておいたほうが、ビジュアルエディタが変な動きをするときに、どうしたら修正できるか理解できるので、なんとなく、タグという文字は大事と覚えておきましょう。

「文字サイズ」と「段落」の違い

ここに「文字サイズ」というプルダウンと、「段落」というプルダウンがあります。

この文字サイズというのは、文字にだけ適用され、選択した部分だけが変わります。

「段落」というのは、前に段落が入った場所から次の段落まで、全部が適用されます。

文字のサイズを、単に見た目だけ大きくしたい場合は、文字サイズを使いましょう。

見た目だけ大きくするのではなく、その章に対する見出しの場合は、段落の中から見出し２とか見出し３をえらびましょう。

【ブログ入門 1】WordPressのビジュアルエディタ、TinyMCE

ここではWordPressの使いやすいエディタ、TinyMCEの使い方を紹介します

TinyMCEはプラグインなので、プラグインの新規追加で検索してインストールしてください。

インストールし、有効化すると、設定の中にTinyMCEというメニューが出てきます。
ここで、入れたいボタンを編集できます。

本格的なスチームオーブン 極味（きわみ）

ランディングページという言葉をご存じでしょうか。

インターネットで検索結果や広告をClickした時に最初に表示されるページで、他のページや他の商品に目移りしないように、その目的だけに絞った、商品（サービス）の紹介と最後に申し込みや購入までを即決してもらうのが目的のページです。

今回、「レンジ機能がない本格的なスチームオーブン」のランディングページ制作をしましたので、事例として紹介します。

（事例ページ）

脱電子レンジ!電磁波(マイクロ波)を出さないスチームオーブン「極味」オーガニック&自然雑貨【てくてくねっと】

ランディングページなので、目的が達成されてこそ・・・という目標があります。

webデザインに求められるモノは「綺麗なページ」「カッコイイサイト」ではありません。
それより重要なのは「売れるサイト」が作れること・・・・・

販売したいのはこの「本格スチームオーブン」です。

ターゲットは、「電子レンジの電磁波が不安」と思っている人なので、

冒頭で、電子レンジは不安ではありませんか？と質問を投げかけるところからスタートしました。

電子レンジはマイクロ波が栄養を壊すと言われています。
電磁波が他の家電よりかなり強いそうです。

そして、スチーム機能付きのスチームオーブンレンジとの比較も入れないといけません。

実は私が以前スチーム機能付きのスチームオーブンレンジを買ってしまい、その「ちゃちな性能」にまったく満足できなかったので、ここは実感込めてつくれました。

で・・・・改めて考えてみると、

電子レンジは500ｗで1個の場合は1分30秒だけど、2個なら60秒とか、

でも600ｗなら、それが1分10秒とか、

電子レンジはかなり使い方が面倒で難しいということに気がつきます。

チンしすぎた時のガチガチになってしまった不味さは誰もが体験済み。

でも、レンジ機能に頼らない、スチームオーブンは昔ながらの自然な方法「湯気で蒸すだけ」なので使い方が本当にシンプルなのです。

湯気で蒸すだけだから、タイマーを適当に長めに設定して、ボタンを押すだけ。

途中でできたかな？とのぞいてみるだけで、まだ少し冷たかったらふたを閉めれば続きから再開してくれる、

その間に他の料理をしていて、そのまま忘れてしまっても、

湯気で蒸している状態なので固くならなくていつまでもしっとりで美味しいんです。

これにはびっくり！

何を隠そう私この広告を作っていてすっかりスチームオーブンの魅力にはまってしまい買ってしまいました。

なのでこんなに詳しいんです(^-^;)

容器も、プラスチック、金属、陶器、ガラス、紙パックどれでも大丈夫。

何分スチームしたら良いかも適当で、様子見をしながら。

中までふっくら蒸したら、そのままオーブンボタンに切り替えて、焼けばオーブン料理も簡単なのです。

そんな訳で、このような事例写真がいっぱい撮影できました。どれも美味しかったですよ！

体験会に参加した方や、実際に購入してレビューしていただいた皆さんの感想も掲載しました。

初めての購入を検討される方はいろいろ不安や疑問がいっぱい、高い商品ですし納得してから買いたいですよね。
そんな方のために、Q&Aページや、実演会のお知らせ、詳しい使い方、レシピ集のページも作りました。

※表紙以外は、このページのオーナー「てくてくねっと」様作成です。

スチームオーブンで検索すると、勝手にスチームオーブンレンジという、レンジ機能がついた製品ばかりがヒットしてしまい、

「レンジ付きのものでは電子レンジの不安・不便はいつまでもついてまわり、結局は中途半端なものしか買えない」ということが伝えられないのがネックです。

というわけで、こういう案件は、リスティング広告とセットで計画するのが王道なのです。

（事例ページ）

脱電子レンジ!電磁波(マイクロ波)を出さないスチームオーブン「極味」オーガニック&自然雑貨【てくてくねっと】

新しいGoogleMapで地図の埋め込みコードは・・・

GoogleMapが新しくなって今までといろいろが違い困っています。

ホームページにコードを埋め込みたかったのですが、埋め込みコードがどこにあるのか

探すのにかなり苦労したので、こちらで紹介しておきます。

右下の設定マークをクリックすると、出てきます。

こんなふうに道順を地図で表示させて、それをホームページに埋め込むこともできました。

（例）

http://www.hakuba-arles.com/access/index.php

「埋め込み地図のカスタム」はここにあります。
右下の設定　→　地図を共有／埋め込む　→地図を埋め込む　→▼をClickしてサイズを調整