Web制作ポートフォリオ
ユーザー目線で設計し、改善まで考えるWeb制作
HTML / CSS / JavaScript
Figma / Photoshop（Photopea）
About
HTML/CSSを用いたWebサイト制作を中心に学習しました。
ユーザー目線を意識し、使いやすさや見やすさを考えた制作を心がけています。
また、目的やターゲットに合わせた構成設計にも取り組んでいます。
Works
スグ食べ （架空LP）
オーガニック食品の魅力を伝え、
お試し購入へ導くことを目的としたLP
制作期間：約3週間（12月上旬～12月下旬）
ワイヤー 1週間 / デザイン 1週間 / コーディング 1週間
詳細を見る
制作背景
スクールの中間課題として、ヒアリング内容をもとにLP制作を行いました。
既存サイトとは別に、リスティング広告用として訴求力の高いページ設計が求められました。
目的
食にこだわりのあるユーザーに向けてサービスの魅力を伝え、 お試し購入へ導くこと
ターゲット
食の安全や品質に関心が高く、「ていねいな暮らし」を大切にする層
工夫した点
- ・「新鮮さ・安心感・信頼感」が伝わるよう、ナチュラルで清潔感のあるデザインを意識
- ・ファーストビューでサービスの特徴が伝わる構成とし、CTAボタンを目立つ位置に配置
- ・スマートフォンでの閲覧を意識し、視認性や操作性にも配慮
改善案
- ・ユーザーの購入判断を後押しするための利用者の評価（★など）や具体的な利用シーンを追加
→ 信頼性向上が期待 - ・CTAの配置やデザインを検証・改善
→ コンバージョン率の向上につながる可能性
calmease（作品紹介サイト）
ハンドメイド作品の
魅力を伝えるための紹介サイト
制作期間：約2ヶ月（12月下旬～2月下旬）
ワイヤー 2週間 / デザイン 4週間 / コーディング 2週間
詳細を見る
制作背景
卒業制作課題として友人が制作したぬいぐるみ作品の魅力を、写真だけでは伝えきれないため、
世界観やコンセプトを丁寧に表現することを目的として制作しました。
目的
作品の世界観やコンセプトを伝え、ECサイトやイベントへの導線を作ること
ターゲット
ハンドメイド作品やぬいぐるみに興味があり、 日常の中で癒しやこだわりを大切にする20代以上の層
工夫した点
- ・作品コンセプトである「落ち着き」や「安心感」を表現するため、 落ち着いた配色と余白を意識
- ・作品を生活に取り入れた際のイメージが伝わるよう、 視覚的に分かりやすい構成
改善案
- ・作品数が増えた際に備え、カテゴリ分けや検索機能を追加
→ ユーザーが目的の作品にアクセスしやすくなる可能性 - ・ECサイトへの導線をより明確にする
→ 購入への遷移率向上の期待
Goals
Node.js/Expressを用いて、Webサイトの更新・運用に活かせる技術を習得し、
ユーザー行動を踏まえた改善提案や機能実装まで対応できるよう取り組んでいきます。
また、JavaScriptを用いた動的なWebサイト制作への理解を深め、
ユーザー体験の向上や使いやすさの改善に活かしていきたいと考えています。