ページが見つかりませんでした https://kumaweb-d.com Mon, 18 Mar 2024 02:35:06 +0000 ja hourly 1 https://wordpress.org/?v=6.1.1 WordPress構築時のコーディング指示書<メニュー、ナビ、フォーム編> https://kumaweb-d.com/blog/wp-navicording/ Mon, 18 Mar 2024 02:31:04 +0000 https://kumaweb-d.com/?p=8396 皆さま、こんにちは。
WordPressでWEBサイトを構築する時に必要となる”コーディング指示書”についてシリーズで解説しています。コーディング指示書は、コーディング作業時に必要な情報を、WEBデザインと合わせてコーディング担当者(コーダー)さんや制作会社さんにお渡しするものです。

今回のトピックは【メニュー、ナビゲーション、フォーム】です。
その他のパーツについては過去記事は以下の過去記事をご参照ください。

コーディング指示書の作成におすすめのツール紹介
ディレクトリマップの作り方
サイト基本情報の伝え方
スライダー、アニメーション

さて、【メニュー、ナビゲーション、フォーム】に関するコーディング指示ですが、ページが多くならないとわからない部分や通常のWEBサイトの閲覧時には出てこない裏側の作業にあたる部分も多く、指示を出しづらいパーツでもあると思います。

WEBサイトが公開されてから気になることが出てくることも多い部分かと思いますので、当記事をご一読いただき、コーディング指示の参考にしていただけますと幸いです。

特に以下の項目がWEBサイトで採用されていることが多いと思いますので、今回の記事でピックアップして指示出しの方法をご紹介します。

  1. グローバルメニュー(グロナビ)の動き
  2. ハンバーガーメニューの動き
  3. 固定する(追従)
  4. ページネーション
  5. カスタムフィールド入力項目
  6. メールフォーム

以下で例を出して指示の出し方をご紹介します。皆さまがこれから制作するWEBサイトの動きとピッタリではないかもしれませんが、一例として参考にしていただけますと幸いです。

1.グローバルメニュー(グロナビ)の動き

グローバルメニューはほぼ全ページに共通設置される、WEBサイトでメインとなるメニューで、訪問者様が探しているページに誘導する役割があります。

ほとんどのWEBサイトで設置され、特に目立つ部分に設置することが多いので、デザインや動き方も大切にしたいところです。

近年よく採用されている2つのデザインパターンのグローバルメニューについてコーディング指示の出し方をご紹介します。

<指示の書き方例①上部やサイドに固定される場合>

例に↑あげたパターンは訪問者様のページ間の移動を楽にするため、画面上部に設置されたメニューがスクロールしても付いてくるタイプのメニューです。背景に来る画像や文字に影響をうけないよう背景色を付けるのが一般的です。どの辺までスクロールしたら固定されるかなども希望があれば指示出ししましょう。

サイドにメニューを出し、同じように固定するパターンもあります。同じようにスクロールさせたときの動きについて指示を出しましょう。

動きのイメージは参考URLを付けて伝えることで間違いがありません。専門用語がわからなくても、希望するイメージを言葉にすればOKです。

<指示の書き方例②ドロップダウンで項目が出る場合>
メニュー項目が多く、グローバルメニューが1行でおさまりきらないときは、マウスオーバー(マウスを載せたり、タップしたりする動き)でドロップダウンを出して対応します。そのときは出現させる項目やデザイン、動きの指示を出します。

画像を使うときはドロップダウン時のデザインデータも作成するとイメージとズレがないコーディングができます。

2.ハンバーガーメニューの動き

ハンバーガーメニューは3本線のアイコンで表示されているメニューのことで、スマホ版のデザインでよく利用されます。メニューを出すスペースがない場合に、ハンバーガーメニューで内容を隠しておき、利用者様が必要なときにマウスを乗せたりタップしたりして広げて利用していただきます。

ハンバーガーメニューを利用するためには、メニューが展開されたときのデザインデータが必要です。それプラス動きがあればコーディングの指示を出します。

<指示の書き方例>

レスポンシブデザインのときは、画面幅が狭くなるとハンバーガーメニューに切り替わる設定を実装すると思います。画面幅がどれくらい狭くなったら通常のグロナビからハンバーガーメニューへ切り替えるかも指示を出します。特にはっきりとしたイメージがなければ「コーダーさんにお任せします」と一言付け加えるとスムーズな作業進行ができます。

3.固定する(追従)

画面をスクロールしても動かず固定されている要素のあるデザインも増えてきました。これは「動かない」というコーディングが必要です。画面スクロール時にどのような表示になるか、指示を出します。

<指示の書き方例>

画面上の一部を固定してずっと表示させることを「追従」と表現することもあります。企業ロゴなどを追従させてブランディングに活用することもありますし、訪問者様にPRしたいページへの誘導を目的にすることもあります。

■追従コンテンツ活用例
・プレゼントなど企画ページへ誘導
・資料請求フォームへ誘導
・お問い合わせフォームへ誘導
・オンラインショップへ誘導 など

常時表示させるメリットはたくさんあります。くまWEBのWEBサイトでも導入しているおすすめの機能です。ぜひご検討ください。

4.ページネーション

ページネーションとは、ページ番号を割り当てるという意味があります。WEBサイトでは記事一覧や商品一覧ページなどページ数が多くなるカテゴリで、ページを複数ページに割って表示させることを指します。

<指示の書き方例>

1ページあたりの表示数や、時系列の並び方などを指示します。

5.カスタムフィールド入力項目

WordPressで構築すると標準で付いてくるのが「カスタムフィールド」です。カスタムフィールドは管理画面の投稿画面内に入力枠を好みで追加できる機能で、同じ項目を多数のページで入力する(例えば商品紹介ページ、店舗紹介ページなど)ときに実装しておくと便利です。

カスタムフィールドの実装はコーダー担当者の仕事ですが、デザインからはどこをカスタムフィールドにするかわからないため、WEBデザイン上のどこをカスタムフィールドとして設定するか指示が必要です。

<指示の書き方例>

カスタムフィールドはテキストのほか、画像・PDFのアップロードなども設定できます。

カスタムフィールドを利用するメリットは記入漏れの防止です。枠が事前に作られていれば埋めていくだけで記載漏れがなくなるので、同じようなページをたくさん作るカテゴリに事前に導入しておくと安心です。

カスタムフィールドは訪問者様には見えない管理画面側のみの設定です。そのため、いろいろなページでカスタムフィールドを導入しても訪問者様にはわかりません。ページを作成される方の都合に合わせて設定できます。

6.メールフォーム

メールフォームはデザインや項目の他に、入力確認画面を出すのか、エラーメッセージはどのように出すのかなど裏側の準備が必要です。

問い合わせフォームの使いやすさ、わかりやすさによって売上にも関わってくるともいいます。デザイナーさん以外のディレクターさんやマーケターさんがコーディング担当者へ指示を出すことをおすすめします。

<指示の書き方例/メールフォームの入力画面>

必須項目を決める以外にも、全角・半角やハイフンなど入力のバラツキをOKとするか、エラーとするかも判断が必要です。

デザイン面では項目が多い場合は、入力モレがないように未入力の項目はグレーアウトさせておくなど配慮するとスムーズに送信していただけると思います。送信を諦めてしまわないようエラーが出づらいようにするのもポイントです。

<指示の書き方例/メールフォームの確認画面>

メールフォームの確認画面へ遷移させず、そのまま送信完了とするパターンもあります。どのような形がターゲットと合っているかも検討が必要です。

■メールフォームから飛ぶメールについて
メールフォームから担当者のメールへ内容が飛ぶため、そのメールを受け取る担当者が読みやすいメールになっているかもチェックが必要です。メールの件名や項目の記述が読みやすいかどうかなど、フォームからテスト配信を何度か行い、微調整することをおすすめします。

WordPressのプラグインを使うと、メールフォームから飛ぶメールの文面も管理画面から修正できます。

もしWordPressで構築されていてプラグインでメールフォームを作っておられるなら、「読みづらいなぁ」というメールも管理画面から整理できますので、チェックしてみてください。

ただ、このメールパネルが間違っていると、お客様がフォームに入力した内容が届かない(送信と同時に消えてしまう)というミスも起こり得ますので、十分にお気をつけになってください。もしご不安があれば、コーディング担当者さんや制作会社担当者さんにご相談ください。

まとめ

WEBサイト上の動きには、お客様を誘導する役割やスムーズにWEB上で情報を見つけていただくという役割もあります。何を目立たせるか、どのような配置にするかなど考えることはたくさんあり、大変な作業ではありますが、コーディング指示が上手く出せると、皆さまのイメージ通りのWEBサイトが迅速に仕上がります。

コーディング作業が順調に進むよう、くまWEBではこれからも情報発信してまいりますので引き続きよろしくお願いいたします。

]]>
WordPress構築時のコーディング指示書<スライダー、アニメーション編> https://kumaweb-d.com/blog/wp-animationcording/ Mon, 11 Mar 2024 03:00:44 +0000 https://kumaweb-d.com/?p=8387 皆さま、こんにちは。
今回はWordPressでWEBサイトを構築する時に必要となる”コーディング指示書”。コーディング指示書は、コーディング作業時に必要な情報を、WEBデザインと合わせてコーディング担当者(コーダー)さんや制作会社さんにお渡しするものです。

