ハンドメイド作家のpekopokoです。
今回は、新しいプロフィールページを制作しましたのでご紹介します。
このプロフィールページは、私の作品や活動を紹介するために作成しました。
目次
制作の背景
複数のハンドメイド販売プラットフォームで活動してきましたが、
それぞれに自分の情報を分散して掲載するよりも、一つのプロフィールページにまとめることで、お客様にとって分かりやすくする目的を持っています。
それが私自身のブランディングにも役立つと考えました。そこで、シンプルで使いやすいプロフィールページを制作することにしました。
今回制作のきっかけになったのは、職場スタッフからのアドバイスで、
実際に職場スタッフがハンドメイド作家から作品を購入した時の体験をもとに、提案してくれました。
使用した技術やツール
- HTML & CSS: ページの基本的な構造とデザインを作成しました。
- JavaScript: モバイル端末でのアニメーションを追加しました。
- ChatGPT-4o: デザインの全容全てのサポートをしてくれました。
制作の過程
制作のほとんどがChatGPT-4oのサポートによるものです。
1. 基本構造の作成
まずは、ページの基本構造を作成しました。プロフィール画像や自己紹介文、各リンクを配置し、全体のレイアウトを整えます。
これもこんな感じのデザインにしてみたいと、サンプルを画像で提案することで、AIがデザインのイメージを理解して、HTMLとCSSを構築してくれました。
私がやったのは文章の修正などの微調整です。
2. デザインのカスタマイズ
シンプルで直感的なデザインを目指し、ページ全体の色合いやフォント、画像の配置に気を配りました。
その上で、背景に動きのあるアニメーションを取り入れることで、動きのあるサイトを目指しました。背景の星は右上から左下に向けて流れています。
最初にAIが提案してくれたものだと、味気なかったので、個人的に星が回転する動作を付け加えて、星が手裏剣のように回転して流れていきます。
3. インタラクティブな要素の追加
モバイル端末でアクセスした際に、ユーザーが楽しめる要素を追加しました。
実際にプロフィールページにモバイル端末でアクセスして、画面をタップしてみてください。
すると風船がふわふわと浮かび上がるアニメーションを実装できました。
まとめ
実際にプロフィールページが仕上がると達成感がありました。
今回制作したプロフィールページは作品の台紙に印刷して、お客様の手元に渡るようにしたいと思います。
今後も、このページを通じて多くの方に私の作品を知っていただき、楽しんでいただければと思います。
これからもハンドメイド作家としての活動を続けていきますので、どうぞよろしくお願いします。
作品購入はこちらから
他の作品もオンラインショップでご覧いただけます。
物作りで日常を明るく♪をコンセプトに活動中のハンドメイド作家です。minneやメルカリショップス 、Creemaにてマクラメ・レザーブレスレットなどを中心に出品中です。
コメント