2014年11月17日月曜日

GoogleChromeで、スマホ・PC・タブレット、複数デバイスチェック

GoogleChromeの機能「要素を見る」を長年便利に使っていましたが、いつの間にか、進化してました。
1つのブラウザで、iPhoneやiPadはもちろん、Kindleや、Blackbery、Nexus、その他ほぼ全部のスマホや、タブレットを網羅していて、それに切り替えて確認ができることを発見しました。
気がつくまでにかなり時間かかってしまったので、ここで詳しい使い方を紹介します。


①GoogleChromeで、webを表示します


②調べたい場所の上にマウスをおいて、右クリック⇒要素を検証



③左にHTMLコードが出て、右側に、それに対応するスタイルシートが出ます


④このマークを押します



⑤ここの▼をClickすると、いろんなデバイスに切り替える窓が出て来ます


iPhone5を選んでみました




マホ対応しているブログサイトを、iPadminiにて表示させてみました。




GoogleNexus5で表示させてみました


変わらない場合はブラウザを更新(リロード)してみてください


iPadminiで表示させてみました。PCサイトが表示されます。



アイコンが、指の大きさに変わって芸が細かいです。
つまり、ボタンなどの大きさが押しやすいかどうかも、わかるということ・・?



黄色いバーに忠告が出ている時は、ブラウザを更新した方がちゃんとした結果が出てくるようです。



ブログの記事をiPhone5で表示したところです。




横向きにするとちゃんと画像が、左右いっぱいの幅になるように調整されているか・・・確認できます。






2014年11月14日金曜日

WordPressで1カラムのスマホファーストなサイト

りんご農家さんのサイトを10年ほど前に作らせていただき、その後ずっと古い外観のまま更新を続けてきたのですが、
このたび久々にリニューアルをしました。
すきがら農園さんのサイトです。

Before

After

スマホファーストな設計

このサイトはオーナーさんがブログをしたいとか、フォームメールで販売したいとかのご希望がなく、ただ毎年、りんごの時期に営業案内を更新していくだけなので、特にリニューアルをして欲しいというご希望はなかったのですが、やはり今の時代、スマホ対応してないのはまずいですよね・・・ということで提案させていただきました。

ページ数も少なく、ブログなどのコンテンツもないシンプルなサイトです。
特にWordPressでやらなくても、静的に作っても問題なかったのですが、スマホ対策を考え、レスポンシブ・ウェブデザインがやりやすいということで、WordPressを入れて、ワンカラムのシンプルなテーマをインストールしました。

Graphy

使わせていただいたのは、Themegraphyで紹介されていた、WordPress.orgテンプレート、Graphyです。

とてもシンプルな美しいテンプレートで、ちょっとだけスタイルシートを追加しただけで出来ちゃいました。

ブラウザ、いろんな幅に対応しているので、どんどん縮めていくと、外観がくるくる変わっていきます。

iPhoneのようなサイズになるとこんな感じです↓

レスポンシブ・ウェブデザインで気をつけること

1)写真の横並びはリストを使うと良い





2)写真の幅は基本コンテンツの横幅いっぱいで作っておいて、あとの表示はスタイルシートにお任せする


たとえば、コンテンツの横幅を960pxって決めたら、すべての写真は原則そのサイズでアップしておいて、あとはスタイルシートにお任せすれば、ブラウザの幅に合わせて縮小してくれるので便利です。




4)ウィジェットが便利


サイドバーウィジェットからすべてはずせば、自動的にワンカラムになります。
(ページ作成のときに、全幅のテンプレートを選んでも良い)
フッターは4つついていたので、左から、
サイトロゴ、固定ページメニュー、カスタムメニュー、アドレスの4つに分けました。

ブラウザの幅が小さいときは、これがタテ並びになります。





5)ギャラリーが自動作成


写真を追加しようとして、「ギャラリーを作成」というメニューがあったので、何だろうって思いながら追加したら、超簡単にギャラリーが作れました。
最近のWordPressはすごい高機能なんですね(若干浦島太郎だったわたし)



