メニューバー＞フォト よりアクセスできます。

今回公開させていただきました内容は、中米スペシャルティコーヒー素材調達の旅（グアテマラ、ホンジュラス）およびアフリカ ブルンジで開催されましたCup of Excellence®（新規）の計３本になります。

フォトページに設置してありますそれぞれの画像をクリックすることにより、ダウンロードすることができます。

使い方は、皆様のアイディア次第で色々です。

スペシャルティコーヒーとしてコーヒー豆をご提供するには、素材のクオリティが土台、基礎にあることが条件になる訳ですが、その生産状況を実際に飲んでいただく皆様に垣間みていただきたいと思い作りました。

コーヒーに限らずどんなものでも高い品質を求めるなら、それ相応の手間や労力が必要なのは明らかです。

ただ、ここで申しあげる「品質」とは一般に広く考えられているマスプロダクト（量産品）における図面上の仕様を商品ごとに均一に仕上げるということだけでは少々足りません。

嗜好品であるコーヒーの場合、加えて、より「ユニーク」でありかつ、「質の絶対値が高いこと」の２点が求められると考えられます。

この「ユニーク」さや「質の高さ」こそが、スペシャルティコーヒーの肝であると考えています。

そのためのテロワールといわれる気候、風土などその土地の持った環境条件が問われますし、ユニークさをキチンと表現するためには、入念な生産処理、温度管理が行き届いた輸送手段や消費国に到着してからの保管方法、そして私たちロースターに届いてからの焙煎、抽出方法（クリーンリネスを含む）まですべてが整っていることが必要になってくる訳です。

スペシャルティコーヒーの業界内では、From seed to Cup（コーヒーの種子から、一杯のカップにいたるまですべてが整っていないと、スペシャルティコーヒーにはならない。）とよく言われます。

コーヒーをお飲みいただくユーザーの皆様に、スペシャルティコーヒーの基礎であり、スペシャルティコーヒーの起源でもある生産国の様子をご覧いただくことは大変重要なことと考え、今回フォトブックを作りました。

写真はすべて私が撮影してきたものです。（私自身が写っているCOEの集合写真などごく一部を除く）

よって、プロの方のものは異なり、素人ゆえのイマイチな写真が多いかと存じますが、その点はご容赦いただきたいと存じます。

今後も生産国出張の際には、出来る限り継続していきたいと考えております。

是非一度ご高覧下さい。

お店では、私が直接ご相談に乗らせていただくことができますが、ウェブショップ（通販）ではそうまいりません。 また、スペシャルティコーヒーとして品質の高いものであっても、コーヒーが嗜好品である以上、お客様との商品マッチングを考慮しないということは考えられません。

品質的な点数だけではお客様の嗜好の部分を必ずしも図れないところが、コーヒーが商品として難しく、面白いところでもあります。

指向性、嗜好性の強いスペシャルティコーヒーなら、尚更ですね。

その差をできるだけ客観的に埋めることを目的に設置させていただきましたのが、トップページの商品一覧下に設置してありますFind your favorite の機能になります。（トップページ以外のページの右サイドバーにも設置してあります。）

また、ご来店の際の下見的なものとしてご活用いただくことも可能です。

あくまで目安としてのサポートツールであり、店頭でのご相談と全く同一のものにはなりませんが、お選びいただくコーヒーのヒントになるような設計いたしましたので、是非ご利用ください。

Find your favoriteの使い方はとてもシンプルです。

①まず、左側のボタンでコーヒー豆をお選びの際に優先度の高い項目を選び

②次に右側ボタンにあ らわれる数字や項目内容を選んで

③検索ボタンを押すだけです。

＊項目を追加したい場合は、中央の＋ボタンを押すことにより、いくつでも追加することができます。（追加項目が多いほど、選ばれるコーヒー豆は少なくなるか、全く選ばれなくなる場合もあります。）

項目数は、１つか、２つ、３項目まで程度が良いと思います。 是非一度、以下のFind your favorite デモをお試しください。

最初のうちは、各項目でどのような変化があるのか、コーヒー豆の何が変わるのかなど分かりにくい点もあるかと存じます。その場合はより詳しい使い方をご高覧ください。

トップページ＞ヘッダー下のメニュー＞WEBショップ＞Find your fovoriteの使い方 をご参照ください。

Find your favorite

カンタンな使い方は、トップページの”Find your favoriteのテキスト文字 を直接クリックしていただきますと以下の画像のようにポップアップ画面による説明が立ち上がります。

こちらもご参照ください。

と言っても、私はこういう風に表示させたいというようなアイディアとディテールの追い込みを考えるだけで、実際の作業は専門の方にやっていただいているのですけども。

今回で、Ver.2.2という感じでしょうか。

トップページのウェブショップ、メニューバー＞ウェブショップ（商品一覧ページ）のいづれのページでも、商品のタイル状ブロックにマウスオンしていただきますと、「黒い透明なレイヤー」が現れ、そこにコーヒー豆の情報が表示されるようにしたのが、前回までの変更です。