くまWEBではコーディング指示書についての記事をシリーズで公開しています。
コーディング指示書の作成におすすめのツール紹介
ディレクトリマップの作り方
サイト基本情報の伝え方
・スライダー、アニメーション(当記事)
メニュー、ナビゲーション、フォーム

今回は【スライダー、アニメーション】に関する指示の出し方です。
主な6項目について指示出し方法をご紹介します。

  1. スライダー
  2. カーソルを合わせた時の動き
  3. アイコンの動き
  4. 読み込み中画面(ローディング)
  5. 画像や要素フェードインの動き
  6. 隠していた要素を出す動き

デザインデータを見ただけでは、コーディング担当者さんはどんな(スピードや方向など)動きを実装すればよいかわからないため、「このような動きを出して欲しい」といった指示出しが必要となります。

当記事で紹介する指示の出し方が皆さまがイメージする動きとピッタリではないかもしれませんが、「この動きをどう伝えたらいいんだろう?」とお悩みになられている方がコーディング指示を出す際の参考にしていただければ幸いです。

1.スライダー(スライドショー)の指示

スライダー(スライドショー)は限られたスペースで複数の画像やコンテンツを見せられるため、トップページやECサイトの人気商品紹介、メディアの人機記事紹介などによく使われます。

デザインからは「ここは横に動く」程度の内容は伝わりますが、どのようなスピードで動かすかなど必要な項目を、コーディング担当者さんに伝える必要があります。

・最大表示件数
・画像をクリックしたときの動作(例:該当記事へ飛ぶ、指定URLへリンク)
・画像の切り替えスピード
・ループが必要かどうか
・参考URL(イメージと似ているWEBサイトを共有) など

<指示の書き方例>


デザインデータのスクリーンショットに書き加えると伝わりやすいです。

2.カーソルを合わせた時の動き(アニメーション)についての指示

カーソルを合わせた時の動きのことを、マウスオーバーやホバー(hover)ということもあります。ブラウザ上でマウスを合わせると動いたり色が変わったり下線が出たり、さまざまな仕掛けを目にしますよね。

カーソルを合わせた時にどういう動きをさせたいかを具体的にコーディング担当者に指示する必要があります。

・色の変化
・動き
・参考URL など

<指示の書き方例①>

<指示の書き方例②>

専門的な言葉ではなくイメージを具体的に伝えることと、参考URLを提示することで仕上がりにズレが出づらくなります。

3.アイコンの動きの指示

カーソルに連動せず画像が動く部分についての指示です。
訪問者様に見て欲しい部分を目立たせたり、伝えたいことをより強く伝えたりする目的でポイントとして画像に動きを付けると効果的です。すごく目立ちますし、しっかり作り込んだWEBサイトであると感じてもらえます。

・どの画像を動かすか
・動き方
・カーソルを合わせた時の動き
・動きはループするか
・参考URL など

<指示の書き方例>

4.読み込み中(ローディング)

WEBサイトを読み込み中であることを訪問者様に伝える役割を持っているのが、ローディングアニメーションです。最近よく使われる動きです。WEBサイトがジワジワと読み込まれるのを訪問者様に見せないようにするために、読み込み中に「ローディング画面」を表示させます。

<指示方法>
ローディング画面を出して欲しいということで伝わります。どんなローディング画面にするかはいろいろとパターンが選べますので、ご希望を伝えてください。

・ロゴが浮き上がるような表示をする
・読み込まれている割合が分かるゲージを表示する
・風車のようなクルクルと回るアイコンを使う など

【例】
くまWEBではローディング中に↓以下のような動くシンプルなアイコンを表示させています。

5.画像や要素フェードインの動き

WEBサイトをスクロールした時に、順番に画像が出てきたり、ふわっとフェードインしてきたりする動きについてです。

画像をたくさん使っているWEBサイトや、縦スクロールが長いWEBサイトでは、フェードインしてくる動きがあるとリズムがついて下までスクロールしてもらいやすくなるなど、「おしゃれ」「かわいい」以外のメリットもあると考えます。

・下から上
・左から右
・ランダム などフェードインの方向を指定します。

また、ブラウザに読み込まれた時点でフェードインが発生するので、WEBページ1枚のどの辺りからフェードインのアニメーションをスタートさせるかの指示も必要です。

<書き方例>

6.隠していた要素を出す動き

WEBページが表示されたときには隠しておき、決めたタイミングで表示させる動きもあります。

・何をどのタイミングで表示させるか
・表示させた後の動きをどうするか
・参考URL などを指示します

<書き方例>

資料請求への誘導や、セール情報などをある一定の時間が経過後に表示させるなど、さまざまな誘導、訴求に使えます。訴求を主目的にする場合、このようなWEBデザインとは少し違う観点から考える必要があるかもしれませんので、ディレクターさんやマーケターさんが指示を考えるのも良いかもしれません。

まとめ

WEBサイトにはデザイン以外にも”動き(アニメーション)”という軸で工夫を凝らすことができます。さまざまな動きを付けられことを知っていただけたら、より一層効果の高いWEBサイトに仕上げることができると思っています。

コーディングの指示にも【参考サイト】があるとチーム全体の作業がスムーズですので、「こんな動きも面白いな」など他のWEBサイトを閲覧しているときに発見があったら、そのサイトをメモしておいていただけると役に立つ時が来ると思います。

どういう動きがあればご自身のWEBサイトが発展するか、効果的になるかなど考えるのは楽しいものですので、WEBサイトの制作やリニューアル時には動きの入れ方にも注力して制作いただけたらより価値のあるWEBサイトができるのではと考えています。

 

]]>
WordPress構築時のコーディング指示書<サイト基本情報編> https://kumaweb-d.com/blog/wp-basecording/ Mon, 04 Mar 2024 03:13:55 +0000 https://kumaweb-d.com/?p=8366 皆さま、こんにちは。
今回はWordPressでWEBサイトを構築する時に必要となる”コーディング指示書”。コーディング指示書は、コーディング作業時に必要な情報を、WEBデザインと合わせてコーディング担当者(コーダー)さんや制作会社さんにお渡しするものです。

コーディング指示書はWEBサイトに掲載されるものではないですが、コーディングにはなくてはならない作業の要です。デザインデータと合わせてコーディング担当者に共有しましょう。

今回はコーディング依頼時に【基本情報】として伝えておくと作業がスムーズな7項目についてお伝えします。コーディング担当者や制作会社からシートなどに記載を求められることもあると思いますし、フォームへ記入するパターンもあります。

伝え方はエクセルやWordファイルなど使いやすいファイル形式に記入してOKです。

①公開URL(トップページURL)
②サイトタイトル、ディスクリプション
③フォント関連情報
④SNS情報
⑤対応ブラウザ範囲
⑥ディレクトリ構造
⑦コーディングの種類

コーディング指示のために専用のシートを作成せずとも、デザイナーさんに制作依頼を出す際に作成したシート等での代用も可能です。

前回記事にしたディレクトリマップ、今回の基本情報、そしてレイアウトやアニメーション、フォームなどへの作業指示や動きのイメージをまとめて”コーディング指示書”が完成します。なかなか大変な作業ですが、しっかり共有して思い描くWEBサイトを仕上げていきましょう!

基本情報①公開URL(確定済みであれば)

本番(公開)のトップページURLが確定していたら共有します。
WordPressには設定項目にURLの記入欄があり、公開時には必ず設定が必要です。
コーディング時も階層を作るなどさまざまな指定に利用します。

基本情報②サイトタイトル、ディスクリプション

サイトタイトルとディスクリプションは検索エンジン上に表示される大事な項目です。WordPressでは設定欄がある他、画像のaltに入れたり、WEBサイト上部に表示させたりします。SEO対策等も加味して決めておきます。

WordPressの設定画面では、ディスクリプション=キャッチフレーズと記載されています。

基本情報③フォント関連

基準として使うフォント、カラー、サイズ、文字の太さなどを指示します。
デザインデータからどんなフォントを使っているかはわかるものではありますが、基本的な方針を共有すると作業がスムーズです。コーディング時、スタイルシートにベースとなるフォントを記載するからです。

■特殊なフォントをWEBデザインに使っている場合
→書体の共有
→類似フォントに置き換えてもよい

などコーダーさんの作業環境でどう対応すればよいかを伝えます。

■WEBフォントやフリーフォントを使用する場合
配信サイトのURLを共有します。

基本情報④SNS情報

多くの企業、お店がSNSを活用するようになり、WEBサイトからSNSへリンクを貼ったり、フィードを埋め込んだりする作業も増えています。SNSアイコンを多く配置するデザインも多いため、運営中のSNSのアカウント情報はまとめて共有すると作業が早くなります。

ディレクトリマップ上に記載してもOKです。※URLの共有や作業に応じてログイン情報の共有が必要な場合もあります。

デザインだけでは何のフィードを読み込むのかわからないため、どのアカウントの何を埋め込むか指示を出します。

基本情報⑤対応ブラウザ範囲