素晴らしい景色の中、広いりんご園でのんびりとピクニックしてみたい方はぜひ、長野県松川町のすきがら農園に問い合わせてください。
(すみませんがメール対応ができるスタッフさんがおりませんので、すべて電話かFAXでの対応となります)

長野県中央自動車道松川インターから車で5分、車いす可能、ペット可能、お弁当持ち込み可能、(園内に椅子や、直売所の2Fに休憩室あり) おつけものやお茶のサービスあります。

毎年りんご狩りが出来る期間が区切られていて、その時期しか開園していませんので注意ください。



2014年11月1日土曜日

絶品すぎるうなぎ屋さんのサイトを作りました

鰻やうなはるさんのサイトが完成したのでお披露目します。

お腹がすいている方には大変ゴメンナサイですが、今回めちゃくちゃ美味しい写真たっぷりお披露目しちゃいます(^o^)/


長野県の下伊那郡高森町、市田駅から歩いて5分の線路沿いにあります。
私の別のお客様から、うなはるさんを紹介されまして、ホームページ制作の相談にのってあげてくれない?ということで、今回伺いました。
私は飯島町に住んでいてあまり高森町に行くことがないので、存じ上げなかったのですが、高森の人に聞いたら、知る人ぞ知る評判の名店だそうです。

看板が出ていなくて、古民家風の黒い塀が続いているので、ちょっと簡単に見つけられないお店なのですが、一歩入って見ると、その素敵な外観と、内装にまず驚きます。

私「どうして看板出されないのですか?」

うなはるさん「お客様にたどり着くまでにすごく迷ってしまったと言われるんです。
申し訳ないと思うんですが、あまり目立って、飲み屋さんみたいに勘違いして入って来られるお客様が増えても困りますし、あくまでもうちはクチコミ、お客様の評判で次のお客様を紹介していただいているので、これくらいで丁度いいんですよ」

