INDEX
目次
10章 WordPress制作課題③
【10-1】課題について
これまで使用したテーマを活用して架空サイトを作成してみましょう
この課題では、これまで学習してきたWordPressの知識を活かして、「自分らしさ」を表現できるWebサイトを自分の手で作成します。
サイトのテーマは自由です。ポートフォリオサイトや、ブランドサイトなど、「作ってみたい」を形にしましょう。
【目的】
・ WordPressでサイトをゼロから設計し、制作まで一通り経験する
・サイトの目的や情報構成を自分で考える「ディレクション力」を磨く
・ 未経験の人でも「作れる」サイトを目指し、実績として使える作品を作る
【利用テーマ】
WordPress + Lightning テーマ or Arkhe テーマ
サイトのテーマは自由です。ポートフォリオサイトや、ブランドサイトなど、「作ってみたい」を形にしましょう。
【目的】
・ WordPressでサイトをゼロから設計し、制作まで一通り経験する
・サイトの目的や情報構成を自分で考える「ディレクション力」を磨く
・ 未経験の人でも「作れる」サイトを目指し、実績として使える作品を作る
【利用テーマ】
WordPress + Lightning テーマ or Arkhe テーマ
【10-2】架空サイトのテーマを決めよう
次の2つから選びます
・課題例のテーマから選ぶ(保育園サイト)
・ 自由に作りたいサイトを決める
・課題例のテーマから選ぶ(保育園サイト)
・ 自由に作りたいサイトを決める
【10-3】架空サイトのディレクションをしよう
下の項目に沿って架空サイトの内容を考えていきましょう!
保育園サイト
1.サイト名・概要
サイト名:つばさ保育園
ジャンル:保育園・教育機関
制作目的:保護者に向けて園の魅力・入園情報を伝えることで、信頼感と問い合わせ数の向上を図る
2. ターゲットユーザー
属性
|
内容
|
---|---|
年齢層
|
25〜40歳前後の保護者(特に初めての子育て層)
|
居住地
|
園の近隣地域(例:東京都杉並区)
|
ニーズ
|
子どもに合った保育園を探している、安全・清潔・教育方針に共感したい、問い合わせしやすさ
|
3. コンテンツ構成案(ページ構成)
ページ名
|
内容概要
|
---|---|
トップページ
|
園の雰囲気、最新のお知らせ、CTA(見学予約など)
|
園について
|
園の方針、園長メッセージ、設備紹介、先生紹介
|
一日の流れ・年間行事
|
園児の1日、季節ごとの行事、写真付きで紹介
|
入園案内
|
入園までの流れ、料金、募集要項、申込フォームへのリンク
|
ブログ(おたより)
|
園内の様子、保護者向けの情報発信
|
アクセス・お問い合わせ
|
地図、電話・フォーム、園の住所・SNSリンクなど
|
4. デザイン・トーン
項目
|
内容
|
---|---|
カラー
|
パステル系(ライトブルー・クリーム・ピンクなど)
|
フォント
|
丸みのある親しみやすいフォント(Webフォント)
|
写真
|
園児の笑顔・遊んでいる様子・自然と触れ合う場面
|
トーン
|
安心感、清潔感、あたたかさ、親しみやすさ
|
5. 使用機能・設定方針(Arkheのブロック・カスタマイザー)
・トップにヒーローヘッダー+スライダー風画像ブロック
・お知らせ(投稿)を3件自動表示
・カラムレイアウトで1日の流れ・イベントを整理
・CTAブロックで「見学予約はこちら」リンクボタン配置
・アクセスには地図埋め込みブロック
・トップにヒーローヘッダー+スライダー風画像ブロック
・お知らせ(投稿)を3件自動表示
・カラムレイアウトで1日の流れ・イベントを整理
・CTAブロックで「見学予約はこちら」リンクボタン配置
・アクセスには地図埋め込みブロック
自由に作るサイト
こちらでは空欄部分をご自身で考えて記述し、それに基づいて制作を進めていきましょう。
サイト名・概要
サイト名:
ジャンル:
制作目的:
2. ターゲットユーザー
サイト名・概要
サイト名:
ジャンル:
制作目的:
2. ターゲットユーザー
属性
|
内容
|
---|---|
年齢層
|
|
居住地
|
|
ニーズ
|
3. コンテンツ構成案(ページ構成)
ページ名
|
内容概要
|
---|---|
ページ①
|
|
ページ②
|
|
ページ③
|
|
ページ④
|
|
ページ⑤
|
|
ページ⑥
|
4. デザイン・トーン
項目
|
内容
|
---|---|
カラー
|
|
フォント
|
|
写真
|
|
トーン
|
5. 使用機能・設定方針
・
・
・
・
6. 参考サイト(URL)
・
・
・
・
【10-4】架空サイトのワイヤーフレームを作成しよう
【10-5】Wordpressを使用してサイトを作成してみましょう
LightningとArkheを使用したサイトの一覧を見ながら実際のクライアント案件を想定してサイト作成をしてみましょう!