バリエーション豊富で高機能なスライダー「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

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カラム等の設定が可能です。

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

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プラグインと相性の良いワードプレステーマの検証結果でした。

ECサイトの作り方 – 各サービスの特徴と比較(Woocommerce、EC-CUBE、BASE)

eコマースサムネイル

1.ウェブと電子商取引

ECイメージ

単にホームページを持つのとは異なり、ネットショッピングサイトを作るにあたっては、カートや決済といった機能がネックとなります。

このような機能は本来のウェブの役割とは異なるため、ウェブの基本仕様にはECという機能は存在しないわけです。

しかし、現在のウェブ業界においては技術の進歩に伴い、ユーザーイベントに応じた動的変化や、動的にコンテンツ内容を変更可能なコンピューター言語が登場し、決済サービスやPOS等の外部データベースや外部サービスアプリケーションとの連携を可能としております。

そして、このような技術の進歩に伴い、本来のウェブの機能にはなかったEC(electronic commerce、電子商取引)というネックを補う様々なサービスが存在します。

2.ECサイト構築のためのサービス分類

①EC専用CMS(コンテンツ・マネジメント・サービス)

【ワードプレス】

ワードプレスとは何か?サムネイル

ワードプレスはホームページ構築において全世界で最もよく使われている無料・オープンソースのブログシステムソフトウェアです。

今の時代、ウェブページにおいては、動的にページを変更したり、データベースと連携したりといった大規模、高機能なサイト構築にはPHP言語というプログラム言語が欠かせません。

ワードプレスのようなCMSソフトウェアを用いれば、PHP言語を知らなくとも、CMS画面(管理画面)で動的なページの構築が可能です。

また、ワードプレスはオープンソースであるため、大規模かつ難易度の高いウェブ開発も可能となります。よって、ECサイトの開発も可能となるわけです。

しかし、ワードプレスの本来の機能はブログシステムであったことから、EC機能は内在しておりません。

このような場合における、ワードプレスの強みとしてプラグインという機能があります。先のとおり、ワードプレスはオープンソースであるため不足している機能を補いやすく、様々なプラグインが存在します。

そして、ワードプレスにおいて有名なのが「Woocommerce」や「Welcart」というプラグインです。このプラグインをインストールすれば、ワードプレスで構築したウェブサイトのECサイト化が可能となります。

【EC-CUBE】

ウェブサイト構築のためのCMSソフトウェアはワードプレスだけではありません。EC-CUBEもワードプレスのようなウェブサイト構築のためのCMSであり、ECサイト構築に特化した本格的CMSとなります。

②EC専門のASP(Application Service Provider)

アプリケーションサービスプロバイダとは、アプリケーションソフト等のサービスをネットワーク経由で提供するプロバイダのことです。

世の中でよく知られているのは無料ブログサイトではないでしょうか?無料ブログサイトも簡易的なCMSソフトウェアです。会員登録してログインすれば、本格的ウェブサイトとまではいかないまでも簡単なブログサイトならば簡単に構築が可能です。

このようなサービスを提供している事業者をASPと言います。

ECサイト構築においても、無料ブログサイトと同じような簡易CMSを提供している事業者が存在し、また、これらサービスはカートや決済機能をも提供している点で無料ブログサイトとは異なります。

ECサイト専用ASPには「BASE」や「カラーミーショップ」などがあります。

【BASE】

ウェブサイト構築のための管理機能としては簡易的な機能しか有しませんが、カート機能、商品管理、出品、配送、決済といった一連のサービスを管理画面のみでユーザーに提供が可能となり、また、基本的にサイト構築からEC機能までを管理画面で行えるので、ECサイト構築が簡単にできるのが特徴です。

3.各サービスのメリット、デメリット

【ワードプレス】

小規模サイトから大規模まで(エンドユーザから開発者まで)
サイト構築は容易。EC化は難易度高い

