Website Design

(クライアントワーク)

RAMP浜松　LPサイト

URL: https://service.ramp.co.jp/

HTML/CSS JavaScript PHP WordPress(CMS) Photoshop illustrator

About

制作の目的

私が利用させていただいている就労移行事業所が“就労移行ITスクール”というフランチャイズ契約を終了し“RAMP浜松”という新たな事業所に変わるということで、LPデザインとコーディングのお仕事をいただきました。

Process

デザインプロセス

エンジニアの方と打合せを繰り返し、ワイヤーフレームから素材作成、細かいデザインを作り、実際のコーディングと一連のプロセスを担当しました。初めてのコーディングによる実務でしたが、エンジニアに方に学びながらサイトを構築しました。またPHPによるWordPress導入を行いました。

Tool

使用技術

Figma (ワイヤーフレーム、プロトタイプ作成)
Adobe Photoshop, Illustrator (デザイン作成)
HTML, CSS(コーディング)
JavaScript (アニメーション、インタラクションの実装)
PHP(WordPress導入)

デザインのポイント

コーポレートカラーであるグリーン#249084をメインカラーとして、彩度が低い色く明るい色を使用することで福祉としての親しみやすいクリーンなイメージを表現、またITスクールのイメージを引き出すため、スタッフ情報や質問などのコンテンツで動きを出すことでサイトに必要以上の負荷をかけずに、先進的なイメージを表現しました。

Webサイトの機能

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