#24 SWELLでサイト型トップページの作り方

エステサロン例

エステサロン例 | My WordPress Blog My WordPress Blog

（オープニング）

こんにちは、webデザイン起業コーチのSHOKOです。
今日は、WordPressテーマSWELLを使って
サイト型トップページを作る方法を
徹底解説していきます。

この動画を見ると
・WordPressでホームページ制作を成功させるコツ。
そして
・SEO評価を下げないための注意点も
踏まえたトップページの設計ポイント

が5ステップでわかります。

これができるようになるとサイト制作の案件を
自信を持って受けれるようになります。
私自身も、会社員を辞めた初月から50万円の
マネタイズに成功した制作方法です。

見返して何度も学べるように、今のうちに
チャンネル登録いただき、ぜひ最後までご覧ください。

【ステップ１事前準備】

では、実際に今回作る見本サイトをみていきましょう。

ちなみに
解説するにあたって、私とあなたとの間で
共通言語があったほうが伝わりやすいと思うので、
次のような呼び方をここではしていきます。

今から作る最初に表示されるページのことを
「フロントページ」

ページの中の大きなまとまりのことを、「セクション」

セクションの中の要素の塊のことを「ブロック」

カスタマイズ画面のことを「カスタマイザー」

とここでは呼んでいきます。

ちなみに最初に表示されるページのことを
世間一般的にはトップページという
呼び方をすることも多いですが、
WordPressにおいては「フロントページ」
という用語が使われます。

広い意味ではどちらも同じ意味だと
思っていただいて大丈夫ですが、
この動画の中では呼び方を統一していきますね。

今回ご紹介する内容で必要な事前準備は次の６点。

①カテゴリー設定

「お知らせ」というカテゴリーを作っておきます

②投稿記事を3個程度用意

タイトル・アイキャッチ・カテゴリーを
設定しておきましょう。

投稿の内容は今回は影響しないので
空きままにしておきます。
3個投稿記事を作ったら、
2つはカテゴリーを「お知らせ」に。
もう一つは「unknown」にします。

③トップページになる固定ページを作成

「フロント」というタイトルのページを
１つ作っておきます。
このページが、一番最初に表示される
ページになっていきます。

④表示設定でホームページの設定を「フロント」にする。

設定→表示設定をクリックし、
ホームページの表示の欄で「固定ページ」を選び
「ホームページ」の項目に先ほど作成した
「フロント」と名付けた固定ページを設定します。

⑤基本カラー設定

今回の見本サイトでは全体の
背景色を薄紫色にしています。

カスタマイザーを開いて
「サイト全体設定」→ 「基本カラー」
の場所で変更が可能。

もちろん、ここはお好きな色で設定してOKですが、
見本と同じ色に設定をしたい場合は、
こちらのカラーコードをそれぞれ設定してください。

⑥素材を準備する

普段の制作ではクライアントさんから
素材をいただきますが、
今回はテストサイトなので
フリー素材写真やチャットGPTで生成した画像を使います。

ちなみに、時短したい方は私の公式ラインから
「素材」と漢字で送っていただけたら
本日使うロゴ素材や、cssのコードをまるっとお送りするので
ぜひご活用ください。
概要欄のリンクに公式LINEをつけています。
写真はフリー素材サイトからダウンロードしてくださいね。
準備した素材一式をWordPressの
メディアにアップロードしておきましょう。

今回はサイト型トップページの作り方解説なので
最低限必要な事前準備は今お話しした
6点に絞ってお伝えしています。
テーマのインストール方法やプラグイン設定などは
こちらの動画で詳しく解説しているので
この動画を見終わった後に必ずチェックしてくださいね。

【ステップ２　メインビジュアルの設定】

メインビジュアルとは、
Webサイトの一番最初に大きく表示される
“印象を決める画像”のこと。

ファーストビューという言い方をすることもありますが、
実はちょっとニュアンスが違っていて、
メインビジュアルは、ページの最上部に大きく
配置された写真や画像、動画のこと。

ファーストビューは、ユーザーが最初に
スクロールせずに見る範囲のことを指しています。
画像だけでなくテキストやボタンも最初の画面で
見えることもあるので、
その場合は、テキストなども全て含めて、
一番最初に見える範囲がファーストビューです。

