初心者WrodPressで会社のホームページを作りたい
STORK19ってコーポレートサイトにも対応してる？
HPのデモサイトを見てみたい
そんな疑問に答えます。
WordPress人気有料テーマSTORK19（ストーク19）ってブログテーマとしてお馴染みですよね？
「ブログ」ではなく「企業サイト」は作れるのか気になるところ。現役でWeb制作制作の仕事をしている僕が、STORK19で会社のホームページっぽいデザインのデモサイトを作ってみました。この記事ではSTORK19を作ったコーポレートサイトのデザインと作り方のポイントを紹介します。
【基礎知識】STORK19ってどんなテーマ？
まずは有料テーマSTORK19の概要です。
| STORK19の概要 | |
|---|---|
| テーマ名 | STORK19 |
| 公式サイト | OPEN CAGE |
| 価格 | 11,000円 （税込み価格） |
| 販売事業者 | 株式会社bridge 香川県観音寺市高屋町1222 |
STORK19を販売しているOPEN CAGE（オープンケージ）ではSTORK19の他、アルバトロス、ハミングバードといったテーマを扱っています。ブロガー定番の有料テーマ販売事業者です。
【デモサイト】STORK19でコーポレートサイトを作ってみた
STORK19で作って企業サイト（デモ）です↓
歯医者さんをイメージしたサイトなんですが、完全に企業のホームページになってますよね？
ちなみにデモサイトの作成に関してテーマファイルは一切独自カスタマイズしていません。HTMLやCSSも一切編集せず、STORK19とWordPressの機能だけで作成しました。
かんた作成にかかった時間は1時間半です。
STORK19で企業サイトを作ってみた感想
| 項目 | 評価 |
|---|---|
| 初心者向け度 | 4.5 / 5.0 |
| デザイン性 | 4.2 / 5.0 |
| 自由度 | 4.0 / 5.0 |
| おすすめ度 | 4.5 / 5.0 |
わりと簡単だった
HTML＋CSSやPHPといったWordPress関連の知識がゼロでも、ホームページは作れます。
ちなみに今回作成したデモサイトはPHPを編集するといった高度なカスタマイズは一切していません。誰でも同じような企業サイトをプログラムの知識なしで作れますので安心してください。
プログラムの知識はゼロでも大丈夫そう
プログラムを書かなくても、マウス操作でカチカチ選ぶだけでデモサイトを作れました。
STOK19で調整できないパーツもありますが、基本マウス操作だけで十分です。デモサイトのようなデザインにしたいだけならHTML＋CSSの知識はゼロで大丈夫です。
かんたオシャレに作りたい場合はプログラムの知識より以下が大事になってきます。
ポイント
- キレイな素材（画像や動画）
- 素材を整える画像編集系のスキル
- WordPressの基礎的な操作方法
「キレイな素材」は基本ですね。
素材なんですが、自分で撮影する必要はありません。
無料でオシャレな画像を使いましょう。
有料で販売している素材もあるんですが、最近は無料で使える素材サイトが充実しています。
かんたデモサイトで使っている画像は写真ACの無料素材です。
僕は仕事で大量に素材を使うので有料サブスクしていますが、無料でも有料でも使える素材はほぼ同じです。
無料写真素材なら【写真AC】【企業サイト向け】SRORK19の特徴と便利な機能を紹介
STORK19で会社ホームページのデモサイトを作った際に便利だと感じた機能を紹介します。STORK19のデモサイトは以下の機能をメインに作っています。
STORK19の特徴
- 画面いっぱいに表示できるメインビジュアル
- 流行の1カラムレイアウトもサポート
- 段組みが簡単
- ランディングページっぽいデザイン
- コンテンツエリアの動画サポート
かんたそれぞれの特徴を解説します。
【特徴①】画面いっぱいに表示できるメインビジュアル
サイトの顔にあたるメインビジュアル。専門用語でロゴなどヘッダーを含むこのエリアは「ファーストビュー」と呼ばれています。その名の通り、ユーザーの目に最初に映るポイントという意味です。
メインビジュアルは第一印象を与える重要なパーツの一つ。デモサイトでは静止画を画面いっぱいに広げていますが、それ以外のオプションも多数あります。
メインビジュアルのオプション
- 静止画像を配置
- 動画を配置
- キャッチフレーズ（メイン＆サブキャッチコピー）を配置
- ボタンを設置（リンク付き）
企業サイトだと写真とキャッチフレーズを表示させるのが定番でしたが、STORK19では動画もサポートしています。動画はスマホ、デジカメで撮影したものが使えます。
最近は無料で使える動画素材サイトなんかも増えています。
かんたインパクトのあるメインビジュアルを作るなら動画を導入したいところです。
【特徴②】流行の1カラムレイアウトもサポート
歯科医院のデモサイトは1カラムで作っています。
1カラムレイアウトとは、サイドバーのないレイアウトデザインのことです。
| カラム | 説明 |
|---|---|
| 1カラム | サイドバーなし |
| 2カラム | サイドバーあり |
STORK19はページごとにテンプレートを選べる仕様です。
「このページは1カラムのデザイン」「こっちはサイドバー付き」といった柔軟なレイアウトに対応しています。一般のページは1カラムでスッキリしたレイアウトに設定し、お知らせページだけにサイドバーを表示させるといった構成がオプションから選択できます。
かんたページごとに使い分けできます。
【特徴③】段組みが簡単
上の図は歯科医院のデモサイトで使っているレイアウト構成の一部です。
アイコンなどを横並びに表示する段組みレイアウトもプログラムコードのスキルなしで実現できます。
STORK19はブロックエディター対応テーマ、WordPressの段組みレイアウト機能「カラムブロック」が使えます。
じつは旧式のエディター「クラシックエディター」だと、この機能は使えません。
古いテーマだけでなく、ここ数年発売されているWordPress有料テーマの中にもブロックエディターに対応していないものがあります。
かんたSTORK19はバッチリ対応しているので心配いりません。
【特徴④】ランディングページっぽいデザイン
企業サイトっていうと、ページが何個か必要そうなイメージですよね。「会社概要」「お問い合わせ」「サービス紹介」などなど。
飲食、美容サロン、医療系の業種なんかはほとんどスマホでアクセスするユーザーがほとんどです。
ページ数をひたすら増やすとタップして移動させることになり、面倒だと感じるユーザーは離脱する可能性があります。
そういった業種であればランディングページのような1ページ構成がおすすめです。
STORK19はランディングページのように1ページに情報を全て含める構成にも対応しています。歯医者のデモサイトはランディングページのような構成になっていますよね？
多少縦長になってしまいますが、サイト上部にメニューを設置しています。各メニューをタップするとページ内にある目的の場所に移動する導線です。
かんたページ内リンクはSTORK19の基本的な機能なので、プログラムコードを書いたり、プラグインをインストールする必要もありません。
【特徴⑤】コンテンツエリアの動画サポート
STORK19はコンテツエリア内に動画を埋め込む機能があります。
動画はサイトにスマホやデジタルカメラで撮影した動画ファイルをアップロードする仕組みです。YouTubeなどを経由せずに動画を表示させることができます。
かんたYouTubeを埋め込むこともできます！
デモサイトのように動画を「背景」として設置し、そのうえにテキストなど載せるアレンジも可能です。もちろんプログラムの知識はいりません。
ちなみにでもサイトの動画素材も無料のものを利用しています↓
無料写真素材なら【写真AC】企業サイト向けのレンタルサーバー
STORK19で会社のホームページを立ち上げるさいに必要なレンタルサーバーについてです。
仕事で日本・海外10社以上のレンタルサーバー上にサイトを作った経験がありますが、「Xサーバーのスタンダードプラン」がおすすめです。
月額料金はざっくり千円
エックスサーバーは3つ契約プランがあります。よほどのことがない限り、一番安いスタンダードプランで十分です。
スタンダードプランの料金
| 区分 | 料金 |
|---|---|
| 初期費用 | 3,300円（税込み価格） |
| 月額料金 | 990円～ |
月額料金はスマホと同じで長期契約すると安くなります。
仮にスタンダードじゃ足りなくなった場合は上位プランにアップグレードすることも可能です。
なんでエックスサーバーなのか？
料金やスペック以外など表に出ていない運用のしやすさがポイントです。
例えばセキュリティー面についてです。
STORK19はWordPressで使う有料テーマです。WordPressはオープンソースのソフトウェアかつ世界中で利用されていることもあり、狙われやすいというデメリットがあります。
レンタルサーバー各社はWAFと呼ばれるセキュリティーソフトが標準搭載してます。
WAFのある国内レンタルサーバー
WordPress上で作業をしていると、設定を保存するたびに誤検知するレンタルサーバー会社が多いは以外と知られていません。誤検知すると設定が保存されないので、WAFの設定を一時的に解除したりする運用を強いられます。
これって面倒ですよね？WAFを切ったままにしとくとセキュリティーが不安です。うっかり切ったままにしておくのはさらにやばいです。
エックスサーバーを10年以上利用していますが、WAFの誤検知は一度も経験したことがありません。
月額料金だけでレンタルサーバーを決めてしまうと、あとあと後悔することになります。一度契約してしまうと別のレンタルサーバー会社にサイトを移行するのはメチャクチャめんどうです。
かんたレンタルサーバー会社はしっかりしたものを選びましょう。
企業サイト制作向けプラグイン
STORK19で企業サイトを作るさいに便利なプラグインを紹介します。
高速化プラグイン
サイトの表示スピードを改善するプラグインは最近のSEOで重要性が増しています。グーグルはページの読み込み速度を検索アルゴリズムに使っていると公表しているからです。
かんた以下グーグルの公式情報です。
ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。
Google 検索セントラル ブログ
WordPressの高速化プラグインは多々あります。無料・有料のものがあるんですが、PSIで検証したところ一番効果があったのは有料のWP Rocket（WPロケット）というプラグインでした。
おすすめプラグイン
以下はWPロケットプラグインが本当に効果があるのかを検証した記事です。
SEO関連プラグイン
STORK19はMetaまわりの設定をするオプションはそれほど多くありません。
公式ページでも外部プラグインを推奨しています。定番はAll in One SEO（旧All in One SEO Pack）でしょうが、設定オプションが豊富すぎるため個人的には機能がシンプルなSEO SIMPLE PACKをおすすめします。
おすすめプラグイン
SEO系プラグインはどれが一つ入れればOKです。複数入れる必要性はありません。
初心者だと勘違いしがちですが、SEOプラグインはあくまでSEO設定のオプションを表示してくれる役割です。インストールしたからといって検索順位が自動的に上がる仕組みではありません。
問い合わせフォームプラグイン
企業サイトの定番「問い合わせフォーム」です。電話対応だけでなく、メールで自動的に問い合わせを受ける仕組みは必須ですよね？
問い合わせ用のメールアドレス記載するだけでは、必要な情報を送ってもらるとは限りません。フォームに入力項目を設置し、問い合わせ時にもれなく送信してもらうのが合理的です。
問い合わせフォームは数多く無料で公開されています。特に指定はありませんが、以下2つは定番です。
おすすめプラグイン
Contact Form7は日本人が開発したプラグインでマニュアルが日本語です。
かんたWordPressに馴染みにない場合はContact Form7がおすすめです。
アニメーションエフェクトプラグイン
スライドインやフェイドイン系のエフェクトなら定番のBlock Animationがおすすめです。ブロック単位でアニメーションの種類やタイミングを調整できるので、かなりこだわった仕上がりでも実現できます。
おすすめプラグイン
以下の記事でプラグインのエフェクトについて詳しく解説しています。
画像軽量化プラグイン
高解像度のキレイな画像をサイトに使いたい。でも高解像度はファイルサイズが大きくなるし心配だ。。
そんな人向は画像軽量化プラグイン「EWWW Image Optimizer」をインストールしましょう。
おすすめプラグイン
EWWW Image OptimizerはSTORK19公式ページでも便利なプラグインとして紹介されています。
かんた公式お墨付きプラグインです。
まとめ
WordPressテーマSTORK19を使ったコーポレートサイト制作についてでした。
STORK19はブロガー向けの印象が強いテーマですが、サイト型デザインのコーポレートサイトも作れます。
ぜひ会社のHP作りにSTORK19を導入してみてください。