スマホレイアウト アーカイブ - なまはげブログ https://namahagedesu.com/tag/スマホレイアウト/ 生まれは秋田のWeb制作フリーランス。 主に当ブログではWixのサイト制作を分かりやすく発信しています。 Sun, 24 Mar 2024 23:44:39 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 Wixでサイト作成を実演！【実際に編集している様子を動画で解説】 https://namahagedesu.com/wix-explanation-video/ Sun, 24 Mar 2024 08:24:42 +0000 https://namahagedesu.com/?p=1766

ノーコードでホームページが作成出来るWixは、実際に使用してみても分からないことが多いです。私も初めてWixでサイトを作成してみたときは、まず何をしてよいかが分からず、どういった操作をすれば自分のイメージしているパーツが […]

投稿 Wixでサイト作成を実演！【実際に編集している様子を動画で解説】 は なまはげブログ に最初に表示されました。

]]>

ノーコードでホームページが作成出来るWixは、実際に使用してみても分からないことが多いです。
私も初めてWixでサイトを作成してみたときは、まず何をしてよいかが分からず、どういった操作をすれば自分のイメージしているパーツが作成出来るかにめちゃくちゃ苦戦しました。

この記事ではSTEP1〜STEP3の順に解説し、1つのホームページを完成するまでの実際の作業の様子を動画で解説していきます。
・STEP1→Wix質問から作成
・STEP2→Wixテンプレートから作成
・STEP3→白紙テンプレートから作成

すべての動画を視聴した頃には、簡単なホームページは1から作成出来るイメージが掴めるでしょう！

STEP1　Wix質問から作成

動画は1.5倍〜1.75倍の再生速度がオススメです。
※1からオリジナルでサイトを作成したい方はSTEP3から視聴をして下さい。

Wixの質問に答えて、生成されたサイトを編集して完成させる内容です。

動画を視聴してみる　※クリックで開けます

STEP2　Wixテンプレートから作成

WIXの豊富なテンプレートから編集して、サイトを完成させる内容です。

動画を視聴してみる　※クリックで開けます

STEP3　白紙テンプレートから作成

1からすべて自分でサイトを完成させる内容です。
テンプレートのサイトを編集するのも良いですが、基本的にお客さんのサイトを作成する場合などはこちらの対応となります。

STEP3の動画ではポートフォリオページの「架空レストランHP」を作成しています。

あわせて読みたい
ポートフォリオ このページではWixで自作したサイトを掲載しています。ご覧いただけたら嬉しいです。 架空レストランHP 架空ホームページ制作会社LP 架空インテリア小規模ECサイト

TOPページ作成

動画を視聴してみる　※クリックで開けます

下層ページ作成

動画を視聴してみる　※クリックで開けます

スマホ版作成

動画を視聴してみる　※クリックで開けます

まとめ

ここまでの動画の内容を見ることで、実際に作業している様子からWixで1からホームページを作成出来るイメージが掴めたと思います。
この記事を参考にオリジナルのホームページをぜひWixで作成してみてください！

投稿 Wixでサイト作成を実演！【実際に編集している様子を動画で解説】 は なまはげブログ に最初に表示されました。

]]> Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 https://namahagedesu.com/wix-mobile-edit/ Mon, 13 Feb 2023 10:31:10 +0000 https://namahagedesu.com/?p=1210

WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。 Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、Wixでもスマホ時のレイアウトを調整する必要があります […]

投稿 Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 は なまはげブログ に最初に表示されました。

]]>

WixでPCのレイアウトを完成させただけではサイトは完成とは言えません。

Webサイトではレスポンシブ対応という画面幅を変えた時のサイトの見た目を調整する工程があり、Wixでもスマホ時のレイアウトを調整する必要があります。

タブレット・スマホで見た時もサイトの見た目が良くなるよう、スマホ時のレイアウト調整のポイントをこの記事で解説していきます！

モバイル最適化

早速スマホ時のレイアウトを調整していきましょう！