ワードプレスは世界中で有名企業サイト等にも用いられており、開発も容易であることから、高機能で規模の大きい、見栄えの良い、本格的サイトの構築に有利です。

元々がブログ構築のためのシステムであり、CMS画面でブロック配置することにより、簡単にウェブサイト構築が容易であることから、規模の小さいウェブサイト制作にも勿論使えます。

また、ワードプレスは公式サイトで情報が公開されており、市販の参考書も多数出版されております。

しかし、ECサイト構築ともなると、ウェブの知識からかけ離れた知識、技術が必要となり、プラグインで機能を補えるとはいっても、簡単に構築するのは難しいと思われます。また、EC専用プラグインの情報も少ないのが実情です。

本格的なサイト構築向けのプラグインであるため、比較的規模の小さなサイトには敷居が少し高いように思います。また、「Woocommerce」プラグインは外国語仕様であるため、インストールや設定には英語の説明が表示されますので使いにくい感じです。

国産ワードプレステーマのTCDシリーズは、このデメリットを補うべく、「Woocommerce」や「Welcart」向けのテーマをリリースしていますので、こちらを使うのが無難かもしれません。

【EC-CUBE】

大規模ECサイト向け(開発者向け)
サイト構築もEC化も難易度高い

EC-CUBEもワードプレスと同じく本格的なウェブ構築CMSであり、かつ、ECサイトに特化したCMSとなります。

しかし、ワードプレスと違うのは、エンドユーザー向けの情報が少ないという点です。EC-CUBEの公式サイトを見るとわかりますが、どちらかというと、開発者向けに特化したサービスのように感じます。

単にウェブを構築するのではなく、EC機能をも持つわけですから、ワードプレスよりも難易度が高いのは当然とも思います。

【BASE】

小規模から中規模ECサイト向け
サイト構築もEC化も容易
比較的シンプルなサイトとなる

BASEは先で紹介したとおり、簡易的なCMS機能を持つ、ECサイト構築専用のASPです。ウェブ構築の機能としては物足りませんが、EC化機能としては、商品管理から出品、販売、売上管理、決済、発送までをワンストップで可能であります。

決済機能もBASEに登録申請するだけで、その日から、クレジットカードや振り込み、コンビニ決済等各種決済が使えるので簡単です。

基本的にCMS管理画面で各種管理やサイト構築を行うのでコーディングは必要なく、操作性もわかりやすいと思います。その反面、ウェブサイトとしては少々物足りなさを感じます。

BASEをはじめASPサービスは、オープンソースではありませんが、BASEの場合、一応コード編集エディタ機能はありますので、基本のテンプレートに改修を加えるのは可能です。

このコードエディタを開くとわかるのですが、BASEのテンプレートはHTML言語、CSS言語を主としたテンプレート構成となっております。PHP言語の埋め込みはできませんので、本格的な動的ページの構築は難しいですが、CMS画面で設定した各種パラメーターを取得する専用タグがいくつか用意されていますので、これらを使えば動的なページの構築も可能です。

なお、コードエディタではJavaScriptの埋め込みは可能です。

TCDワードプレステーマの特徴 – FAKE(TCD074)を例に

TCDシリーズバナー

ワードプレステーマで最も有名なのが株式会社デザインプラス社がリリースするTCDシリーズです。

TCDシリーズは、様々なコンセプト(医療向け、ショッピング向け、企業サイト向け等)に応じ、多数のテーマがリリースされています。

当オフィスにおいては、TCDシリーズの中でもFAKE(TCD074)の特別ライセンスを取得しており、この関係から実際に使ってみた事がありますが、ビジュアル表現の訴求力に目を見張るものがあります。

FAKE(TCD074)を例にしますと、ブラウザ一面に広がるフルスクリーンビュー、大迫力の臨場感あるヘッダーメディアやパララックス効果、カルーセルコンテンツ等です。

しかし、TCDシリーズの特徴の本質は他にあると私は思っております。

1.品質

