バリエーション豊富で高機能なスライダー「Swiper」 – フレームワーク

Swiperロゴ

カルーセルやスライダーを実装する為のCSS・JSライブラリにはBootstrapやFlexSlider等いくつかありますが、その中でも「Swiper」はおすすめのフレームワークライブラリーです。

Bootstrapも簡単にカルーセルスライダーが実装できますがバリエーションが少ないのが欠点。

また、ギャラリータイプのスライダーが実装可能なFlexSliderはjQueryのバージョンに依存するので、他のjQueryバージョンを使うテーマやプラグインと相性が悪く、動かない事がある。

その点「Swiper」は、バリエーションが豊富でありまして、また、jQueryが不要である事から汎用的です。

・タイプ:Default(ループなし、指やマウスでスワイプする基本のタイプ)

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

・タイプ:Navigation(ループなし、左右の矢印ナビゲーション付き)


・タイプ:Pagination(ループなし、ページネーション付き)


・上記組み合わせ(ナビゲーション、ページネーション付き)+ループ


・上記+オートプレイ

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

といった具合に基本のスライダーは簡単に実装可能。

「Swiper」の魅力はここからです。一般的なスライダータイプ以外にも様々なバリエーションがあります。

・タイプ:Thumbs Gallery


・タイプ:Effect Cube


・タイプ:Effect Coverflow


使い方は「Swiper」の公式サイトを参照ください。

〇「Swiper」公式サイト

 https://swiperjs.com


〇インストールおよび使い方

 https://swiperjs.com/get-started


〇詳細な設定、カスタマイズ

 https://swiperjs.com/swiper-api


〇デモ

 https://swiperjs.com/demos

SNSとの連携 – OGP(Open Graph Protocol)を設定しよう

ソーシャルメディア

当オフィスのホームページもようやくOGP(Open Graph Protocol)対応へと改修いたしました。

一応、投稿ページにはシェアボタンを設置していたのですが、シェアボタンが正常に動いていないことに気づきまして、ついでに、OGP設定も行った次第です。しかし、SNSと連携するなら、ホームページのOGPはとても便利な機能だと実感しました。

〇OGP(Open Graph Protocol)とは何か?

まず、OGP(Open Graph Protocol)とは何かといいますと、FacebookやTwitter等のSNSでシェアした際に、OGPに対応しているホームページですと、そのシェアしたページのタイトルやイメージ画像、メタディスクリプション等が、カード形式で表示される機能です。

〇OGP対応サイトにする事のメリット

まず、SNSにシェアされやすくなります。

良い記事がある。じぁあシェアしよう!と思っても、シェアする側からすると説明文を記載したり、リンクを張ったり、画像を張ったりと、シェアするにも手間がかかり、面倒くさいもの。

しかしそれが、OGP対応サイトであれば、SNSユーザーは、URLアドレスを入力するだけで、その記事のグラフィカルな情報を自身のSNSに埋め込む事ができるんです。

他にも、自分が投稿した記事を自身のSNSと連携する際にも便利です。

これまでは例えばTwitterへブログを投稿しようと思ったら、Twitterにアクセスして、リンク張って、文章書いて、とかなり面倒でありまして、それによりTwitterアカウントは持っていましたものの、ほぼ稼働していない状態でした。

それが、OGP対応したことにより、当オフィスのTwitterにブログ記事を一気にツイートできました。

〇OGP対応のサイトにするには – OGP設定

OGPに対応したホームページにするには、ホームページのヘッダー部分に決まった書式でコードを記述する必要があります。

ホームページのタイトルや内容を検索エンジンに伝える為にヘッダーにメタ情報を記述したりしますが似たようなものです(OGP設定はTwitterやFacebook等に情報を伝える点、また、グラフィカルな情報であるという点で異なりますが)。

1.OGPの宣言

ウェブサイトをOGP対応とするためには、まずは宣言が必要です。宣言は<html>タグに記述するようです。以下、宣言の記述方法です(この宣言はそのままコピペでOK)。

<html prefix="og: https://ogp.me/ns#">

2.Open Graphマークアップ

フェイスブックやTwitter等のSNSに渡したい情報を<head> ~ </head>内にメタタグを使いメタデータとしてマークアップします。

