サイトはこちら

作成時期

2022年4月中旬～2022年5月上旬

作成時間

合計時間：約66時間（内、コーディング部分22.75時間）
□企画・記事作成 ：13.5時間
□デザイン部分：30.75時間(内デザインカンプ：24.75時間（画像加工含む）)
□コーディング部分21.75時間
・HTML：4.25時間・SCSS：14.5時間
・JavaScript：1.5時間
・コーディング修正＋テスト：1時間

作成期間

約2週間半

使用アプリケーション

VSCode、Illustrator(デザインカンプ)、XD（ワイヤーフレーム、デザインスタイルガイド）

使用言語

HTML、CSS、SCSS、JavaScript

バーチャルオフィスツールのサンプルを作成しました。
「リモートワークではどのような課題があるのか」「このサービス内容を使うことでどのように課題解決できるのか」伝えるよう努めました。

メインビジュアルで「リアルとリモートの壁をぶっ壊す！！」をキャッチフレーズとして、壁がくずれてオフィスが見えるというCSSアニメーションを盛り込むことで、バーチャルオフィスサイトが多くある中でも心に残るファーストビューにするよう心掛けました。
「リアルと、リモートの壁」セクションで吹き出しが次々と出てくるアニメーションで、悩みをわかりやすくしたり、画面構成を「サービス紹介」→「課題」→「サービスによる解決」→「機能」の順に並べることで、ユーザーが理解できる流れにし、欲しいと思わせるよう工夫しております（タイミングによって「無料で始める」CTAボタンを入れております）

また、今回はコーディング時間を減らしてあります（前回のLPサイト「北の春ハンドクリーム」の34.5時間→21.75時間に減少しております）CSS設計のルールを徹底することや（今回はBEM設計を基としております）、CSSアニメーションの知識を深めること、不要な工程を減らすことで作業時間の減少を試みました。