• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / 雑感 / これからのWordPressサイトのつくり方

これからのWordPressサイトのつくり方

池田祐太郎 | 2020年4月26日 公開 コメントを書く

本日はエッセイです。

ここ数ヶ月、いや数年はWordPressサイトの最適な作り方を模索してます。
今までにオリジナルテーマ制作、公式テーマのカスタマイズ、有料テーマの利用など様々なテーマ制作方法を経てきました。

本記事では、いままでとこれからのWordPressサイトの制作方法について考えてみました。対象者は制作会社やフリーランスでWordPressサイトを作っている方。また、WordPressでサイトを作ってみようと考えている人あたりです。

目次

  • 1 今までの主流だったオリジナルテーマ
    • 1.1 デザインファーストの問題
    • 1.2 大事な大事な予算
    • 1.3 制作が目的ではない
  • 2 配布テーマや有料テーマを使う方式へ
  • 3 ページビルダーという選択肢

今までの主流だったオリジナルテーマ

今まではオリジナルテーマによりWordPressサイトを構築することがメインでした。最初にPhotoShop(人によってはIllustratorやその他ツール)でデザインを作成し、関係者に確認。フィードバックを反映し、確定したらそれをそのままブラウザ上で再現するHTML/CSSを書き、動きはJavaScriptで実装する。多くの制作者はこんな制作方法が主流だったと思います。

スマートフォンやタブレットの出現により、パソコン以外のデバイスでもウェブを閲覧することが増えてきて、各種デバイスに応じたデザインが求められます。同時に全デバイスに対応するレスポンシブデザインが現れ始めました。それにより、デザイン作業はスマートフォン用(余裕があればタブレットデザインも)を作成することとなり、当たり前に制作コストが上昇。制作スケジュールも長くなります。デザインデータをコーディングする際に確認がとれたデザインを対応するためにdisplay: none;(デバイスごとに各要素を表示したり非表示にすること)で対応したりしてました。今ならそんなことやらないけど…

また、WordPress 5.0 からGutenbergというブロックエディタが導入され、コンテンツ制作方法に大きな変更がありました。オリジナルテーマで制作されているテーマは各種ブロックをテーマに対応させないといけないので、めちゃくちゃ大変なんですね。すでに納品済みで動いているサイトは応急措置としてWordPressをアップデートしてもGutenbergに対応しないような措置をとったり…

こういった変化により、オリジナルテーマでWordPressサイトを構築するメリットが開発側にもクライアント側にもなくなってきていることをここ数年ひしひしと感じていました。というか、そもそもデザインつくってコーディングしてという方式はいろいろな問題を抱えます。

デザインファーストの問題

  • 前述の通りモバイルやタブレット等のバラバラのサイズごとのデザイン・コーディングは工数がかかる
  • ゼロからデザインを起こしても使いやすいレイアウト構造は限られてくる

どこにもないデザインが果たしてユーザビリティがいいのか?という問題もありますし、結局汎用テーマでいいという結論に。

大事な大事な予算

  • デザイン制作とオリジナルテーマ制作により予算がかかる
  • 最低限のデザインと汎用テーマで工数大幅ダウン
  • JimdoやWixといった無料制作ツールと比較される

いまやウェブ制作は特別なものではなく、パソコン操作ができればある程度のものは誰でも作れます。後述の配布テーマや有料テーマを採用することにより、オリジナルテーマ作成よりも大幅に工数削減できます。

制作が目的ではない

  • 公開してからコンテンツの追加に予算を割くべき
  • A/Bテストやアクセス解析でクリエイティブ変更やコンテンツ作成に時間を使う
  • 公開をできるだけスピーディーにし、サイトを育てることがプロジェクト成功につながる

これが一番大事。サイトを制作する制作会社やフリーランスは制作して納品したら終わりのため、「制作すること」が目的になりますが、そのサイトを使う企業や団体はサイトを使って問い合わせ数・申込数・購入数などを増やしたりブランド認知向上が目的のはず。なので制作はあくまで最初の通過点=スタートラインにすぎません。

配布テーマや有料テーマを使う方式へ

で、個人的にこれからのWordPressサイトの制作方法はこういうふうになっていくんじゃないかなーというのがここから。

WordPress公式テーマディレクトリを見てみるといろいろなテーマがあります。WordPressによるデフォルトテーマや、個人や企業が制作・配布しているテーマなど。これらはすべて無料で利用可能です。一方、有料として販売しているテーマもあります。有料テーマを販売しているThemeForestではAvadaなどの有名な有料テーマが多くあります。

デフォルトテーマはWordPress自らが開発している公式のテーマ。デフォルトテーマを使うメリットは構造的に安心のためカスタマイズに向いていることやカスタマイズ事例が多いことです。例えばTwenty Twentyは大前提としてレスポンシブデザイン&Gutenbergに完全対応しているところも安心です。また、テーマディレクトリに登録されているテーマはガイドラインが決まっており、レビュアーによるチェックを通過しているため、基本的には安心して使えるテーマが揃っています。中にはカスタマイズ向きではないテーマや、特定の用途に限定されているテーマもあるため吟味が必要です。

