Sugutabe

担当制作範囲

ディレクション / 企画・ワイヤーフレーム / デザイン / 実装

使用ツール

Figma / Visual Studio Code

選定技術

React / Tailwind CSS

制作の意図等

スクール課題で野菜の産地直送サービス「すぐ食べ」のLPを作成いたしました。 基本HTML+CSS+JSで実装を行う課題ですが、Reactで実装を行いました。現在コードはNext.jsの学習のためにNext.jsに変わっています。

もともとWebサイトのパフォーマンスに興味を持ったことがきっかけで、モダンな開発手法や設計に関心が広がり、入り口としてReactを学びたいと思い技術選定しました。

実装にあたっては、学んだことをすぐにアウトプットすることを意識しました。HTMLを学び始めてから間もない時期で、コンポーネントの分割やPropsによる管理は正直やりにくく大変でしたが、必要だと感じて取り組みました。
同じパーツで汎用的に使えるものはなるべくコンポーネントで管理するよう意識しました。中には、Propsで値を引き渡すコンポーネントもあり、慣れない書き方で苦戦しましたが、モダンなフレームワークを扱っている楽しさも味わうことが出来ました。

その後パフォーマンスについてキャッチアップしていく中で、静的なLPにはReactはオーバースペックであり、純粋なHTML/CSSの方が初期表示の速度面では有利だと気づきました。この経験から、技術の特性を理解した上で適切に選定することの重要性を学び、Next.jsなどのモダンフレームワークへの興味と、より最適な技術選定・設計への関心につながっています。

制作期間

2ヶ月