Monthly Archives: 3月 2015

  • 0

カフェサイト厳選組の厳選評価コメント【カフェミエル – cafe miel -】

chart_zakka_307
■キャプチャ画像引用元:http://www.cafe-miel.jp/

レトロな雰囲気の画像をメインに、アンティーク空間やフードメニューが分かりやすく掲載されています。
綺麗で見やすいサイトになっているのですが、画像がほぼ100%を占める割合(テキストもすべて画像化されている)で使用されているため、検索効率が非常に悪いことが予想されます。検索してこのサイトを探すには、店舗名で検索する以外に方法は無いでしょう。

それを分かった上であえてそうしているのであれば問題ありませんが、対策を施すのであれば、一部の文章をテキスト形式にしたり、せめて画像に「Alt属性」を付けるなど検索エンジンに配慮した構成も必要かと思います。

本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>


  • 0

カフェサイト厳選組の厳選評価コメント【沖縄のカフェ・スイーツ(マジカシ)】

chart_zakka_308
■キャプチャ画像引用元:http://www.majikasi.jp/

大きな画像スライドと、jQueryのfancyboxを利用したメニュー紹介が印象的です。
パーティープランの紹介では、その場の情景がイメージしやすい写真がいくつも配置されていて分かりやすいですね。

各メニューの値段が載っていないことと、サムネイル時の画像の文字が見えないくらいに縮小されてしまっているのが残念。ポップアップ時の画像とサムネイルは別の画像を配置することで画像文字の見えにくさを改善できるのではないかと思います。

本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>


  • 0

カフェサイト厳選組の厳選評価コメント【jamcafe】

chart_zakka_306
■キャプチャ画像引用元:http://jamcafe.jp/

トップのヘッダー画像は最近のサイトに多いスライドタイプではなく、ブラウザサイズを拡大すると「Delight Your Time」というキャッチとは別のレイヤーの背景画像のみが拡大していく、という変わった仕組み。
またもやこのサイトでもWordPressが活躍しているのですが、NEWSの枠もレスポンシブと思いきや、そうではないところが不思議でした。
透過のメニューボタンがページ上部に固定されていることで使いやすさが向上されていると思います。

【さらに踏み込んでみてみると・・・】

ナビメニューやフッターにモスグリーン系のサイトカラーを取り入れて統一感を出していますが「ACCESS」のマップ にまでサイトカラーを導入し、一味違った地図となっています。
各方面からカフェまでの行き方が、ポイントごとの写真付きで説明されていて面白いですね。
写真を見ながらその道順を歩いてみたくなります。

gen_mid102

プログラム内部のsns用のメタタグでは、必要以上に大きな画像を複数指定しているようですが意味があってのことでしょうか。
必要でなければ、指定画像を1つに絞って最適化する方法も良いかもしれません。

本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>


  • 0

カフェサイト厳選組の厳選評価コメント【てんカフェ】

chart_zakka_305

■キャプチャ画像引用元:http://tencafe.jp/

モノトーンのロゴ・メニューボタン・テキストの中に写真が入ったシンプルな構成。それなのに簡素な印象は無く、充実した気分にさせてくれるのは、クオリティの高い写真の数々をバランス良く配置しているセンスの賜物と言えるかもしれません。
「シンプルイズベスト」という言葉がピッタリのサイトではないでしょうか。
いえ、「シンプルイズベスト+α」とも言えるでしょう。
メニューボタンのcss装飾として、マウスオーバーに合わせて1本の線がさりげなくアニメーションする様はユーザーを飽きさせない要素として大きな役割を果たしていると思います。

【さらに踏み込んでみてみると・・・】

マップは大きく分かりやすく、来店の際のちょっとした注意事項なども記載され、実店舗の写真も掲載されてイメージしやすい工夫が成されています。さらにはブラウザ全体で確認したい場合のGoogleMapへのリンクも有り、住所や営業時間等の基本情報、駐車場台数もしっかり記載。至れり尽くせりの案内となっています。
ここまで余すことなく掲載されているページは意外と少ないもので、マップページ制作のお手本になる部分ではないかと思います。

gen_mid103
このサイトの構造は、レスポンシブWebデザインに比較的改編しやすいと思います。
シンプルな文章の中に写真がドン!と載っている構成のサイトは、複雑な枠組みを持たないため、
cssをちょっといじるだけでレスポンシブに改編できる可能性が高くなりますので、手を加えてみても良いかもしれませんね。
レスポンシブWebデザイン:PCに限らずタブレットやスマートフォンなどあらゆるデバイスに対応した画面(見やすいレイアウト)を1つのhtmlファイルで表示できるデザイン。

本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>


  • 0

カフェサイト厳選組の厳選評価コメント【Pillar Cafe(ピラーカフェ)】

chart_zakka_304

■キャプチャ画像引用元:http://pillar-cafe.net/

カフェ利用者に自転車を無料レンタルする面白いコンセプトのカフェで、その様子(店内や料理、外での楽しい風景)がギャラリーページの沢山の写真からも伺えます。
ベストなアングルで撮影された鮮やかな料理の写真も食欲をそそります。
数行の商品説明も加わって、さらに食べてみたい感が増してきます。
写真が付いていないメニューは、テキスト流し込みのようになっているので、商品ごとに改行を加えるだけでもっと見やすくなるかと思います。