一方、有料で販売されているプレミアムテーマは公式テーマの一切の制約がないため、無料テーマに比べて各種優れていたり、機能が豊富だったり、サポートが受けられるというメリットがあります。カスタマイズする場合はテーマによってはカスタマイズ方法が決められているので、事前に知っておく必要があります。例えばStudioPressの提供するテーマはGenesis Frameworkというフレームワークで作られており、カスタマイズは独自フックを使ってカスタマイズするなど。

いずれにしても、今は多くのテーマの基本はレスポンシブデザイン+Gutenberg対応がベースとなっており、そこから各種テーマのオリジナリティ。

ただ制作手法は一択というわけではなく、それぞれにあったやり方でいいと思います。実際にいろんな人の意見があります。

これはまさにで、弊社も10年超オリジナルテーマ一択でやっていましたが、Gutenbergに対応させるのは無理と悟り、Snow Monkeyや SWELLベースに切り替えました。WordPressはもはやオリジナルテーマの時代じゃないかなぁ(ヘッドレスCMSで作ったほうが良い) https://t.co/xrJ8in5DYL

— たにぐち まこと/学ぶ。をちゃんと (@seltzer) April 19, 2020

前職と前々職ではWordPressをよく扱っていたんですが、既存テーマをカスタマイズする案件って無かったんですよね。

「WordPressは既存テーマをカスタマイズして作ることが多い」「自作テーマを作ることは実務では少ない」的なことを教えてるスクール等が多いんですが、僕はその世界を知らないです。

— TAK / Web Creator. (@tak_dcxi) April 19, 2020

これからはGutenbergでも無く、DiviとElementorの時代😌
というかもう他の国ではそうなってますね。
クロアチアの行きつけのカフェのサイトもDiviでした笑
流石世界一使われるWordPressテーマです。
有料テーマなのに世界一。

まあでもGutenbergもページビルダー化してきてますね。
競合になるかな。 https://t.co/l8YU4dQkvo

— ナオミ@欧米でWeb系エンジニア12年 ~ 現在ボスニアにstuck (@tofutechxyz) April 19, 2020

ページビルダーという選択肢

個人的に革命的だと思ったのがページビルダー。どれがベストのテーマかというのは繰り返し記事が上がりますが、Page Builder により新しい制作方法が出てきました。これにより色々なメリットがあります。

  • デザイン済みのテンプレートが豊富
  • ページビルダー上でたいていのことはできるため多くのことはカスタマイズする必要がなくなった
  • 共通のヘッダーやフッター等を管理画面上で作成・管理可能=テンプレートを作れる
  • テーマはシンプルで軽いものが最良という考えにシフト

ゼロからデザインするよりもテンプレートを利用して変更するほうが工数が大幅に少なく、実質テンプレートが作れてしまうため、テーマ側で管理する必要がなくなりました。そうすると、テーマはシンプルで軽いものが最良という考えにシフトします。これはモバイルからのアクセスやインターネット全体の事を考えると軽くするのが望ましく、パフォーマンスの観点からも正しいです。

ページビルダーは有名なところだとElementorやBeaver Builderがあります。それぞれのダウンロード数は以下の通り。

  • Elementor: 4,000,000
  • Beaver Builder: 300,000

Elementorのほうが桁が一つ大きいのでダントツです。ちなみにElementorで作られたサイトは400万にのぼり、半年ごとに100万のサイトが作られているとのこと。そして最近15億円の資金調達も済んでます。

WordPress用ウェブサイト構築プラットホームのElementorが約15億円調達 | TechCrunch Japan

ページビルダーは一部Gutenbergとかぶる部分があるんですけどね。自分はどちらか一度というよりは、通常の記事更新はGutenberg。トップページや作り込むページはページビルダーという棲み分けでいいと思ってます。

そして、ページビルダー向けに最適化された軽量テーマも出てきます。

  • Hello Elementor – WordPress theme | WordPress.org
  • GeneratePress – Lightweight, Responsive WordPress Theme
  • Astra – Fast, Lightweight & Customizable WordPress Theme for Any Website

上記のテーマでテストしたところ、非常に簡単にページを作成できました。また実際にElementorで作って公開もしていますが、テンプレートファイルを一切触ることはありませんでした。

これからはいままでのようなオリジナルテーマでの制作ではなく、テーマしかり、ページビルダーしかり、新しい制作方法が定着していくのではないかというところで現時点の意見としておきます。あくまで現時点…w

ちなみにこのサイトは記事執筆時点で有料テーマをカスタマイズ&CSSフレームワークを導入してテーマ作成しています。今なら別の方法をとるけど…

参考:フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話

WordPress保守管理サービス

Filed Under: 雑感

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

ウェブディレクターが考えるWELQ問題においての考察
2016年12月8日
タグ: SEO
カテゴリー: 雑感
WordCamp Tokyo 2016はWordPressの最新情報かつ超タメになるイベント
2016年9月20日
タグ: WordPress
カテゴリー: 雑感
FC2ブログを使い続けるデメリット
2014年10月3日
カテゴリー: 雑感

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.