メインビジュアルはサイトの
第一印象を決める上で非常に重要。
その理由は次の４点

• ①第一印象の8割が決まる
• ②サイトの離脱率に影響する
• ③ブランドの世界観を一瞬で伝えられる
• ④その後スクロールするかどうかを左右する

WordPressテーマ「SWELL」は特に
メインビジュアルが柔軟に設定できます。
世界観に引き込む大事な要素です。

では、設定をしていきましょう。

ちなみによくある間違いなんですけれども
このブログパーツIDのところに、
ブログパーツの呼び出しコードを
そのままコピペで入れてしまうミスがありがちです。

そのままのコードを入れてしまうと
呼び出すことができないので
必ずここはIDつまり3桁の数字だけを
書くようにしてください。

ここでちょっと見本と見比べて
欲しいんですけれども、
よく見ると見本サイトの文字は
シャドウがかかっていますね。

このシャドーはCSSで設定をすることができます。
今回の見本サイトで使うCSSは
最後の方で 設定の仕方をまとめてご紹介します。

【ステップ３　　フロントページの作り込み】

いよいよ、フロントページの作成に入っていきます。

作成の仕方は いろいろなやり方が ありますが、
私がお勧めする作り方はまず最初に
フルワイドブロックを設置していきます。

（フルワイドブロック）

今回の 見本サイトのセクションは

１当店について
２インフォメーション
３施術メニュー
４Q&A
５アクセス
６ギャラリー

という６つのセクションに分かれています。

私は１つのセクションにつき１つの
フルワイドブロックの中に作成しています。

フルワイドブロックを設置して作成する
メリットは次の５点。

①背景の色や画像を変えて、
セクションごとの強弱がつけやすい。
　世界観を保ちながらメリハリが出せて、
デザイン初心者でも“まとまり感”を作りやすいです。

②管理がしやすく、後からの編集がとてもラク
　どこからどこまでが1つの内容なのかが
明確なので、迷わず編集できます。
　また、セクションごとに丸ごと移動できるので
　後から順番を入れ替えたいときにも、
ワンクリックで簡単に調整できます。

③見出しのH2タグが最初からセットされている
これによって、ページの構成が
自然と整いやすくなります。
情報の階層がきれいにまとまり、
情報設計が崩れにくくなるんです。
また、H2でセクションを区切ることで、
検索エンジンにも内容の意味が正しく伝わるので、
デザイン面だけでなくSEOの面でもメリットがあります。

④セクションごとに上下左右の余白を細かく調整できる
　ページ全体のリズムが整って、
読みやすいレイアウトになります。

⑤他のページでも再利用しやすい
　同じ構成をコピペして再利用しやすいので、
デザインの再現性が高く、制作スピードも上がります。

フルワイドブロックは非常に優秀なブロックなので、
ぜひ活用しましょう。

ここが、初心者が見落としやすいポイントです。
「見落とすも何も、そもそも初めて聞くけど？」
という方もいらっしゃるのではないでしょうか。

「代替（だいたい）テキスト」は、
「alt（オルト）テキスト」とも呼ばれます。
ここを設定する目的は次の３点。

① 画像が表示されないときの
“代わりの情報”になるため

通信状況が悪い時や、画像が読み込まれないときに
画像の説明文として自動表示されるものです。
通信状況が悪い時でも
ユーザーの理解を補助してくれます。

② 視覚障がいのある方の“読み上げツール”で
内容を伝えてくれるため

目が見えにくい方・視覚障がいのある方は、
サイトを“音声で聞きながら”操作できる 
スクリーンリーダー というツールを使います。
ただ、このスクリーンリーダーは 
画像そのものの内容を読み取ることができません。

そこで必要になるのが 代替テキスト（altテキスト）。
ここに入力された文章を、
スクリーンリーダーが読み上げて、
「この画像には何が映っているのか」を
音声で伝えてくれます。

③ 検索エンジン（Google）に
画像の内容を伝えるため

Googleなどの検索エンジンは、
人間のように 画像を“目で見て”
内容を理解することができません。
そのため、画像にどんな情報が
含まれているのかを判断するときに、
代替テキストが大きなヒントになります。

