About
制作の目的
私が利用させていただいている就労移行事業所が“就労移行ITスクール”というフランチャイズ契約を終了し“RAMP浜松”という新たな事業所に変わるということで、LPデザインとコーディングのお仕事をいただきました。
Process
デザインプロセス
エンジニアの方と打合せを繰り返し、ワイヤーフレームから素材作成、細かいデザインを作り、実際のコーディングと一連のプロセスを担当しました。初めてのコーディングによる実務でしたが、エンジニアに方に学びながらサイトを構築しました。またPHPによるWordPress導入を行いました。
Tool
使用技術
- Figma (ワイヤーフレーム、プロトタイプ作成)
- Adobe Photoshop, Illustrator (デザイン作成)
- HTML, CSS(コーディング)
- JavaScript (アニメーション、インタラクションの実装)
- PHP(WordPress導入)
デザインのポイント
コーポレートカラーであるグリーン#249084をメインカラーとして、彩度が低い色く明るい色を使用することで福祉としての親しみやすいクリーンなイメージを表現、またITスクールのイメージを引き出すため、スタッフ情報や質問などのコンテンツで動きを出すことでサイトに必要以上の負荷をかけずに、先進的なイメージを表現しました。


Webサイトの機能
LPサイトのためシンプルなサイト構造にすることでユーザーの離脱を防ぎ、利便性を追求しました。使用されている資料のデータが頻繫に更新される恐れがあるためJavaScriptでグラフを出力することで、更新を簡単に行えるようにしました。お問い合わせフォームはHTMLの機能を使用することで、Googleフォームと連携しました。
Visual
URL: https://service.ramp.co.jp/