派遣求人会社：関西パート・アルバイト募集LP（非公開）

aaron maywood
Webエンジニアー（バックエンド、フロントエンド）
OVERVIEW

大手派遣求人会社のLP実装を担当しました。

YEAR 2023
  • 丁寧なレスポンシブ対策を行いました
    • 各種デバイスでのファーストビューの見えの調整をデザイナーを巻き込みながら行いました
    • 読者層が暇な20～30代女性ということで、モバイルを大切に扱っています（モバイルファースト）
      • アンケートからの誘導では、特にモバイルで選択しやすい配置とするため、最後までピクセル単位での調整を行いました
  • Lighthouseにて最適化を行いました
    • どうしても必要なリソースを除き、徹底的に最適化を行いました。
      • png→WebP
      • WebFontsはデザインの段階から最小限に絞り込んでいます
      • 不要なJavaScriptの排除
  • コンバージョンファーストな作り
    • 人材登録がこのLPのコンバージョンです
    • デザイナーと密に相談しながら、サイト訪問後５秒後にアンケートに誘導する仕組みを実装したり、タイプ別アンケートを展開できるようにしました。
    • 期間限定のキャンペーン登録のコンバージョン達成に際しては、ファーストビューから目に飛び込んでくるような動きの指定などを行いました
      • 動きにはgsap ライブラリーを使用しています
  • TailwindCSS とReact を使用しました
    • 保守性を高めるため、チームで使用するライブラリをTailwindCSS/Reactと定めました
    • TailwindCSSの肥大化問題に対しては@applyの使用を避け（https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction）、Reactコンポーネント化によって対策しました
  • CSSの新しいプロパティを活用しています
    • object-fit、drop-shadow
  • iOS Safariにも対応しています
    • Safariでのdrop-shadowのバグ対策や、フォントのアンチエイリアス指定など開発時に判明した様々な問題への対策を行いました
  • 埋め込まれたASPコードとのつなぎ込みを行いました
    • 利用者登録にはこの会社が使用している登録システムのバックエンドを使用する必要があります。一方で、利用者登録のユーザビリティ向上のため、フロントエンドのUIを改善する必要がありました。そこで、JavaScriptプログラミングにてフロントエンドとバックエンドのシステムをつなぎ込む連携の仕組みを実装しました。
    • これにはバックエンドとフロントエンドの両方のスキルを活かすことができました。
  • HTML/CSSで特に難しかったのは、レスポンシブ可能な上下のセクションにまたがる背景の実装と、レスポンシブ可能なグリッド上のアイテム配置です。
    • 実装上の難点をデザイナーの初期案から洗い出し、つど調査＆フィードバックを行いました。難易度の高いコーディングでも締切を守ることができました。
  • JavaScriptのシステム上で難しかったのは、７画面にも渡るモーダル上で動作するアンケートの実装と、ASPシステムとのつなぎ込みでした。
    • 既存のASPシステムへのつなぎ込みは必須条件であり、UI改善のために尽力しました。何度も壁にぶつかりながら目標を達成することができました。
  • GitHubを用いてチームと連携を行いました。
    • 画面の一部要素は本社側チームで作成するため、GitHubを使ってコミュニケーションしながら実装を進めました。本社側スタッフもできる人が揃っていたため、トラブルなくスムーズに連携できました。
  • HTMLのセマンティクスを大切に実装しています。