今回の改良は、コーヒー豆を同時に比較検討、購入までをしていただけるように、レイヤーを固定するスイッチ（オン、オフで色が変わります）、バリエーションを選択ボタンを付加しました。

デフォルトの状態では、ブロックタイルにマウスオン、オフだけでレイヤーの表示有無の切り替えができますが、固定スイッチをオンにすることにより任意のレイヤー常時固定表示することもできます。

もちろん、こちらのレイヤーからさらに商品詳細ページに飛ぶこともできます。

マウスオンもしくはタップしますとレイヤーが現れます。

また、表示項目はスクロールすることにより、レイヤー内でコーヒー豆のスペック全項目閲覧することができるようにいたしました。（PCではスクロールバーをお使いください。モバイルではスワイプで操作できます。）

表示はPC、スマホ、タブレットでほぼ同じように動くよう設計してありますので、是非一度お試しください。

以下の画像は、ウェブショップ（商品一覧ページ）で３つの商品のレイヤーを固定させた例です。

青いデザインの今年の４月以前のウエブサイトをVer.1.0とするなら、現在運用中のデザインはVer.2.0にあたりますので、さしずめ今回の改良はVer. 2.1といった感じでしょうか。

主にユーザビリティのちょっとしたチューニングになりますので、ぱっと見の変化は少ないと思います。

よく訪れていただく方は、あれ？気付くというレベルのものです。

しかし、このちょっとしたことで、使いやすさやエクスペリエンスが大きく変わることがありますので侮れません。

かなり作り込んだつもりのウエブサイトでありましても、時間の経過とともに手直しや小変更をしたいところが浮き上がってくることがあります。

弊店のウェブショップでコーヒー豆をお買い上げいただく皆様に快適にお使いいただけますよう、本ウエブサイトはこれからも改良を続けます。

メンテナンスモード中、お客様にはご不便をおかけいたしまして誠に申し訳ございませんでした。

今回のリニューアルですが、以前のホームページのテーマデザインをベースに、デザイン細部の見直しを図りました。

また、お客様がお使いいただく際のウエブショップのさらなる使い心地の向上、セキュリティ性能の向上を目的にショッピングカートのシステムを入れ替えました。

＊アカウント登録をしていただきましたお客様には再度ご登録が必要になります。（旧ショッピングサイトのデータベースは一旦確実に、安全に消去させていただいております。）お手数をおかけいたしまして、誠に恐れ入ります。

デザインテーマは同じものを使っているのですが、色味を変え、アイコンやボタンなどのデザインの考え方も変えましたので、全体的な印象としては新しいデザインのように見えるかもしれません。

クリーンでモダンなデザイン、機能的にスマートなホームページを目指しました。

また、今回のリデザインにともない付加したツールの一つとしまして、Find your favorite　という商品絞り込み検索の機能を設置しました。（トップページ＞商品ブロック下、商品詳細ページなどのサイドバーに表示しました。）

商品詳細ページの商品データと連携して動くしくみになっております。

他にも、ウエブショップの中身など、色々と変更点はあるのですが、後は皆さんに色々とさわっていただいてお楽しみいただけたらと思います。

ホームページに関しますご意見、ご希望はどしどし募集中です。ご遠慮なくお申し付けくださいませ。

マグノリアコーヒーロースターズのホームページ、ウエブショップを今後ともよろしくお願い申しあげます。

簡単なご利用方法をご案内させていただきます。

ショッピングカートで簡単にお買い物をしていただけます。

WEBショップへのアクセス方法の一例を以下にご案内させていただきます。

①トップページスライド画像上のメニュー 　WEBショップ（マウスオン）＞ドロップダウン項目から 、入口／商品一覧ページへ。

②トップページのスライド画像をクリックしても入口／商品一覧ページに入れます。

③トップページ スライド画像下の、原則としてブロック表示されている写真コーヒー麻袋やバキュームパックはWEBショップアイテムですので、そちらをクリックすると各コーヒー豆のお買い物ページへ遷移することができます。

④WEB ショップ用のコンテンツには、タイトル前に“WEB SHOP“の表示がされています。

⑤ショッピングカートによるお買い物ができます。

⑥ショッピングカートの中身の価格（入っている場合）は、ヘッダーの右上にもカートロゴと一緒に常時表示されます。

・ネットショッピングの安全性を高めるため、カード決済プロセスも含みすべて暗号化通信（SSL)を用いて行われます。

・カート内でアカウントをお作りいただくことによりまして、次回以降のお買い物の際の入力を大幅に省くことができます。

アカウント登録時のパスワード等は、安全性を高めるため、暗号化(SSL)され直接サーバーに送られます。

⑦お買い物の際、アカウントをお作りいただきますと、お客様専用のマイ アカウントページにログインするこで、
ご購入履歴の閲覧、住所などのご変更をしていただけます。前回ご購入いただきました豆を確認いただけるなど便利です。

決済方法について： 

