UmeeT - 東大発オンラインメディアWebサイトフルリニューアル

#作ったもの

使用技術

• Figma / Gatsby.js / Sass / WordPress / GraphQL / Google Cloud Platform / Netlify

期間

• 1ヶ月

背景・当時の課題

当時の UmeeT のサイトは、ある WordPress テーマを適用させたサイトになっており、WordPress に精通しているエンジニアが組織内に十分にいなかったため、開発面だけではなく運用全体レベルで次のような問題が発生していました。

• 作成したロゴを Web ページ上にうまく表示させることができない
• （更新されていないプラグイン、最適化されていないファイルなどの影響により）ページの表示速度がかなり遅い
• 様々な情報が混在していて、運営側でもどこに何があるかをすべて把握できていない
• SNS でバズったときに爆発的な流入に耐えられず、サーバーが落ちてしまう
• フォームに毎日のようにスパムが来て困っている
• その他（ここでは具体的には述べませんが）セキュリティ面での問題

課題の整理

ヒアリングを踏まえ、解決すべき課題を次のように整理しました。

• Design - ファンメイクできる Web メディアにするためのデザイン戦略
  • 「東大の人」にフォーカスして独自性を出すデザインにする
  • ロゴなどのクリエイティブを Web サイトに反映させる
  • サイト内の情報を整理し、情報を正しく伝える
• Engineering - 技術面での課題解決
  • ページスピードを向上させる
  • 技術負債を解消する
  • スパム対策など、セキュリティ面の課題解決
• Operation - 運用面での諸々の課題
  • 解析データをより見やすくするための運用フロー構築（エンジニア不足をデータリテラシーを上げることで解消につなげる）
  • その他運用フローの効率化

自分の役割・やったこと

このプロジェクトは友人と2人で行いました。人数が少なく、お互いの領域に意見しながら進めていくほうがより合理的だと考えたため、大きく担当領域を分けながらも、お互いの領域のタスクも担当しています。

自分の担当

• デザイン全般
• WordPress 管理画面の整備
• GCP まわりの整備
• その他運用面での改善周りのタスク

友人の担当

• デザインレビュー
• フロントエンド、GraphQL 周りのデータ処理

具体的にやったこと

以下、具体的にやったこと（現在進行系のものを含む）を列挙します。

• ロゴのリファイン
• Figma を用いた Web サイトデザインの作成
• 開発ディレクション
• Google Cloud Platform 上の環境構築・ステージング環境整備
• WordPress REST API 用の各種関数の実装
• WordPress 管理画面の整備
• Google Analytics レポート用 Slack bot の開発
• 情報プラットフォーム用に esa.io の環境整備
• 各種施策・企画用のデータ解析・解析データのレポート

ロゴのリファイン

ロゴを Web 用に最適化しました。細かい文字は用途上視認性が低くなってしまうために取り除き、色をよりビビッドに、さらに文字詰めの調整を施しました。