まずはじめに「モバイル最適化」を行いましょう。
編集画面上にある「設定」→「モバイル最適化」を選択し、「モバイル最適化を有効にする」にチェックをいれます。

「設定」→「モバイル最適化」
「設定」→「モバイル最適化」
「モバイル最適化を有効にする」にチェック
「モバイル最適化を有効にする」にチェック

有効化することである程度、自動でスマホのレイアウトの見た目を調整してくれます。

モバイルツールの設定

続いてモバイルツールの設定をします。
編集画面左のツールバーに「モバイルツール」があるので選択。

モバイルツールの設定

モバイルツールでは下記の設定と編集ができます。

  • モバイルアクションバー
  • 「トップ」へ戻るボタン
  • ウェルカム画面
  • スタイルカラーを見る

スマホ時のレイアウトではよく使うパーツなのでサイト内に設定したい場合は編集をします。
編集方法は以下の記事で詳しく解説していますのでどうぞ。
→参考 : Wix モバイルツールの使い方！【トップへ戻るボタンやウェルカム画面などスマホでよく使う設定を解説】

非表示になっているパーツを表示

モバイル最適化などを行うと、PC時で表示されていたパーツが自動で非表示になる場合があります。
編集画面左のツールバーに「モバイル上で非表示」があるので表示したいパーツがある場合は選択し表示します。

※稀にPC時でグループ化したパーツがスマホのサイト内と「モバイル上で非表示」のツール内のどこにもない場合があります。
→その場合はPCでグループ化したパーツのグループ化を解除することにより表示されます。

スマホのレイアウト崩れを調整

モバイル最適化をしただけではレイアウトは崩れたままなので、崩れている箇所を編集していきます。
ヘッダー　→　ファーストビュー　→　各パーツ　→　フッター　と上から順に編集します。

ツールバーの表示

編集画面右上の「ツール」→「ツールバー」にチェックを入れるとツールバーが表示されます。

ツールバーの表示

個人的にスマホの編集ではツールバーから各パーツのサイズを変更することが多いため、ツールバーをすぐ横に置いておくのがオススメです。

ヘッダーの調整

ヘッダーの調整
ヘッダーの調整
ハンバーガーメニュー内の調整
ハンバーガーメニュー内の調整

主にヘッダーでは下記を調整します。

  • 会社のロゴのサイズ
  • ヘッダーの高さ
  • ハンバーガーメニュー
  • ハンバーガーメニューの中身

※ハンバーガーメニューはPC時に「模型メニュー」をヘッダーに入れていれば自動で表示されます。ただし、PCでヘッダー・フッターを非表示にしていると表示されません。

ファーストビューの調整

ファーストビューの高さなどを調整します。

ファーストビューの調整

スマホで見る場合は250px〜400pxあたりがちょうど良く見えます。
実際の見栄えをは実機（お手持ちのスマホ）で確認をしましょう。
→スマホで自サイトのURLからサイトを開いてレイアウトの見た目を確認

ファーストビューに画像ではなく動画を設定している場合

ファーストビュー選択　→　編集項目の「背景」　→　「スマホで動画を再生」にチェック

スマホ時ではデフォルトで動画が画像に変更されているため、スマホ時も動画を再生したい場合は
ファーストビュー選択　→　編集項目の「背景」　→　「スマホで動画を再生」にチェック

各パーツの調整

各パーツでは主に下記を調整します。

  • インナー幅
  • 文字サイズ
  • ボタンサイズ
  • 余白
  • 画像や動画のサイズ
  • 横並びのパーツの調整
  • スマホ時、いらないパーツを非表示

順番に解説していきます。

インナー幅

PC

各セクションをこのインナー幅に収め、揃えることでサイトの見栄えが綺麗に見えます。
PC時にはインナー幅が自動で設定されており、画像のような点線がインナー幅になります。

スマホ

スマホ時にはインナー幅がないためご自身でインナー幅を仮で設定し、各パーツの横幅を揃えます。
Wixのスマホの編集画面が最大幅320pxなので、各パーツを280pxで揃えると綺麗に見えます。

文字サイズ

画像の＋とーのボタンで文字サイズを調整します。