SNSに渡せる情報(プロパティ)は決まっており、以下のとおりです。

og:url ⇒ ページの正規URを指定します。SNSにカード表示させたい投稿ページのURL等を指定します。以下、マークアップ例。

<meta property="og:url" content="https://www.office-tomo.net">

og:title ⇒ 記事のタイトル。以下、マークアップ例。

<meta property="og:title" content="<?php bloginfo( 'name' ); ?>">
 //トップページの場合

og:description ⇒ コンテンツの簡単な説明。2~4文が一般的です。Facebook上では、投稿のタイトルの下に表示されます。以下、マークアップ例。

<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
 //トップページの場合

og:image ⇒ コンテンツがFacebookでシェアされたときに表示される画像のURL。以下、マークアップ例。

<meta property="og:image" content="<?php the_post_thumbnail_url('large'); ?>">
 //投稿ページで、アイキャッチ画像を指定する場合

og:type ⇒ コンテンツのメディアのタイプ。

<meta property="og:type" content="website"> //トップページの場合、一般的に「website」を指定するようです。

<meta property="og:type" content="article">
 //投稿ページ等の記事の場合、「article」を指定。

og:locale ⇒ リソースのロケール。デフォルトはen_USです。

<meta property="og:locale" content="ja_JP"> //日本語のみのページであればja_JPを指定します。

基本的なOpen Graphマークアップの仕方は以上のとおりです。

〇有料テーマだとOGPに対応しているテーマが殆ど

OGPマークアップ方法を説明しましたが、実際には、有料テーマや一部無料テーマにはOGP設定機能を持つテーマが多いので、このようなテーマを使用すればOGPマークアップを自分で行う必要はなく、管理メニューで簡単に可能です。

・TCDテーマの場合

TCDテーマOGP設定方法
TCDテーマオプション内にOGP設定メニューがある

【TCDテーマ】

・リキッドプレステーマの場合

リキッドプレスOGP設定方法
管理メニュー「カスタマイズ」内の「SEO」メニューを開く
リキッドプレスOGP設定方法
「「「「「OGP、TwitterCards」メニュー

・Vektor「ライトニング」無料版の場合

ライトニング無料版の場合、テーマ単体ではOGPには対応しておりませんが、高機能無料プラグイン「All in one Ex-Unit」をインストールすることで、プラグインでのOGP設定が可能です。

vektorテーマOGP設定方法
プラグイン「All in one Ex-Unit」SNSメニュー
Vektor WordPress Solutions
Lightning Proの紹介サイト

是非、シェアやツイートをお願い致します。

【参考リンク】

・Facebook開発者向けOGPの解説(公式:ウェブ管理者向けシェア機能ガイド)

https://developers.facebook.com/docs/sharing/webmasters#markup

・Twitterカード利用開始ガイド(公式サイト)

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

ホームページの製作費が数十万円と数万円、その違いは何だと思いますか?

費用対効果イメージ

当オフィスにおいて、ホームページ制作にかかるご提案書を提出する機会もありますが、たまに苦情を承ることがあります。その苦情の内容というのが、

「別の業者の見積書はうん十万円だった」、「何でこんなに金額が違うのか?」、「うん十万円の金額の根拠は何?」等、

おおよそ私に言わせると、これらの類の苦情は大変理不尽なものであります。何故なら、私がうん十万円をご提案しているわけでもないのに、別の業者様のお見積書や金額、業界への立腹や不満の表明だからです。

それでも私は落ち着き払い、

「そのお見積書の内容(内訳)がわからないので一概には何とも言えません」

等と、なるべく同業他社様の営業の邪魔にならないように配慮した回答を心掛けております。

そして、そのように配慮した回答をしているのは、平和主義とか、事なかれ主義等の理由ではありません。

そもそも、数十万円と数万円の価格差があるのは別に何もおかしいことではないからなんです。そのことに立腹や不満をお持ちなのが間違いだからなんですよね。

だって、価格なんていくらで見積もって提示しようがその業者様の勝手ですよ。

極端な例で言うと、1個100円の消しゴムを100万円で売ったっていいんです。何かの法令に抵触しますか?

結局はそんな金額で売ったって誰も買う人はいないだけであって、別に何も問題はないと思うんです。

