Web制作物_Web productions
使用したツール_Tools used
＊すべて１からコーディングをして作成
* Created with all coding from scratch
HTML
CSS
WordPress
Figma
JavaScript
jQuery
PHP
デベロッパーツール
Developer Tools
画像生成AI：Midjourny
Image Generation AI: Midjourny
ポートフォリオ_Portfolio
https://portfolio.kisoikinokori.com
・初代：参考書のデザインを参照しながらアレンジを加え作成→WordPressへ移植 (2023年_7月)
First generation: Created with arrangements based on reference book designs → Ported to WordPress (2023_July)
・2代目（このページ）：参考書のデザインを参照しながら、デザインカンプはFigmaを用いて作成。その後コーディングを行い、WordPressに移植 (2023年_8月)
Second generation (this page): Design comps were created using Figma, referring to the design in the reference book. Then coding was done and ported to WordPress (2023_August)
[工夫点_point(s) for contrivance]
１．ヒーロー画像に、動く蛾の画像等を表示
Hero image with moving moth image, etc.
２．<span>タグとCSSのみで作成したTOPアイコンの表示
Display of TOP icon created using only tags and CSS
作成したコード ※ 「0.5×」にしたら表示されます。
Code created * If you set it to “0.5x”, it will be displayed.
See the Pen ちょうちょボタン by Johei Oku (@Lecithoceridae) on CodePen.
３．スマホ画面でのみ作動するオリジナルで作成したハンバーガーメニューの表示
Display of originally created hamburger menu that only works on smartphone screens
コードはこちら_Click here for the code
See the Pen ハンバーガメニュー(笑) by Johei Oku (@Lecithoceridae) on CodePen.
美容サロン店 商品紹介LP 作成
Beauty Salon Store Product Introduction LP Creation
https://items.beauty-hands.com
愛媛県松山市にある美容サロン店
Beauty Hands の商品紹介LPを作成🌱
Beauty Salon in Matsuyama, Ehime, Japan
Creating a product introduction LP🌱