【無料Ver.】見た人の不快感を極限までへらす治療院HP制作ガイドライン
◆当noteの対象となる人（重要）
・ホームページを自作 or 管理したい or している先生
・セミナーのスライドを作る機会がある先生
・無料配布のスライドやネットの情報ではボリュームが大きすぎて読む気が失せた先生
▼有料Ver.のリンク▼
以下より当noteの本編です。
▼▼▼
とりあえずホームページの下準備はできた。
あとは写真を追加して定期的に更新すれば、集客もできる立派なホームページになってくれるはず……
2019年の3月頃、大阪市内で鍼灸整骨院のオープンを控えていた筆者のたわごとです。
当時はWordPressのハードルが高かったので、Wixで制作。友人達にもチェックしてもらいながら、自作のホームページでﾄﾞﾔっていましたが、結果は散々なものでした……
Wix.com: 無料ホームページ作成 | ホームページの作り方
◆「無知」からホームページを作るとひたすらググる日々に……
いまでこそライティングスキルをベースに、マーケティングや治療院ホームページ制作についてすこしは語れるようになったと思っていますが、店舗運営をしていたころは無知もいいところ。
わかりやすく柔整・あはきの分野に例えるなら、解剖・生理を理解しないまま、病理学や一般臨床学の四択問題を眺めているようなものです。
そのため、開業前に勤めていた職場（地元の整形外科クリニック）の仕事を終えては、ひたすらホームページの作り方をググっていました。
◆ホームページの基本設定に時間を取られるのは苦痛じゃないですか？
基本的な設定をするためにひたすらググっても、自分が知りたい情報へすぐにたどり着けなかったため、
「自分はいったいナニをしてるんやろ……？」
「なんでこんなことをやらなあかんねん？」
「うわ……めっちゃ面倒くさいやん」
と独り言を吐き出しながらマウスをカチカチする日々。
できない＆知らない以上、しかたありませんが……
ぶっちゃけ苦痛ですよね？
すくなくとも筆者（ケニー）はそのように思っていました。
▼つぎの項目からが本題▼
◆トイレ掃除のような「目には見えないおもてなし」ともいえるホームページの裏側の設定を紹介
当noteで紹介する内容は、わかりやすく例えるなら『店舗のトイレ掃除』のような、あたり前すぎて見落としてしまう
「ホームページの裏側の設定（基本設定という名の下準備）」
です。
意外と気づかない裏側の設定をしておけば、ページを見た人の不快感を極限までへらす効果が期待できるでしょう。
他に例えがないのかよ？とツッコまれそうですが、店舗運営している方を前提にしているので、あえて「トイレ掃除」を例に出しました。
◆目に見えない部分を積み重ねられますか？
店舗経営および施術においては、目に見えにくい知識や技術における日々の積み重ねが大事なのは、臨床を経験している先生なら理解していると思います。
すくなくとも、免許が取れたからといって、ゴッドハンドにになれないのはわかっていますよね？
そのため、筋の起始停止や支配神経など、臨床で使う場面が少ないかもしれない知識を日々復習しているはずです。
ホームページもおなじです。
結局は、日々の積み重ねによりすこしずつ効果がでてきます。
魔法のテクニックなんてありません。
当noteに目を通している先生の90%以上は、臨床にも経営にも真摯に取り組んでいるため、店舗のトイレ掃除のような「目には見えないおもてなし」にも手を抜かないはずです。
筆者の思考に納得できる先生だけ、当noteを読み進めてください。
コイツ、頭おかしいんじゃね？と思った人はコチラへどうぞ。※Yahoo!Japanに移動します。
◆開始5秒で決着がつく勝負の前にやるべきこと
最低限のホームページを作るために
h2タグの設定をわすれずに
メタディスクリプションは手を抜かない
キーワード選定
などのSEO対策的な話や、ファーストビューの作り方などの話を耳にすると思いますが、実はその前にやるべきことがたくさんあります。
つぎの項目で当noteの内容（もくじ）を紹介するので、サっと目を通していただき
知っている or 知らない
をチェックしてみてください。
◆当noteの内容（もくじ）
ビッグテック企業なども実践しているような、意外？と知られていない裏側の設定を13個ピックアップしました。
自分でホームページを管理している人はもちろん、セミナーのスライドを作る機会がある先生は知っておいて損はしない内容です。
チャプター1：不快感をへらすテキスト設定5つのポイント
①フォントの設定
②テキストカラーの注意点①
③テキストカラーの注意点②
④背景色の設定
⑤背景色とテキストカラーの組み合わせ
半分はいちど設定してしまえば、半永久的に変更する必要はありません。くわえて、設定そのものは5〜10分ほどで完了するため、すぐに取り組めます。
チャプター2：不快感をへらす写真や画像にかかわる設定5つのポイント
⑥ファーストビューの使い分け
⑦写真サイズ
⑧写真データの容量
⑨写真の背景
⑩写真のアングル
スマホ or 一眼レフ関係なく、注意すべきポイント5つを解説します。
チャプター3：レイアウトにかかわる設定3つのポイント
⑪テキストの配置
⑫余白の活用
⑬カラムよりも○○を使う（※）
⑪については、エディターを扱えるようになったら、ついやってしまいがちな設定の注意点となります。
⑫、⑬については、可能であれば意識したいポイントです。ただし、テキストや写真にかかわるものにくらべると重要度は下がるため、応用レベルにチャレンジしたい方はチェックしてみてください。
”⑬カラムよりも○○を使う”については、WordPress限定の設定となります。
「たった13個？」と思うかもしれませんが、50～100個の情報をぶつけたところで、すべて理解できる人は少ないのが現実です。そのため、厳選した13個にしぼりました。
もちろん、紹介した手法をすべて使わなくてもOKです。必要なところだけ活用してください。
内容（もくじ）を見て「3つ以上知っているわ」と自信を持って言える人は読まなくてOKです。
そもそもですが、当noteで売上を出そうというつもりはなく、今後の目的のために、準備しておきたかったアイテムの1つなので。
◆noteの特徴4つ
圧倒的な時間短縮：10時間が30分～60分に
すぐに実践OK：5～10分で設定完了するものも
セミナーのスライドでも応用可能
治療院ホームページ制作者を選ぶ判断基準に
1. 圧倒的な時間短縮：10時間が30分～60分に
知識ゼロから調べたら10時間はかかる内容を、30分～60分で落とし込めるようにギュッと凝縮しています。
当noteを活用し、パソコンの前でイライラする時間をへらしてください。
2. すぐに実践OK：5～10分で設定完了する項目も
お伝えする内容のうち以下の項目は、早い人なら理解するのに10分、設定も5～10分で完了します。
・フォントの設定
・背景色の設定
・テキストカラーの注意点①
・テキストカラーの注意点②
・背景色とテキストカラーの組み合わせ（NG例）
・写真のアングル（目線）
・テキストの配置
・余白の活用
3. セミナーのスライドでも応用可能
当noteの内容（もくじ）で紹介した以下の項目は、セミナーのスライドでも応用可能です。
・フォントの設定
・背景色の設定
・テキストカラーの注意点①
・テキストの配置
・背景色とテキストカラーの組み合わせ
・写真のアングル（目線）
・余白の活用
筆者はホームページ制作以外にオンラインセミナーのサポートをした経験がありますが、当noteでとりあげた設定や手法を知らないセミナー講師が多い印象です。
そのため、当noteの内容を理解したうで、オンラインセミナーに参加すると「あの講師のスライド、大丈夫？」といった不安な気持ちになる可能性もあるため注意してください。
※セミナーの内容が良ければ、見逃すのが大人の対応です。
4. 治療院ホームページ制作者を選ぶ判断基準に
当noteでは目に見えにくい裏側の設定をまとめていますが、治療院ホームページを制作する側にとっては基本的な情報です。
そのため、外注するときには、制作担当者に当noteの内容を知っている（ or 聞いたことがある）かを確認してみましょう。
制作キャリア1年くらいならともかく、キャリア4～5年で知らない人はいないとおもいます。
また、納品物を確認するさいに、当noteでまとめた内容とちがう設定や編集をしているときには、担当者の意図を確認してみてください。
◆当noteの便利な使い方
ipadなどでnoteを開く
印刷して手元に置いておく
イメージ
▼▼▼
当noteをパソコンで開いてしまうと、画面の切り替えなどの余計な手間が発生する可能性があります。
効率よく作業を進めるためにも、当noteはipadで開く or 印刷して手元に置いていただき、パソコンではホームページの編集画面だけを表示するようにしてください。
◆noteを書いた人
ケニー（鍼灸師・柔道整復師）@kenji_2nd
元治療院経営者。現在はライター×治療院ホームページ制作を中心に活動中。2024年4月以降、治療院ホームページ制作については『紹介のみで受付』にシフトチェンジする予定です。
◆よくある質問
1. くわしい人に聞いたらタダで教えてもらえるんじゃないの？
可能性はゼロではありません。
とはいえ、なんでもかんでもタダで教えてもらうのは抵抗がありませんか？
そこで、真面目な先生であれば、一方的に受け取るだけでは気持ち悪いからとTwitter（X）で、
いいね
RT
リプライ
を積極的にしていると思いますが、彼らは計算したうえで、柔整・あはき師を宣伝道具にしているにすぎません。
そのなかで生まれる異様な一体感により
「私は恩を返した！」
「私は人の役に立っている！」
「私の行動は正しい！」
と認識できる快感を得たいのであれば、積極的に質問してタダで情報をもらってください。
2. 無料で確認できる情報とのちがいは？
ネットの情報や無料スライドとちがい、実際に納品したクライアントのページで、設定している様子を動画でお伝えします。
※クライアントの許可済み
クライアントのページの成果については、ざっくり伝えると以下のようになります。
とある症状別ページの月間PV数30～40件をきっかけに、1ヶ月で2～3人の来院につながっている。
※有料部分の最後に実際のページを紹介
症状別ページだけのおかげで……とはいいませんが、いずれにしても当noteでまとめた情報が土台となり集客につながっていると考えております。
とはいえ、自分が作ったページの裏側＝裸を見せる気分になるため、ちょい恥ずかしいですが 笑
3. たった13個しかないの？無料配布のスライドのほうがスゴくない？
ボリュームが大きすぎて実践する気がなくなれば、コンテンツの役割も果たせません。
無料配布のスライドや、ネットの情報を集めているときの落とし穴です。そもそもですが、ボリュームが大きい＝良いコンテンツとはかぎらないためご注意を。
そのため、当noteでは実践しやすい13個を厳選しました。
そもそもですが、無料のスライドやセミナーに飛びつく人の90%は活字を読む気がなく、
とりあえずラクしたい
表に出ていないマル秘テクがある
自分にピッタリな魔法のテクニックがある
と思っているノウハウコレクターの可能性大です（過去の筆者がそうだったので……）
しかし、ここまで目を通していただいている先生であれば活字に抵抗がないため、当noteの内容をご活用いただけるでしょう。
ちなみに文字数にするとトータル約20000文字＋一部は動画で解説となっています。
◆noteを読んだ人の感想（事前モニター）
◆note購入時の注意点3つ
集客数が伸びる保証はない
noteの内容があてはまらないケースもある
WordPressを基準に解説
1. 集客数が伸びる保証はない
紹介する内容は「実践すれば集客できる」といったものではなく「集客できるページにするための下準備」となります。
面倒に感じるならぶっちゃけ知らなくてもOKのため、ムリに購入する必要はありません。
目に見えにくい部分までおもてなしする精神を養いたい人だけ、購入をご検討ください。
2. noteの内容があてはまらないケースもある
紹介する内容が「100%正しい」とはかぎりません。
そのため、例外のケースについても可能なかぎり解説しております。
3. WordPressを基準に解説
設定方法の動画や一部の項目は、WordPressを基準としています。
とはいえ、フォントや色、写真や配置にかかわる知識については、どのエディターでもあてはまるうえスライド作成にも応用できます。
つぎの項目で、無料部分のまとめに入ります。
◆ここまでのまとめ
当noteの特徴4つ
圧倒的な時間短縮：10時間が30分～60分に
すぐに実践OK：5～10分で設定完了するものも
セミナーのスライドでも応用可能
治療院ホームページ制作者を選ぶ判断基準に
自力でゼロから調べれば10時間ほどかかる情報を、30分～60分で理解できるようにギュッと凝縮しました。
また、スライド作成でも応用できる項目があるため、ホームページの編集をする機会がない人でも利用できる場面はあるでしょう。
◆目に見えないおもてなしとして
当noteは、店舗のトイレ掃除のような『目に見えにくいおもてなし』を集めたものです。そのため、手を抜いていただいても問題はありません。
必要と感じた方だけ、購入をご検討ください。
◆無料のネット情報やスライドとのちがい
実際に納品したページをつかって、設定方法を動画で解説しています。
また、治療院ホームページを製作している人でも知らないケースがあるため、外注するときにも指示を出しやすくなります。
無料Ver.＆有料Ver.に目を通す前に
くりかえしになりますが、当noteの内容は調べればみつかる情報が含まれています。
いっぽうで、知識ゼロから自作でホームーページやLPを作れば、知らない設定を調べるだけでも1～2日かかるケースもめずらしくありません。
10時間以上かけて1人でパソコンの前でイライラするか、1,500円で購入してストレスフリーになるかは、先生の判断におまかせいたします。
なにがなんでも損をしたくない方は、この後に紹介する本編の無料Ver.を3回ほど読み返してから、購入をご検討ください。
▼有料Ver.のリンク▼
▼以下より本編の無料Ver.▼
チャプター1
チャプター1は有料部分の核になるため、最低限の情報のみ公開しています。
不快感をへらすテキスト設定5つのポイント
①フォントの設定：無難だけど○○○がオススメ
②テキストカラーに”〇”は使わない
③テキストカラーに”〇”は使わない：○○○○に設定
④背景に”〇”は使わない：○○○〇に設定
⑤○○○とテキストカラーの組み合わせ：○○○は避ける
2～3時間くらい調べたら、〇に埋まる情報がが出てくると思います。noteを購入する気はないけど、時間に余裕のある人は、自力で調べてみてください。
チャプター2
ファーストビューのサイズ：PCとスマホの2種類を用意
写真サイズの比率：横長の3：2がオススメ
写真データの容量を圧縮：ページ読み込み速度アップ
写真の背景：明るい色＋無地がオススメ
写真のアングル：施術者 or モデルの視線は左から右へ
2-1. ファーストビューのサイズ：PCとスマホの2種類を用意
理由
PCサイズ（横長）の画像ではスマホ表示のときに不自然に見える
スマホサイズ（縦長の画像）ではPC表示の時に不自然に見える
▼実例▼
有料版で公開
PC用（横長）の画像をスマホで表示すると、不自然に映ります。その逆もしかりで、スマホ用（正方形～縦長長方形）の画像をPCで表示すると、不自然に映ります。
たとえるなら、鍼灸の免許しか持っていないのに、鍼灸接骨院で柔整の保険マ施術を担当している状態です。
PC用の画像を
スマホで表示したもの
▼▼▼
（有料版では動画イメージあり）
◆画像サイズについて
サイズについては諸説あります。
参考：PC用の場合
※有料版では、納品しているページの具体例を追記
参考：スマホ用の場合
スマホの場合、画面のサイズが横：480pxになっている端末がおおいため、画像を作るときは、横：480px以上にしていれば大きな問題はありません。
※有料版では、納品しているページの具体例を追記
サイズについては、PC用＆スマホ用どちらも目安なので、使いたい写真やコピー（テキスト）にあわせてみてください。
◆納品しているページで使用しているPC用ファーストビューのサイズ
※有料版では、納品しているページの屋号＆具体例を追記
◆納品しているページで使用しているスマホ用ファーストビューのサイズ
※有料版では、納品しているページの屋号＆具体例を追記
◆WordPressでファーストビューを設定する方法
①外観
↓
②カスタマイズ
↓
③トップページなど
↓
④メインビジュアル
▼実際の編集画面▼
（有料版では設定中の動画あり）
③以降は、使用するテーマによって文言が変わる可能性もあるためご注意ください。
2-2. 写真サイズの比率：横長の3：2がオススメ
◆縦長の写真をオススメしない理由3つ
①ホームページで使うと不自然に見える
②情報を処理するのに時間がかかる
②加工や編集がむずかしい
最近ではInstagramの影響なのか、写真撮影＝縦長のイメージを持っている人が多いようですが、ホームページでは使いにくいため横長で撮影しましょう。
以下より、くわしく解説します。
①ホームページで使うと不自然に見える
ホームページの写真は一般的に横長で編集されているケースが多いため、縦長の写真は不自然に見えてしまいます。
施術中はケーシーやポロシャツを着るように、ホームページに掲載する写真も世間の感覚にあわせておきましょう。
②伝えられる情報量が少なくなる
縦長の写真を使うと、スマホでは画面いっぱいに表示されるため、写真とテキストの内容を同時に伝えられなくなります。
ページを見ている人からすると、内容をしっかり確認したければ「画面を上下にスクロールする必要がある」といった手間が生まれるだけです。
以上を踏まえると、わざわざ縦長の写真を掲載する理由は少ないといえるでしょう。
①と②の条件で作った
デモページ
▼▼▼
（有料版では動画イメージあり）
③加工や編集がむずかしい
縦長の写真をムリヤリ切り抜いて横長に加工・編集しても、人物だけが目立ってしまい、院内の雰囲気が伝えにくくなります。
とくにPC用のファーストビュー（横長）を作るのがむずかしくなるため、写真はなるべく横長で撮影しましょう。
横長の写真であれば、サイズが小さくても院内の雰囲気が伝わる↓
※有料版では実例あり
例外として、施術者やモデルを切り抜いて加工編集する場合は、縦長で撮影してもOKです。
◆ホームページ掲載時に最適な比率（アスペクト比）
一般的には、以下の比率が使われています。
横：縦
16：9
3 ：2
参考記事は「ブログの～」となっていますが、ホームページもブログもおなじWEBページのため、編集手順はほとんど変わりません。
◆初期設定に注意
スマホ撮影をした場合、比率が4：3になっているケースが多いため、アップロード前に16：9 or 3：2 に加工しておきましょう。
なお、カメラアプリによっては、3対2の比率で撮影できる場合があります。
GooglePlay：無音カメラ
◆筆者がクライアントから送られてくる写真を加工する場合は……
PCで使える写真ビューアーツールで、px数は横2000：縦1344（約3：2）を目安にトリミング（切り抜き）しています。
WindowsPCの写真ビューアーで
3：2に加工する様子
▼▼▼
（有料版では設定中の動画あり）
2-3. 写真データの容量を圧縮：ページ読み込み速度アップ
理由：写真をそのままアップロードするとページの読み込み速度が遅くなるため
◆写真データの容量にかかわる前提知識
・撮影した写真データの容量は1枚あたり3～5メガほど
・ホームページで推奨される容量は1枚あたり100～200キロバイト
撮影した写真をそのままアップロードした場合と推奨される容量を比較すると、その差は約30倍以上になります。結果、ページ読み込み速度が遅くなるのは当然ともいえるでしょう。
そのため、見た目はおなじでも、データ容量を圧縮した写真を準備する必要があります。
たとえるなら、おなじ身長・体型でも、脂肪や筋肉量のちがいで体重が3キロほどちがう状況です。
◆スマホ撮影の写真なら大丈夫では？
スマホ撮影でも、2メガ以上になるケースがほとんどです。
そのため、1眼レフ or スマホ関係なくホームページに写真をアップロード（入稿）する前には、写真のデータ圧縮作業がマストとなります。
「ページの読み込みが遅い」というだけで離脱する人が増えるため、見た目にはほとんどわからないとはいえ、写真データの圧縮はかならずしておきましょう。
◆写真データの容量をすくなくする手順
①サイズの変更
↓
②容量の圧縮
↓
③WordPressなどにアップロードで自動圧縮
①のサイズとは、縦：横のpx数を指します。撮影した写真データは、横が4000px以上になっているケースが多いため、筆者の場合はWEBツールを使って2000px以下にしています。
ここからは使用するツールの紹介も踏まえて、どのように変化するかみていきましょう。
①サイズ変更に使うWEBツール
写真をアップロードし、希望のサイズを入力後にボタンを押すだけです。
実際の流れ
▼▼▼
（有料版では動画イメージあり）
②容量圧縮のために使うWEBツール
サイズ変更とおなじく、写真をアップロードしてボタンを押すだけです。
実際の流れ
▼▼▼
（有料版では動画イメージあり）
①～②を実行しただけでも、20分の1ほどになります（有料版では実際の写真を公開）
③WordPressアップロード後に写真を自動で圧縮
紹介した①～②の手順で写真を圧縮しても、200キロバイト以下になるとはかぎりません。
・ホームページで推奨される容量は1枚あたり100～200キロバイト
そのため、余裕があれば、写真をアップロード後に自動で圧縮してくれる以下のプラグインのうち、どちらか1つを使いましょう。
・EWWW Image Optimizer
・TinyPNG – JPEG, PNG & WebP image compression
なお、設定がカンタンなのはEWWW Image Optimizerです。
設定方法については【2023年最新】EWWW Image Optimizerの設定方法・使い方まとめを参考にしてみてください。
◆疑問：サイズ変更や圧縮すると画質が落ちるのでは？
画質は多少は落ちますが、通常の表示であれば肉眼で確認できるレベルの劣化はありません。
すくなくともスマホ表示であれば、まったく問題ないレベルと思っていただいてOKです。
有料版では、ビフォー＆アフターの写真データをご確認いただけます。
余談：WordPressのテーマでも表示速度は大きく変わる
写真の圧縮も大事ですが、WordPressのテーマによる表示速度の影響も見逃せません。
各有料テーマの速度を比較した【有料テーマで迷わない】治療院のホームページを作るならSWELL1択でOKをご確認ください。
2-4. 写真の背景：明るい色＋無地がオススメ
理由：写真の背景によりページの印象が大きく変わるため
◆白やアイボリーの壁紙、明るい色のカーテンを背景にしておくのがベター
ページの背景色を明るい色にするなら、写真の背景も明るい色であわせておくのが無難です。
✔写真の明るい背景色×ページの明るい背景色
有料版ではクライアントのページのスクショを公開しています。
写真の明るい背景色とページの明るい背景色の組み合わせは、お似合いのカップルといえるくらい相性が良く、スマホ撮影でもホームページ内の違和感は最小限はほとんどありません。
◆写真の背景が暗い色ならではのメリットもあるけど……
写真の背景が茶色などの暗い色の場合、ページの明るい背景色とあわせればコントラストが映えるため、ページ全体が引き締まる効果があります。
しかし、筆者もふくめデザインの素人では、写真を使ったコントラストが活かしきれないため、避けておくのが無難です。
実際に、クライアントのページの場合、写真の背景色（壁紙）が茶色のため、ページの雰囲気を整えるのに四苦八苦しました（見る人が見たらいろいろ指摘されるはず）
✔写真の暗い背景色×ページの明るい背景色
有料版ではクライアントのページのスクショを公開しています。
背景が暗いため、スマホ撮影で画質が粗さが目立つケースもあります。カメラマンに依頼できず、自分のスマホで撮影する場合は注意しましょう。
◆ちなみにクライアントのページの写真はすべてスマホ撮影
「写真撮影もしてほしい」という要望があったものの、元のベッドの位置では暗い写真しか撮影できませんでした。そのため、すこしでも明るく写るようにベッドの場所を変えて撮影し、あとから加工・編集をしています。
有料版では、元のベッドの場所で撮影した写真と、ベッドの場所を変えて撮影した写真を公開しています。
◆壁紙やカーテンの色を暗い色にしてしまったんだけど……
壁紙やカーテン、照明などで落ち着いた雰囲気を演出するのは大事ですが、写真撮影の場面ではデメリットになりかねません。
とはいえ、壁紙やカーテンを交換するのは大変なので、写真撮影時にはプロのカメラマンに照明を持ってきてもらいましょう。
ココナラでカメラマンに依頼すると、1時間あたり3,000円～5,000円が相場のようです。また、モデルの依頼料や撮影時間によっても変わるため、詳細な条件を確認しながら価格交渉してみましょう。
◆背景にコードやコンセントは写らないように（コードを消すのは大変な場合も）
足元のコードやコンセントが見えてしまうと、せっかくの写真が台無しになる可能性もあります。
壁や床に写った物は、写真加工アプリで消せるものの、万能ではありません。
とくにコードのような細いものが、床にぴったりくっついた状態の写真は、加工して消すのも大変です。
有料版では、加工が難しい写真の例を公開しています。
◆その他注意したいもの
カゴ
たたまれていないタオル
フェイスペーパー
受付スペースの備品
施術風景の撮影で、モデルさんにかけたタオルが乱れているケースがよくあります。
また、モデルさんがベッドに寝転んでいないときに、使用中のフェイスペーパーが枕の上に残ったままだと、写真に違和感が出る場合もあるため注意しましょう。
2-5. 写真のアングル：施術者 or モデルの視線は左から右へ
理由：テキストを読むときの視線の方向とあわせるため
ネット上のテキストは横書きが主流のため、ページをチェックする人の視線の動きは左から右になります。
その視線の動きにあわせるため、施術者やモデルの視線も左から右、もしくは正面になっている写真を使います。
とくに、スマホ表示の場合は、視線が逆になっていると違和感が出るので注意しましょう。
有料版では実例を紹介
◆視線が右から左になっている写真すべてがNGではない
◆写真を反転させるのもアリ
有料版では
・実例
・WordPressの編集画面
・実際に活用しているクライアントのページ
を紹介しています。
クライアントのページについては、月間30～40PVで新規2～3人につながったこともある症状別のLPとなっているため、全体像を見るだけでも参考にしていただけるかと。
チャプター2のまとめ
不快感をへらす写真や画像にかかわる設定5つのポイント
①ファーストビューのサイズ：PCとスマホの2種類を用意
②写真サイズの比率：横長の3：2がオススメ
③写真データの容量を圧縮：ページ読み込み速度アップ
④写真の背景：明るい色＋無地がオススメ
⑤写真のアングル：施術者 or モデルの視線は左から右へ
チャプター3
テキストの○○は使わない
余白を活用する
画像とテキストの組み合わせは「メディアとテキスト」がおすすめ
3-1. テキストの配置：○○は使わない
理由：スマホ表示でレイアウトが崩れてしまうため
有料版では、クライアントのページに掲載しているテキストを引用したNG例を紹介しています。
WordPressなどのエディターの操作を覚えたときに、つい手を出してしまいハマってしまう人が多い印象です。
◆迷ったときは「△△」で対応
ちなみに、ホームページだけでなく、スライド作成でもやりがちなので注意しましょう。
3-2. 余白を活用：ページの圧迫感をゼロに
理由：余白がないとページに圧迫感が出てしまうため
「伝えたいことが多すぎて、気がつけばテキストだらけのページに……」
といった状況にならないためにも、適度に余白を入れてページ全体のリズムを良くしましょう。
文章力によほどの自信がある人が書いた文章でも、文字だらけのページを見た人のほとんどは絶望することをお忘れなく 笑
✔NG例
有料版では、NG例のスクショを掲載しています。
NG例のようなレイアウトの文章を、スマホやPCで読もうものなら、7割くらいの人は目が痛くなってページをそっと閉じてしまうでしょう。
読まれるとしたら「大谷翔平のWBC出場時における苦悩をまとめたメモ」くらいです（あるかどうかは知らない）
いくら正しい情報を伝えようとしても、読まれるためには最低限の手入れをしておきましょう。
◆余白をリズムよく追加する方法
筆者がページを作るときのおおよそのイメージですが、テキスト200～300文字ごとに、以下で紹介する項目を追加しておくと自然と余白が生まれて、ページ全体のリズムが整います。
有料版では、筆者がページ制作やブログ記事を作るときに意識している5つのポイントをお伝えしています。
文字だらけの読みづらいページにならないように、全体のバランスを整えておきましょう。
テキストだけでまとめる場合でも、以下のように改行や見出し、箇条書きを適度に使うのがオススメです。
✔見本とNG例の比較
有料版では、見本とNG例のスクショを掲載しています。
一見するとNG例の方がまとまっているように見えますが、読みやすさでは改行や見出し、箇条書きを使った見本の方が読みやすいはず。
3-3. 画像とテキストの組み合わせは「メディアとテキスト」がおすすめ（WordPressのみ）
理由：設定の手間がすくなくなるため
掲載する情報を横並びに表示するときは、カラムを使ってレイアウトを整えます。しかし、画像とテキストを組み合わせる場合は「メディアとテキスト」の使用がベターです。
見た目を整えたLPを自分で作りたい先生の場合「メディアとテキスト」を知らなければ、大幅な時間のロスにつながるおそれがあります。
◆カラムとは？
「レイアウトを整えるブロック（区切り）」という解釈でOKです。
◆メディアとテキストとは？
Wordpressで設定できるブロックの1つで、テーマに関係なく使用できます。
カラムでもメディアとテキストでも、準備した画像やテキストを左右交互に配置すれば、PC表示では以下のようになります。
PCでほかの治療院などのホームページをチェックするときに、見たことがあると思います。
ここまでの説明から、
「2カラムであれば、カラムと”メディアとテキスト”はおなじでは？」
と思うかもしれませんが、カラムを使用するとスマホ表示のときに大きな手間が発生します。
くわしく見ていきましょう。
✔カラムの問題点
まずは、カラムを使ったケースをみてみましょう。
有料版では実例のスクショおよび、デモページの動画とURLを掲載しています。
◆メディアとテキストを使えばスマホ表示でも問題なし
メディアとテキストを使用すると、画像を左右どちらに配置しても、スマホ表示では
画像→テキストの順番
で表示されます。
有料版では、スクショを使った解説をしています。
◆PC表示でレイアウトにこだわりたい先生は注意（2度目）
カラムを使って左右交互のレイアウトにしてしまうと、デモページのようにスマホでは不自然な表示になるため、なるべくメディアとテキストブロックを使いましょう。
◆カラムを使ってスマホ表示のレイアウトを整えるには？
以下のCSSを記入すれば、カラムを使ってもスマホで違和感なく表示可能です。しかし、チェックが大変なのでオススメしません 笑
有料版では、追記するCSSやブロックに追記するCSSを紹介しています。
チャプター3のまとめ
レイアウトにかかわる設定3つのポイント
①テキストの○○は使わない
②余白を活用する
③画像とテキストの組み合わせは「メディアとテキスト」がおすすめ
無料版はここまで
ホームページの基本的な設定を調べるために、お金を出したくない人は、当note（無料版）を活用して自力で調べてください。
なお、自力で全て調べれば早い人でも4～5時間、慣れていない人なら10時間以上はかかると思います。
時間を大事にしたい人は、有料Ver.（本編）を活用してサクッと必要な知識を身につけてください。
有料版には特典あり
特典①：noteで書ききれなかった3つの補足情報
ページにアクションを入れるプラグインの注意点
セキュリティ系プラグインの注意点
パーマリンクの注意点
おもにWordPressを対象にした内容ですが、過去にかかわったクライアントのイメージでは、紹介した3つの注意点もあまり知られていないようなので、特典として追加しました（30秒～1分ほどの動画解説あり）
とくにセキュリティ系プラグインのトラブルは、ページが表示されなくおそれがあるので知っておいて損はしないかと。
特典②：オープンチャットへ招待（11月半ばより開始予定）
有料版には、試験的に運用するオープンチャットの招待リンクを用意しています（限定30名を予定）
上記の内容にくわえて、noteにかかわる質問もOKにする予定です（匿名参加OK）
▼有料Ver.のリンク▼
この記事が気に入ったらサポートをしてみませんか？