ただ、状況如何によっては問題となる場合はあります。

例えば問屋との私的契約において売価が決まっているとか。このような場合は見積金額に制約を受ける事はあります。

また、消費者を違法に錯誤に陥れて販売したとか、消費者を誤認させたりとか、消費者法令に抵触するような場合も問題にはなり得ます。

しかし、上記のようなケースに該当しない範囲内であれば、いくらで見積もろうと業者の勝手なわけです。

しかも、まだ見積書の提示を受けた時点なのであれば、消費者に選択権があるわけですし何も問題は生じていません。金額が気に入らないとか、費用対効果がないと思うのならば、その業者を選ばなければ良いだけですしね。

書画骨董だって、それを見る人によって価値が変わるんです。そもそも根拠に基づく裏打ちされた価値としては、土の値段や工数手間を見積もればたかが知れているけれども、その人の見る目、価値観によっては数十万円とか数百万円とかの値が付く物もあるわけです。

そもそも人によって価値観が違えば、事情も異なるわけで、結局のところ妥当な金額とはその人の価値観や事情に左右されるものです。

大口取引先との関係から数十万円の業者を選ばなければならないのであれば、その人にとっては数十万円の業者を選ぶのが得策であり、値打ちがありますし、その金額が妥当な金額なわけです。

何度も言いますが、結局は、その人自身の価値観や事情によって物の価値は異なります。そして、どちらを選ぼうとその人の自由です。

うん十万円のホームページが高いと感じる方は、当オフィスのような格安の業者を是非ご利用ください。

BASE(ベイス)を使った EC サイト導入において、BASE オフィシャルパートナーに依頼するメリット

BASEロゴ

実は、BASE オフィシャルパートナーには特典が与えられています。

お客様に好きな有料テンプレートを選んでいただき、立て替えご購入いただきますと、有料テンプレート代がキャッシュバックされます。

ご自身の気に入ったテンプレートを実質無料で手に入れることができるんです。

また、有料機能(500 円)を購入しないと BASE ロゴは消せませんが、BASE パートナーには特典としてこれを無料でお客様に提供できます!

BASE オフィシャルパートナーはウェブ制作業者が担っておりますので、デザイン改修などのニーズにも対応が可能です。

一般ユーザーにおいては大幅なデザインの変更が叶いません。BASE パートナーならそれができるのが強みです。

また、早期の立ち上げが期待できます。BASE ならばご自分でも EC サイトの立ち上げはできるでしょう。

しかし、そこはやはり色々と複雑な設定(料金設定や配送設定等)も必要となります。

ご自分で調べるには時間がかかりますし、ご自分の本業の時間が勿体ないと思いませんか?

我々にお任せいただければ、余計な時間をロスせずに済みますし、その分、本業に注力してください。

WooCommerceでECサイトの構築 – おすすめテーマ「Lightning」

ライトニング無料版
woocommerceアイコン

別のブログでも書きましたが、WooCommerceプラグインは海外製プラグインであるという点のみを除けば、誰もが簡単にECサイトの構築が可能なプラグインであるという点に間違いはありません。

ただし、ワードプレステーマとの相性があります。

相性の良いテーマを選定すれば、誰もが簡単にECサイトの立ち上げが可能なプラグインです。

そして、最も相性の良いプラグインは、ワードプレス公式テーマ(twenty twenty-oneやtwenty seventeen等)です。

これは、WooCommerceプラグイン側で、ワードプレス公式テーマに対してサポートしているからです。

相性の悪いテーマを選ぶと適切に表示されなかったり、動作しない等もあり得ます。

しかし、ワードプレス公式テーマがWooCommerceでECサイトを構築するにおいて最適なテーマかと言うと、そうでもありません。

何故なら、ワードプレス公式テーマは、ブロックやウィジェット等、ワードプレスであらかじめ用意された機能の範囲内でしかデザイン構築ができないからです。

つまり、機能が弱いと言う事です。

そこでおすすめなのが、Vektor社の「Lightning」テーマです。

まず、Vektor社の「Lightning」テーマは、WooCommerceプラグインとの相性が良く、「Lightning」テーマ側でWooCommerceプラグインが出力するデータの最適化が為されています。

