カラプル(ColorSample)
FIG.com
メンバー
したみち
@t_shitamichi0123
うえすぎ
@uesugidaiki_uesugidaiki
村田悠晏
@yua_1107
作品ページ
制作背景
学校でプログラミング学習をする際、それぞれの科目の最後に簡単なシステム制作を課題として実施することがあります。
サーバサイドに関する科目であってもフロント部分の作成が必要であり、どうしても見れるものを作ろうとすると時間がかかってしまいます。
メインであるサーバサイドの機能に時間をかけるため、なるべくフロントエンドに書ける時間を短くし、かつしっかり見れるページを作成したいと考えこのシステムを制作しました。
対象者
プログラミングに携わるすべてのエンジニア・プログラミングを学習する学生など
機能
- サンプルページを確認しながら配色パターンを自分で調整
- テンプレートとして配色パターンやサンプルページを複数用意
- AIによるテーマに沿った配色パターン生成
- 作成した配色パターンのエクスポート(JSON)
制作において頑張った点
- UIの意識
- ウィンドウサイズや拡大率を変更してもデザインが崩れないよう、リサイズ時に要素の大きさを計算するなど、レスポンシブに力を入れました
- 開発中も複数人で画面を操作し、「もっとこうした方が」を妥協せず細かな部分まで作り込みました
- 新技術への取り組み
- AI機能実装のため、LangChainやFlaskのAPI化を一から学習し実装しました
- 画面上の色を更新可能にするため、CSSのカスタムプロパティを初めて使用しました
今後実装予定の機能
- テンプレートの充実
- ベースHTML/CSSの出力機能
- AIが生成するテーマの追加