“reCAPTCHA リキャプチャ” は、現在メールフォーム、もしくは会員登録の際等に用いられるスパム防止機能です。こちらは、最新のクリックが必要の無いタイプ (reCAPTCH V3) の設置方法を記していきます。
続きを読む (新) Google reCAPTCHA V3 リキャプチャ設置、設定方法(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法
2018年 最近の制作実績 その3
2018年も後一週間を残す所になりました。最近制作したクライアント様のウェブサイトを、公開させて頂きます。
Go Coachella 様
アメリカで非常に有名な、音楽フェス Coachella のツアー特設サイト。アートと融合した音楽フェスという事でモダンな色使い、訪問者に面白いと思ってもらえる様なデザインで制作しました。WordPressのカスタムで、クライアント様が各種情報を自身で簡易アップデート可能な仕様にしました。(Advanced Custom Field Pro を使用しています。)
https://go-coachella.com/
わだつみ円山町 様
東京、渋谷円山町の伝統的な和風の佇まいのレストランのウェブサイトのリニューアルをしました。複数のページだったサイトを1ページに情報を入れ込んだスクロール式のウェブサイトを構築、動画を入れたり、伝統的な和風のデザインになるように心がけました。メニューや、お知らせ・イベント等、クライアント様が各種情報を自身で簡易アップデート可能な仕様にしました。(Advanced Custom Field Pro を使用しています。
http://wadatsumigroup.com/
Posidon Group International 様
ロサンゼルスで、アメリカ全土に和牛、高品質なシーフードの卸、また日本食レストランを展開をしている会社です。取扱い商材を分かり易くするため、ホームページに各種食材をビジュアル的にわかり易く、親しみやすいデザインで作成しました。
http://psdgp.com/
Samurai Web Works Inc. -サムライウェブワークス- では、上記の様なウェブサイト以外でも、様々なウェブサイト制作が可能です。今まで 100 以上のウェブサイトを制作、どの様なジャンルのデザイン・ウェブサイト制作対応が可能です。ご興味のある方は一度 お問い合わせ 下さい。 ご覧頂きありがとうございました。
本格的CMSを構築する際に入れておきたい WordPress プラグイン
最近では、WordPressもかなり進化しており、プラグインを利用する事で本格的な CMS ウェブサイト構築が構築も可能になってきています。例えば、ショッピングカート、車両管理システム、旅行会社のツアー内容、レストランメニュー、会社製品登録等、の各種カスタム CMS がプラグインを使う事により可能になってきます。クライアントにはアップデートを自分自身で行う事が可能になるため、メンテナンス費用が抑えられ非常に喜ばれます。今回は、そんな本格的な CMS ウェブサイト構築に適したプラグインを紹介します。
Custom Post Type UI
WordPress で、非常に有名なプラグイン、デフォルトだと、投稿は一つしかありませんが、このプラグインを利用する事により無限に投稿を増やす事が可能です。例えば、デフォルトの投稿は、ニュースやブログ等に使用した際、その他にも投稿機能を使って様々な使い方が可能です。今まで弊社が構築してきた例ですと、車両管理システム、旅行会社のツアー内容、レストランメニュー等、の投稿を増設可能です。URLもそれぞれの投稿に適した物を指定できます。(/car-list/, /tour-list) 等。また、タクソノミー (タグ、カテゴリ等) も自由に追加が可能になっています。使用する際は、カスタムテンプレートを作成する必要があるので慣れが必要ですが使いこなせる様になれば、多様なカスタムが可能です。
Advanced Custom Fields
こちらも、非常に有名なプラグインです。各投稿画面、ページにお好みのカスタムフィールが追加できます。構成が複雑なページ等になってくると、クライアントさんにページを渡した時、アップデートが困難になって来ると思います。その場合はあらかじめテンプレートで編集可能な部分を、カスタムフィールド化しておいてその部分のみを入力し、更新してもらう事が可能になり簡易的な WordPress のページ作成や管理が可能になります。特に上記で紹介した、Custom Post UI 内で自分で作った投稿にも対応している為、この2つを使えばほぼ無限なカスタムが可能です。また、有料版になってしまいますが Repeater Field、という機能があり、これは、特定のフィールドのリピートが可能です。リストや、テーブル等にも利用できる為非常にオススメです。
WooCommerce
WordPress でショッピングカート構築する際には欠かせないプラグイン、最近では日本語化も進んでいます。ショッピングカートのみでなく、カタログの様な使い方も可能です。デフォルトで ECommerce に必要な機能はついているので、必要あれば、上記の Advanced Custom Fields を利用する事によりフィールドの追加が可能です。テーマのカスタムは慣れるまで少々複雑ですが、ショッピングカート以外の使い方で、最初から CMS の構築をするのが大変な場合は、WooCommerce を使っての CMS の構築も可能になっています。用途に応じて Custome Post Type UI と、WooCommerceを使い分けて行きたいですね。もちろん両方を一度に使う事も可能です。
Admin Menu Editor
CMS 構築の際は、WordPress で管理画面をクライアントに渡す必要があります。その際に、管理画面の各項目 (投稿等) の並び替え、また名前を変更できるプラグインです。例えば、WordPress のデフォルトだと “投稿” になっていると思いますが、これを、ブログ、等に変更する事も可能です。また、Custome Post Type UI 等で追加した投稿は、デフォルトだと下の方に来るため、これを投稿の次等に設置する事で、よりクライアントが使いやすい管理画面の作成が可能になってきます。後は、必要に応じ、クライアントに発行するアカウントの権限の設定が必要になってくるかと思います。
WPS Hide Login
こちらは直接 CMS 構築と関係は無いですが、WordPress デフォルトの /wp-admin/ を独自のURLへ変更できるプラグインです。特に複数人にアカウントを発行した際、短いパスワードを設定してする方の少なからず出てくると思うので、デフォルトのログインを隠す事により、よりセキュリティを向上し不正ログインを防ぐ事が可能です。
以上、本格的な CMS を構築する際に必須になってくるプラグインです。プラグインを駆使する事で、本格的な CMS の構築が可能なのは嬉しいですね。詳しい使い方に関してもそのうち紹介して行こうと思います。
本当に効果がある WordPress の SEO プラグイン 2018年度
WordPress の SEO プラグインは、様々なタイプの物が存在しており、良質なプラグインは、Google 検索のアルゴリズムに合わせ常に進化を遂げています。通常のウェブサイト制作だと非常に大変な設定が必要であるSEO の内部対策ですが、WordPress のプラグインを使う事により作業効率化の効果があるだけでは無く、最新のアルゴリズムに合わせアップデートされて行きます。今回は、様々なプラグインを試した中でも効果のあるプラグインを紹介していきます。
Yoast SEO
現在 WordPress 内で、一番メジャーな SEO 対策プラグイン。ターゲットキーワードの解析機能、Schema タグを用いたパンくず機能、Facebook, Twitter 等の Social Media の投稿、またはシェアに関する非常に多彩な設定があり、これ一つでほとんどの対策ができてしまうといっても過言ではありません。現時点では完全では無いものの日本語にも対応しており、また XML Sitemap 機能もあり、吐き出されるコードも非常にきれいな物で、Google でのエラー回避の対策にもなります。管理人も、最近まで使用していた SEO、XML プラグインからこちらに完全に乗り換えました。また、他の SEO プラグインからのインポート機能もあるのも魅力で乗り換えが簡単にできます。
Schema
Schema は、schema タグ (Google 等の検索エンジンに、 マークアップしたコードや、ページの情報をより明確に伝える機能 。例: Article, Blog, Video, Audio, About Page, Contact Page 等) を簡単な設定で取り込む事ができます。Yoast SEO のみでは、schema タグを各要素等に詳細に取り入れる機能は無いので、このプラグインを用いる事でより詳細なページ内容を検索エンジンに伝える事ができます。わざわざソースコードに各タグをいれる手間を省く事ができます。
All In One Schema Rich Snippets
All In One Schema Rich Snippets は、Google Search Console で設定が可能な Rich Snippets を簡易的に実装が可能なプラグインです。Rich Snippets は Google が推奨している機能で、イベント情報、レシピ、商品等を特定のタグや情報を入れる事により、検索エンジンを調べた際にサイトの検索結果とは別に出す機能です。代表的な物は、イベントやレシピなのですが、以下の様な検索結果は一度は見た事があるのではないでしょうか？
これらの情報は、設定する事により確実に検索結果に表示される訳ではありませんが、表示される確立は上がります。All In One Schema Rich Snippets は、その手助けをしてくれる非常に有能はプラグインです。
以上、最近は小手先の SEO 対策は通用しなくなってきており、コンテンツのクオリティの高さや、サイトを訪れるユーザーにとって有能な情報をウェブサイトに入れる事がより必要になってきています。上記紹介したプラグインは、そんばクオリティの高いコンテンツを制作する手助けをしてくれるプラグインです。是非一度お試しになって下さい。
2018年 最近の制作実績 その2
最近制作したクライアント様のウェブサイトを、公開させて頂きます。
Uniglobal USA 様
ロサンゼルスで、各種シーフードの卸業をされています。シーフードなので、海をイメージさせる様な青基調でデザインしました。また、WordPressのカスタムで、クライアント様が自身で在庫を簡易アップデート可能な仕様にしました。(Custom Post Type, Advanced Custom Field Pro を使用しています。)
http://uniglobalusa.com/
KRUSE Amplification 様
ロサンゼルスの楽器メーカー、ハイクオリティなカスタムギターアンプを販売しています。黒基調で金色のテキストを用い、高級感や重量感が出る様なデザイン。また、アンプの各特徴を見てもらえる様、カタログの用な説明文をウェブページとして実装しました。
http://kruseamplification.com/
US VISA LEGAL PRO 様
ロサンゼルスで、各種就労ビザの申請を行っています。法律関連ですが固くなりすぎないデザインにこころがけ、親しみやすく敷居が高すぎない様な印象が無いようにデザインしています。
http://usvisa-legalpro.com/
Samurai Web Works Inc. -サムライウェブワークス- では、上記の様なウェブサイト以外でも、様々なウェブサイト制作が可能です。今まで 100 以上のウェブサイトを制作、どの様なジャンルのデザイン・ウェブサイト制作対応が可能です。ご興味のある方は一度 お問い合わせ 下さい。 ご覧頂きありがとうございました。
Google サーチコンソールでエラーが通知された時の直し方
サーチコンソール(Search Console、旧：ウェブマスターツール)は、主にGoogle 検索結果でサイトのパフォーマンスを監視、管理ができる無料ツールで、SEO対策には欠かせないツールになっています。登録したサイトに関する様々な情報を閲覧できる機能があり、代表的な機能では、何の検索ワードでサイトが表示され、またクリックされたかなどを調べる事も可能です。また何か問題が発生した際にはアカウントのメールアドレスにメールが来ます。
ある日サーチコンソールでエラーが出たとの通知が届く
ある日、エラーが出たとの通知が来ました、内容は、No Index (Google にインデックスさせないコード) が入っているページが、Indexさせる通知として送られて来る、との事。今までは何も問題内容だったのですが、恐らく Google の仕様が変わった影響だと思います。早速ググってみた所、同じエラーを受け取った人が 2018 年に入ってたくさんいました。エラーが出る事で、検索順位が下がる？
これは、100% の確証は無いのですが、エラーを受け取った辺りから特に何かした訳でも無く、特定のキーワードの順位が下がってしまいました。尚、Google から受け取ったメールをみたところ、”エラーは、検索順位に悪い影響を及ぼす可能性がある ” 的な事が英語で書かれていたので、恐らくそれが影響で順位が下がってしまった可能性が大です。結局何が原因だったのか
サーチコンソールでのメッセージ内容を見てみると対象のURLが表示されています。見てみたところ、WordPress のプラグインが原因、Google XML Sitemap というプラグインが自動生成する sitemap.html に、No Index のコードが含まれているとの事、ただしこれはこちらで修正できる物でも無いので、プラグインを消去、別のプラグインを入れる事にしました。(Google XML Sitemap は100万以上のウェブサイトにインストールされている最もポピュラーなプラグインの一つ、今後この現象は非常に増える可能性があります。) また、現在アメリカでは、最もポピュラーなSEOプラグイン、Yoast SEO にこの機会に乗り換える事にしました。このプラグインの紹介はまた別でしようと思いますが、非常に優れ物です、XML Sitemap も掃き出してくれ、エラーが出ない様なきれいなサイトマップを生成してくれます。サーチコンソールへの通知
上記の様に、検出されたエラーをサイト内で直す事には成功しましたが、サーチコンソールに通知して、直した事を通知しないといけません。尚、通知を出してから、結果が出るまで自分の場合は約10日間かかりました。 恐らく、ただ通知するだけでは不十分だと判断したので、削除したURLを Google へ通知 しました。これは、サーチコンソールへ登録したサイトのURLの削除を Google へ通知する事ができます。無事エラーが直りました
Google に修正の申請をした 10日後、無事、エラーが直ったと通知が来ました。恐らく順位の下降もこれが原因だったため、徐々に順位も回復してきています。まとめ
いきなりエラーの通知が来ると何故、と焦るかもしれませんが、ポイントは以下です。- エラー内容を見て、プラグインが原因の場合は入れ直し。2018年現在、同エラーには Yoast SEO がベスト (他の XML サイトマッププラグインは消去すること)
- 必ずサーチコンソールに内容を通知する
- その他、通知するだけでは無く、こちらでもできる事をしておく (今回の場合は、削除したサイトを Google へ通知)
2018年 最近の制作実績
最近制作したクライアント様のウェブサイトを、公開させて頂きます。
Eco Drive Auto Sales 様
ロサンゼルスで、プリウス等のエコカーを専門的に販売・リースされている会社です。カンパニーカラーの青・緑を基調に、WordPressカスタムポスト、WooCommerce等を入れ込みクライアント様側での車両更新、お客様の声等の更新を簡易的に可能にしています。
http://www.ecodriveautosales.com/
DTLA Ramen 様
ロサンゼルス、ダウンタウンのラーメンバー。従来のラーメン屋のイメージを払拭するモダンな店作り、おしゃれな町並みをウェブサイトへも再現。使用フォント等も工夫し、モダンなダイニングレストラン的なイメージに仕上げました。
http://dtlaramen.com/
CAL OFFICE 様
ロサンゼルスで、新規のバーチャルオフィスサービス、住所貸し等のサービスを行っています。黒・グレーのモダンな雰囲気、また斜め、Parallax等の特殊なデザインも取り込みつつ、シンプルな構成のランディングページです。
https://calofficeus.com/
Samurai Web Works Inc. -サムライウェブワークス- では、上記の様なウェブサイト以外でも、様々なウェブサイト制作が可能です。今まで 100 以上のウェブサイトを制作、どの様なジャンルのデザイン・ウェブサイト制作対応が可能です。ご興味のある方は一度 お問い合わせ 下さい。 ご覧頂きありがとうございました。
think with Google, Google オフィシャルのモバイル評価測定ツールがリリース！
Google ではウェブサイトの表示速度に重点を置いています。本当に効果があるWordPress高速化の設定・高速化プラグイン 2017・2018年度 でもお伝えした様に、表示速度は SEO に関係します。それだけでは無く、遅いウェブサイトは訪問者の離脱にも影響しますね。 今回は、モバイルの表示速度の評価を様々な視点で評価してくれる、think with Google Test your mobile speed. を試してみました。
まずは、https://testmysite.thinkwithgoogle.com/ にアクセスします。Enter URL to test your speed というフィールドに、測定したいウェブサイトのURLを入力します。今回は弊社のウェブサイトを例として入力してみました。
入力すると、2-3分でレポートが生成されます。（インターネットのスピードにより、多少前後するみたいです。）未だに、世界で 70% のモバイルネットワークは、3G 回線だそうです。4G 回線でだけでなく、3G 回線でもストレス無く表示できるウェブサイト設計が必要になりますね。
レポートが生成されました、デザインも中々スタイリッシュです。評価は Excellent、 3G 回線で 3s (3秒平均)で表示されるみたいです。
レポートの下部、Get My Free Report ボタンで、より詳しいレポートをメールに送ってもらえます。
こちらがメールのレポートの一部、Compress images (画像の圧縮率)、Eliminate render-blocking JavaScript and CSS in above-the-fold content (JavaScript と CSS の圧縮)辺りにまだ改善の余地がありそうです。
この様な流れで、あなたのウェブサイトの表示速度の評価を無料でしてもらえます。課題が分かれば、SEO にも効果があり、離脱率も下がる＝より高いコンバージョンを得る事ができそうですね
https://testmysite.thinkwithgoogle.com/ 是非、一度試してみて下さい。
WordPress 内で直接コードを編集できるプラグイン WP Editor
WordPress 使っていると、テーマファイルの編集、PHP や CSS を触る機会があると思います。小さな変更がある際、わざわざ FTP 接続してからファイルをダウンロードするしなければならない事もあると思います。しかし、このプラグイン WP Editor を使う事により、WordPress 管理画面内から、コーディングのソフト (Dreamweaver, Brackets 等) で編集するのと近い感じでコーディングが可能です。ここまでは従来のプラグインでも出来た内容ですが、このプラグインのすぐい所は、投稿やページ内でのテキスト編集でも同じ様な機能で使える事、要は、WordPress のページ編集がそのまま行えてしまう点だと思います。もちろん、プラグインの編集も同じ様に行えます。
導入方法
まずはプラグインをダウンロード、有効化した後、ダッシュボードの左下の方に WP Editor のタブが出来ているのが確認できます。そちらをクリック後、以下の画面が表示されるのでプラグインの設定が可能です。
基本インストール後、テーマファイル、プラグイン、投稿でが有効になるはずです。ここで細かい設定ですが、以下のオプション (Post Editor) で Editor Theme があると思いますが、こちらは好みに応じて変更してみて下さい。筆者は、背景が暗めのEditorが好きなので、”Ruby Blue” を選択してみました。その他は Editor Height (この Editor の高さの設定です。) デフォルトだと 450px でこれだと少し高さが足りない印象があります。600px 位に設定するのがベストです。
その後は、Theme Editor, Plugin Editor も同じ様に設定すれば、結構だと思います。Editor Theme は豊富な種類があるので、好みに応じて変更してみて下さい。
プラグイン導入後
上記の様に、投稿のコードビューが、コーディングソフトの様な画面になりましたね。デザイナーや開発者でコードビューを使っておられる方は大分作業もはかどると思います。
*サーバーの環境によっては、このプラグインが上手く作動しない事もありますので、ご注意下さい。
WordCamp LA 2017 へ行ってきました
2017年9月29日から10月1日に、ロサンゼルスで WordCamp LAX 2017 が開催されました。WordCamp は世界中で開催されている、WordPressに関するセミナーです。もちろん日本でも開催されており、東京や京都などでは大々的に開催されている様ですね。しかし、単に WordPress のセミナーだけでは無く、CSS, WordPress Rest API, SEO, ブランディング, ソーシャルメディアマーケティング等、非常に幅広いジャンルのセミナーが行われ、WordPressにあまり馴染みの無い方でも楽しめる内容になっています。筆者は30日と1日のセッションに参加しました。
内容的には非常に為になる充実したセミナーです。しかも $40 USD、両日昼食、ドリンク付き、Tシャツ付き、更にはアフターパーティーも自由参加（筆者は参加しませんでしたが。）という、非常にリーゾナブルな価格設定も魅力です。
会場 Cal State LA
会場は、Cal State LA という、ロサンゼルスの東に位置する大学の会場、1フロアを貸し切っての開催、合計3室のセミナールームがありました。1室は、実践的なプログラミングのセッション、他2室はスピーチ型なセッションです。同時間帯で行われる為、どちらかのセッションを選らんで参加すると言った方式です。
TECHNICAL SEO BEST PRACTICES FOR PUBLISHERS
こちらは1日目に行われたテクニカルSEOのセッション、Arsen Rabinovich 氏、SEO とソーシャルメディアのの会社を経営されている方です。SEOの基本から、Yoast SEO プラグインを使った（但しあくまで作業効率化、プラグインに頼り切らない）SEO手法の紹介、no-index, no-follow の正しい使い方。Scheme Tag のマークアップによる Google の検索結果の表示の違い。かなり最新のテクニカルSEO、特に内部対策の説明を聞く事ができました。WordPress はもちろん、その他のプラットフォームにも幅広く使えるSEOの知識です。個人的にはこのセッション、と以下に紹介する、Slow sites suck! How to speed up WordPress without touching a line of code. がベストのセッションでした。
SLOW SITES SUCK! HOW TO SPEED UP WORDPRESS WITHOUT TOUCHING A LINE OF CODE.
様々な手法で、WordPressサイトの表示の高速化の手法を説明するセッション。Andrew Wilder 氏、WordPress サイト全般のメンテ、SEO等のビジネスをされている方です。サイトの表示速度は非常に重要です。遅ければ遅くなる程、サイト訪問の離脱率を高めるだけでは無く、Google のSEOの評価にも影響します。内容は、プラグインを用いたサイト高速化の設定、キャッシュ化、画像の圧縮、CDNを用いたサイトのキャッシュ化、Google Speed Insight を用いたウェブサイトの速度測定等、非常に幅広い角度からウェブサイトの表示の高速化の手法を説明するセッションでした。
DISCOVERING THE WORDPRESS REST API
こちらは、WordPress REST API とは？というセッション、全く馴染みの無い方にも WordPress REST API を用いた入門的なカスタム方法の説明をされていました。
WORDPRESS AND FLEXBOX CSS
こちらは、Flexbox CSSの紹介、CSS3から実装された display:flex; の内容を詳しい説明をされていました。Flexbox は、CSS 要素の上下中央揃えに主に使われます。
BRANDING FOR EVERYONE
こちらはブランディングに関するセッション、クライアントとのコミュニケーションを取りつつ、どの様にブランディングを進めるか、またプロモーションの仕方なども紹介されていました。ロゴやデザインのコンセプト等も説明されていて、デザイナー出身の筆者も改めて気づく事がたくさんあったセッションでした。
全ては紹介できませんが、他にも、コマンドラインを使った WordPress のカスタム手法、ソーシャルメディアマーケティングの手法に特化したセッション、プロジェクトマネージメントの手法、予算の立て方からスコープ範囲の設定。などなど、どのセッションも全く外れのない内容でした。
おまけ
こちらが2日間提供される昼食の一つ、数種類からのメニューがあり好きな物を選べるといったシステムです。ホテルの食事に近い感じで、非常においしい。
また企業ブースも充実しており、アメリカの主なホスティング各社、WooCommerce等が参加しており、Tシャツや様々なノベルティがもらえます。もしよければ、ロサンゼルスの WordCamp に参加してみてはいかがですか？筆者も次は日本で開催される WordCamp にも参加してみたいです。