【自主制作】‐LP制作(デザイン/STUDIO実装)

OVERVIEW

架空のクライアントの依頼内容をもとに、デザインから実装までWebページ制作の一連の流れを制作しました。

YEAR 2024

-------------------------------------------------------------------------

【制作期間】約5日間(デザイン:2日、実装:3日) 

【使用ツール】Photoshop・STUDIO(ノーコード)

【制作範囲】:情報設計・ワイヤーフレーム・デザインカンプ・レスポンシブ

【展示写真】すべての写真素材は自分が撮影したものを使用している 

-------------------------------------------------------------------------

【目次】

・制作物
・要件・情報設計
・制作ポイント
・学んだこと

■制作物

実際のサイトはこちら

■要件・情報設計

・要件


・情報設計
■学んだこと

デザインと実装の一体化:
STUDIOはデザインとコーディングがシームレスに連携できるため、0から1の制作を進める上で、ビジュアルな調整とコーディングの反映を同時に行えることを学びました。特に、ビジュアルエディタの強力な機能により、デザインを直感的に作成しつつ、その裏にあるコードを理解し、必要な部分を手動でカスタマイズする力を身につけました。

アニメーションの実装:
デフォルトのアニメーション設定が簡単に使える一方、独自のアニメーションを実装するにはCSSやJavaScriptの知識が必要になることもあります。花びらが揺れて落ちるようなアニメーションを作成する過程で、CSSアニメーションの仕組みやkeyframesの活用方法を学びました。

レスポンシブデザイン:
 異なるデバイスサイズに合わせたレスポンシブデザインを意識することで、より多くのユーザーに対応できるサイトを作成できました。