ここがしっかり設定されていると、
検索エンジンがページ全体の内容を
より正しく理解できるようになり、
画像検索に表示されやすくなります。
サイトのSEO評価にも影響することがあります。

代替テキストは
「画像の内容」を簡潔に説明するのが基本なので、
今回のネイルサロンのような写真には、
その写真が何を示しているかをそのまま書けばOKです。
なので、ここには例えば
「ネイルサロンを紹介しているイメージ写真」
と入力しておきます。

投稿リストブロックではこのように、
カテゴリー分けした特定の投稿記事だけを
表示することができます。

複数のカテゴリーを設定したい場合は、
Windowsだと「コントロール」
Macだと「command」を
押しながらクリックすることで
複数設定することができます。
ホームページではお知らせを載せる
サイトがとても多いので
ぜひこのやり方を活かしてくださいね。

ちなみに、動画を背景にすることもできます。
イラストACや写真ACなどのACシリーズで、
動画ACというサイトがあり、
動画のフリー素材をダウンロードし、
WPへアップロード。
発行されたURLをコピーして、
背景画像のURLの欄にURLをペーストするか、
「メディアから選択」「ファイルをアップロード」して、
動画を挿入することができます。

これで、見本サイトのようなフ
ロントページが上から下まで作れました。

【ステップ４　CSSでデザイン調整】

今回は2つのcssをご紹介します。

１つ目、メインビジュアルの
文字にシャドウをつける

cssはこちらのコードを使います。
このコードは最初にご案内した公式LINEに
「素材」と漢字でメッセージすると
コードをお送りするのでコピペしてご活用くださいね。
まずは、シャドウをつけたいテキストに
CSSクラス名をつけます。

CSSクラス名ってどこに書けばいいの？
という方もご安心ください。
一回覚えてしまえばとても簡単です。

２つ目、カバーブロックの
四角を丸くする

こちらのコードをコピペします。
このサイトで使用するすべてのカバーブロックに同じ効果をかけたいので、
今回は特定のブロックにcssクラス名をつける必要はありません。

これで見本サイトのフロントページが完成です。

【ステップ５　実際のサイトを見て確認】

完成したら、必ず実際のプレビューで
見え方を確認していきましょう。

よくある設定漏れが次の３点なので
特に注意してチェックしましょう。

①カラムブロックのスマホ版の設定
②ボタンのリンク先の設定
③代替テキスト（altテキスト）の設定

作りっぱなしで終わりにするのは絶対NGです。

エンディング

今回の見本サイトの完成品が見たいという方は
概要欄にリンクを貼っておきますので
参考にしてみてください。

私は元々ものづくりが大好きなタイプだったので
今日一緒に作って行ったように
WordPressを使ってどんどんwebサイトが
形になっていく感覚が
めっちゃ面白いなって感じたんですよね。
しかもサイト制作はwebデザインのお仕事の中でも
圧倒的に高単価でご提案できるので
実際に私は未経験からチャレンジして
脱サラ初月に月収50万円、そして開業1年目のうちから
月100万円のマネタイズをしています。

ただ、見落としてはいけない現実があって、
制作スキルとマネタイズのスキルは全くの別物なんです。

私のように子育てや仕事で忙しいけど
WordPressを仕事にしていきたいという方に向けて

月収30万円までのロードマップや
実際にクライアントさんを前にした時の
ヒアリング方法や効果を出す提案方法など
私がマネタイズに成功してきたノウハウを詰め込んだ
豪華12大特典を公式LINEからプレゼントしています。

概要欄のリンクをタップして
ぜひ受け取ってくださいね。

また、毎月人数限定の個別相談も行っています。
相談に来た方からは

「制作の裏側が見せてもらえて貴重な学びになった」
「何から始めればいいのかわからなかったので、
順番がわかってスッキリした」
「相談した直後に初受注で
10万円のサイト制作のご依頼をいただいた」

という嬉しいお声がどんどん届いています。

好きを仕事にするためにも、
スキルをしっかり磨いて、それを提供するという一歩を
私と一緒に踏み出しましょう。

この動画が参考になったら
チャンネル登録と高評価、
コメントもよろしくお願いします。

また次の動画でお会いしましょう！