【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

スマートフォンのホーム画面にブックマークアイコンを作る3つのステップ

スマートフォンのホーム画面にブックマークアイコンを作る3つのステップ

130314_04

前回の記事の最後にご紹介した「スマートフォンのホーム画面にブックマークアイコンを作る方法」。3つのステップで簡単に実装することができるので、今回はその方法をご紹介します。リピート率アップにも繋がるので是非お試し下さい。

ホーム画面のブックマークアイコンとは?

ウェブサイトにアクセスし、ブラウザからホーム画面へのブックマークを選択した際に、通常ではサイトのキャプチャが縮小されて表示されます。
通常キャプチャ

これではせっかくホーム画面にブックマークを置いてくれたのに、どのサイトのブックマークか認識することができません。

しかし、ブックマークアイコンを指定するとアプリの様なリッチなアイコンをホーム画面に置くことができるようになります。
ブックマークアイコン

ホーム画面に分かりやすいアイコンを設置することで、リピート率アップやサイトのブランド化にもつながり売上げアップの有効な手段にもなります。

このブックマークアイコンの設定方法は以下の3つのステップで完了です。

  1. 画像を用意する
  2. 画像をアップロードする
  3. ソースをいじる

それぞれ詳細を見ていきましょう。

1,画像を用意する

■用意するもの
アイコンにしたい画像(57px×57px以上)
※正方形以外も可能で自動リサイズされます。
※gif,jpg,png,bmp対応可能

今回は以下の画像を使いたいと思います。
icon

2,画像を専用サーバーにアップロード

画像を専用サーバーにアップロードし、URLを生成します。

3,<head>内にタグを設置

<head>内に以下のリンクを設置します。

<link rel="apple-touch-icon" href="画像パス" />  

アイコンのタイトルは<title>で指定しているものが適用され、角丸は自動でつけられるので、画像作成時には特に気にする必要はありません。他のアイコンと同様、つやだし効果も出してくれます。
ホーム画面に追加

以上です。簡単に設定することが

もしつやだし効果を消したい場合は、

<link rel="apple-touch-icon-precomposed" href="画像パス" />  

を使うことで実現することができます。

このように細部にこだわることで、よりオリジナリティのあるサイトの構築をすることができます。是非ご活用ください。

aiship 上林

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+