・ヤマト宅急便代引き決済、三井住友銀行へのお振込、郵便振替の他、PayPal™による各種クレジットカード（WEBショップのみ）　　　　　　　　　がご利用いただけます。

　配送料金、お支払い方法の詳細につきましては、こちらまでどうぞ。

当ウエブサイトで、ショッピングカートによるお買い物が可能になりました。

各コンテンツのタイトルに “WEB SHOP”の表示があるものが、WEB SHOPのコンテンツになります。

お買い物の際、一度アカウントの登録をしていただきますと、次回以降のお買い物の際の入力が大幅に省くことができます。

WEBショップのご利用方法詳細はこちらをご参照ください。

詳細と申しましても、一般的なネットショッピングサイトと何ら変わることはございません。

出来る限り、シンプルな操作でショッピングいただけるように心がけました。

また、今までの決済方法に加えWEBショップ経由のご決裁につきましてはPayPal™による、各種クレジットカードをお使いいただけるようにいたしました。

PayPal™はとくに海外からネットショッピングでお買い物をされた方など、一度はご利用されたことがあるのではないでしょうか。最近では、国内のネットショッピングの決済にも使われるようになってきております。

カード決済も含めてWEBショップを構築するにあたり、色々と試行錯誤したのですが、今回は一番シンプルな運営方法をとっております。

例えば、違和感なくお使いいただけるように、お客様からみたときには、今までのコーヒー豆の説明コンテンツ（記事）のページがそのままネットショッピングのコンテンツになるように構築しました。

WEBショップのコンテンツ表示例

まだ品目は少ないですが、器具なども含めテスト検証し、厳選したものを少しづつ増やしていきたいと思います。

従来のFAX注文、メールによるご注文も平行して受け付けております。

これからも、マグノリア コーヒーロースターズ WEBショップをよろしくお願い申しあげます。

＊安全性を高めるため、WEBショップのアカウント登録、クレジットカードなど個人情報にかかわるプロセスはすべて暗号化通信(SSL)によって運用されております。

モバイル端末の小さく限られた画面で、各コンテンツを見やすいレイアウトに自動的に可変するしくみです。

例えば、PC画面 トップページに表示される「スライド画像」や「最新記事投稿トピック」、「FLICKRウィジェット」、「SHOP SCHEDULE（営業カレンダー）」などはスマートフォンでは省略され表示されず、メインの記事コンテンツのみ表示されます。

しかし、カレンダーなど営業に関する情報は来店前のチェック事項として、スマートフォンでも表示して欲しいという方がいらしゃると思います。

通販やご来店のお客様などご活用されることが多いと思われますトップページ スライド画像下に設置してありますSHOP SCHEDULE（営業カレンダー）がスマートフォンでどこに表示されているか例にとってみてみましょう。

スマートフォンで弊店のホームページを表示しますと、サイドのカラムが省略され、センターのみ一列配置になります。

PC画面では横方向に並んだグリッドデザインされた各コンテンツ（記事）の見出しが、スマートフォンでは縦方向に一列に並び、下へスクロールしていきますとコンテンツがある限り、無限にスクロールしていきます。

この状態では、フッター（末尾コンテンツ）は一瞬表示されるだけで、すぐにスクロールされ、記事がどんどん現れるのと同時に消えていってしまいます。

フッター部には、

・SHOP SCHEDULE（営業カレンダー）

・営業情報(営業時間、定休日、TEL番号など／ツータップでTELかけられます／メールアドレス）

・アクセス情報（住所、pdf地図／ワンタップでGoogle Mapにもアクセス可能）などが表示されています。

この部分をスマートフォンで表示するために簡単な方法は、トップページ＞画面右上に設置してあるメニューボタン（三本線ボタン）をタップ、

以下のように、各コンテンツ・メニュー（PC画面のメニューバー相当）が展開されます。

右側に▼マークのあるメニューは、下層コンテンツがありますので、タップすることでさらに展開します。

この中から、例えばメニューボタン＞メニュー＞お問い合わせ　などの記事が少ないコンテンツにアクセス（お問い合わせでなくても、記事数がすくないページであればどこでもok。例えば メニュー＞ご案内＞アクセス　などでもOK ）

そうしますと、１ページのコンテンツが少ないので、自動的にスクロールはせず、下方向へスワイプしていただきますと、フッターが現れます。

ここにコンテンツごとに拡大表示された

・営業カレンダー（SHOP SCHEDULE)

・アクセス地図(PDF/Google Maps)

・営業情報（営業時間／定休日／TEL/FAX/Mail）

などの情報がありますので、ご参考にされてください。

以下がスマートフォンで表示したフッターです。

＊尚、PCページ、スマートフォンページ両方に常時表示されます「画面右下の青色の上向き矢印」（以下の画像でも確認できます）ですが、これをクリック、タップしていただきますと一気に最上部へスクロールし、デフォルトの位置に戻ることができます。

無限スクロールで、ページを大きく下にスクロールしていった際に便利です。