第3回 WordPressでどんなサイトがつくれるの？

前回のおさらい

IPアドレスとドメイン名

• インターネットに繋がるすべての機器にはIPアドレスが割り振られている
• IPアドレスは人間には覚えにくいため、ドメイン名（参考書 P34）が考案された
• ドメインとIPアドレスの対照表のしくみをDNSという（ネームサーバー）
• ドメイン名は一部を除いて、空いていれば誰でも取得できる（先願主義）
  • 取得に条件がある例
    • co.jp、or.jpは日本の法人のみ取得可能
    • example.com、example.jpなどは例示用
• ただし、他社の商標を侵害していないかチェック
  • 「WordPress」はWordPress Foundationの商標なので、wordpress.jp、wordpress.netなどは取得できない、wordpress-design.jpなどもNG
• 用語の確認 www.example.co.jp
  • .jp　→TLD（トップレベルドメイン）
  • example.co.jp　→ドメイン名（独自ドメイン）
  • www　→ホスト名（サブドメイン）

ドメイン名は大事！

• ドメインは基本1年更新。更新忘れに注意。
  • →カード払い・自動引落など
• Googleの評価はドメインに対して付く。ドメインを失うと検索順位も失う
  • →結果、サイトの顧客・ユーザー・読者も失いかねない
• ドメインは資産価値がある。ドメインは「育てる」という視点が必要
  • ドメイン売買 https://www.onamae.com/auc/sell/list?btn_id=selldomain_middle_buyingbtn_20191210 
• 使わなくなったときの処分に注意
  • 放置すると、こうなる…
    • http://chiikuryoku1.blogspot.com/
      • http://chiikuryoku.net/　※閲覧注意
• 参考）期限が切れた後のドメイン名に何が起こるか
  • https://news.gandi.net/ja/2020/09/the-domain-name-afterlife/ 

取得はかんたん（安い）だが、維持管理はしっかりやるように。

CMSとそうではない場合の違い

• WordPress（CMS）を使わない場合（静的サイト）
  • Webページにアクセス→ページのファイル（index.html）を返す
    • シンプル、表示も早いが、大量にページがある場合、更新が大変
• WordPress（CMS）の場合（動的サイト）
  • Webページにアクセス→ページのファイル（index.php）によりWordPressが起動
  • データベース（MySQL等）から記事データを取得
  • テンプレート（テーマのファイル）に流し込んでページのファイルを作成し返す
    • 表示に若干時間がかかるが、大量のページの更新もラク
    • 更新頻度が上がるので鮮度の良い情報を提供できる

WordPressでつくられたサイトを見てみよう！

株式会社アカツキ – オーソドックスなコーポレートサイト、企業サイト

https://aktsk.jp/

ラクスル（印刷物のオンライン発注） – ファーストビューが全面写真
https://corp.raksul.com/ 

ホワイトハウス（行政） – 行政サイトでも洗練された雰囲気に

https://www.whitehouse.gov/

TAKEOFF（アパレルショップ） – ファッション雑誌のような自由なレイアウト

https://takeoff16.jp/

ファミ通（ゲーム系ウェブマガジン） – オーソドックス、The日本的なレイアウト

https://app.famitsu.com/

エン・ジャパン（人材採用サービス関連） – 企業サイトでもウェブメディア仕立て

https://corp.en-japan.com/

WIRED（テクノロジー系ウェブマガジン） – 大小のブロックを組み合わせたような

https://www.wired.com/

VOGUE JAPAN（ビューティー系ウェブマガジン） – ブロックの崩し方、差し色の使い方

https://www.vogue.co.jp/

ウォルト・ディズニー（エンタメ） – 色の使い方〜メインビジュアルから色を取る

https://thewaltdisneycompany.com/

クチコミ47（格安SIMなど口コミ投稿サイト） – 掲示板プラグイン「bbPress」の事例

https://simpc.jp/kuchikomi/

