https://github.com/yui540/cowardly-witch

『臆病な魔女は、Webサイトに魔法をかけた。』
https://github.com/yui540/cowardly-witch

Last synced: 3 days ago
JSON representation

『臆病な魔女は、Webサイトに魔法をかけた。』

• Host: GitHub
• URL: https://github.com/yui540/cowardly-witch
• Owner: yui540
• License: mit
• Created: 2018-07-16T06:35:33.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-08-26T15:57:36.000Z (over 3 years ago)
• Last Synced: 2024-12-13T14:07:46.382Z (10 days ago)
• Language: CSS
• Homepage: https://yui540.graphics
• Size: 22 MB
• Stars: 987
• Watchers: 17
• Forks: 71
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 臆病な魔女

yui540.portfolio.version7

数々のリニューアルを経て、僕は新しい試みのプロジェクトに取り掛かりました。

-------それが、Cowardly Witch Projectです。

🎉 [yui540.graphics](https://yui540.graphics) 🎉

![0](./res/0.jpg)

このプロジェクトで重要なのが、Webサイトやアプリケーションを「魔法の世界」や「おとぎ話」のような世界観で表現することです。

それには、アニメーションやデザインの感性を重要視する必要があり、まず最初にそれを活かしたWebサイトを制作する必要がありました。

そこで完成したのが、このサイト「臆病な魔女」です。

- デザイン・モーション・コーディング

  - yui540

  - [Twitter - @yui540](https://twitter.com/yui540)

## 臆病な魔女とは

このサイトのテーマである「臆病な魔女」とは、魔女になりたいという気持ちと、僕自身の臆病な性格が混ざり合って出来た僕自身の属性です。 

![1](./res/1.png)

なので、「yui540=臆病な魔女」です。

そんな臆病な魔女がWebサイトに感情を持たせたいという思いから、このサイトに魔法をかけました。

「臆病な魔女は、Webサイトに魔法をかけた。」

## オープニングアニメーションの構成

このサイトのオープニングアニメーションは、

- Prologue

- Version_1

- Version_2

- Version_3

- Version_4

- Version_5

- Version_6

- LastChapter

というパート構成になっています。

![2](./res/2.png)

Prologueは、「魔女にとっての検索サイトってどんなのだろう？」ということをイメージして、自分なりに魔女風の検索を表現しました。

![3](./res/3.png)

![4](./res/4.png)

過去バージョンは、「作ったものページ」にありますのでよかったらご覧ください。

※Version_1 ~ Version_4は現在、非公開のため動画での公開になっています。

## 各ページ

各ページのデザインやアニメーションは、とにかく僕が思う「可愛い」を目一杯表現しました。

![5](./res/5.png)

![6](./res/6.png)

![7](./res/7.png)

![8](./res/8.png)

全体的にカラフルな色合いに仕上がったと思います。

## さいごに

これからも、このサイトのような「魔法の世界」や「おとぎ話」のような世界観のWebサイトやアプリケーションを作っていきます。

ぜひお楽しみ。