そして、おすすめな理由として、Vektor社ホームページでも唄われておりますが、拡張性が抜群なんです。

テーマ自体はシンプルな構成ですが、機能は同時開発の多機能プラグイン(VK All in one Expansion Unit)で強力に拡張が可能なんです。

かつ、「Lightning」テーマは有料版の「Lightning Pro」もありますが、無料版の「Lightning」テーマのままでも、前記拡張プラグインを使えます。勿論、拡張プラグイン自体、無料です。

ExUnitプラグインでは、「PR Block」「画像つき新着記事リスト」「プロフィール」「ボタン」「固定ページ本文」「CTA」「連絡先情報」等、ネットショップを立ち上げるのに便利なウィジェットが多数用意されており、「Lightning」テーマと併せて利用する事によって、コーポレートサイトやお店のホームページ、ブログなど簡単に構築する事ができます。

現在、WooCommerceプラグインでECサイト(ネットショップ)の立ち上げを検討されているのであれば、是非、使ってみてはいかがでしょうか。

Lightning無料版のダウンロードサイト
Vektor WordPress Solutions

Lightning Proの紹介サイト

100%GPLで商用利用可能、モバイルファーストなワードプレステーマ「LIQUID PRESS(リキッドプレス)」のご紹介

リキッドプレス紹介

企業サイトやオウンドメディア、ブログサイト、LPサイト等を構築できるワードプレステーマはたくさんありますが、その中でも今回は、LIQUID PRESS(リキッドプレス)をご紹介いたします。

LIQUID PRESS(リキッドプレス)テーマの特徴

WordPress公式有料サポートテーマであり、レスポンシブ対応のワードプレステーマとなります。

現在リリースされているテーマは全8種類ほどあり、メディア構築向け、企業サイト構築用、LPサイト構築用等、用途別のテーマが用意されています。

〇メディア構築用テーマ

・LIQUID MAGAZINE
・LIQUID INSIGHT
・LIQUID SMART
・LIQUID PORTFOLIO

LIQUID MAGAZINE

LIQUID INSIGHT

LIQUID SMART

LIQUID PORTFOLIO

〇企業サイト向けテーマ

・LIQUID CORPORATE

LIQUID CORPORATE

〇LPサイト向けテーマ

・LIQUID LP

LIQUID LP

〇WordPress公式有料サポートテーマである。

リキッドプレステーマは、一部無料テーマもありますが、基本的に有料となります。価格帯としては4千円~1万円程度でありまして手頃な価格帯であります。

有料ではありますが、購入後30日間は個別プライベートにメールでのサポート(テーマの設定方法等)を受けることが可能でして、ご自分でウェブサイトを構築することが可能なテーマとなります。

※ただし、カスタマイズ等はテーマサポートの対象外です。

100%GPL、商用利用OK

リキッドプレス社の公式ホームページのFAQを読みますと

「全てのテーマおよびプラグインはWordPress本体と同じGPLライセンスを採用しています。
商用利用、改変、再配布が可能です。※著作権を放棄するものではありません。」

とあります。また、

「全てのテーマおよびプラグインで商用利用が可能です。
 ・テーマを利用したサイトで商品を販売する
 ・テーマを利用したサイトで広告やアフィリエイト収入を得る
 ・テーマを企業のコーポレートサイトとして利用する
 ・テーマを利用して制作したサイトをクライアントに納品する」

従いまして、制作業者としてリキッドプレステーマを使用して納品も可能ですし、テーマをカスタマイズしての納品もOK。1ライセンス(1度購入すれば)で複数サイトにインストールも可能です。

〇Bootstrap4対応

私はリキッドプレステーマのデザインを変更(カスタマイズ)して制作納品の経験がありますが、Bootstrapのグリッドレイアウト手法がとられております。

独自クラスではなく良く知られたフレームワークが採用されていますので、Bootstrapの知識があれば、デザインの改修が容易であります。

〇ソーシャルメディアとの連携に対応している

OGP対応のテーマです。管理画面にてOGP機能のON/OFFが可能でして、OGP機能を「ON」にしますと、メタ情報にFacebookやTwitter向けのメタ情報が出力される仕組みとなっております。

これにより、FacebookやTwitter等のSNSにシェアされた際に、SNS向けの情報が表示されますのでシェアされやすいテーマと言えます。