まず、TCDシリーズを一言で表現するならば「品質」だと思います。

デモサイトを閲覧すると感じるのですが、TCDシリーズで作られたウェブサイトには、何か黄金比のようなものを感じます。

これは、マージンやフォントサイズ、文字間・行間から、メディア・コンテンツのアスペクト比等に至るまで、全てにおいて、精緻な検討が施され、考え、作り込まれた結果ではないかと思います。

2.シンプル イズ ベスト

TCDシリーズのデモサイトを閲覧しますと、トップページの見事さが目を引きますが、実はこれ、とても「シンプル」な構成なんです。

TCDシリーズには「コンテンツビルダー」と言うものが搭載されておりまして、実はTCDシリーズのテーマでは、トップページはこの「コンテンツビルダー」でしか作成できないい仕様になっております。

一般的なワードプレステーマだと、トップページは固定ページ機能を使い、自由にトップページを構成できますが、TCDシリーズにおいては、トップページに自分で作成した固定ページを用いる事はできません。

このあたり、他のテーマと一線を画す点であります。

言い方が悪いのですが、この「コンテンツビルダー」には、あらかじめトップページを構成するコンテンツが数種類しか用意されておりません。FAKE(TCD074)を例にしますと以下の5種類のみです。

①コンテンツ1

→キャッチフレーズと説明文、画面幅一杯の3連画像の組み合わせ

TCD074コンテンツ1

②コンテンツ2

→キャッチフレーズと説明文、画像の組み合わせ

TCD074コンテンツ2

③パララックスコンテンツ

→キャッチフレーズと説明文、画面幅一杯のパララックス画像の組み合わせ

TCD074パララックスコンテンツ

④カルーセル

→画面幅一杯のカルーセル

TCD074カルーセルコンテンツ

⑤実績一覧

これら5つのコンテンツを自由に並べてトップページを作成できるのみです。

しかし、各コンテンツはキャッチフレーズや説明文が組み合わされておりまして、メッセージ性、ストーリー性のあるトップページの作成が可能なんです。

例えば、企業サイトの場合だと、企業方針や社会への投げ掛けといったメッセージから始まり、そして私たちはどのようにあるべきかなのか。それを実現する為の取り組みや事業内容。それを支える技術や人材。最後にどのような人材を求めているのか。といった具合にストーリー性のあるウェブサイトの構築が可能なんです。

不思議な事に上記5つのコンテンツの組み合わせだけでも十分にストーリーが完成します。

まさしくシンプルイズベストです。

また、各コンテンツの品質の高さの賜物でもあります。

「導線はシンプル。しかし、瞬時に魅せる。」

まさしく、FAKE(TCD074)のキャッチフレーズ通りです。

3.技術力

最後に、他のテーマに類を見ないコンテンツビルダーの搭載や品質の高いパララックスやカルーセル、ヘッダースライダー、各テーマに応じた固定テンプレートの搭載、複雑なページ構成をコンテンツビルダーで簡単に実現可能とした技術力の高さです。

ウェブサイト制作業者からすると、この様な優れたテーマが存在すると、誰もが簡単に高品質なサイトが作れる事から、メリットがないように思われがちですが、私はそうは思いません。

と言いますのも、これだけ高機能なテーマともなると、他にも多数の機能(テーマオプション機能や各テーマ固有の固定テンプレート等)が搭載されておりまして、また、各テーマ固有の特殊機能等もございます。

実際に使ってみて知り尽くした者でなければすぐには使いこなせないものです。

また、先のとおりTCDシリーズの特徴の一つである「ストーリー性」。これが肝心要だと思料されますし、ここが一番難しいところかと思います。ストーリーの構築、そして、ストーリーを構成するメッセージ。これには文章構成力が必要となります。

当オフィスにおきましては、TCDシリーズを用いたウェブサイトの制作にあたりましては、この様な部分におきまして支援を致したく思っております。

BOOTSTRAP – 初心者でも使いやすいフレームワーク 

