スマートフォン表示用のテンプレート

Jimdoのスマホ表示用のテンプレート(レイアウト)とカスタマイズ・編集方法をご紹介します。

 

今やスマートフォンは大人1人が必ず1台は所有しているといっても過言ではない時代です。

近年、携帯電話がスマホ化&高性能化したことにより、パソコン用ホームページをスマホからでも簡単に閲覧できるようになりました。そのため、サイト運営者側においてもスマホから流入して来る訪問者を見過ごすわけにはいかなくなってきました。業種にもよりますが、スマホからのアクセス割合が全体の50%を越えるサイトも珍しくはないはずです。

 

また、Googleがモバイルフレンドリー・アルゴリズムを2016年5月から強化したため、今後はスマートフォン対応していないサイトの検索順位は目に見えて変動していくものと思われます。

(SEO対策上でも死活問題になってきます)

 

そこで、当サイトでは「モバイルサイトをなんとかしたい」という方のお役に立てないかと思い、当記事を作成しました。スマホ用ホームページの作成・編集に是非、ご活用ください!

 

さて、ここからの記事は下記のような方にオススメです。

  • 無料テンプレートを使用中でスマホ用テンプレートも見栄え良くしたい
  • 独自レイアウト全体をレスポンシブWebデザインにするのが煩雑で難しい
  • スマホからの訪問者にPC版サイトも見せられるボタンはあったほうがいい
  • 新レイアウトでの完全レスポンシブ化があまり好きになれない
  • 旧レイアウトでのスマホ表示をカスタマイズしたい

1. スマートフォン表示を有効にするには

スマートフォン表示ではモバイル端末(iPhone,Android)からのアクセス時に表示する画面を設定できます。

スマートフォン表示にする手順

1. 独自レイアウト(または旧レイアウト)を選択している状態から管理画面の「設定」へと進み、「モバイル」の「スマートフォン表示」をクリックします。

スマートフォン表示をクリック

2. レイアウトの選択画面が表示されますので、右上の「スマートフォン表示」を「オン(有効)」にして好きなレイアウトを選択します。

 

スマートフォン表示のオン/オフ切り替えスイッチ
【スマホ表示はONが推奨】


3. 最後に左下の「保存」を押せばそのレイアウトがスマートフォン表示で適用されます。

 

最後に保存を押す

2. スマホ用テンプレートの種類

現在、Jimdoでスマホ向けに利用できるテンプレート(レイアウト)は、13種類あります。

そのどれもが個性あふれるデザインとなっており、中にはヘッダー画像を付けることが出来る物もリリースされています(旧レイアウトではPC表示のヘッダー画像がデフォルトで表示されます)。

また、各テンプレートの名前が「one、two、three」などの英数字読みになっている(苦笑・・)のも特徴的です(Jimdoの管理画面内で任意のテンプレートにマウスオンすると分かります)。

下記画像の並び順は、選択画面内での表示位置と同じにしています。

 

One

テンプレート「One」

Thirteen

テンプレート「Thirteen」

Twelve

テンプレート「Twelve」


Eleven

テンプレート「Eleven」

Ten

テンプレート「Ten」

Nine

テンプレート「Nine」


Eight

テンプレート「Eight」

Seven

テンプレート「Seven」

Six

テンプレート「Six」


Five

テンプレート「Five」

Four

テンプレート「Four」

Three

テンプレート「Three」


Two

テンプレート「Two」

3. スマホ用テンプレートを使うメリット

メニューの表示が分かりやすいテンプレートがある

Jimdoのスマホ用テンプレートではメニュー・ナビゲーションボタンが横長で気づきやすい場所に設置してあるものが5種類あります。

 

メニューが分かりやすい位置にあればクリックされやすく、サイトの回遊率も上がるのでSEO施策にも効果的です。

 

もちろん、隅っこに三本線のアイコンが表示される「ハンバーガーメニュー付き」も選択できますが、高齢の方にとっては見づらい配置だと思うので個人的にはあまりお薦めできません。

 

分かりやすい開閉式メニュー
【便利な開閉式メニュー】


スマホからでもPC版サイトの閲覧が可能

どのレイアウトにもフッター部分には「パソコン版で表示」と記載された切り替えボタンが実装されています。

