「進級制作展」とは？

トライデントコンピュータ専門学校
Webデザイン学科1年生の作品が展示されます。

今回はそれぞれのテーマを決めて、作品を決めました。
テーマは、

・Webサイト制作
・フロントエンドプログラミング(アプリ)
・UI・UXデザイン
・ノーコード／ローコード

の４種類あり、私が選んだのは「Webサイト制作」です。

いつ？

日時　2024年２月８日（木）
場所　トライデントコンピュータ専門学校

使用ツール

・Figma
・AdobeIllustrator
・Adobe Photoshop
・Visual Studio Code

作品詳細

私は愛知県小牧市に本社があり合成樹脂製品の開発、製造、加工、組立などをしている、
「株式会社a.p.c」さんのWebサイトを制作させていただきました。

感想

私はWebデザイナーを目指しているけど、コーディングも同時にできるようになりたいと思っています。
なので、今回の作品ではデザインはもちろん、苦手なJavaScriptやSass、動きの面ではGSAPというWeb開発者向けのアニメーションライブラリも使ってみました。

実際にクライアントにどのような感じが良いのかを打ち合わせをすると自分のイメージとクライアントのイメージが結構違うこともありとても苦戦しました。
この経験を活かせるようこれからも精進して行きたいと思います。

最後に

ここまで見てくれてありがとうございます。
今回は進級制作展の告知という内容で、この記事を書かせていただきました。

ぜひ見に来てくださると嬉しいです！
よろしくお願いします！

通常のボタン

通常のボタンはHTMLから<button></button>で囲うだけで作ることができます。
また、<a href=”#”></a>でもボタンを作ることができます。
もちろんbackground-colorで色を変えたりwidthなどで大きさの調整もできます。

角丸のボタン

ボタンもborder-radiusを使うことによって丸いボタンも作れます。

また調節をすればまんまるのボタンも作れたりします。

立体的なボタン

box-shadowを使えば立体的なボタンを作ることもできます。
box-shadowは横、縦の位置を決め、影の色を指定できます。

ボタンのアニメーション

このアニメーションは、.effectのleft属性をright属性にし、.animation:hover .effect のleft属性をright属性に変更することで、右からのアニメーションに変更することも可能です。

ボタンは色々なアニメーションで表示することができます。
今紹介したアニメーションは結構簡単な方で他にも色々なアニメーションがあって面白いです。

ボタンの種類はたくさんあって紹介しきれないのでリンクを張っておきます。
いろんなボタンデザイン→https://dubdesign.net/download/html-css/button-design/

ボタンのアニメーション→https://coco-factory.jp/ugokuweb/move01-cat/button/

おしゃれアニメーション→https://webdesign-trends.net/entry/13228

最後に

つい最近にアニメーションのやり方を学んで実際に使ってみるととても難しかったです。
自由度が高いので自分のオリジナルが作れるようになると面白いかもです。