ブラウザは端末によって初期設定が異なり、Windowsの「Microsoft Edge」、iPhoneの「Safari」、Androidの「Google Chrome」となっています。そのため人によって使っているブラウザはさまざまなのですが、利用ブラウザによりWEBサイトの見え方が異なることがあるため、各ブラウザで同じ表示になるよう注意を払ってコーディングする必要があります。

ただ、さまざまなブラウザがあり、さらにブラウザのバージョンもあります。全てに対応するのは難しいため、これから作成するWEBサイトが正常に見えるブラウザの範囲をどうするか制作チームは考える必要があります。

WordPressは2021年にInternet Explorerのサポートを終了しており、動作保証をしていません。WordPressを利用するのであれば、WordPressが正式にサポートしている範囲内を対応ブラウザとするのが良いかもしれません。


■WordPressがサポートするブラウザ

  • Android 最新バージョンのみ
  • ChromeAndroid 最新バージョンのみ
  • Chrome の最新から2バージョン
  • Firefox の最新から2バージョン
  • Safari の最新から2バージョン
  • iOS の最新から2バージョン
  • Opera の最新から2バージョン

※最新情報はWordPressブラウザサポートでご確認ください

基本情報⑥ディレクトリ構造

サーバーにWordPressをインストールしたらデザイン→コーディングを進めるとともに、WEBサイトで公開する画像やPDFなど素材をアップロードします。その時、例えばWordPressのデフォルト設定では記事内からアップする画像(メディア)のURLは「…/wp-content/uploads/…」となります。もし変更の希望があれば指示を出します。

<指示例>
・記事内からアップロードされるファイルは「images」フォルダに入れる
・毎年公開するPDFファイルは「public」フォルダに入れる
・広告に使用する素材は「bnr」にいれる

ご自身がサーバー内でファイルの上書きなどをする可能性があれば、特にアップロードするファイルの保存先がわかりやすいと便利です。そのような希望は先に伝えておきましょう。

基本情報⑦コーディングの種類

コーディングには種類(パターン)があり、選択によって作業量や見積額が変わります。

https://kumaweb-coding.jp/contact/

・PCのみ:パソコンからの閲覧のみを想定
・スマートフォンのみ:スマホからの閲覧のみを想定
・レスポンシブ対応:スマホ、タブレット、PCなど端末ごとにデザインを切り替える
・フルレスポンシブ対応:デバイスの種類や画面幅に左右されず、デザインの全画面表示をさせる

この項目はコーディング作業の見積もり時に必要になるので、当該WEBサイトが想定する訪問者や端末での見え方などを確定しておく必要があります。デザイン作業の時点で決まっていることが多いと思いますが、デザインが未完成でコーディングの見積もりが必要な場合は、この種別だけでも決めておくとズレが少なく安心です。

まとめ

コーディング作業の前に提出する情報として、ディレクトリマップに次いでサイト基本情報についてまとめました。今後のコーディング依頼時の参考になれば幸いです。

]]>
WordPress構築時のコーディング指示書<ディレクトリマップの作り方> https://kumaweb-d.com/blog/wp-directorymap/ Tue, 30 Jan 2024 06:34:19 +0000 https://kumaweb-d.com/?p=8340 皆さま、こんにちは。
今回はWordPressでWEBサイトを構築する時に必要となる”コーディング指示書”の中でも、核となる<ディレクトリマップ>の作り方をご説明します。

コーディング指示書は、コーディング作業をするときに必要な情報をまとめておき、制作担当者さんや制作会社さんにお渡しするものです。WEBサイトに掲載されるものではなく、制作時にのみ使う裏方のような存在のファイルです。作業をする側(コーダー、制作会社)はこの指示に沿って、見積もりを作ったり、作業を進めたりします。

■WordPressの制作作業でディレクトリマップが重要な理由
ディレクトリマップはWEBサイト内にあるページや階層などをまとめてマップ状にしたファイルのことです。特にWordPressでWEBサイトを作成するときには、ページ数が多かったり階層が複雑化しやすかったりするため、WEBサイト全体を見渡せるディレクトリマップがWEBサイト制作時に大変重要な存在となります。

この記事内で詳しくご説明しますので、最後まで御目通しいただければ幸いです。

1.ディレクトリマップとは

前述した通り、ディレクトリマップはWEBサイト内にあるページ、その階層、URL等を一覧にまとめたファイルです。ExcelファイルやGoogleスプレッドシートで作成することが多いです。

また、ディレクトリマップという名前以外に、サイト構成マップやサイト構成シートなどの名前で呼ばれることもありますが機能面では同じです。

■ディレクトリマップ例

↑Googleスプレッドシートを使い、ディレクトリマップを作った例です。

■ディレクトリマップ内に含む情報

  • ページ名
  • ページ番号
  • 階層
  • 区分
  • 参考URL
  • 備考=制作時の注意点や記事内容 など

ディレクトリマップはWEBサイトにどんなページを作るかを一覧にする他、それ以外にも複数の要素を書き加えてディレクトリマップを仕上げます。そのファイルを見ればWEBサイト全体が見渡せることが重要です。

ページ名以外に書き加える要素について、それぞれ以下でご説明致します。

2.ディレクトリマップに含める情報①ページ番号

全体で何ページあるのか、この作業は何番のページのものかを把握するため、各ページに番号を振ります。

【ページ番号】は、トップページを1とします。
その他はページを順番にリストアップしていきます。

3.ディレクトリマップに含める情報②ページ名

ページの内容を表す【ページ名】をそれぞれに付けます。
後々検索エンジンで表示されたり、訪問者様がブラウザ上で確認できたりするものなので、そのページに書かれている内容がわかる固有のものにします。

■OK例
会社概要、制作料金、お申し込みの流れ、イベントカレンダー、アクセスマップなど

■NG例
ページA、ページ1など

ページ名を後から変えることは可能ですが、ページ名を付ける作業は記載する内容が重複していないかなどを確認する重要な作業でもあります。そのWEBサイトに合ったページ名を付けられるよう、慎重に考えながら命名していきましょう。

■ページ名の付け方の注意点
・ページ名の重複を避ける
・ページ名を付けながら内容がかぶっていないか確認する

4.ディレクトリマップに含める情報③階層

聞き慣れない言葉かもしれませんが、WEB制作時の【階層】は、ページの親子関係を指しています。

トップページが第1階層です。
それ以外のページは第2階層〜で、ページの内容により階層が変化します。

「ニュース>ニュース詳細」「施設案内>組織図」など、どのページを主(親)として各ページが成り立っているか考えると階層がわかりやすいです。

ディレクトリマップに書き込むときに迷ってしまったら、マインドマップやパワーポイントの階層構造のテンプレートなどを使うとイメージが湧きやすいです。

5.ディレクトリマップに含める情報④区分

【区分】はWordPress内でのページの使い分けです。

■区分の種類とそれぞれの意味

  • 固定:独立した単体のページ(例:会社案内、商品紹介)
  • 投稿:随時更新して新しいページを作成していくページ(例:お知らせ)
  • CMS:ブログ機能を使うページ(=投稿と同等)
  • 投稿一覧:投稿した内容を一覧にして見せるページ(例:過去のお知らせ一覧)
  • フォーム:訪問者様が入力する欄があり、送信機能が備わったページ(例:お問い合わせ、申し込み)

WordPressで作成したWEBページは同じように見えて、実は区分にそれぞれ割り振られています。ブログのように更新していくページと、ほとんど更新しない会社案内のようなページは違う区分で作られています。

更新していくページか、制作後はほぼ更新しないページか、お客様に入力してもらうページかなどと考えていくとわかりやすいです。

6.ディレクトリマップに含める情報⑤参考URL

制作時に参考にできるURL、つまり作りたいページに似ているページを【参考URL】としてディレクトリマップに記載してください。制作に関わる全員が共通のイメージを持ちやすく、認識のズレを減らすことができるからです。

デザインや機能も含め、「どんなページにしたいか」考えるときは、たくさんのWEBサイトを見て、ご自身のイメージに近いページを見つけてください。そうすると共通見解ができ、イメージピッタリのものが出来上がりやすくなります。

7.ディレクトリマップに含める情報⑥備考

ページ作成時に注意すること、制作に関わる全員が知っておいたほうがよいこと、盛り込んでほしい機能などについては備考欄にまとめて記載します。

各ページをどのような意図で使うのか、どんな機能を付けたいかなどを文章でまとめます。WEBデザイン前に書き込んでおくと、内容の漏れがなくなります。

更新する箇所やその頻度、リンク先、フォームの項目など、明確にわかることは具体的に指示を書き入れます。

■備考欄での指示例
・ブログ更新は複数人で行う予定なので日付以外に更新者の名前も載せたい
・営業カレンダーはGoogleカレンダーを埋め込みたい
・会員用ページはパスワードをかける

また、揺れが発生する可能性のある箇所、例えば「ブログの写真はあったりなかったりする」、「スタッフ紹介は顔写真が載せられる人と載せられない人がいて、頻繁に入れ替わりがある」などわかっていることは備考欄に書いておくと配慮しながらの制作が可能になります。

まとめ

ディレクトリマップは表に出ないものとはいえ、各ページの掲載内容がわかる名前を付けるところから始まり、どれくらいの頻度で更新するか、どのページが親となるかなど考えなければならないことがたくさんあります。