SNSにシェアされやすいのでSEO的にも有利なテーマとなります。

他社にはない独自機能「レスポンシブプラス」

一般的なレスポンシブデザインではスマートフォンでパソコン用サイトを表示することはできませんが、リキッドプレスのテーマは、ユーザーが任意にスマホ/PC表示の切り替えができます。

※ただし、レスポンシブ+PC表示切替プラグイン 「LIQUID RWD PLUS」のインストールが必要となります。このプラグインはリキッドプレステーマにおいてのみ機能します。

モバイルファーストに対応している

最近のインターネットユーザーは、パソコンよりもスマートフォンやタブレット等のモバイル端末を使って検索する方が多くなってきています。

そしてGoogleは、MFI(モバイルファーストインデックス)を発表しており、今後はデスクトップではなくモバイルページの評価が検索順位に反映されるらしいのです。 

リキッドプレスのテーマはこれを見据え、マルチデバイスに最適化できる機能を備えております。

それが、「ウィジェットのスマホ/PC出し分け」と「ウィジェットのカラム設定」機能です。

全てのウィジェットで、デバイスによる出し分けが可能であり、各ウィジェット毎に、デバイス表示設定を行い、 スマートフォンとPCで異なるウィジェットを表示することができるんです。

例えば、パソコンでは表示するが、モバイル端末時は非表示にする等。逆のパターンもOKです。

また、全てのウィジェットで、カラム設定が任意で可能です。

各ウィジェット毎に、1から4カラムまでのカラム設定が可能。 また、スマホとPCでカラム数を変えるなどの設定を簡単に行うことができます。

パソコンでは4カラム表示とし、モバイル時は2カラム等の設定が可能です。

これからのモバイルファースト時代に対応したウェブサイトを構築するうえで、リキッドプレスのワードプレステーマはマルチデバイスへの最適化が可能であり、有用なワードプレステーマの一つと言えます。

月間パフォーマンス メール – サーチコンソール

サーチコンソール

当オフィスサイトにおきましては、当ウェブサイトの効果測定を目的としまして、サーチコンソールをツールの一つとしております。

そして、サーチコンソールは既に昨年の5月ごろに導入しておりました。

サーチコンソールにはメッセージ機能がありまして、プロパティ登録しているウェブサイトに、例えば「モバイルユーザビリティ上の問題」や「カバレッジの問題」等、検索結果に何らかの悪影響を及ぼす問題が生じると通知(メッセージ)がくるわけですが、昨日(2月2日)の通知(メッセージ)は少し変わっておりまして、「1 月のoffice-tomo.netの検索パフォーマンス」と題されたこれまで見たことのない通知でした。

この通知の中身を見ますとどうやら1月中の月間の検索パフォーマンスをまとめた内容となっています。

内容は以下のとおりです。

月間パフォーマンスメール
まず最初に目に飛び込むのが「貴サイトの1月のパフォーマンス」と題した統計。クリック数や表示回数、初めて表示されたページ数等。トロフィーカップは何を意味するのか..
月間パフォーマンスメール2
下にスクロールすると、次は「コンテンツの実績」。上昇率上位のページやパフォーマンス上位のページのURLとクリック数。
月間パフォーマンスメール3
月間パフォーマンスメール4
さらに下にスクロールしていくと「サイトへのアクセス経路」と題した統計。上昇率上位やパフォーマンス上位のクエリとクリック数等。
月間パフォーマンスメール5
月間パフォーマンスメール6
最後に「オーディエンスの詳細」等と題した統計へと続く。

先のとおり既に昨年の5月からサーチコンソールを導入しておりましたがこれまでこのような月間パフォーマンスメール等届いたこともなく、「サーチコンソール 検索パフォーマンス メール」等でググると、同じような投稿がちらほらと。

どうやら、長くサーチコンソールを使っているサイト運営者にも突然届くことがある模様。そして、理由は不明。

私の場合、12月末ごろから、加速度的な検索パフォーマンスの上昇が認められる状況でありましたので、パフォーマンスメール冒頭のトロフィーアイコンといい、何か良い兆しのメールなのではないかと一人考えております。

SEO(検索エンジン最適化) – ブログ投稿による効果