画像の＋とーのボタンで文字サイズを調整

改行したい場合やテキスト内の文字を編集したい場合はスマホの編集では出来ません。
そのため、以下の方法から編集をします。
・新しくテキストを追加し、既存のテキストは非表示にする
・PCのテキストを変更する

※新しくテキストを追加した場合は文字サイズ・行間・フォントの種類がデフォルトになるため、PC時に設定したものに変更する必要があります。（フォントサイズは13px以下は設定できません）

ボタンサイズ

ボタンのサイズを調整します。

  • ボタンの高さや横幅
  • ボタンの文字サイズ
  • ボタンのアイコンサイズ
  • ホバー時の各サイズ

余白

セクションなど、各パーツの上下の余白をドラッグして調整します。

余白をドラッグして調整

画像や動画のサイズ

  • 画面いっぱいに見せたい場合は横幅320px
  • それ以外は基本、横幅280pxにすると良い

横並びのパーツの調整

横並びのパーツの場合は基本、スマホ時は1列で縦並びにすると綺麗に見えます。

PC時は3列で横並び（3カラム）

PC時は3列で横並び（3カラム）
PC

スマホ時は1列で縦並び（1カラム）

スマホ時は1列で縦並び（1カラム）
スマホ

PC時は3列だったパーツをスマホ時は1列にするだけなので簡単ですね！

スマホ時、いらないパーツを非表示

スマホのレイアウトを編集していると、スマホの時は表示させたくないパーツも出てくるかと思います。
その場合は表示させたくないパーツを選択し、非表示アイコンを選択すると非表示にできます。

表示させたくないパーツを選択し非表示を選択

これで各パーツのおおまかな調整が完了です！

タブレットのレイアウトを綺麗にする

Wixでは、PCとスマホのレイアウト編集しか出来ないため、タブレットの見た目をよくしたい場合はPC時のインナー幅に収める必要があります。

PC時のインナー幅に収める

PC時、インナー幅に収めることで検証ツールで確認したときにタブレットの時も画面からはみ出さずに綺麗に表示できます。

検証ツールでの確認方法（タブレットの見た目を確認する方法）

①自サイトのURLからサイトを開き、以下を実行
Mac　→　「Command」 ＋ 「Option」 ＋ 「I (アイ)キー」で検証ツールを開く
Windows　→　「Ctrl」 ＋ 「Shift」 ＋ 「I (アイ)キー」または「【F12】キー」で検証ツールを開く

②デバイスのマークを選択

③確認したいデバイスのサイズを選択し、リロードして確認

これでタブレットの見た目も綺麗に編集できます！

スマホレイアウト参考

PCとスマホでどのようにレイアウトが変わったかが分かるように自作した参考サイトをポートフォリオに載せております。
検証ツールでデバイスを変えながら確認してみて下さい。

参考 : ポートフォリオページ

まとめ

今回はWixでスマホレイアウトの編集の仕方を解説しました。
レスポンシブ対応までがWebサイト作成のマストな工程ですので、スマホレイアウトまで完結しましょう。
PCでのレイアウトが作れたらスマホでのレイアウト調整は簡単にできるので、この記事を活用してスマホ・タブレットでのサイトの見た目も綺麗に表示してみて下さい！

Pickup記事
請求書作成サイト「MISOCA」の使い方【フリーランス初心者必見！】 フリーランスは一般の会社員とは違い、自分でやらなければいけない手続きが多いです。特にその一つが請求書の作成かと思います。請求書作成のオンラインサイトは「MISOC…
Pickup記事
初心者向けガイド！ChatWork（チャットワーク）の使い方 【基本的な機能をまるっと解説】 ビジネスシーンで多く利用されるChatWork（チャットワーク）ですが、全く使用したことがないと、何から始めて・どんな操作・どんな使い方をすれば良いかの判断が出来ま…

投稿 Wix スマホレイアウトの編集の仕方を解説！【タブレット・スマホで見た時も綺麗に表示する】 は なまはげブログ に最初に表示されました。

]]>