マップ作りが思いの外時間のかかる作業となるかもしれませんので、時間に余裕を持って取り掛かることをおすすめします。

また、関係者が多い場合や社内でのチェックが必要な場合など、マップが適切に仕上がっているかどうか確認してから制作をスタートさせると、抜け漏れ防止や認識のズレの減少に効果が出て、最終的には修正が少なく、迅速な完成につながります。

]]>
WEBサイトを守るレンタルサーバー、価格以外の比較の仕方5つ https://kumaweb-d.com/blog/hikaku-server5/ Tue, 26 Dec 2023 14:20:15 +0000 https://kumaweb-d.com/?p=8316 皆さま、こんにちは。
制作したWEBサイトが毎日公開できているのはサーバーのおかげですが、皆さんはどのようなサーバーをお使いですか?

今回は規模がそれほど大きくないWEBサイトを公開するときに利用する「レンタルサーバー」の違いやチェックするポイントをまとめてご紹介します。

レンタルサーバーはさまざまな会社が提供しており、種類もいろいろとあるのですが、今回ポイントにしたいのは、そのレンタルサーバーが”WEBサイトをしっかり守ってくれるかどうか=WEBサイトを安定して公開・運営できるかどうか”です。

安価なレンタルサーバーの中には、何かトラブルがあったとしてもフォローしてもらえない仕様だったり、不安要素を抱えながら利用しなければならなかったりするものもあります。そのサービスの違いを知ると「安いほうがいいだろう」とは思えなくなってきます。皆さんの大切なWEBサイトを守ってくれるレンタルサーバーですから、しっかり納得して選んで契約したいですね。

この記事では5つのポイントをご紹介します。
特にWEBサイト運営担当の方には安心できる機能をピックアップしてご紹介します。また、最後にはオススメのレンタルサーバーも理由と合わせてご紹介します!ぜひ最後まで読んでいただければ幸いです。

レンタルサーバーの基礎的な知識や主なサービスについては過去記事:レンタルサーバはどうやって選ぶ?おすすめサービス8選と特徴まとめに書いていますのでそちらもご一読いただけますと幸いです。

1.万が一も安心、自動バックアップ、データ復元機能が備わっているか

WEBサイトにトラブルがあっても、バックアップがあれば元の状態に復元することができます。WordPressで構築したWEBサイトでは定期的にバックアップするプラグインが人気ですが、サーバーにその機能が備わっているものもあります。

WEBサイトになんらかのエラーが出てしまった場合、通常は保守管理をお願いしている制作会社さん等に連絡を取り、バックアップデータで復元をお願いします。ただ、すぐに対応していただけなかったり、費用がかかってしまったりすることもあります。

そんなときに心強いのがレンタルサーバーのバックアップ+復元機能です。「初心者で知識がない…」という方にもわかりやすいようにマニュアルが用意されているサーバーもあります。

(参考)https://www.xserver.ne.jp/functions/service_backup.php

もし、WEBサイトの保守・メンテナンス費用を最低限にしたいと思われている方がいらっしゃったら、レンタルサーバーの自動バックアップと復元機能があればWEBサイトに急なトラブルやエラーが発生しても自分で元に戻せる可能性が上がるので、この機能を必須にしてレンタルサーバーを選ぶことをオススメします。

2.どんなサポートがあるか、その評判は?

無料のレンタルサーバーでなければ、何かしらのサポート対応は付いています。

レンタルサーバーのサポート対応の内容は幅があるのですが、基本的にどのレンタルサーバーでも対応してくれるのが管理画面などの使い方や機能の説明、契約についてです。そのほか、WEBサイトの閲覧やメールの送受信でトラブルがあったときや、レンタルサーバーから移転したいときの手順なども問い合わせて確認することができます。

また、WordPressの設定サポートなどWEB制作や運営の支援まで入っているサポートもあります。一からご自身で作らないといけないようなときは心強いですね。

ただ、レンタルサーバーによって、サポートに連絡する方法がメール(フォーム)だけだったり、電話やチャットも準備されていたりとさまざまです。急いでいるとき、よくわからないときは電話やチャットは便利なので、不安がある方はぜひメール以外の方法もあるレンタルサーバーを選んでみてください。

(参考)https://support.cpi.ad.jp/contents/contact.html

よく使われているレンタルサーバーのサポート体制をチェックしてみました。

  • メールフォームから問い合わせ→メールもしくは電話を選んで返答をもらう
  • オペレーターのチャットもしくはチャットボット、メールフォーム、電話などどこから問い合わせても可
  • メールフォーム、チャット、電話の対応可
  • メールフォーム、チャットから問い合わせ→返答は電話を選べる

だいたい月々500円程度以上のプランを契約していれば、メールフォームと電話の対応を用意しているレンタルサーバーが多いようです。ただ、レスポンスの良さや電話のつながりやすさ、返答内容のわかりやすさなどは窓口があることと別の評価軸になりますので、窓口が用意されているかだけでなく実際に利用した方の評判なども確認してから契約するのが良いでしょう。

3.安定性がわかるサーバー稼働率もチェック

レンタルサーバーはWEBサイトを安定して公開することが最大の任務です。サーバー稼働率は、サーバーが正常に稼働してWEBサイトが安定して公開されたことを証明する数字です。

これはレンタルサーバー以外のWEBサービスでも同じなのですが、障害によるサービス停止が過去どれくらいあったか?をチェックできます。

(参考)https://support.google.com/a/answer/139569?hl=ja

Googleでもサービスの提供状況を明らかにしています。障害があるとほんとに何もできなくなりますから、安定して稼働しているサービスを選びたいですよね。

気になる「レンタルサーバー名+稼働率」で検索するとだいたい数字が見つかります。

(参考)https://lolipop.jp/media/erabikata_hinshitsu/

100%に近いほど安定してWEBサイトが公開されている証です。だいたいのレンタルサーバーで99.99%と出ていると思いますが、WEBサイトが公開されることは最低限のことですので、当たり前といえば当たり前なのです。法人専用などで100%を謳っているところもあります。

ある程度知名度のあるレンタルサーバーでは大体心配は要りませんが、それでも大切なことですのでしっかり確認してから選ぶようにしましょう!

4.WEBサイトの表示速度に影響する!CPU、メモリ、高速化などサーバーのスペックも確認

サーバーもパソコンと同じく、そのスペックによって処理速度が変わってきます。
公開されていないレンタルサーバーもありますが、公開しているレンタルサーバーを確認してみると、プランによって大きくそのスペックが変わっていることがわかります。

(参考)https://www.shin-server.jp/service/functions.php

“ハイスピードプラン”や”プロ”などの名前が付けられていることの多い、レンタルサーバーの中でも上位プランを選択すると何が違うからユーザーメリットになるのかというと、このスペックが違うことで処理速度が違うことが多いです。

処理速度は、たいていWEBサイトの表示速度につながってきます。WEBサイトの表示速度はSEO対策でも大切といわれていますし、WEBサイトの離脱阻止にもつながります。

プランがたくさんある中で検討していると、「サービスが同じなら安いプランがいいかも」と思いがちですが、最安プランと高額プランでは処理速度がかなり変わってくることがあります。

サーバーのスペックは非公開のレンタルサーバーもありますが、表示速度に対して「高速化」「高速通信」など銘打っているところであれば、どんなサーバースペックで、どんな技術を実装しているか特徴としてユーザーがわかるように打ち出しています。

SEO対策含め、WEBサイトの高速化に力を入れたい方は、レンタルサーバー選びにプラスしてプランも上位の”高速化”対応のものを選ぶなど、工夫をしてみてください。

5.SPF・DKIM・DMARCに対応しているか(メールを使う場合)

レンタルサーバーでメールの送受信も一緒に行うことも多いと思います。最近はスパムメールの増加で、メールもセキュリティ対策を行わないと先方に届かない(迷惑メールに入ってしまう)という問題が多発しています。

メールの信頼性を向上させるためのSPF(Sender Policy Framework)や、DKIM(DomainKeys Identified Mail)、DMARC(Domain-based Message Authentication、Reporting and Conformance)という技術があるのですが、その技術が使われていないメールは今後受信できなくなると米Googleが発表しました。

(参考)https://xtech.nikkei.com/atcl/nxt/mag/nc/18/092400133/121200124/

1日5000件未満の送信元は、送信ドメイン認証の「SPF」と「DKIM」のどちらか一方への対応が必要だ。一方、5000件以上の送信元はSPFとDKIMの両方に対応し、さらに「DMARC」をパスする必要もある。

スパムや詐欺メールが多くなった対策といわれています。ドメインに対してGoogleが認めるセキュリティ認証を付与するといった対策を行えば、そのメールのセキュリティが向上するため、迷惑メールに振り分けられなくなります。メールを送受信しているサーバーにこれらのセキュリティ対策用の機能があるかどうかは、今後チェック必須になると思われます。

すでに今、これらの機能が備わっているレンタルサーバーはセキュリティ対策にも積極的であると考えられるので、他の点でも安心して使うことができると思います。

6.総合的にオススメのレンタルサーバーは「エックスサーバー」

レンタルサーバーはそれぞれにコストパフォーマンスや機能などメリットがありますが、総合的に判断すると、「エックスサーバー」がバランスがよくオススメです。