SEO

当サイトにおきましては、オフィスの広告効果を考えて検索エンジン最適化に取り組んでおりますが、その一環としまして、ブログ投稿があります。

9月末ごろからポチポチと投稿数を増やしてまいったのですが、ここ最近、グーグルオーガニック、ヤフーオーガニック、bingオーガニック等の自然検索によるトラフィックが増えてきた感があります。

投稿を開始始めた頃は、全くもって外部からのトラフィックがなかったのですが、最近では1日に4~5件ほど自然検索によるトラフィックが入るようになってまいりました。

サーチコンソールにて、平均掲載順位やクリック数、合計表示数等はちょくちょくチェックしているのですが、平均掲載順位やクリック数、合計表示数が若干ですが加速度的に上がってきてる感じなんです。

以下、ご確認ください。

合計表示回数
合計表示回数の変化(昨年9月1日~2月1日まで)

一事、突出した「バズ」がありますが、これは意味のないバズりでございまして、私の苗字が珍しいのか検索する方が非常に多かったため。

ブログ投稿開始したころから緩やかに変化しておりましたが、ここ最近若干加速度的に。

その証拠に下のクリック数の変化を見てもわかります。

合計クリック数
合計クリック数の変化(昨年9月1日~2月1日まで)

合計表示回数や合計クリック数も同じですが、直近においては下降状態となっております。これは、昨日気づいたのですが、1月末から2月初め頃に投稿したブログ記事がインデックスに反映されていなかったようで(グーグル検索でSITE:www.office-tomo.netで調べた)、正確には分かりませんがそれが原因ではないかと思っております。

平均掲載順位
平均掲載順位の変化(昨年9月1日~2月1日まで)

微妙ではありますが平均掲載順位も上がってきている感じです。

あまりブログ投稿する際にはSEO等意識せずに投稿していたのですが、私のブログはキーワードの組み合わせによっては結構上位(約10位~20位前後)に表示される記事もありまして、次のとおりです。

キーワードごとの掲載順位

大体上位に表示される記事は、TCDテーマ関連キーワード、woocommerceやBASE、Welcart等のECサイト関連キーワードとなります。

そもそも高順位を狙って記事書ける人なんかそんないませんよ。

とにかく記事を多く投稿し続けることで目に留まる機会が増えるわけですし、とにかく書き続けていけば、たまたまユーザーのニーズと合致する記事も出来るでしょう。そうなれば、自然と結果はついてくるものなのではないでしょうか。

また、ある程度の期間続けていけば効果測定もできるようになります。どのような分野の記事が人気があるのかも見えてきます。さらにそのような分野に的を絞っていけばさらにアクセスが増える期待が高まっていくと思います。

そして、そうなっていけば会社の認知が高まりますし、広告効果が増大しますよね。

従いまして、ブログ投稿を続けることが直接的な効果があるかは未知ではありますが、一定の効果を期待することはできるのではないでしょうか。

著作権とは?コピーライトやコピーレフトって何??

著作権

○まずは著作権を知ろう!

著作権は、自身で創作した著作物を排他的に独占する権利です。

著作物は「思想又は感情を創作的に表現したものであつて、文芸、学術、美術又は音楽の範囲に属するものをいう」と定義されています。

上記定義に該当する著作物を創作した者が著作権者であり、創作したと同時に著作権は発生します。

著作権者は、著作権が発生すると同時に、自身が創作した著作物を排他的に独占する権利を有します。

○著作権の具体的内容は