【さらに踏み込んでみてみると・・・】

「空席情報」として、Googleカレンダーを掲載し、イベントの予定などと合わせて確認できるよう一工夫されています。
gen_mid102
「○」「×」「△」の表記が何を意味するかを記載すると、さらに分かりやすくなるのではないでしょうか。
導入されている「Google Analytics for WordPress」で、各ページのアクセス解析に加えて、「空席情報」ページへのアクセスと実際の予約状況などの関連性を分析してみると良いかもしれません。

本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>


  • 0

カフェサイト厳選組の厳選評価コメント【ハンモックカフェ マヒカマノ】

ハンモックカフェ マヒカマノ、厳選組レーダーチャート
■キャプチャ画像引用元:
http://mahikamano.com/

ロゴやボタンなど、写真以外のパーツはシンプルなカラーで仕上げられた圧迫感の無い親しみやすい印象のサイトです。
カスタマイズ性の高いブログアプリケーションである「WordPress」を上手く利用した例と言えるかもしれません。
「ACCESS」ページでは、手書き風のおおざっぱな地図と、Googleマップが載っていて、意外とこういうパターン(2パターンの地図を乗せる方法)のほうが分かりやすかったりしますので、初めて訪れるお客様は助かるのではないでしょうか。

【さらに踏み込んでみてみると・・・】

サイトを構成している機能の多くは、母体となるWordPressを経由して導入されたプラグインがメインとなり、
そのせいでcssのリンクも多くなってしまっているようです。

gen_mid103
プログラム内のヘッダーリンクを見直して、まとめられるものは1つにまとめるか、common.css等で指定し
スッキリさせたほうが良いかもしれません。

フードメニューがテキストのみなので、料理の写真が掲載されるともっとイメージが沸いてくるでしょう。
「写真通りに料理を作らない場合がある。」などの事情があるとすれば、料理のイラストでも掲載できれば好印象だと思います。

本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>


  • 0

カフェサイト厳選組の厳選評価コメント【Urth Caffe(アースカフェ)】

chart_zakka_302
■キャプチャ画像引用元:http://www.urthcaffe-japan.com/

カフェらしい配色と、メリハリのあるデザインで信頼性の高い印象を受けるサイト。米国にも出店されていることが影響してか、海外テイストも交えた魅力のあるサイトになっていると思います。
「ショップ情報&メニュー」の各店舗の「Menu」をクリックすると、店舗でメニューを広げているかのようなデザインのメニューページが展開。
商品名も、写真も値段もすべてが分かりやすく配置されて、メニュー掲載の見本としたいデザインだと思いました。
「Location」の地図は周辺の主要部分だけを表した地図画像と、詳しく見たい人用のGoogleMapが用意され用途に合わせて地図を選択できる親切設計が好印象です。

【さらに踏み込んでみてみると・・・】

トップページのスライド写真のjQueryには、透過のロゴ画像を被せ、スライドコンテンツの動きをより一層引き立てています。
各ページの文章は、画像形式の文章とテキスト形式の文章をバランス良く配置し、効果的にそれぞれの役割を果たしていると思います。
フッターメニューがもう少し分かりやすい形だと各ページにアクセスしやすいかもしれません。
本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>


  • 0

カフェサイト厳選組の厳選評価コメント【Thrush cafe(スラッシュカフェ)】

chart_zakka_301 ■キャプチャ画像引用元:http://www.happo-en.com/restaurant/thrushcafe/
「八芳園」サイトの下階層にあたるサイトですが、端末を選ばないレスポンシブデザインで、ビジュアルも含めてしっかり作り込まれています。
日本語文章の下には英語に翻訳された文章が配置され、PCモニタでは写真と文章が横並び、モバイル端末では縦並びに段落が編成される仕組みで、どの端末からも見やすく分かりやすいデザインです。
画像による凝った装飾は無いのに、リアリティーのある写真と、丁度良い文章の配置バランスがサイトの安定感に繋がっていると思います。
「MENU」ページの、(ページ内で)開いたり閉じたりできるメニュー表示がとても分かりやすく使いやすいですね。 お手本にしたい機能やデザインが随所に見られます。

【さらに踏み込んでみてみると・・・】

スマホ等の端末でアクセスすると、メニューデザインが変わって丁度良いサイズで整列し、写真と文章が縦並びになり、スクロールして読み進めることができます。
gen_mid102

1点だけ気になるところは、レスポンシブWebデザインにありがちなヘッダー画像の読み込みロスです。
大画面ブラウザ用に読みこんでいる大きなヘッダー画像が、モバイル端末の画面でも(ほぼ表示されないにも関わらず)読みこまれてしまっているようなので、そのぶん表示にも時間がかかり、無駄なデータをDLしてしまっていることになります。
しかも各ページそれぞれに違うヘッダー画像が設定されているのでデータ取得の負担も大きいのでは? PC(光回線)でも、一般的なサイズのヘッダーと比べて読み込みに時間がかかるようです。 どうせ読み込むのであれば、モバイルの画面でもその画像がリサイズで表示されるように設定したほうが打開策になるかもしれませんね。

本コメントは、「厳選組」の独自の視点に基づいた評価コメントであり、対象サイトの運営や構築内容に関して何ら保障するものではありません。

【カフェサイト厳選組】>>