このボタンにより、スマホ利用者がタップするだけでスマホでも任意にPCサイトを閲覧することが出来ます。

このページを読んでいる方の中には「スマホでもPC版サイトを見たい」と思ったことがある方が少なからずいらっしゃることでしょう。

 

パソコン版サイトを表示できるChangeviewボタン
【便利なチェンジビュー・ボタン】

表示切替ボタンはまさにそのような方にとっては大変便利な機能なのです!

個人的にはモバイルユーザビリティーにおいては大事な機能だと考えます。

ところで、このユーザビリティに関して検索したところ下記の記事を見つけました。読んでみると結構面白かったのでご紹介します。高齢化社会である日本にとってあるべき姿の一つだと痛感しました。

 

年寄りを困らせる「レスポンシブWebデザイン」|日経BPコンサルティングスタッフルーム 

4. スマホ用テンプレートを使うデメリット

完全レスポンシブデザインには非対応

Jimdoでは、スマホ用のテンプレートは完全なレスポンシブWebデザインには対応していません。そのため、スマホとタブレットからのアクセスで表示されるデザインはどちらも基本的には同じものとなってしまいます。

また、画面の横幅(ブラウザのサイズ)が広いタブレット端末では、かなり横長で余白が目立つレイアウトが表示されます。(この問題への対策はいずれ別の記事にて解説します)

5. スマホ用CSSの編集方法(使い方)

さて、いよいよここからはカスタマイズ関連のお話に入っていきます。

以下、Jimdoのスマホ用テンプレートでスタイルシートを記述・編集する方法を解説します。

 


1. 独自レイアウト(または旧レイアウト)を選択している状態から管理画面の「設定」へと進み、「モバイル」の「独自レイアウト(CSS)」をクリックします。

使い方(1):「モバイル>CSS」をクリック

2. 次に、「スマートフォン用レイアウトをCSSで編集」にチェックを入れて任意のCSSを記述します。スタイルの開始タグ<style type="text/css">と、終了タグ</style>の記述は不要です。

使い方(2):チェックマークを入れてスタイルを指定する

3. 最後に左下の「保存」ボタンを押せば即座にスタイルが反映されます。

※すぐ右側のプレビュー画面でレイアウト全体を確認できます。

使い方(3):最後に保存ボタンを押せば完了

6. Jimdoのスマホテンプレートをカスタマイズする

では、次回からは数回に渡り、Jimdoのスマートフォン表示用テンプレートを実際にカスタマイズしていきます。ぜひ、ご覧ください!

使用テンプレートは使いやすさ&カスタマイズの容易さなど総合的な観点から、「Three」をサンプルとすることにしました。 

もちろん、他のテンプレートでもそのまま利用できるCSSもありますので、ご自身で色々と試してみてください。

 

カスタマイズ・目次

カスタマイズで使うサンプル・レイアウト
テンプレート「Three」

番外編:Jimdo以外でスマホ対応している会社

Jimdoの記事ばかりを書いていると視野が狭くなってしまいそうなので、Jimdo以外で簡単にHPが作成できてスマホ表示にも対応しているサービスはないかと探してみたところ、ありました。

 

Goope(グーペ)という日本生まれの会社です。

調べてみると、インターネット事業を色々と手掛けているGMOグループの一員で知名度もあるみたいです。

グーペのトップページ

ここのモバイル表示は、PCで作成した情報がスマートフォンでも自動表示されます。これはJimdoと同じ。

 

ただ、Goopeでは個別にスマホサイトを編集する必要がないくらい洗練されたデザインが揃っていると思います。

 

各テンプレートのスマホ表示のされ方は事前にプレビューで確認できます。

 

気に入ったデザインを見つけたら納得してから「はじめる」という事ができるわけです。

 


カラーミーショップのトップページ

一方、グーペの姉妹サービスとしては、

「カラーミーショップ」があります。

 

豊富な決済手段や配送設定、ショップ内検索・API機能なども揃っており、あまり言いたくはありませんが(笑)、ネットショップとしての機能はJimdoを凌駕してます・・。

 

なので、すぐに本格的なショップ運営をしたい方には向いているかと。

 

この機会に両社が提供している各種機能を比較検討してみるのもアリかも知れませんね♪