07-01 / LEVEL 02
JUNKBRANDING
Editorial Media
スクールの学習用デモ作品です。実在の受注実績を表すものではありません。
記事を編集・更新して届けるメディアサイト。
作品情報
- 想定業種
- Editorial
- 技術スタック
- WordPress / PHP / MariaDB
- デザインコンセプト
- 紙の雑誌を読むように記事へ進める、明朝体と生成り色を使ったメディアサイト。写真と見出しの大きさで、特集・新着・インタビューを区別する。
- アニメーション
- CSSとIntersectionObserverによる写真の表示、読書位置の進捗表示。動きを減らす設定では表示演出を抑える。
主な実装機能
- 投稿・固定ページ・カテゴリー・タグ・著者をWordPressで管理
- ブロックエディターによる本文編集と、リード文・画像説明・カバーストーリーの設定
- 記事検索、ページ送り、関連記事、目次と読書位置の表示
- 編集済みの内容を上書きしないサンプルデータの読み込み
- 入力を検証し、保存・メール送信をしないデモフォーム
学習できる内容
- 記事・カテゴリ・著者の関係を整理し、トップ、記事一覧、記事詳細、検索結果の情報構成を作る。
- WordPressのテンプレート階層に沿ってPHPファイルを分け、共通部分とページ固有の表示を実装する。
- 投稿データを一覧と詳細へ出力し、ページ送り、検索結果なし、画像未設定などの状態を作る。
- 下書き・プレビュー・公開・更新の編集手順を試し、編集者が迷わず記事を追加できる入力ルールを整える。
- 出力のエスケープ、権限、バックアップを確認し、テーマ変更や更新の後も記事を読める状態を維持する。
ソースコードについて
提供されたWordPressテーマを取り込み、テンプレート、投稿設定、サンプル読み込み、デモフォームを整備しています。追加プラグインは必須ではありません。PHPテーマと素材は作品内で管理し、学校本体の静的配信から分離しています。
ポートフォリオ制作のポイント
- 提供されたデザイン・記事・素材と、自分で実装・変更した範囲を分けて説明する。
- 記事の下書きから公開・更新まで、管理者と著者の権限を含めて説明する。
- サンプルの再読み込み、画像未設定、検索結果なし、狭い画面での表示を確認する。
公開と更新
WordPressの管理画面から記事・画像・カテゴリーを更新できます。PHPとMariaDBはAWSで動かし、スクール内のURLから閲覧できるようにしています。記事の保存、画像アップロード、下書きのプレビューを公開環境で確認しました。お問い合わせフォームは、保存・メール送信をしない教材用デモです。
この制作例から学ぶ
デモを操作した後は、使われている技術と課題のつながりを確認できます。