bootstrapロゴ

 ワードプレスはデフォルトで様々なブロックが搭載されておりまして、GUI操作でブロックを配置するだけでホームページ作成が可能なホームページビルダーともなっております。

 しかし、ワードプレスでホームページ作成をしている方には分かると思いますが、ワードプレスにデフォルトで搭載されているブロックは基本的なブロックばかりでありまして、このデフォルトのブロックでは「自分の思うようなコンテンツが実現できない」というジレンマがあります。

 このような場合、ワードプレスには「カスタムHTML」というブロックを使えば、任意のHTMLコードをページ内に挿入できることとなり、自分好みのコンテンツを実現可能ではあります。

 しかしこの方法ですと、HTML言語やCSS言語に熟知していなければならず、また、言語に熟知していても一からブロック設計が必要となり、煩わしいこと他なりません。このような場合に使用の検討をおススメしたいのが「フレームワーク」です。

 「フレームワーク」とは、簡単に平易に説明するとアプリの枠組みです。また、アプリ開発のためのテンプレートと言っても良いでしょう。

 ホームページのブロック設計は、HTML言語だけではなくCSS言語(スタイルシート)の知識が必要となります。例えば、レスポンシブ仕様とする場合、モバイル端末使用時の各ブロックの挙動を検討する必要があり、フレキシブル、ブロック、インライン等といったCSSで用意された各種コンテナの挙動仕様を活用しておりますので、このような仕様を熟知していなければならず、また、リキッドレイアウト仕様としたい場合には、マージンやパッディング属性についても熟知の必要があります。そして、様々なブロックを組み合わせて自分の思うようなブロックを設計・作成するわけです。

 しかし、前述の「フレームワーク」を用いればそのような設計の手間を省くことができ、多少のHTML言語やCSS知識があればブロック作成が容易になります。

 世の中で出回っている「フレームワーク」には色々とあります。ウェブアプリ作成でよく知られている「フレームワーク」には、

・Laravel(PHP言語向けのフレームワーク)

・BOOTSTRAP(HTML言語、CSS言語向けフレームワーク)

等があります。

 特にブロックの設計においては、BOOTSTRAPが便利です。BOOTSTRAPは、先のレスポンシブやリキッドレイアウト設計が既になされた「ブロック」テンプレートです。ブロック作成にはCSS言語でスタイルシート(クラス)を作成し、HTMLコード内にそのクラスを適用することであらかじめ設計した装飾や挙動が得られます。BOOTSTRAPは様々なクラスが用意されたクラスライブラリなのです。

 例えば「ジャンボトロン」。

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

 上のような「ジャンボトロン」を作成したい場合、H1やPタグ、アンカータグ、ボタン等の各要素を組み合わせで一つの「ジャンボトロン」というブロックコンポーネントを形成します。各要素の配置位置やレスポンシブ時の挙動、装飾などは、先のとおりあらかじめ設計したうえでCSS言語にてクラス作成し、コード内にクラス名を適用します。しかし、BOOTSTRAPにはあらかじめこの「ジャンボトロン」の作成に必要なクラスライブラリが用意されており、また、HTMLコードも準備されています。それが下記コードです。

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

 上記「ジャンボトロン」も「カスタムHTML」ブロックを用いておりますが、あらかじめBOOTSTRAPで用意された上記コードを貼り付けただけです。

 次に「カルーセル」。これはワードプレスにも欲しい機能ですよね。

 下記がBOOTSTRAPで用意されたコードです。これも「カスタムHTML」ブロックへのコピペで動作します。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

 BOOTSTRAPにはアイコンのライブラリも用意されています。

 これら以外にもたくさん用意されています。

 最後に注意点ですが、BOOTSTRAPを使うには、あらかじめBOOTSTRAPを使うための環境設定が必要です。BOOTSTRAPで用意されたコンポーネントを使うには、専用のCSSやJSが準備されております。

 方法としては、

