WordPressによるサイト構築
WordPressとは
公式サイト：https://ja.wordpress.org/
- ブログ等をはじめ世界で一番使われている使われるCMS。
- 記事の追加・編集をブラウザでできます。
- コンテンツはデータベースに保存され、テンプレートから呼び出されます。
- 画像・動画も扱えます。
- システムは無料です。インストール・各種設定・デザイン・制作には費用がかかります。
- 様々なプラグインで比較的手軽に機能追加が可能です。
- 会員制サイト・物販・データ販売等、各種サイトに対応可能です。
- 積極的に開発が継続されています。
WordPressのメリット
- ページ追加がかんたん。
- 機能開発が他に比べて容易。
- ページを遷移してもレイアウトが破綻しにくくなっています。
- スマホ・タブレット・PCに最適なレイアウトで表示するレスポンシブに柔軟に対応可能です。
- PHPとMySQLという一般的なデーモンを使うため、サーバの選択が自由。
- コンテンツの可搬性が高く、将来のデザイン変更・サーバ移転でも資産が無駄になりません。
- 使っている人、開発者が多いので将来的にも安心です。
- 管理者を複数設置できます。
- 購読者・投稿者・編集者といった権限を設定でき、安全な運用が可能。
- 日時を指定して予約投稿できます。
WordPressのデメリット
- WordPressに限らずデータベースを使用するCMSは、サーバの速度が重要です。
- 静的なHTMLと比べて表示が遅くなりがち。ただし設計・作り方に大きく影響されます。
- 「普及している＝クラッカーに狙われやすい」なのでセキュリティ対策・メンテナンスが大切です。
素材収集
まずはサイトコンセプトを明確化し、必要な素材をリストアップします。
WordPressをインストールしたら、デザインをする前に全てのページを埋めてしまいましょう。
ホームページはあくまで「伝えるツール」の一つです。伝える内容が決める前にビジュアルを検討しても始まりません。
- サイトコンセプトを明文化します。
ラフスケッチを描きます。 - ロゴ・キャッチ・シグネチュアを揃えます。
- 商品や作品をまとめます。
リストと写真。
金額の消費税表示ルールを決めておきます。 - 原稿データを集めます。
ざっくりとで良いので、文章を書いておきます。サイトの紹介文（私たちは何者であるか）、伝えたいこと等。
写真・イラスト・表・図。
動画。
どのようなお知らせがあるか、サンプルで良いので数点書いておきます。 - 会社概要。
住所・電話番号。
アクセス。Googleマップも出しておきます。
沿革を調べましょう。 - 問い合わせページ。
Contactformに掲載する内容を検討します。 - Googleアカウントを用意します。
アナリティクス。
サーチコンソール。
マップ。
ビジネス。 - SNSアカウントがあればログイン情報を確認しておきます。
Twitter。
facebook。
Instagram。 - メール設定が必要な場合。
メールアカウント一覧。
デザイン
次にデザインを考えます。
- シンプルにすることを第一義にします。
特にキャッチ・文章。
不必要な丁寧語を排除します。最近は過剰な丁寧語で読みづらい分が増えています。 - 伝えたいことをストレートに書きます。
- 一目で「サイト内」と分かるように、ロゴの配置や色彩計画に配慮します。
- 機能性を検討します。
最も重要なのは視聴者の身になって操作を考えることです。
視線誘導を意識してページ内の動線を考えます。
さらにページ遷移・ページ内遷移についても考えます。 - モチーフを決めます。
好きな花・曲・絵・動物・ファッション・風景。
好きな一文字。
国のイメージ。イタリア料理ならイタリアでデザインされた書体を使うとか。 - メインデバイスを決めます。
スマホ・タブレット・PCがありますが、通常のサイトであればアクセスの70％以上はスマホからです。 - 印象・色・書体を決めます。
優しい・きれい・かっこいい
カラーチャート作成。
webフォント使用検討。 - 動く要素の導入について検討します。
近年は動画の導入事例が増えています。
その他のJavaScript等による動く要素は、基本的には見た目の印象だけです。コストとの兼ね合いで導入を検討します。
制作
制作の大まかな流れを列記します。
打ち合わせ段階
- 大まかなサイト設計。
- ラフデザイン検討。
- 機能策定。
- 概算ページ数勘定。
- 概算見積制作。
- 契約。
制作段階
- ドメイン・サーバ契約。
- メール設定。
- WordPressインストール
- ページ制作。
文章、ロゴ、写真、図版等をデザイン以前に用意します。
ページの遷移、要素、段落を確認します。 - 全体デザイン案決定。
- 素材制作。
文章作成。
写真・動画撮影。
図版制作等。 - 各ページ詳細デザイン・制作。
テスト段階
- OGP画像、ストラクチャ、サーチコンソール等、機能要素の動作確認。
- ページ遷移確認。
- デバイス・ブラウザ別確認。
- テストユーザーによる確認。
- メール送信テスト。
- Googleアカウント設定。
公開
無償メンテナンス期間
公開後1ヶ月間、無償にて契約内容に基づく機能・設定の調整を行います。文字や画像の修正も承ります。
なお、新規の作成・動画の再編集については対象外です。
作業工程と見積について
| 打ち合わせ | どのようなホームページを希望されるか、ラフを描きながら打ち合わせします。同時に概算予算・公開時期等について書くに新ます。 | − |
|---|---|---|
| 契約 | 概要把握後、開発範囲を決定して契約します。契約時、当初見積の半金をお支払いいただきます。 | − |
| 原稿収集 | 企業紹介・商品リスト・会社概要や写真等、原稿を収集します。 | 50,000〜 |
| 素材制作 | 写真やイラストの制作、機能開発（プログラム）に着手します。 | 50,000〜 |
| ドメイン・サーバ等契約 | ドメイン・サーバの契約代行も承ります。 | 12,000/年〜 |
| ページ制作 | 文字原稿・写真等をページに入力して全体の流れを把握します。その際に段落をつけることで過不足や見やすさを確認します。 | 50,000〜 |
| 機能開発 | WordPress及び弊社既開発機能で対応できない場合、プログラム開発します。 | 30,000〜 |
| デザイン | モチーフ・色彩計画・希望するイメージを考慮した全体のデザインを制作します。 | 100,000〜 |
| ページ詳細デザイン・制作 | 各ページの詳細デザインを行います。 | 10,000/P〜 |
| Google設定 | アナリティクス・サーチコンソール・マップ・ビジネスを設定します。 | 60,000 |
| テスト | 機能の動作・メール送信テスト。社員と外部ユーザーによる判読性・操作性のテストを行います。 | 30,000〜 |
| 公開 | 公開時、sitemapの送信等を行います。 | − |
| 精算 | 残金をお支払いいただきます。 | − |
ホームページの内容・規模に応じて見積いたします。
なお契約後に内容の変更があった場合、見積金額を修正して精算時に調整いたします。
弊社オリジナルテンプレートをご利用いただく場合、40万円〜のセット料金で承ります。
- 見積総額に対して「営業管理費10%」をいただきます。