なんとまぁ、奥ゆかしいというか、商売っ気がないというか不思議な店主さんです(^_^;



私「ホームページも今まで全然作られて来なかったんですよねぇ、いっぱい営業来ませんでしたか?」

うなはるさん「いっぱい来ましたよ。中には親身になって相談に載ってくれるとおもったら、最後に信販会社の申込書を出してくるじゃないですか。5年分割だとかで、冷静になって計算するとものすごく高いんです!びっくりでした。
これは怪しいって思ってキャンセルしましたよ」

私「良かったですね!5年分割とか頼んでしまって、その後悪いサービスで放置されて、ローンが終わるまで仕方なく払い続けている方けっこういらっしゃいますよ」

う「それでどの業者さんを信じたら良いかわからなくて、知人に相談してwebの森さんの紹介をうけました」

私「ありがとうございます(*゚ー゚)(*_ _)ペコリ
期待を裏切らないようにがんばりますね!」



まずは味を知らないと!っていうことで、(最初は私のお客様がご馳走してくださいました、感謝感謝です、T社のYさん)うな重の上をいただきました。

うわーーーーなんすかこれっっっ((( ;゚Д゚;))) 
香ばしくてとっても良い香り!
カリッと香ばしいのに中がふんわりとろけるように美味しい~~~~っっっっっ
タレのからみも絶妙で、ご飯との相性も絶品!

私「これは宣伝いりませんね・・・・・・・・・_| ̄|○
これで行列ができるお店になっちゃったら、ファンの方が食べに来れないですよね」

う「実はそんな風にお客様に言っていただいてるんです。
カップルで食べに来ていただいてる方が結婚されて、お子さん連れで来て下さり、
そのお子さんが結婚されて、お孫さんふくめて大家族で毎年ウチの鰻を家族でいただくというのを楽しみにしていただいている常連さんもいらっしゃいます。
それで今までホームページを持とうっていう気持ちにもあまりなれなかったのですが・・・
せっかくクチコミしてくださるお客様が、ホームページがないことで、アドレスを紹介できないと言われて・・・・」

私「ホームページもあんまり上手に作ってお客さん殺到しちゃったらどうしよう(^_^;」

う「夏はご予約いただかないとその日仕入れた鰻がおしまいになった時点で、終了してしまうのでご迷惑をおかけしているんですが、
本当は鰻ブームが去る秋以後の冬の季節に鰻の美味しさを知っていただきたくて、そんなところもホームページやブログで発信できたらいいなと思いました」

私「冬の鰻は硬いというイメージというか、そういう話を聞きますが違うんですか?」

う「鰻も魚なんですよ。魚は冬の方が脂がのって美味しくなるんです。なので実は冬の鰻もすごく美味しいのですが、日本人は夏のスタミナ回復に鰻というイメージが多いみたいですね」

私「そうなんですね!?夏は予約しないと食べられないのですか?」

う「実は鰻をたくさん仕入れて下処理や白焼き状態までしておいてから冷凍しているお店もあるんです。
でもそれだとどうしても臭みが出てしまうので、うちでは生きたまま仕入れた鰻をその日のウチに調理するので、今鰻の値段が上がっているので無駄にしたくないですよね・・それで
その日に提供できる分しか仕入れないのです。
要予約ではありませんが、日によってはその日の鰻が終わってしまうことがあるんです。」


私「この店内素晴らしいですね、古民家改装などで作られたのですか?」

う「古民家建築で有名な建築家さんに作ってもらいました。
鰻屋というとありきたりな感じの民芸調みたいにしたくなかったというか(笑)
季節のお花にもこだわって、毎週お花を市場まで買いに行っています。」

私「季節感あっていいですね!薪ストーブも素敵です」

う「薪じゃなくてペレットストーブなんですよ。冬にも心温まるようにゆっくり鰻を楽しんでいただきたくて」

私「このテーブルの朱塗り?も素敵です」

う「ひとつひとつの家具をこだわっていろんなところから探して来ました。奥の宴会席のテーブルも深い赤の色にこだわっています。
天井は網代細工(あじろざいく)の職人さんが作ったんですよ」

私(上を見上げて)「うわーびっくりです。これって日本の貴重な文化ですね!」



さてさて、そんなこんなで新しくホームページを作るということで、契約していただきまして、写真撮影をさせていただくことになりました。

この撮影が本当に美味しいお料理の連続で、お腹が鳴ってしまい困りました。



一口お味見させて~!(;´△`)
と、言いたかったのですが、お料理は次から次へと出てくるし、
場所セッティング、配膳、照明、小物、撮影した画像確認、次の料理の手配と
アシスタント兼ディレクター(わたしのこと)はやることが山ほどありまして、一瞬たりとも座ってる時間がありません。
しかも、素早く撮影していかないと、お料理はどんどん冷めたり、新鮮さがなくなってきて、シズル感が出なかったりするので、一瞬が勝負です。
ぼやぼやしてるとカメラマンから怒られます。



これは「うなぎまぶし」と言って、俗にひつまぶしと呼ばれていますが、ひつまぶしは商標登録なので、うなはるさんでは、うなぎまぶしというメニューになっています。

秘伝のたれとご飯と鰻の蒲焼きの絶妙なバランスをおひつの上でまぶしてください。
(一)まずはそのまま鰻を楽しみ、
(二)薬味と一緒にうなぎまぶし。
(三)最後は、だしをかけて鰻茶漬けをお楽しみください。



お茶漬けが泣きたいほどの絶品m(__)m



うなはるさんの「知る人ぞ知る」人気裏メニュー、天丼です。
大きな海老が3つものってます。コロモがさくっと軽くて、たれがしつこくなくて、この香りを嗅いだだけでヤラレタ!と気絶してしまいそうになります(大げさ 笑)
まずは美味しい鰻を食べて欲しいですが、2度目の方はぜひこの天丼もお試しください。


そしてにくらしいことに、カツ丼まで絶品なのです。
ご当地のすぐ近所、駒ヶ根市ではソースカツ丼で町おこしをしているので、伊那谷にはソースカツ丼の名店が多いのですが、
ソースカツ丼ではなく昔ながらの卵で煮カツをとじたカツ丼を食べたかったらココ!
正統派カツ丼がいただけます。


うなはるさんのある高森町では、飲食店有志の皆さんで「美味しい高森町を創る!」を合言葉に、「高森町ご当地グルメ検討委員会」が発足。「高森アルプスサーモン丼」が誕生しました。
ニジマスの三倍体の養殖品種であり、純伊那谷産であるアルプスサーモンの鮮やかな赤みが、当町の特産品である「市田柿」の色を連想させることから誕生した、ご当地どんぶりだそうです。
そしてなんと、【全国ご当地どんぶり選手権】で入賞し、東京お台場ビックサイトで来年1月9日から18日迄行われる【ふるさと祭り東京、東京ドーム】に出場できることになりました。


美味しそうな、うなぎ焼きNow!の写真も撮らせていただきました。

食後に珈琲サービスがあり、お店のこまやかな心配りが嬉しいです。


どうしても遠方で食べたいという方のために、お取り寄せページも作りました。

私「鰻の高騰などのニュースで、うなぎ屋さんって大変なんじゃないかと思っていたんですが・・・・」

う「それが案外そんなことはないんですよ。今年の夏も大勢のお客様にご来店いただきました。
もしかしたら、鰻が高くなってスーパーで買おうとしてもすごく小さい中国産の鰻でさえ高くなってしまったので、どうせなら美味しい鰻を食べたいという方が多いのかもしれません」

私「なるほど!それはあるかもしれないですね!
うなはるさんの鰻の特長はどんなところですか?関西風とか関東風とかありますが」

う「実はうちの鰻は蒸してないんです。
蒸してないので、カリッとした鰻が好きな方に喜ばれるのですが、
それなのに、中がふんわりしていると言って驚かれます」

私「はい!!!とろけるような柔らかさで、なのにカリッとしてて本当に美味しかったです」


今回のサイトは特別な仕掛けやしくみは何もなくて、ブログだけは自分たちで更新していきたいというご希望だったので、ブログ部分をWordPressで作りました。
店主さんがiPadなどで更新していけるようにしてあります。
ブログの中身は、オーナーさんの持ち物、お宝ですから、ここを無料ブログツールなどを使うのは本当に本当に勿体ないことです。
アメブロさんやライブドアさんの財産をせっせと殖やしているようなものになってしまいます。
自分のドメインの中で、独自ブログを3年続けたら、3年ぶんのお宝がたまっており、
それは3年分のお宝がないサイトと、3年分のお宝があるサイトと比べたときに、差が歴然とついてしまいます。

うなはるさんでは、団体様の予約も可能です。
奥に12名定員のお座敷があり、高齢の方にも配慮して、今年から椅子席に変えたそうです。
鰻屋さんでも宴会は、うなぎ自体が高いこともあり、ご予算はちょっと高めに用意しないといけませんが、
いろんなうなぎ尽くし(普通は食べられない裏メニュー)をいただけるそうです。
鰻以外のお料理も出ますし、締めの「うなぎまぶし」か「鰻のお茶漬け」はとても好評だそうです。
中には「前菜から締めまで全部うなぎにして!」などというツワモノもいらっしゃるそうですが、相談に応じます・・・・・とのことです。

ご予約はこちら http://unaharu.net/yoyaku.html








ここまでご覧いただいて、気がついていただけましたでしょうか?
ホームページの力ってほぼ、写真が8割なのです。
デザインは全然でしゃばらなくて、返って控えめにしても良いくらい。
このようにwebの森では、ご依頼いただいたお客様に、出来れば写真撮影もさせてくださいとお願いしています。
webサイトに訪れてくださった未だお会いできないお客様に自己紹介するのがホームページですから、ほとんど写真がすべてなのです。
写真が暗かったりぼけていたり、美味しそうじゃなかったりしたら、そんなサイトは逆効果。
返ってないほうが良いですよね。。。。って思います(^_^;

うなはるさんの鰻は、写真の実力以上なので、ぜひ食べに行ってみてください。

山椒の香りがまた溜まらない。。。。。。。







2014年10月26日日曜日

私がおちゃのこカートにした10の理由!

最近ネットショップのお手伝いのお仕事が続いていまして、おちゃのこネット についてかなり詳しく使いこなせるようになったので、その良いところを紹介します。
ちなみにいろんなネットショップASPサービスを使って来ましたが、コストパフォーマンス第一位で、私のイチオシです。
この価格でここまでカスタマイズをさせてもらえるASPはない!と言っても過言ではありません。

オススメな点をあげればきりがないのですが、順不同であげていってみます。

1)HTML5のテンプレートが使いやすい


今年になってから登場したHTML5のテンプレート。
いくつか同梱されていまして、どれでも無料で使えるんですが、どれもおしゃれでシンプルで使いやすいテンプレートです。
私はプロなのでwかなりカスタマイズしますが、初心者の方でも、このテンプレートに、
素敵な画像やバナーを作って登録していくだけで、かなり今風のネットショップができること請け合い。



HTML5なので、つまりcss3との相性もよく、スタイルシートがわかる方でしたら、とてもおしゃれなデザインが可能です。


事例を紹介します






2)ドラッグ&ドロップの配置がとても楽




事例です

3)手作りのナビゲーションOK





4)フッターメニュー部分も自由欄が多い




事例です


5)カテゴリページに個別の説明文やバナーを入れることができる





カテゴリページの事例

事例です。このように自由に作れます



6)カテゴリ分類のほかに、このような別のグループ設定ができます。


これで、値段別グループとか、
用途別グループとか、商品を複数パターンで抽出できます


グループ分類の事例


7)フリーページがいくつでも作れます

フリーページは、会社概要とか、スタッフ紹介など、固定ページとしていくつでも作れます。
メニューへの表示非表示、XMLサイトマップへの出す出さない等、こまやかな設定が可能






フリーページの事例です



8)その他、ネットショップに必要ないろんなコンテンツ作成OK


★ネットショップに当たり前に必要な機能
 人気ランキング
 新着商品
 おすすめ商品

★What's New(お知らせや更新情報などに使える)
★店長日記(ブログ)

★掲示板もついいてる

★メルマガ機能もあり


(事例)Whats Newをお客様の声掲載に利用しています

事例 店長日記を「まくらとふとんの豆知識」という連載に変更

9)カート(カゴ周り)のカスタマイズ


カートのカスタマイズはあまり出来ないのですが、いろんなところに、HTML可能な自由記入欄が用意されているので、これを工夫することによって、
そのお店特有の注意書きや、お客様への提案、サンキューメッセージなどを入れることができます

カートやお問い合せに、アンケートをつけることも可能です
ポイントやクーポンもOK




事例です 会員登録してもらうことをすすめています


10)スマホ向けサイトがきれいに、簡単に作れます


こちらはスマホプランを選択したときに使える、
スマホデザインの管理画面です。スマホプランを選択しただけでは、まったく味気ない写真になってしまうので、
こちらの各項目で、スマホ向けのバナーや、スタイルシートを設定しないといけません。
簡単に作れますというのは少し違うかもしれません。
簡単ではなく、スマホサイトは、PCサイトを作る以上の、ノウハウや技術が必要なので、スマホサイトを知り尽くしたプロの視点での配慮が必要なのですが、それはまた別の機会に書きますね。



スマホサイトの事例です
これは、タブレットサイズでみたときの画面

さらに幅を狭く、スマホサイズにしてみると・・・・



スマホで見た、商品ページ


アフィリエイトリンクになっており、webの森にわずかながら収入になります。この記事が役にたった!というあなたはこちらから登録していただけると嬉しいです。
でも、オススメですよ!というのはウソ偽りなく、本当にコスパ良いので、お試し期間だけでも使って見てください。
お試し期間は毎月20日に終了し、21日から課金が始まるので、1ヶ月まるっとお試ししてみたい方は、21日にお試し登録すると良いと思います。





webの森のFBページへも来て下さい