https://www.xserver.ne.jp/

  • サイトの表示速度が速い
  • 特に設定をせず、最初からファイルとDBのバックアップがあり、何かあった際に復元出来る
  • サポート体制も充実している
  • SPF/DKIM/DMARCなどの対応が早く、セキュリティ対策も万全

バランスよく整っているので、迷われたときはエックスサーバーをオススメします。

まとめ

WEBサイトを守り、支えてくれるのがレンタルサーバーです。どんなサービスが備わっているか、価格はいくらか?という以外にも、高速表示やセキュリティなど各レンタルサーバーで力を入れている部分があります。

どんなWEBサイトにしたいかという目標やコストの面など、さまざまな視点から考えてレンタルサーバーとプランを選ぶようにしてみてください。一度選んでWEBサイトを構築してしまうと、引っ越しは費用もかかり大変な作業ですので、慎重に比較して選ぶことをオススメ致します。

]]>
コーディングの指示書の書き方と指示出しに使いやすいツールご紹介 https://kumaweb-d.com/blog/cording-shijisho/ Thu, 14 Dec 2023 04:33:08 +0000 https://kumaweb-d.com/?p=8303 https://mitekaku.com/about画像をアップロードしたり、URLからスクリーンショットを生成してくれたりして、指示を入れるベースが作られます。それに自由に書き込んで使います。

皆さま、こんにちは。
今回は「コーディングの指示書」とは?ということと、その指示書作りやコーダーさんへの指示出しにも使えるツールについてご紹介します。

コーディング作業の前には、制作会社さんやWEBデザイナーさんからコーダーさんへデザインデータへのお渡しとともに、どういうコーディングをしたいか?を説明して依頼をすると思います。

そのときに、「コーディング指示書」を作ってほしいと依頼されることもあります。くまWEBではコーディング依頼時に指示書は必要ありませんが、コーダーさんによっては制作の流れで必要となることがあります。

その指示書に書いておくとよいことと、伝える際に使えるツールをまとめてご紹介します。

1.コーディング指示書に記載する内容

WEBデザインデータを渡しただけではわからない、デザインデータからではわからない情報を”コーディング指示”として出します。

<例>
・リンク先(サイトマップでわかりづらい場合)
・動き(アニメーション、スライドショーなど)
・文字のテキスト/画像の区別
・hタグの指定
・画像のaltタグ
・classなどの命名ルール
・グローバルメニューなどのホバー

デザイナーさんがカラーガイドやアニメーションなど、コーディング時の作業がわかりやすいように作ってくださっていたとしても、念のため、抜けないようにするのがコーディング指示書の役目でもあります。ちょっとした指示でもコーダーさんが便利になることもあります。

デザインデータを見て、「ちょっとわかりづらいかな?」と思うところや、「こうしてほしい」とはっきりした希望のあるところは指示しておくと間違いがおきづらく、結果として修正回数が減って早く仕上がるので、Win-Winになります。

■特に動きをつけたいWEBサイト制作のときは細かめな指示出しが必要

・ボタンにポインタを載せたときに色が変わるようにしたい!
・目立つように動く線が出るようにしたい!
・スライドショーを5枚でゆっくり左から右へ!画像をクリックでリンクが飛ぶように!

そんなときは「左側から背景が赤に変わる」などちょっとコメントを入れておくと、漏れなくコーディングされます。

2.コーディング指示書の書き方

コーディング指示の出し方ですが、デザインデータを印刷してペンで描いた(後にスキャン)り、PDFの上に書き込んだり、スクリーンショットをパワーポイントに貼り付けて書き込んだり…と、いろいろな方法があります。

ただリンク先などコピーできたほうが便利なこともあります。

・PDFの上にコメント機能を使って書き込む
・指示入れの専用ツールを使う

などによって作業効率がアップします。
PDFのコメント機能もなかなか便利です。

ただ1枚のPDF上に入れたコメントの総数はわかりますが、それぞれのコメントに番号が振られないので管理しづらいなどデメリットもあります。

専用ツールはやはりうまくできているので便利です。
無料で登録もせず使えるツールがありますので、1つご紹介します。

3.指示出しツールはやはり専用だけあって使いやすい!

これまでも修正指示&校正ツール「AUN」修正指示&校正ツール「MONJI」をご紹介しました。

コーディングの指示出し以外にも使える「mitekaku」という無料ツールがあります。もともとはデザインの修正に使うために開発されているようです。

https://mitekaku.com/about
画像をアップロードしたり、URLからスクリーンショットを生成してくれたりして、指示を入れるベースが作られます。それに自由に書き込んで使います。

指示を入れた部分は吹き出しが出て、ファイルを添付したり、吹き出しと吹き出しを関連させたりと、指示を出す側にはありがたい機能が整っています。

仕上がったらURLを共有して確認してもらう仕組みです。コーダーさん以外にもデザイナーさん、ディレクターさんなど複数人に送るのも簡単です。

■無料/登録をしないで使える機能
・保存期間:7日間
・アップロード容量:20M
・修正指示機能:無制限
・パスワード保護付き
・一度保存すると修正できない

保存期間が短いなどデメリットはありますが、指示を入れる機能は無制限なので、使いやすさは十分です。

このような専用ツールは複数あり、無料で使えるものもたくさんありますので、まずは無料で登録せずに使えるもので試してみてください。

4.依頼をしっかり出せば短い期間で修正が少なく仕上がる

コミュニケーションが不足すると、どうしても行き違いが生まれて作業に無駄が出ます。

くまWEBでは経験が豊富なことや、しっかりと担当者が聞き取ること、オンラインのお打ち合わせなども行うことで依頼にしっかり対応するように心がけております。そのため指示書は不要とお客様にはお伝えしております。

ただ、なかなか口で表現しづらいことがあったり、「言ってもいいのかな」と遠慮されてしまったり、WEBディレクターさんが指示を出すときに全体像が見えていなくて整理したいタイミングがあったりなどすると思います。

そんなときはマイペースに全体をみながら指示を書き込めるツールも便利なものです。皆さんの使いやすいように上手くツールも使いながら作業を進めていただけると幸いです。

まとめ

コーディングの指示出しと書いてしまうと難しいイメージがあるのですが、「こうしたい」という要望がコーディング担当者に伝われば結果OKなので、書くのが大変な方は口頭でお伝えするのも良いと思います!

作業効率化を考える方は、指示が抜けなく伝わりやすく、書いた文字がコピペできるなど作業が重複せずに行える配慮された専用ツールのご利用をご検討くださいませ。

 

]]>
WordPressの有料テーマを購入する時に気を付けること https://kumaweb-d.com/blog/wp-pro-theme/ Fri, 24 Nov 2023 01:16:38 +0000 https://kumaweb-d.com/?p=8286 皆さま、こんにちは。
今回はWordPressのデザインテンプレートであるテーマについて少し詳しくお伝えしていきたいと思います。

WordPressは、WEBサイト構築時にサーバーさえ準備しておけば無料で使えるとても便利なツールです。今は世界中のWEBサイトの4割程度がWordPressでつくられているといわれています。

WordPressでは無料で使えるデザインテンプレートも提供されていて、デザイナーさんがいなくてもきれいなビジュアルのWEBサイトを作ることができます。創業時などあまり予算はないもののホームページを持っておくことが必須!というときに、WordPressは大変心強い存在です。

■WordPressには有料のテーマもある?
WordPressは無料のテーマを1万点以上提供してくれており、公式サイトからは検索することも可能です。いろいろなテーマを比べながら無料でWEBサイトをつくることができます。

https://ja.wordpress.org/themes/
そのほか、購入することで使えるようになる有料のテーマもあります。そのような費用負担がかかるものもWordPressの公式サイトで紹介されています。

https://ja.wordpress.org/themes/commercial/
上記のページで紹介されている以外にも有料のテーマというのは販売されていて、世界中に数えきれないほどの有料テーマがあります。いろいろな国のデザイン会社やWordPressのテーマをつくる専門の会社が販売しています。

ご自身が思い描くビジュアルにピッタリと思うものが見つかったときやデザイナーさんがおらず不安なのでサポートを受けたいとおもったときなどは、有料テーマを購入するという選択肢もあります。しかし販売している会社がたくさんあり、さらにそれぞれに規約(使用ルール)も違うので、購入する前に気をつけておくべきこと、購入検討時に知っておきたいポイントなどがあります。そこで今回はWordPressの有料テーマを買う前に知っておきたい、気を付けることについてお伝えしていきます。

1.必ず購入前に有料テーマのライセンス、規則をゆっくりチェック

WordPressの有料テーマは、購入者が自身のWEBサイトをつくるために販売されている商品です。購入したファイルをご自身の手でWordPressにインストールし、利用することが前提です。

つまり、購入して誰かのWEBサイトをつくる(クライアントワーク、WEB制作業務)ときに使いたい場合は、事前に有料テーマの規約をよく読み、ルールを把握してから購入する必要があります。

規約の書き方も有料テーマによって表現の幅がありますので、しっかりと読み込むことをおすすめします。

  • 「第三者のサイト」の制作はライセンスに違反します。
  • クライアントワークはビジネスライセンスを購入してください。
  • 購入ユーザーのみ利用できます。
  • クライアントや代理店等に提供可能です。

