今回のロードマップでどんなサイトを試作するのか、課題やサイトの要件などの説明を行います。
今回制作するサイトは株式会社ベイジが提供しているBtoBサイトの標準ワイヤーフレームのデザインを使ってサイトを制作します。
ただ、こちらで提供されているワイヤーフレームはかなりボリュームが多く、すべてを作るのは大変ですので、制作する画面を絞りました。
絞る基準としては、実際のwebサイト制作でよく使う割にはその作り方があまり共有されていない部分を重視してピックアップしています。
今回の制作の目標は『簡単なやり方で高機能なWordPressテーマを作る』です。
WordPressの管理画面を制作する際にオリジナルの設定画面を作る事などもできますが、目標は『簡単なやり方で高機能なWordPressテーマを作る』ですので、基本的にカスタムフィールドを作る事が出来るプラグインを使って実装していきます。
制作画面
・ホーム
・特徴
・サービス詳細
・セミナー/イベント一覧
・セミナー/イベント詳細ページ
・ブログ/コラム一覧
ホーム
メインとなるページのためもちろん制作します。
特長
特長ページは共通化できるパーツが沢山入っているためこのページを選びました。
BtoBサイトのデザインはtoCサイトのデザインと違って、論理的なデザインが強く、ページ数が多い事が特徴です。
ページが多いので、パーツを共通化し、効率的に制作するスキルと破綻しにくいcss設計を学べます。
サービス詳細
サービス詳細ページでは投稿ページのエディタの設計について学ぶ事ができます。
サービスが増えた時のために、新しいページを追加できるようにしたいという要望は少なくありません。
そんな時、html,cssに詳しくない人がページを制作するとなった場合のために、ビジュアル操作できるようなUIを制作する必要が出てきます。
クラシックエディタとカスタムフィールドを使用して簡単にビジュアル操作できるエディタを制作する方法を学びます。
セミナー/イベント一覧
セミナー/イベント一覧ページでは絞込みの機能とセミナー/イベントの受付ステータスを設定した日付から自動で判断して、受付を締め切る機能の実装や、それをWordPressから管理する画面の作り方を学べます。
絞込み機能は作り方が主に2種類あり、Java Scriptから制作する方法とphpとWordPressのテンプレートタグを使用して制作する方法があります。
今回は簡単な方のphpとWordPressのテンプレートタグを使用して絞込み機能を作っていきます。
セミナー/イベント詳細ページ
セミナー/イベント詳細ページではグーテンベルクのカスタマイズについて学ぶことができます。
サービス詳細ページではクラシックディタとカスタムフィールドを使用してGUIを再現していましたが、さらに高性能なGUIを実装できるグーテンベルクを使用し、オリジナルのコンテンツを追加して専用のビジュアルエディタを制作します。
最近のWebサイトはグーテンベルクで実装する事が一般的ですのでグーテンベルクをカスタマイズできるスキルは必項目です。
ブログ/コラム一覧
こちらのページでも絞込み機能の実装を学びます。
セミナー/イベント一覧ではphpとWordPressのテンプレートタグを使用して実装しますが、こちらではJava Scriptを使用して絞込み機能を実装します。
Java Scriptを使用して実装するとphpで制作するよりも絞込みのUIをリッチに制作できるので、絞込みのデザインにこだわりたい時はJava Scriptを使用する事が多くなります。
簡単な仕様の説明
制作するページが決まったら次に簡単な仕様をメモレベルで書き出します。
全体的な仕様を把握できれば良いです。
ここで言う仕様とは何を変更できて何を変更する事ができないかという部分です。
目的は顧客との認識のずれをなくすため、実装時に迷わないためです。
なので、決められた費用の中で何ができて何ができないのかをはっきりさせます。
仕様を書き出したらなるべく他のエンジニアや、コンサルの方に見てもらいブラッシュアップします。
ある程度固めたら要件定義書の制作をし、顧客に共有し、ヒヤリングを行い、要件定義を決定させます。
ホーム
- メインビジュアル
コピー、サブタイトル、画像の変更不可。webpを使う。 - 特徴
メインの文章は変更不可、3つの画像と文章は変更可能。デザインを保つため数は変更不可。リンクは必ず特徴ページへ、表示非表示の変更不可。 - 機能
メインの文章は変更不可。デザインを保つため数は変更不可、初めの2つは勝手に2カラムになる。パネルの中はアイコン、タイトル、説明、リンク先を変更可能。すべて見るのリンク先は機能ページで変更不可 - 事例
メインの文章は変更不可。メインのロゴを変更可能。事例記事から最新3件を表示。パネルの内容は事例の投稿から変更。表示する事例/順番は簡単に選択/変更可能。全てをみるボタンは事例一覧へ、リンク先は変更不可。 - セミナー/イベント
メインの文章は変更不可。セミナー/イベントから最新3件を表示。パネルの内容はセミナーの投稿から変更可能。表示するセミナー/順番は簡単に選択/変更可能。ステータス、ボタンは日付から自動判別。受付強制終了機能あり、その場合は補足などを表示できるようにする。全てをみるボタンはセミナー/イベント一覧へ、リンク先は変更不可 - お知らせ
メインの文章は変更不可。最新5件を表示。すべてを見るボタンはお知らせ一覧へ、リンク先は変更不可。カテゴリは複数選択されていた場合、若いカテゴリを1つだけ表示。基本1投稿1つのカテゴリとする。
*これらコンテンツの有無、表示順の変更は不可。理由は、CTAまでのコンテンツ設計を行っているため、安易に変更する必要はない。メインコピーが変更できない理由も同じできちんと考えられているので、頻度に変更するものではない。
*メインビジュアルのお問い合わせボタンのリンク先はメインのお問い合わせになるので、変更することはほぼない。新人担当者などが間違って変更したりすると困るので変更不可。ヘッダーのお問い合わせやコンテンツなども同じ理由で変更不可。
特長
- メインビジュアル
全て変更不可。 - メインセクション
メインコピー、サブコピー変更可能。 - よくある悩み
無限に追加可能、左列、右列の順番で追加される。 - ポイント
メインコピー変更可能。一覧表示は下の展開コンテンツかのタイトルから取得、展開コンテンツは無限に追加可能。「ポイント1」の番号は自動付与。タイトル、説明、画像を変更可能、レイアウトは自動で交互になる。 - 信頼の理由
メインコピー変更可能。ロゴ画像は変更可能、デザインの文章は画像の一部とする。理由のパネルは無限に追加可能。画像、タイトル、文章を変更可能。 - お客様の声
メインコピー変更不可。声は無限に追加可能、恐らく実際のお客様の顔写真がはいるので、画像、タイトル、文章、名前の変更可能。 - 受賞歴
メインコピー、パネルの数はデザインを保つため、最大5個まで。画像、受賞年、タイトルは変更可能。 - 質問
メインコピー変更不可。質問は無限に追加可能、質問内容、回答内容の変更可能。番号は自動付与。 - CTAの仕様は共通に記載。
- 導線の仕様は共通に記載。
*これらコンテンツの有無、表示順の変更は不可。理由は、CTAまでのコンテンツ設計を行っているため、安易に変更する必要はない。
サービス詳細
- メインビジュアル
ページタイトルは投稿のタイトルを表示。コピーはカスタム投稿から変更可能。資料ダウンロードのリンク先を変更可能。設定がない場合はデフォルトのリンク先を設定しておく。デフォルトのリンク先は変更不可。 - メインコンテンツ-お悩み喚起
入力はカスタムフィールド、出力はショートコードを使用する。 - メインコンテンツ-ポイント
入力はカスタムフィールド、出力はショートコードを使用する。サブタイトルの『○○○○成功のための3つのポイント』の数字はポイントの数によって変わる。（ポイントの数は変更可能。タイトルも変更可能） - メインコンテンツ-画像と文章のコンテンツ
クラシックエディタにレイアウトのボタンを追加し、ビジュアル的に制作可能。 - メインコンテンツ-ステップ
入力はカスタムフィールド、出力はショートコードを使用する。『導入までは3ステップ』の数字はステップ数に応じて変更可能。数は制限無し。 - 事例導線
表示する事例/順番を簡単に選択/変更可能。最大3つまで、ボタンのリンク先の変更はできない。会社名がタイトルでコピーはカスタムフィールド。 - セミナー
表示するセミナー/順番を簡単に選択/変更可能。最大3つまで、リンク先の変更はできない。
セミナー/イベント一覧
- メインビジュアル
紹介文を変更不可。 - コメント
最大3まで。アイコンと文章を変更可能。 - 絞込み
カテゴリを追加、並び替え可能。カテゴリをクリックで絞込み。 - イベント一覧
申し込み可能なセミナーを投稿日順に全て表示、9件に満たない場合は終了したセミナーを9件になるまで表示。画像、開催日、タイトル。場所、テーマ、対象者、参加するメリットを変更可能、ボタンの文言は変更不可、リンク先は各詳細ページの申し込みフォーム。タイトルや画像参加するメリットを含むクリッカブルエリアのリンク先は詳細ページ。開催日の24時間前になった時点で受け付けは自動的にに終了し、ステータスと申し込みボタンが消える。強制終了可能、補足の表示可能。 - イベントのレポート
イベントのレポートを投稿日が新しい順に4件表示。
*セミナー/イベントとそのレポート2種類とも同じ投稿画面が管理、セミナー/イベントかレポートかで管理画面で絞込み可能。
セミナー/イベント詳細ページ
- メインビジュアル
投稿時のタイトル、開催日時、ステータスを表示 - お申込みボタン
参加受付中ならアクティブに、終了していたら非アクティブに。フォームはサイト内部、外部を選択可能。内部ならページのお申しこみエリアにアンカーリンク。外部なら別タブで開く。 - アイキャッチ
デフォルトで設定できるアイキャッチを表示。 - 説明文
説明文を変更可能。 - セミナー情報
表の内容を変更可能。入力がない項目は行ごと消す。（カスタムフィールド） - コンテンツ
グーテンベルクのカスタム項目を選択して制作可能。 - シェア
変更不可、それぞれのSNSのデフォルトに依存する。OGP系は共通部分に記載 - 申し込みフォーム
申し込みフォームは案件によって様々なのでhtmlコーディングのみの再現し、iframeを入力させて表示。 - サイドバーと、コンテンツ下の導線—簡単に表示する記事を選択/順序入れ替え可能。サイドバーは最大3つ、コンテンツ下は2つ。入力が無ければ、セミナーは同じタグが付いた記事を投稿日が新しい順に、そしてセミナーは開催しているものを表示、複数のタグが付いている場合は、andを使用。存在し無ければ、終了しているものを表示。
- ブログは入力が無ければ最新の記事を表示。
ブログ/コラム一覧
- メインビジュアル
コピーを変更不可。 - 絞込み
カテゴリを追加、並び変え可能。絞込みはjsを使う。 - 一覧
投稿日が新しい順に10件表示。
共通
- CTA
メインコピー、ボタンの文言、電話番号の表記の有無（グロナビの電話番号と共通）、よくあるご質問の表記の有無、リンク先、無料アイコン、資料ダウンロードボタン用のコピー、資料ダウンロードボタンのリンク先を変更可能。
*電話番号はコロナ化の影響により、電話対応が難しく、webサイトからのお問い合わせに誘導したいというニーズが生まれるかもしれないので、表示の有無を選択できるようにする。
*よくあるご質問は、サービスの詳細毎に表示するページを変更したいというニーズが出るかもしれないので変更可能にする。そもそも必要ないページもあるかもしれないので表示の有無も選択可能にする。文言はデザインを守るため、変更不可にする。
*資料ダウンロードもサービス毎に資料の内容が異なることがほとんどなので変更可能にする。
- 右下のワイプCTA
今回はtopページのみに表示。閉じるボタンを押したユーザーはブラウザをとじるまでページ遷移などをしてもCTAは表示しない。セッションでの管理は行わない。ブラウザを一度閉じ、もう一度アクセスすればサイド表示される。アイキャッチは画像、クリックでモーダル表示、youtubeを表示、内容は変更可能。バックグラウンドを押せばモーダルは閉じる。
- グロナビのドロップダウン
表示する内容は3つまで、表示する内容は変更可能。展開はチェック項目通りクリックで展開。この場合はサービストップへのリンクをドロップダウンの中に含めるべき。
*こちらのドロップダウンはサービスの量によってデザインや仕様が変更となることが多いので、（そもそもドロップダウンを使わないなと）とりあえず今回はデザインのみ再現をし、変更も、リンク先も無し。
- フッターはhtmlから変更可能。
- 各ページのパンくずは変更不可。制作時のサイト構成から自動生成。階層にカテゴリやタグは含めず、ページの情報のみ。
- OGP系は画像と説明文とタイトルを変更可能、入力が無ければ、投稿時のデータ、アイキャッチ、抜粋、トップの文章が適応される。
- 画像系は、メインビジュアル以外画像遅延読み込みを付ける。画像は全てimgで再現し、デザインを守りたい部分はオブジェクトフィットを利用する。
- ブログのように画像の設定を頻繁に行わない部分をWordPressから変更できるようにするか、変更できないようにするかは話し合って決める、今回はwebpの解説のためにTOPページは変更不可にする。WordPressから複数のファイル形式を投稿できるようにする設定もいいかも。
- 背景はバックグラウンドを敷いて、元から画像サイズをhtmlから保持しておく。画像が設定されてない時はデフォルトの画像を表示。デフォルトは設定不可。
- 導線は変更不可、サイト構成に従って自動生成。表示中のページは非アクティブに。
まとめ
制作するページとページの簡単な仕様については以上です。
教材のため、あえていろいろな方法で実装し、バリエーションを増やしていますが、実際は実装方法や操作方法は統一します。
こちらをベースに他のエンジニアさんや、コンサルの方に相談し、ブラッシュアップしたら、顧客へ共有するためにきれいにまとめていきます。