結いなびIIDA（学びのWebコミュニティ） – SNSプラグイン「BuddyPress」の事例

https://member.anyjob.work/member/ ※制作中の仮サイト

マイ広報紙（自治体の広報誌の無料配信） – Webの技術でスマホアプリをつくれる「monaca」を使い、WordPressをバックエンドとして使用しつつスマホアプリを開発

https://ja.monaca.io/showcase/ocj.html

https://ja.monaca.io/

古美薫 KO・MI・CA（古民家カフェ） – WordPressデフォルトテーマでもこんな雰囲気に

http://member.anyjob.work/wp1/

Webページの基本的な構造・用語の確認

• ヘッダー
  • ページ上部のナビゲーションなどを含む部分。どのページでも同じ内容とすることでサイトの回遊をしやすくする。
• グローバルメニュー
  • サイト全体の主なセクションを移動するメニュー。通常はページの上部にある。
• パンくずリスト（breadcrumb）
  • 現在地を階層であらわすリンクテキスト
• フッター
  • グローバルメニューに載せきれないメニューや連絡先を表示することが多い。
• サイドバー
  • 人気ランキングやバナー画像など、関連コンテンツへの導線を置くことが多い。
• クレジット
  • サイトの権利所有者などを表示する。通常、ページ最下部に書く。
• 遷移
  • ページを移動すること
    例）「このボタンをクリックすると次のページへ遷移します」
• ファーストビュー
  • ページにアクセスしてスクロールせずに見える部分。ファーストビューに重要な要素を置くことが良い（結果に繋がりやすい）とされている。
    例）ファーストビューに「カートに入れる」ボタンを置く
• F字、Z字（視線の動き）
  • 優先度の高いものほどページの左/左上に置く
    参考） https://blog.maromaro.co.jp/archives/2256
• レスポンシブ・ウェブ・デザイン
  • １つのサイトでPCやスマホなど複数端末に最適な表示がされるようにデザインすること。CSSの記述（メディアクエリー）で書き分ける。
• ドロワーメニュー
  • スマホサイトで画面右（または左）からスワイプで表示されるメニュー。
• ハンバーガーメニュー
  • スマホサイトの右上などにある三本線のメニュー。
• Webフォント
  • 画面の文字は通常は閲覧者のパソコンにインストールされたフォントで表示されるが、Webフォントは外部サーバーから提供されたフォントで表示される。閲覧者が持っていないフォントで、制作側が意図したとおりに文字を美しく表示できる（昔は、すべて画像に書き出していた）。
• サムネイル画像
  • 記事一覧ページに表示される小さめの画像。サムネイル＝thumbnail、親指の爪、小さなものの意味。
• カルーセル
  • 小窓の中に設置した複数の写真などを横方向にスライド/スワイプできる仕掛け。

• CTA（コール・トゥ・アクション）
  • ページを読んだあとに閲覧者に取ってほしい行動を促すための仕掛け。行動喚起。
• HTML（HyperText Markup Language）
  • Webページの構造を記述する言語。CSSやJavaScriptと組み合わせて使うことが多い
• CSS（Cascading Style Sheets）
  • HTMLに対してデザイン要素を付加する言語。ブラウザによってサポートレベルが違うことがあるので、新しめの要素は使用にあたって注意。
  • 記述例
        .site-title {
            color: blue;
            font-size: 24px;
            font-weight: bold;
        }
• JavaScript
  • Webページに動的な要素を付加する言語。PHP（サーバー側で動作）と違って閲覧者のブラウザ側で動作。

今日も今日とて、WordPress！

WordPressにログイン（参考書 P52）：

http://wp1.icc/

※ログインできたら、そのアドレスをお気に入り（ブックマーク）に登録しよう

• 管理画面の構成をざっくりと確認（参考書 P56）
• インストール時に入力した「サイトタイトル」はどこに反映されているだろう？
• サイトタイトルを変更してみよう
• タグライン（キャッチフレーズ）を変更してみよう（参考書 P58）