などさまざまな書き方があります。ご自身がどのような用途で有料テーマを使いたいかも改めて考えてから規約を読み込み、検討のうえでご購入されることがよいと思います。

2.複数サイトに使えるかどうかも規約をチェック

例えばご自身でたくさんの商品を抱えている場合や、会社のサイトと採用サイトを分けたいといった場合には、複数のWEBサイトをつくっていかれると思います。

やはり1つのWEBサイトに全てを盛り込むより、内容にあったデザイン、わかりやすく絞り込んだ導線でWEBサイトは設計したほうがよりよいものになりますので、複数のサイトを持たれることはよいことだと思います。

WordPress本体には使用に制限がありませんので、どのWEBサイトにも自由にWordPressを使えます。ご自身が10個のWEBサイトを運営していてそれぞれでWordPressを使っていたとしても問題になることはありません。

ただ、有料テーマはWordPress本体と同じようなスタンスではありません。それぞれの規約がありますので、テーマごとに確認する必要があります。

「今は複数サイトの予定がない」といっても、今後どうなるかはわかりませんので、まずはそのテーマがいろいろなWEBサイトで使いまわしてOKなのかどうか確認しておくことは重要だと思います。

複数のWEBサイトにインストールしてテーマを使用してよいかどうかは、各テーマで明確に決められています。確認せずに複数サイトで使用すると、意図していないのに結果として”規約違反”となります。意図せず規約違反だとされてしまうと辛いですから、ぜひ最初にチェックをお願いいたします。

3.国内生産かチェック

有料テーマは世界中で作られているので、さまざまな言語をベースにしています。やはり使いやすいのは日本語ですし、日本で作られているテーマです。ビジュアル面で考えればどの言語のものであってもいいのですが、やはり国内生産のテーマは将来的な使いやすさにつながります。

WordPressの公式無料テーマにも、いろいろと日本語をベースに作ったテーマがあります。英語でも使えますが、やはり日本語フォントがしっくりくるデザインになっているので、日本語ベースのものは使いやすいです。

有料テーマも同じように日本人向け、日本語での用途に合っているものがあります。日本のデザイン会社や企業が作っているテーマかどうか、購入前にチェックするとよいと思います。

4.カスタマイズしたい場合はテーマ内に機能があるか確認

有料テーマの多くは、美しいデザインを作るためにさまざまな工夫がされて完成されています。また、SEOに特化したテーマであれば、SEO対策用に高度な設計されているものが多いと思います。

また、有料テーマの大きな特徴として、備えられている機能(例えば写真を入れ替えたり、フォントを変えたり)で簡単にデザインが変更できることが前提に制作されています。購入者はテーマの機能を使って簡単に好みの色や写真、レイアウトにできるからこそ受け入れられている点があります。

(参考)WordCamp Tokyo 2023のセッション動画

逆に考えると、そのテーマ内の機能から離れてしまうようなカスタマイズはしづらいということです。高度に組み合わされて作られている有料テーマに手を加えようとすると、まずどのように作られているものかを読み解く必要があり、なかなか時間がかかります。

それであれば、有料テーマ内にご自身が使いたいカスタマイズ機能があるかどうか確認してから購入するほうが効率的です。また有料テーマに+αする機能(プラグイン)がさらに有料の場合もありますので、総額も確認しながらチェックすることをおすすめします。

また、ある程度ご自身にデザインイメージがあり、「こういうサイトが作りたい」とご希望があるのであれば、有料テーマを購入してご自身の時間を使ってカスタマイズするよりも、デザイナーさんに意図を汲み取ってもらって一から作ったほうが早く思い通りのものができることもあります。

有料テーマ、オリジナルテーマを比較してみて、ご自身の用途にどちらが合うかご検討されてみてください。

5.WEBサイトの内容が有料テーマの規約に沿うか確認

オリジナルデザインでWordPressを利用する場合は、WEBサイト内のコンテンツがどんな内容でも問題ありません。ただ、有料テーマはそれぞれに規約で定められています。

・商用利用OK
・どんな内容でも問わない
・どんなジャンルのサイトでも利用できる
・反社会的、暴力的、猟奇的な情報を発信するサイトへの当テーマの使用は禁止

などそれぞれに書かれている内容がありますので、ご自身が予定されているWEBサイトの内容がその有料テーマの規約でOKかどうかも購入前にご確認ください。

6.サポートがあってもサブスクの場合があるので確認

有料テーマによっては質問が会員制のフォーラムのようなスタイルになっており、即時に質問して答えがほしいときはサブスク課金の会員を続けていなければならないテーマもあります。

購入したテーマのアップデート(脆弱性のバージョンアップや機能強化など)は無料でできるけれど、サポートはサブスクの会員のみということもあります。

そもそも有料テーマのサポートにはWordPressのメンテナンスが入っていないため、WordPress本体のメンテナンスはご自身で行う必要があります。セキュリティの面でWordPressのアップグレードは大切なので、ご自身でWEBサイトを管理する場合はWordPressのメンテナンスにも時間がかかることを視野にいれておいてください。

WordPressのアップグレードは専門知識がなくてもある程度情報収集ができればできます。当サイトでも別記事「WordPressのアップグレードをする理由と作業時に気を付けるポイント」などにまとめていますのでご参考になさってください。

まとめ

初期デザインやテーマ内のカスタマイズが簡単にでき、購入した日からWEBサイトを公開することもできるほど完成した状態、かつマニュアルがっと乗った状態で手に入るのが有料テーマのメリットです。ただ、使用の制限等についてはそれぞれの規約によって違いがあることがわかっていただけたかと思います。

また、テーマ内の機能を使う以外のカスタマイズや拡張は通常のオリジナルテーマでの制作よりも時間がかかる(テーマの中を読み解く必要があるため)、他のデザイン会社やシステムの会社がライセンスの問題で管理に入れないなどデメリットもあります。

有料テーマは販売している会社によってさまざまな違いがありますので、できれば購入をあわてず、オリジナルで作ったほうがぴったりのものが作れて管理にもプロの手を借りられることと比較検討し、最終の決定をされることをオススメします。

]]>
WordPressのテスト環境を簡単に作ってアップグレードテストをする方法 https://kumaweb-d.com/blog/wp-staging/ Tue, 14 Nov 2023 02:51:48 +0000 https://kumaweb-d.com/?p=8267 皆さま、こんにちは。
前回WordPressのアップグレードの必要性についてご説明しましたが、今回はアップグレード前に行いたいテスト環境づくりについて解説させていただきたいと思います。

WordPressで構築したWEBサイトは、時間の経過とともにセキュリティ上の欠陥が発見されるようになり、そこを外部から攻撃(例えば不正改ざんや情報の抜き取りなど)されやすくなります。本体もそうですし、テーマやプラグインなど含めて、修正作業は日々行われます。

セキュリティの脆弱性が見つかるのは仕方のないことですから、制作者の方々が随時修正してくれたファイルを手に入れて、アップグレードして脆弱性を埋めていかなければいけません。

アップグレードについては通知が来るのですが、「アップグレードしてください」といわれたからといって素直にファイルをダウンロードしていきなり書き換えるとエラーが出たり、他の不具合に繋がったりすることがあります。

■エラーが出ないアップグレードのためには?
テスト環境で、一度試してみることが重要です。
同じサーバー(同じ環境)で構築したテストサイトでOKであれば、本番環境でも問題ないはずなので安心してアップグレードすることができます。

今はテスト環境を簡単に作れるWordPressのプラグインがありますので、そのプラグインを活用すればテスト環境の構築には手間はそれほど必要ありません。エラー回避のためにテスト環境をしっかり活用していきましょう!

 1.WordPressのテスト環境を作るプラグイン「WP STAGING」

利用するプラグインは「WP STAGING」という無料のプラグインです。WordPressのクローンを作るという主旨のプラグインで、同じドメインのサブディレクトリに全く同じ環境のWordPressを構築してくれます。

https://ja.wordpress.org/plugins/wp-staging/
■無料(PRO版もあり)

バックアップやテストの目的でWordPressを複製する目的で作られ、配布されているプラグインです。非常に多くの方が使われていて、このプラグイン自体も頻繁にアップグレードされているので、安心して利用することができます。

無料版の機能で十分な働きがありますので、今回はすべて無料の範囲内で使い、解説していきます。

また、「WP STAGING」の日本語版はありませんが、簡単な英語で構成されているのでわからないところで少し翻訳サイトを使えば、十分理解しながら作業を進めていけると思います。それでは早速インストール、有効化していきます。

2.プラグイン「WP STAGING」をインストールして有効化する

WordPress公式のプラグインなので、WordPressにログインし、プラグインを検索してインストール、有効化します。その他のプラグインと変わりませんが、英語なので少し詳細にご説明します。

有効化した際に出てくる画面には、PRO版へのステップが表示されます。今回は無料版を利用しますので、【Skip&Start WP STAGING】をクリックして先へ進みます。

3.プラグイン「WP STAGING」でWordPressを複製する

プラグインをインストールできたら、今のWordPressをサブディレクトリへ複製する作業を進めます。

※WordPressの複製とテスト環境を作るというのは同義です。「WP STAGING」では”WordPressを複製する”という言葉が使われています。