①BOOTSTRAPで用意されたCSSファイルやJSファイルをダウンロードして使う方法。

②CDN(コンテンツ・デリバリ・ネットワーク)を使う方法。

 使い方としては②のCDNが簡単かと思います。あらかじめBOOTSTRAP側にてサーバー上にて専用CSSやJSが用意されておりますので、自身のホームページが表示される度に自動で必要なファイルがダウンロードされます。

 BOOTSTRAPには上記以外にも様々なコンポーネントが用意されています。興味のある方は是非、BOOTSTRAPの日本語サイトを覗いてみてください。自分が欲しかったブロックコンポーネントが見つかるかもしれませんよ。

https://getbootstrap.jp

ウェブサイト構築にワードプレスのような動的CMSを用いるメリット

ワードプレスロゴ

ホームページの種類にも静的ホームページと動的ホームページという考え方、分類があります。

HTMLコード

まず、旧来のホームページは、ホームページ作成の基本的なコンピューター言語であるHTML言語(ハイパー・テキスト・マークアップ・ランゲージ)のみで作成されており、HTML言語はタグと呼ばれる命令をテキストエディタ等で記述し、それをブラウザが1行ずつ読み込んで記述された命令通りの表示をするというものでした。

例えば、

<h1>これはタイトルです。</h1>

と、HTML言語で命令を記述したとすると、ブラウザはそのとおりに、画面上に表示してくれるわけです。

しかしこの場合、テキストエディタで記載した内容は、固定の、決まった内容でしかなく、条件に応じた動的な表示はできませんでした。

これが、HTML言語で作成されたホームページは静的ページであるという理由です。

この静的ページの問題は、装飾やユーザーインタラクティブなユーザーの興味を引くようなページを作成できないばかりではなく、ブログ投稿やニュースリリース等のような定期的にコンテンツを追加したり、修正したりといった事が難しいという問題があります。

PHP言語イメージ画像

しかし今の時代ウェブの世界には、先の静的ページに動的な変化や装飾を付加するべく、ウェブの世界に特化した様々な言語が開発、規格化されており(Javascript等)、また、条件に応じて先のHTML言語で記述されたコードを書き換えたり、HTML言語に変数や関数の概念を取り入れる事を可能にした言語(PHP言語)も存在し、より複雑に、リアルタイムに、変化に富んだ、高機能なページの構築が可能となっております。

このような高機能、高知能な言語達は、データベースとの連携も可能としており、先の静的ページの問題である投稿やニュースリリースのような、定期に追加や編集が必要なコンテンツも容易に盛り込む事を実現してくれます。

それは、これだけの高機能、高知能な言語ともなると、ワードプレスや無料ブログサイト等のようなコンテンツ管理画面(CMS)をも構築できるものであり、あらかじめこの管理画面で投稿記事やメディア、各種設定をデータベースに保存し、ユーザーの任意に画面に出力させる事を可能にするばかりでなく、ウェブページを高機能、高知能言語で作成する事で、データベースに保存された記事やメディア等を条件に応じて表示させる事が可能だからです。

そしてワードプレスは、この高機能、高知能な言語であるPHP言語で大分部が構成されたCMSであります。

リアルタイムな社会

刻々と変化する時代において情報を発信するには、その変化に応じて情報を発信する必要があります。

この変化に対応できないような柔軟性に欠いたウェブサイトでは事業に特化させる事が難しいわけです。

従いまして、今の変化に富んだ時代における情報発信のツールとしてウェブサイト構築するのであれば、ワードプレスのような高機能・高知能言語を用いた動的CMSを用いるべきと考えます。

また、先のとおりワードプレスはPHP言語で大部分が構成されたオープンソースのCMSです。

PHP言語の知識があれば顧客ニーズに応じてワードプレスに機能を追加する事も可能です。

当オフィスでは、このワードプレスを用いたウェブサイトの構築やホームページ作成を主としております。

是非、お問い合わせお待ち致しております。