- 2011.11.24
転換率UPの2つのポイント 事例で見るスマートフォンLPデザイン
■はじめに スマートフォンは従来の携帯電話よりも、精細な画像や多くのテキストでユーザーに商品の魅力を伝えることができます。これまでもスマートフォンだからこそできる、ユーザーの利便性の高いECサイトを取り上げてきましたが、それを実践されているaishipユーザー様の事例を紹介したいと思います。 ●ペアリング屋様(ペアアクセサリー専門店) http://pairj.jp/ 今回、ページを制作された担当 […]
■はじめに スマートフォンは従来の携帯電話よりも、精細な画像や多くのテキストでユーザーに商品の魅力を伝えることができます。これまでもスマートフォンだからこそできる、ユーザーの利便性の高いECサイトを取り上げてきましたが、それを実践されているaishipユーザー様の事例を紹介したいと思います。 ●ペアリング屋様(ペアアクセサリー専門店) http://pairj.jp/ 今回、ページを制作された担当 […]
前回の記事までに、スマートフォン用の画像サイズについてご案内してきました。 「aishipでは240pxの画面をズームして320pxに拡大表示しているため、240pxちょうどの画像だと少しボケる」ということでした。綺麗な画像をスマートフォンで表示させるためには480~620pxの画像を横幅240px指定にして表示させるのがベストです。 ではこのズームをやめてしまうことは出来るのか? 可能です。 a […]
スマートフォン端末でECサイトを利用(商品を購入)する方が急増しています。以下のグラフがaishipの全ECサイトでスマートフォンユーザのECサイト利用比率 [%]を示したものですが、今年1月で1.76%であったスマートフォン端末でのECサイト利用者が10月度で25.3%と今年に入ってから14倍とよく伸びています。 背景にはアンドロイドを中心としたスマホ端末普及でECサイトへ訪問する方が急増し […]
今回もスマートフォンだから出来る便利と思うサイトを紹介したいと思います。スマートフォンはケータイ(従来型携帯電話)よりも利便性が高いものです。それらを活かしたサイト制作を実施してください。なお、具体的なデザイン・技術に関しては、このノウハウ集のカテゴリー別アーカイブ「デザイン・技術」ご参照ください。 ■MensCasual(メンズカジュアル) http://menscasual.jp/ ■スマート […]
前回の記事で、スマートフォン向けサイトの画像についてご案内しました。 480~620pxの画像を横幅240pxに指定して縮小表示させると綺麗な画像を表示することができます。 では、背景画像についてはどうでしょうか? 例えばリンクボタンに背景画像を使用したい場合、通常は下記のようなHTMLとCSSで背景画像にボタンを追加します。背景画像は240pxで作成しました。 aishipの管理画面から上記のよ […]
1. スマートフォンサイトを横向きで見たことありますか? 2. 2つのパターンを見比べてみてください 3. スマートフォンサイトのデザインのコツは“リキッドデザイン” ■スマートフォンサイトを横向きで見たことありますか? スマートフォンでサイトを閲覧する時ほとんどの場合は縦表示が多いと思います。 ですが、スマートフォン向けに最適化されたサイトばかりでないので、中には横表示をすることもあるかと思いま […]
現在までスマートフォンらしいレイアウトの作成についていくつかご紹介してきました。今回は画像についてご案内致します。 最近当サポートセンターへお問合せをいただくことの多い「スマートフォン向けの画像サイズは何pxが最適か?」というご質問ですが、サポートセンターでは「240px~480px程度で作成すると良いですよ」とご案内しています。 これは携帯電話サイトとスマートフォンサイト、両方で同じ画像を表示さ […]
以前の『スマートフォンらしいデザインにするだけで満足してませんか?』の記事の通り スマートフォンの場合、サイトの回遊性を上げるためにボタンの配置など少し工夫をする必要があるのではないか?とありますが、今回は事例も合わせてご紹介させて頂きます。 実際に弊社でもECサイトを運営しておりますがガラケーとスマートフォンでは “購入する場所”が大きく違います。 ガラケーの場合▼ ガラケーの場合ランディングペ […]
前回・前々回の記事ではサイト上で「スマートフォンらしい動き」を実現するためのお話をさせていただきました。今回も引き続きスマートフォンらしい動きを実現するために「表示コンテンツの切り替え」についてお話させていただきます。 皆さんはスマートフォンでサイトを閲覧している時、こんな感じのコンテンツを見かけたことはありませんか? メニューをタッチすると、その下にあるコンテンツが選択メニューの内容にパッと切り […]
■はじめに 「スマートフォンサイトって?今あらためて考えてみる」にもあるように、javascriptの利用は、PCと比べて小さいスマートフォンの画面で、たくさんの情報を効率良く見せるのに最適です。 今回は、javascriptを有効に利用したサイトの事例を紹介します。 ■AKB48 Official Shop( http://festa.tv/q?i=akb48/index&v1=smt_ […]
1.デザイン 2.画像編集 3.シミュレート スマートフォン向けサイトを作成するにあたって、役に立つツールをご紹介いたします。デザインと画像編集に関してはブラウザ上で動作するツールとなっています。インストールする面倒がなく利用できる利点があります。 ■1.デザイン 【CSS3 Generator】 スマートフォンで使われる角丸や影などのスタイルを簡単に作成できるツール。 http://css3ge […]
■PC、モバイル、さらにスマートフォン用のページを作る時間なんてない! 私は仕事上、多くのWebショップの導入相談をされます。 Webショップのオーナー・店長・担当者から数多く寄せられる声は「PCの商品登録・情報更新、LP作成、メルマガ配信に受注処理・・・それだけ時間が無いのに、さらにモバイル・・・その上に、スマートフォン用のページ作成なんて・・・」 このような相談は、本当に多く寄せられます。 そ […]