Works
Web制作
portfolioサイト
このポートフォリオサイトは、忙しい方がトップページを見るだけでも私のスキルやこだわりが伝わるよう意識して設計しました。メインビジュアルには、手書き風のアニメーションが可能なライブラリ「Vivus.js」を使用し、ファーストビューで印象に残る演出を加えています。背景には「Swiper」を使ってフェード切り替えのスライドを設定し、動きと奥行きを出しました。また、ファーストビューを画面いっぱいに配置したことで、スムーズにスクロールしてもらえるようスクロール誘導のパーツを配置し、直感的に使えるよう工夫しています。制作物のセクションはカルーセル形式で一覧できるようにし、サイドの画像の彩度やサイズを調整してメインが際立つよう視覚的バランスも整えました。画像やSNSアイコンにはバウンドアニメーションを加え、遊び心のあるインタラクションも取り入れています。さらに、背景には近年トレンドのパララックス効果を使って立体感を演出し、全体的に洗練された印象に仕上げました。スマートフォン・タブレットへのレスポンシブ対応も行い、どのデバイスでも心地よく閲覧できるよう最適化しています。
- エディタ
- Visual Studio Code
- 使用言語
- HTML、CSS、Javascript
- 使用ライブラリー
- Swiper.js、Vivus.js
- デザイン
- Figma、Photoshop、illustrator
STUDIO版portfolio
STUDIOを使用してポートフォリオサイトを制作しました。コードで作成したサイトとは異なり、JavaScriptのアニメーションが使えないため、STUDIOの特性を活かす形でデザインから再構築しています。メインビジュアルには動画を配置してインパクトを持たせ、各セクションごとに背景を切り替えて視認性を高めました。また、ボタンや要素にホバーアニメーションを加えることで、動きのある心地よいUIを意識。CMS機能を使って、制作実績の更新も簡単に行えるようにしています。
- エディタ
- STUDIO
- 使用言語
- HTML
- デザイン
- Figma、Photoshop
design
オンラインスクールのバナー
「未経験でも始められる」という安心感を第一に伝えるため、『未経験』の文字にはアクセントカラーと異なるフォントを用い、視認性と共感を高めました。背景はパステル調のやわらかいトーンで、親しみやすさ・学びへの心理的ハードルの低さを演出。「無料体験」の文字を大きく配置し、クリックへとつながる導線を意識しています。未経験からシステムエンジニアを目指す方が、「自分にもできそう」と思えるような、温かみのあるバナーに仕上げました。
- 使用ツール
- Photoshop
チョコのバナー
チョコレートのセールと一瞬でわかるような構図にしました。そして「限定」の魅力を強調するため、左上に目立つラベルを配置し、視線誘導を意識しました。金の装飾で「贅沢」を感じさせるビジュアルにし、「MAX 20% OFF」の割引訴求と、キャンペーン期間の明記で購買意欲を高める設計になっています。使用ツール / Photoshop
- 使用ツール
- Photoshop
猫カフェopenのバナー
「20匹以上の猫がいること」をアピールするために、猫たちの写真を複数配置し、窓から猫たちを見ているような構図でデザインしました。また、駅からのアクセスの良さが一目で伝わるよう、駅名をやや大きめに配置し、近隣の方に向けたバナーであることが分かるよう工夫しています。全体はやさしい雰囲気になるよう配色やフォントにもこだわり、安心感のあるデザインを心がけました。
- 使用ツール
- Photoshop
coding
家具サイト
コーディング練習として、デザインカンプを元に家具サイトを実装しました。元の課題ではjQueryが使用されていましたが、サイトの軽量化と保守性を考慮し、JavaScriptで制作しています。レスポンシブ対応では、ナビゲーションをハンバーガーメニュー化し、メニュー項目が一つずつ遅れて表示されるアニメーションを取り入れることで、サイトの落ち着いた雰囲気に合う動きを意識しました。また、大文字表記の英単語が多く使われていたため、アクセシビリティの観点から text-transform: uppercase を使用し、読み上げ時にも自然な発音になるよう配慮しています。細部までユーザビリティと雰囲気の統一感を意識した練習制作です。※このサイトはコーディング練習として制作した架空サイトです。
- エディタ
- Visual Studio Code
- 使用言語
- HTML、CSS、Javascript