著作権の具体的内容は概ね以下のとおりです。

  • 公表権
    著作物を公衆に提供し、又は提示する権利
  • 氏名表示権
    著作物の公表に際し、著作者名を表示するかしないかを決める事ができる権利
  • 同一性保持権
    著作物及びその題号の同一性を保持する権利。その意に反してこれらの変更、切除その他の改変を受けないとする権利。
  • 複製権
    著作物を複製する権利の専有権
  • 上演権および演奏権
    著作物を、公衆に直接見せ又は聞かせることを目的として上演し、又は演奏する権利の専有権
  • 上映権
    著作物を公に上映する権利の専有権
  • 公衆送信権等
    著作物について、公衆送信を行う権利の専有権
  • 口述権
    その言語の著作物を公に口述する権利の専有権
  • 展示権
    その美術の著作物又はまだ発行されていない写真の著作物をこれらの原作品により公に展示する権利の専有権
  • 頒布権
    その映画の著作物をその複製物により頒布する権利の専有権。映画の著作物において複製されているその著作物を当該映画の著作物の複製物により頒布する権利の専有権
  • 譲渡権
    その著作物(映画の著作物を除く)をその原作品又は複製物の譲渡により公衆に提供する権利の専有権
  • 貸与権
    著作物(映画の著作物を除く)をその複製物の貸与により公衆に提供する権利の専有権
  • 翻訳権、翻案権
    その著作物を翻訳し、編曲し、若しくは変形し、又は脚色し、映画化し、その他翻案する権利の専有権
  • 二次的著作物の利用に関する原著作者の権利
    二次的著作物の原著作物の著作者は、当該二次的著作物の利用に関し、この款に規定する権利で当該二次的著作物の著作者が有するものと同一の種類の権利の専有権

○著作権(コピーライト)と使用許諾ライセンス

著作権は英訳すると「コピー(著作)ライト(権利)」です。

簡単に言うと「著作権者以外は誰も使ってはいけません」という事です。

ただし例外的に、著作権の性質から排他的、独占的に著作権者のみに与えられた上記各種権利を、著作権者自身が第三者に許諾する場合にのみ、第三者は著作物を使用できるというのが著作権(コピーライト)の考え方です。

そして、著作権者が第三者に付与した使用許諾権を「ライセンス」と呼びます。

○コピーレフトとは

著作権は排他的独占権であると先に説明しました。これに対し「誰でも使っていいし、改変して売ってもよいが、著作権者の表示はして下さい」という考え方が「コピーレフト」です。

コピーライト(著作権)の性質の対極的な考え方である事から、ライトをもじって「コピーレフト」と呼ばれています。

そもそも著作権は、先のとおり著作権者自身が公衆に著作権を許諾するのは著作権者の勝手です。

従って、「誰でも使っていいし、改変して売ってもよいが、著作権者の表示はして下さい」といった使用許諾ライセンスを付与する事ができます。

つまり、「コピーレフト」とは著作権者があらかじめ「誰でも使っていいし、改変して売ってもよいが、著作権者の表示はして下さい」と定めた使用許諾ライセンスなのです。

WooCommerceプラグインと相性の良いテーマを検証してみた

woocommerceアイコン

WooCommerceは海外製プラグインであるという点のみを除けば、誰もが簡単にECサイトの構築が可能なプラグインであるという点に間違いはありません。

これは、実際に使ってみて、間違いなく言えることです。

ただ、ワードプレステーマとの相性がありますので、WooCommerceプラグインの導入を検討しておられる方は注意が必要です。有料テーマの中にはWooCommerceとの互換性が悪く、正常に動作しないテーマもあるからです。

そこで、固定ページに「カテゴリー別商品一覧」ブロックで商品の一覧を表示するページを作成したうえで、いくつかの無料テーマおよび有料テーマの固定フロントページおよび商品個別ページの表示において問題がないかを検証してみました。

〇ワードプレス公式無料テーマ「TWENTY SEVENTEEN」

twentyseventeenテーマ
ワードプレス公式テーマ「TWENTY SEVENTEEN」

まずは、歴代のワードプレス公式テーマの中でもおしゃれなデザインでありました「TWENTY SEVENTEEN」から。

TWENTY SEVENTEENトップページ

上画像は固定フロントページに「カテゴリー別商品一覧」で商品の一覧を出力した状況のスクリーンショット画面です。

各商品のサムネイルやタイトル、キャプション等も正常に表示されております。

次に商品個別ページを検証します。結果は下画像。

商品個別ページにおいても問題なく正常に表示されます。また、商品ギャラリー画像は、WooCommerceプラグイン側にjQueryの「FlexSlider」が組み込まれているのですが、「TWENTY SEVENTEEN」におきましては、この「FlexSlider」も正常に動作しております。

結果、「TWENTY SEVENTEEN」はWooCommerceプラグインとの相性、互換性があります。

〇ワードプレス公式無料テーマ「TWENTY TWENTY-ONE」