【Create Staging Site】からスタートします。

サブディレクトリの名前を入れる欄がありますので、好きな名前で登録します。testやcloningなどがわかりやすいですね。

テスト環境用のURLが吐き出されたら、作業完了です。
URLへアクセスするとログインが求められますので、いつものユーザー名やメールアドレス、そしてパスワードを使ってログインします。

全く同じWEBサイトができているはずです。
違うところは、ヘッダーにはオレンジ色の帯と【STAGING】の文字が出ているところ。これによってテスト環境(複製された環境)ということがわかるようになっています。

3.プラグイン「WP STAGING」でアップグレードしたりデザインを変えたりしてテストする

これで自由なテスト環境ができましたので、気になっていたアップグレード作業をしたり、テーマをアップグレードしつつデザインを調整したりして、問題がないか確認していきます。

■注意①パーマリンクは気にしない
パーマリンクは引き継がれないため、各記事のURLはWordPressの初期設定となります。

■注意②本番環境への自動反映はできない
複製した(テスト環境の)WordPressに変更を加えて、本番環境へそのまま反映させるにはPRO版の契約が必要です。そのため大掛かりなリニューアル等には向いていません。WordPress本体、プラグイン、テーマのアップグレードのテストをするためのプラグインだと思っていただければと思います。

4.テストする順番は、テーマ→プラグイン→WordPress本体

アップグレードが溜まっていたときは、まずテーマ、プラグイン、そしてWordPress本体のアップグレードの順番で行うとよいと思います。

WordPress本体のアップグレードでプラグインの更新が追いついておらずエラーが出る可能性があります。そのため、WordPress本体のアップグレード前にプラグインを一旦無効化してから行うことをおすすめします。後から有効化すれば元通りに戻ります。

 5.テストが終われば、プラグイン「WP STAGING」で複製した環境を削除する

本番環境の中から削除できますので、確認した後はすぐに削除するようにします。間違って複製環境をずっと触っていた…ということを防ぐためです。

本番環境のWordPressの管理画面から、Deleteします。

■注意
間違いやすいのが、複製された環境にも「WP STAGING」がインストールされていることです。全く同じ様に複製されているので、今どちらを触っているのか、必ず確認する作業をお忘れなく!

<削除された後は、どうなる?>
「WP STAGING」からDeleteした後は、複製されたページは削除されるのでインターネット上からなくなります。ブラウザを更新すると、「このページは見つかりません」などのエラー画面が出ます。しっかり削除したことを確認しておくと安心ですね。

まとめ

今はプラグインやWordPress本体の自動更新機能もありますので、それほどアップグレードでエラーが出ることはありません。しかし、なかなか緊張する作業ですので、ぜひテスト環境で試してみてから本番に反映させれば安心できますね。バックアップとあわせて、テスト環境の構築もぜひ行ってみてください。

 

]]>
WordPressのアップグレードをする理由と作業時に気を付けるポイント https://kumaweb-d.com/blog/updating-wordpress/ Tue, 24 Oct 2023 02:57:52 +0000 https://kumaweb-d.com/?p=8247 皆さま、こんにちは。
今回はWordPressで制作したWEBサイトのアップグレードやメンテナンスについて記事を書いていきたいと思います。

WordPressで構築したWEBサイトを持っておられるならご存じの方が多いと思うのですが、WordPressの管理画面に時折、”更新(=アップグレード)してください”とお知らせが入ることがあります。

これはWordPress本体が常に改良されていっており、月日が流れると最新版が出てくる仕組みになっているためです。最新バージョンにアップグレードすることが最適なことから、すべてのWordPressを利用しているWEBサイトに対して連絡がくることになっています(通知を切っていると出ません)。

ところで、みなさんはこのお知らせが出た時にどうされていますか?
定期的に時期を区切って対応している、保守をお願いしている担当者(外部の会社)が対応している、そのままにしているなどいろいろなパターンがあると思いますが、「どうしていいかわからないのでそのままにしている」「対応する必要を感じ取っていなかった」という方もいらっしゃると思います。

WordPressのアップグレード等にどう付き合っていくのがよいのか、最新バージョンにしておかなければリスクがあるのかなどを解説させていただきたいと思います。

<本記事の目次>

  1. なぜアップグレードがあるのか
  2. 各WEBサイトは最新版にアップグレードしているのか
  3. 自サイトのバージョンや環境をチェックする方法
  4. アップグレード(定期メンテナンス)のポイント3つ

本記事の内容は、皆さまのWEBサイトを安全で安定して保持するための情報として役立てていただける場面があると思いますので、参考にしていただければ幸いです。

1.なぜWordPressのアップグレードが必要なのか

WordPressはWEBサーバーにインストールすると使える無料のCMS(デザイン、文章、画像などを管理するシステム)ですが、バグが発見されたりセキュリティの脆弱性がわかったりしたときに本体の修正が行われます。修正が反映された最新バージョンが公開されると、「最新バージョンを使ってください」という意味合いで、更新(=アップグレード)のお知らせが届く仕組みになっています。

WordPressの本体が古い状態のまま使ってしまうと、バグをそのままにしてしまったり、安全性が低いままになってしまったりと運営にあたってリスクが高い状態になるため、最新版が推奨されます。Windowsのシステムやスマホのアプリと同じです。

公式サイトでも最新版にアップグレードするようにしてくださいとアナウンスされています。

(参考:https://ja.wordpress.org/support/article/updating-wordpress/

古いバージョンのままでもWordPressは動きますので、アップグレードをしていなくてもWEBサイトを公開することはできます。では、作業せずそのままでもいいのでは?と思ってしまいますよね。

実際にすべてのWordPressで構築されたWEBサイトが最新状態かというとそんなことはありません。

2.どれくらいのWEBサイトがWordPressを最新版にしている?

2023年10月には、約6割が最新版を利用しているとのデータが確認できました。私は思ったより多いなと思ったのですが、皆さまはいかがでしょうか。

(参考:https://www.docswell.com/s/tanuki-wp/KW13PQ-2023-10-17-183414/19

最近は自動で最新版にアップグレードされる仕組みが取り入れられたため、知らず知らずのうちに最新版になっているパターンもあると思います。だいたい年に3回程度は修正がかかり、アップグレードのお知らせが届くサイクルになっています。

3.自サイトのWordPressに関わる環境をチェックする方法

WordPressの管理画面から、WEBサイトの状態(WordPress本体、テーマ、プラグイン等)を確認することができます。

例えば、保守は外部委託せずにご自身で行われていた場合、定期的にチェックするだけでも安全性を保ちやすいです。

WordPress管理画面左サイドバー>ツール>サイトヘルス

サイトヘルスのページではWordPressのバージョンが確認できたり、安全性に対する評価をチェックできたりします。メンテナンスのときやWEBサイトリニューアルのときなどにこのページに表示されている情報が役立ちます。

WordPressはサーバーやデータベースなども密接に関わっているので、サイトヘルスのページではそれらのチェックも可能です。

専門的な数値ではあるので、専門職でなければ読み解くことは難しいのですが、ここに載っている情報がWEBサイトのメンテナンスで必要になることもあります。なかなか複雑にいろいろなものが関わっているのだなと感じられるので、ぜひこのタイミングで一度チェックしてみてください。

4.WordPressをアップグレードするポイント3つ

WordPressのアップグレードはWordPress本体のほかに、テーマやプラグインのアップグレード作業も必要です。テーマやプラグインにも不具合や脆弱性などが見つかるためです。

ただ、そのまま全部のアップグレードをクリック一つで実施していいかというとそうではなく、気を付けるポイントがありますので、それぞれのアップグレードのポイントをご紹介いたします。

①WordPress本体のアップグレードで気を付けること
WordPressのバージョン5.6以降、デフォルトのままだと本体は自動更新される設定になりました。自動更新だとセキュリティ的には安全性が高く保たれるのでメリットとなりますが、ごく稀にですがエラーが出てWEBサイトが見られない状態になったり、デザインが崩れたりする可能性があります。

(最近の私の体験では、プラグインとWordPress本体のバージョンが合わなくなり、管理画面上でエラーが出て更新できない状態になったことがありました。)

また、自動更新ではバックアップを取っていない状態でアップグレードされるため、もし「すぐ元に戻したい」となっても戻しづらいです。

◆自動更新にするなら定期的なバックアップを取り、かつその期間を短くし、エラーが出ればすぐ戻せる状態にしておく

もしくは

◆自動更新を切っておき、作業担当者の時間のあるときにバックアップを取って手動で作業する

最低限どちらかの方法を取ることをおすすめ致します。

※バックアップについてはWordPressの管理画面にも注意と解説が出ます。このような注意書きは重要な内容もありますので、ご確認の上でバージョンの更新(アップグレード)を行ってください。

WordPress本体をアップグレードしたときにテーマと互換性がなくなり表示がおかしくなるケースもあります。そのときはWordPressをダウングレードするか、テーマの不具合を直す必要があります。

また、エラーが出るのを防ぐためには、いきなり本番のWEBサイトでアップグレード作業を行わず、テスト環境でアップグレード作業を実施し、問題がないか確認してから本番環境で行うことが大切です。

■プラグインでサーバー内にテスト環境を作る
テスト環境を本番サイトと同じサーバーの中に作るプラグインがあります。プラグイン「WP STAGING 」は無料で既存の(今公開している)WEBサイトをテスト環境下にコピーして作ってくれます。サーバーを用意することなく、ログイン情報なども同じでできるのですごく便利です。


https://ja.wordpress.org/plugins/wp-staging/#description

プラグインの利用は無料でシンプルな操作ですが公式の説明動画があり、とても短いので一度ご覧になってからインストールしてみてください。

②テーマのアップグレードで気を付けること
WordPressの公式テーマや配布されているテーマを使っているとテーマもアップグレードがあります。設定しておけば自動更新が可能です。

稀にレイアウトが崩れたり管理画面内にエラーが出たりすることもあるので、自動更新をONにする場合はWordPress本体と同じくバックアップが取れる体制も合わせて整え、自動更新後には動作確認されることをオススメします。

※制作会社が自作したテーマをWordPressにインストールしている場合
WordPress本体のアップグレードを行ったときにテーマファイルが古くて動かなくなることがたまにありますので制作から時間が経ったときは注意が必要です。

・制作元に修正を依頼する
・(依頼が難しい場合)WordPressをダウングレードして一旦対処し、別の制作チームに調査依頼して修正を行う
・(それを機会として)全面リニューアルを考える

不具合が出た時は上記の3パターンが主な選択肢です。
制作元にお願いできないときに一から調査して修正してもらうのは費用面でもデメリットとなりますので、リニューアルのタイミングだと考えるのもよいかもしれません。

③プラグインのアップグレードで気を付けること
プラグインも脆弱性が発見されることが多く、アップグレードする必要が出てきます。プラグインもWordPress本体やデザインテーマと密接に関わっているので、WordPress本体をアップグレードしたときにプラグイン内の古い機能が動かなくなることもあります。

プラグインだけをアップグレードして本体をそのままにしておくなどで差が出てしまうと不具合が出やすくなります。そのような不具合はプラグインをダウングレードすれば一時的な対処ができますが、WordPress本体のアップグレードをしなければならない時期に来ていると考えられます。

「WordPress本体は怖いので触らずにプラグインだけをアップグレードする」などではなく、WordPressは本体、テーマ、プラグインと関係性がありますので、アップグレードはすべてをひっくるめてお考えになるようになさってください。

まとめ

WordPressは必ずアップグレード作業が発生しますので、WEBサイト構築時はその後の作業をどうするか、制作元とご相談されておくことをオススメします。突然WEBサイトが表示されなくなるようなエラーが出てしまったら、何が原因かを見つけるのはなかなか大変な作業で、人件費を使いますから費用もかさむでしょう。

社内でWEBサイトの構築を行っている場合は詳しい人に質問できるタイミングで作業を行ったり、バックアップを取ってからにしたり、テスト環境でアップグレードしてから本番環境で実施したりするなど、作業工程を改めて確認なさってください。

社内での人材確保が難しいときは、WEB制作を外部にお願いした場合はコーディングやシステムを担当してくれたところに定期的な保守(メンテナンス)をお願いすると安心です。こまめなアップグレードを行えば、急に不具合が出ることは避けられます。ご心配があられる方は、保守契約をご検討ください。

]]>
WordPressでパスワード付きのページをつくる簡単な方法 https://kumaweb-d.com/blog/wordpress-password-protection/ Fri, 13 Oct 2023 15:30:25 +0000 https://kumaweb-d.com/?p=8231 皆さま、こんにちは。
今回はWordPressでページをパスワード管理で閲覧制限をかける方法についてご紹介します。

