スマートフォンサイトを表示する

  1. TOP
  2. はじめて相談室 : 第10回 パソコンでレイアウトを選ぶとスマホでの見た目はどうなるの?

エキスパートコラム

はじめて相談室

第10回:パソコンでレイアウトを選ぶとスマホでの見た目はどうなるの?

執筆:#fc0(株式会社エフシーゼロ)

2016年2月8日更新

  • このエントリーをはてなブックマークに追加

閲覧数2,770views

このコラムをPDF形式でダウンロードする

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、「はじめてWEB」でホームページを作成した際、スマートフォンでの見え方について詳しく知りたいという方からのご相談です。

おたより

こんにちは。今年の夏頃に起業予定で準備をしています。
ホームページの作成にもそろそろ取り掛かろうと思っています。
第2回のコラムでレイアウトの話がありましたが、ここで質問です。はじめてWEBのホームページだと、パソコン用とスマホ用を同時に作れちゃうのですか?レイアウトもそれぞれの画面に合わせて選択できるのですか?よろしくお願いします。(にこさんより)

ナビゲーターからの回答

ナビゲーター

こんにちは!はじめてWEBナビゲーターの立花かずみです。
起業準備でお忙しい中、おたよりありがとうございます♪

にこさん、いいところに目をつけましたね。
これからホームページを作るなら、ぜひスマホでの見た目は意識しましょう!近年、スマートフォンでの閲覧率が5割以上になっているホームページも増えています。パソコン用に作ったあとでスマホ対応をしようとすると結構大変なので、最初につくるときに意識するのがベストです☆

では、はじめてWEB(Jimdo)でホームページを作る場合、スマホ対応はどうなっているのでしょうか?パッと見ではわかりづらいところなので、じっくり見ていきましょう。

Jimdoでは「パソコンでの見た目」でレイアウトを選ぶ

2回目の記事でレイアウト(デザイン)の選び方をお話しましたが、ここではずっと「パソコンでの見た目」についてお話をしていました。この理由は、Jimdoでは最初にレイアウトを選ぶ時点ではスマホでのレイアウトの確認ができないからなんです。

でも、Jimdoはスマホ向けのレイアウトにもバッチリ対応しています。
Jimdoでパソコン用のレイアウトを選ぶと、実はスマホ用のレイアウトもセットでこっそり設定されているんです!

スマホ用のレイアウトってどこで見られるの?

セットで設定されたスマホ用のレイアウトは、右側の管理メニューから見ることができます。レイアウトの「プレビュー」状態では確認できないので、一度レイアウトを選択して確定させてから「設定」の「スマートフォン表示」をクリックします。

すると、なにやらiPhoneの画面のようなものが出てきて、そこにページが表示されているのがわかると思います。これが、選んだレイアウトとセットで設定されたスマホ用のレイアウトなんです。

ちなみにこれは「スマホで見たらこんな感じになる」というシミュレーションなので、実際にスマホで見たときとは文字の大きさなどが若干違う場合があります。だいたいこんな感じで見えているんだな、という感じで見てくださいね。

Jimdoのスマホ用レイアウトの重要ポイント

パソコン用のレイアウトを選んだときにスマホでどう見えるのか事前に確認できないのは結構不便ですよね。そこで、Jimdoのスマホ用レイアウトの重要ポイントをお話します。これを先に知っておくと、レイアウトを選ぶときに迷わなくなるかも!

(1) どのパソコン用レイアウトを選んでも、スマホ用のレイアウトはほぼ一緒

実はJimdoでは、パソコン用のどのレイアウトを選んでもスマホ用レイアウトはほぼ同じなんです(一部レイアウトに例外があります。後述します。)。
Jimdoのスマホ用レイアウトの特徴は、おおまかに言うと図のような感じです。

他にも細かなところはあるのですが、だいたいこんな感じです!
※ロゴやページタイトルが設定できないレイアウトもありますが、ここではロゴやページタイトルを入れた場合の見た目を想定しています。

ほとんどのレイアウトについてはこのような見た目になるのですが、「Malaga(マラガ)」「Miami(マイアミ)」だけちょっと違う見た目になります。
※2016年2月1日現在。今後この形のレイアウトがどんどん増える予定だそうです。

この2つのレイアウトについては、管理メニューからではなく「プレビュー」から見た目を確認できます。ちょっとかっこいい動きをしますので、確認してみてください。ちなみにこういった幅に合わせて変わるようなレイアウトのことをレスポンシブ(デザイン)と呼んだりします。

(2) 選んだパソコン用レイアウトによってスマホ用レイアウトの配色が変わる

ということで、スマホ用のレイアウトのパターンはどのレイアウトでもほぼ同じなのですが、レイアウトによって「配色」が変わります。たとえばこんな感じ。主に、メニューや見出し、ボタンなどの色が変わります。

同じレイアウトでも、「プリセット」ごとに色が違う場合があります。プリセットというのはレイアウトの別バージョンのことで、レイアウトや色などが若干違ったりします。各レイアウトの図の場所をクリックするといくつかパターンが出るので確認してみてください。

(3) レイアウトを一度選んだら、スマホ用の配色は変えられない!

ここからが重要です!
現在のJimdoの仕様では、「スタイル」機能を使ってパソコンでの配色を変更してもスマホで見たときの色味は変わらないので、注意が必要です。 最初に選んだレイアウト(プリセット)の色がスマホでの見た目になるので、最初のレイアウトやプリセットに何を選ぶかがとても重要になります。
※レスポンシブ対応のレイアウトは「スタイル」での設定がスマホにも反映されます。

パソコンのレイアウトを選んだら「設定」の「スマートフォン表示」もチェックして、スマホで見たときにどんな色になるのかチェックをするようにしましょう!

まとめ

ということで、今回のにこさんからのおたよりへの回答は次のようになります!

  • Jimdo(はじめてWEB)ではパソコン用とスマホ用のページを同時に作れちゃいます!
  • パソコン用とスマホ用のレイアウトはセットで設定されるので、バラバラに調整をすることはできません

Jimdoはスマホで快適に見えるようになっているのですが、自分で自由に変えられるしくみが多くありません(その分簡単ということも言えるのですけど)。Jimdoでできることできないことを知って、使いこなしていきましょうね☆

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/7/30~2017/8/5]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!