Twenty Twenty-oneトップページ
ワードプレス公式テーマ「TWENTY TWENTY-ONE」

ワードプレス公式テーマの中で最新のバージョンです。

上画像は固定フロントページに「カテゴリー別商品一覧」で商品の一覧を出力した状況のスクリーンショット画面です。

各商品のサムネイルやタイトル、キャプション等も正常に表示されております。

次に商品個別ページを検証します。結果は下画像。

こちらも商品個別ページにおいて問題なく正常に表示されます(少し商品タイトルのフォントが大きいけど..)。また、商品ギャラリーの「FlexSlider」も正常に動作しております。

結果、「TWENTY TWENTY-ONE」はWooCommerceプラグインとの相性、互換性があります。

〇リキッドデザイン有料テーマ「LIQUID MAGAZINE」

LIQUID MAGAZINEトップページ

リキッドデザイン社のメディア構築向け有料テーマ「LIQUID MAGAZINE」での検証結果です。

固定フロントページ

固定フロントページは問題ありません。次に商品個別ページです。

個別商品ページ

表示上は問題はありません。しかし、商品ギャラリーの「FlexSlider」が動作しません。ギャラリー自体は閲覧は可能ですが、各サムネイル画像をクリックしてもスライドしません。

結論から言うと、リキッドデザイン社のテーマは「LIQUID MAGAZINE」に限らずWooCommerceプラグイン対応テーマではあります。

それはWooCommerce用テンプレートであるwoocommerce.phpが用意されているからです。

しかし、商品個別ページにおける商品ギャラリーのスライダー機能には対応できていないようです。

〇Vektor無料テーマ「Lightning」

Lightningトップページ

Vektor社の無料テーマ「Lightning」での検証結果です。

固定フロントページは問題ありません。次に商品個別ページです。

「Lightning」の場合、表示および商品ギャラリーの「FlexSlider」も正常に動作しております。WooCommerceプラグインとの相性、互換性が良いことがわかります。

〇OPENCAGE(オープンケージ)有料テーマ「ALBATROSS」

OPENCAGE社の有料テーマ「ALBATROSS」での検証結果です。

上画像のとおり、各商品リストに「・」が表示されてしまっております。特段問題はないのですが、WooCommerceプラグインへの最適化はされておりません。

商品個別ページにおいても表示上の問題が発生します。商品ギャラリーの「FlexSlider」は動作しているので勿体ないです。

結果、「ALBATROSS」テーマはWooCommerceプラグインとの相性にスタイル表示の点において問題が認められました。

〇フィット社有料テーマ「THE THOR」

フィット社の有料テーマ「THE THOR」での検証結果です。

「THE THOR」においても、「ALBATROSS」と同様に各商品リストに「・」が表示されてしまっております。特段問題はないのですが、WooCommerceプラグインへの最適化はされておりません。

さらに「THE THOR」テーマにおきましては、商品個別ページがエラーで表示されません!

WooCommerceプラグインとの互換性がありません。

〇最もWooCommerceプラグインとの相性、互換性が良いのは..

結論から言うと、ワードプレス公式テーマが最も相性が良いテーマと考えます。

何故なら、前記検証結果もさることながら、そもそもが、WooCommerceソースコード内において、ワードプレス公式テーマの場合だけ特別なタグが出力されていたりと、公式テーマに対して特別なサポートがされていると思われるからです。

公式テーマサポート

その他、公式テーマ以外で使えると思われるのがVektor社の無料テーマ「Lightning」です。検証結果において申し分ありません。

以下、Vektor有料版「Lightning Pro」の紹介ページです。

Vektor WordPress Solutions

リキッドデザイン社の「LIQUIDシリーズ」も一応はWooCommerce対応テーマではありますが、「FlexSlider」が動作しないあたり、改良の余地があると思います。

以下、LIQUID PRESSテーマの紹介ページです。

○その他、本格的なECサイトを構築するなら..

お客様を惹きつけ、楽しませるような本格的ECサイトを構築するのなら、WooCommerce専用の有料テーマもあります。

TCDの「EGO」等いかがでしょうか?

以下、TCDの「EGO」紹介ページです。

以上、WooCommerceプラグインと相性の良いワードプレステーマの検証結果でした。