WEBサイトで限られた人にだけ、特定のWEBページを見せられると便利な場面って結構あります。例えば、写真や資料を購入してくれた人にだけダウンロードページを見せる、メンバーの人にだけ情報公開前にページを見せるなど。

パスワードをかけるためには面倒な設定が必要だったり、サーバーを触らないといけなかったり、システムに詳しい人やコーダーしかできないというイメージがありますが、WordPressで構築したWEBサイトであれば誰でも簡単に閲覧制限ができます。

パスワードをかける方法はいくつかパターンがあるのですが、今回はWordPressの中で完結する、シンプルで簡単な設定方法を3つご紹介します。

  • 1ページごとにパスワードをかける
  • 複数のページにまとめてパスワードをかける
  • WEBサイト全体にパスワードをかける

パスワードを知っている人だけが見られるページを簡単な設定で作っていきましょう!

1.1ページごとにパスワードをかける

WordPressの固定ページ/投稿ページ、どちらのページにも同じ方法でパスワードをかけることができます。

例として投稿ページにパスワードをかけていきます。

①通常通りページを作成し、タイトルや文章を入れる

まずページの中身を入れて完成させます。

②右サイドバー>投稿>表示状態から【パスワード保護】を選択

右サイドバーにある【投稿】からページ全体の設定ができるのですが、その中にある【表示状態>パスワード保護】を選択します。

③【パスワード保護】の欄に設定したいパスワードを入力する

設定したいパスワードを入れてプレビューすると、ページの内容が見えない状態になります。

表示がOKであれば公開します。これでパスワードで閲覧制限をかけたページの完成です。どのテーマを入れていても同じように「このコンテンツはパスワードで保護されて〜〜」という文章が出ます。

■デザインや表示される文章のカスタマイズについて
表示文章も変えることができますが、そのためにはWordPressのコアなファイルであるfunctions.phpを触る必要があります。変更前にバックアップを取るなど段取りが必要ですから、デザイナーさんやコーダーさんなど、WEBサイト制作をお願いした担当者がいらっしゃったらお願いして修正していただくと安全です。

初期設定のままでデザインや文章がOKであれば、パスワードをかけたページの作成はとても簡単な設定でできることがおわかりいただけたと思います。WordPressの標準機能のため、プラグインも必要なく、動作もとても軽いです。気軽に閲覧制限ができ、WEBサイトの利用幅が広がります。

■パスワードの有効期限について
パスワードで閲覧制限をかける機能を使うと、パスワードの保存期限が10日に初期設定されています。つまり一度パスワードを入れると10日間は閲覧制限がかからない状態になりますが、こちらも変更することが可能です。同じくfunctions.phpを変更しなければならないため、WEBサイト制作担当者にお問い合わせのうえ、ご都合のよい日数に変更なさってください。

2.複数のページにまとめてパスワードをかける

では次に、複数のページをまとめてパスワードをかけたいパターンについてです。

WordPressでは複数のページに同じパスワードをかけて閲覧制限すれば、すべてのページの閲覧が可能になります。一度パスワードを入力すれば、ページ移動してもパスワード入力を求められることはありません。

例えば会員にだけ見せたいお知らせページ等があり、それが複数に渡っているときに便利です。見ている側はパスワード入力が1回で済みますので、閲覧がスムーズです。

3.WEBサイト全体にパスワードをかける

最後に、WEBサイトの一部分ではなく、WEBサイト全体にパスワードをかけたい場合についてです。パスワードを知らない人には全くWEBサイトが見えなくなるので、社内やグループでのみWEBサイトを閲覧する場合や、卸売販売などで顧客を限定したいときに便利です。

WEBサイト全体の保護にはプラグインを使います。プラグインもいろいろありますが、WordPress公式のプラグイン「Password Protected」はとてもユーザー評価が高くシンプル設計でおすすめです。

Password Protected

https://ja.wordpress.org/plugins/password-protected/
■無料
■日本語OK

①WordPressの構築が終わってWEBサイトを公開する段階になったら、プラグイン「Password Protected」をインストール、有効化する

有効化すると画面に「Never miss an important update」とメッセージが出ますが【スキップ】を選択します。

②管理画面で初期設定をする

【General】に表示される初期設定は、各項目が大切なので一つひとつ確認しながら入力します。

これで設定は完了です。
パスワードをかけたいタイミングで【パスワード保護の状況】の有効にチェックを入れたタイミングから、WEBサイトの閲覧にパスワードが必要になります。

ブラウザで表示させたときに、パスワード入力欄が出ていればOKです。

■パスワードがかかっているか確認するには
自分が管理者であればパスワードがかからないので、実際にパスワードがかかっているか不安になることがあります。WordPressの管理画面にカギマークが出ていれば閲覧制限できている証拠です。

■パスワード入力画面のデザインを変更したいとき
このプラグインにはパスワード入力画面のデザイン編集機能はありません。もし無機質なWordPressのパスワード入力画面が気になる、オリジナルの画面にしたいという方は、別途「Password Protected CSS」というプラグインを追加でインストールしてください。デザイン編集ができるようになります。

まとめ

今回紹介した方法以外にも会員制サイトのような形にするなど閲覧制限をする方法はさまざまありますが、シンプルにパスワードをかけて制限するだけであれば今回の紹介方法で問題なく利用できます。

WordPressで構築されたWEBサイトなら、標準機能を使ったり公式のプラグインを使ったりすることで機能性を上げられるので、皆さまの利用方法に合わせてカスタマイズを簡単にしていただけます。できることはたくさんありますので、「こんなことはできないかな?」と思ったら、WEBサイト制作担当者にご相談いただいたり検索してみたりして、方法を探してみてください。

]]>