CASE STUDY

デザインデータから、グラフ機能付きWebページを実装

課題

WebサービスのデザインはAdobe XDで完成していましたが、実際に利用できるWebページとして実装する必要がありました。

また、単にデザインを再現するだけではなく、

が求められていました。

Adobe XDのデザインデータと仕様を確認し、HTML・CSS・JavaScript（jQuery）を使って2ページを実装しました。

画面サイズに応じて表示が変わるレスポンシブ対応を行い、入力された数値からグラフを表示する部分にはChart.jsを採用しました。

実装後はテスト環境で確認していただき、フィードバックを反映したうえで納品しました。

Adobe XDのデザインをもとに、PC・タブレット・スマートフォンそれぞれで適切に表示されるよう実装しました。

特にスマートフォン版では、「豚のアップが良い」というご要望を反映するなど、デザインデータをそのまま再現するだけでなく、フィードバックに応じた調整も行いました。

タブレット

スマートフォン

ユーザーが入力した数値をもとに、Chart.jsを使ってグラフを表示する機能を実装しました。

BS（貸借対照表）・PL（損益計算書）・CF（キャッシュフロー）の数値を、視覚的に確認できるようにしています。

HTML / CSS / JavaScript（jQuery） / Chart.js

Adobe XDのデザインデータをもとに、レスポンシブ対応とグラフ表示機能を含むWebページを実装し、テスト環境での確認・修正を経て納品しました。

デザインをHTML/CSSへ変換するだけではなく、JavaScriptを使った機能実装や、発注者からのフィードバックへの対応まで含めて担当しました。

納品後、クラウドワークスで以下の評価をいただきました。

「こちらの要望にしっかりと応えていただけました。
レスポンスもテンポよく早くいただけたので、気持ちよくプロジェクトを進めることが出来ました。
またご一緒できればと思います。」

今回のような経験を活かし、現在は以下のようなWeb実装に対応できます。

「デザインはあるが実装できる人がいない」「既存サイトの一部分だけ改修したい」といった、小さな単位からご相談いただけます。