応募用ポートフォリオとして、Web制作の作品に加え、
SNS投稿サンプル(カルーセル)や文章発信(noteマガジン)も公開しています。
▶ noteマガジンはこちら
▶ カルーセルサンプルはこちら
左利きです。右利き用の鋏を左で持って使えます。
習字はなんとか右で書くことができますが、小筆だけは無理です。
バックオフィスの経験が長く、品質管理、システム/マスタ管理、医療事務、金融窓口などで「正確性」「柔軟性」「安心感」を培いました。
猫と暮らしてきた日々からは、温もりや安心感を大切にする姿勢を学びました。
2025年に大切な猫を見送ってからは、デザインの中に「調和を含み込む優しさ」を込めたいと思うようになりました。
人の心に寄り添い、安心と遊び心を届けるデザインを目指しています。
サムネイルをクリックすると制作物が表示されます
自主制作の架空バナーを制作
Canva
エクアドル産ビーンズのこだわりを「香り・コク・価格」で簡潔に伝えるコピー構成
コーヒーカップと豆の写真を中心に、温かみのある背景で安心感を演出
自主制作架空ショップフポスター
猫カフェ併設ペットショップ」
Figma
ターゲットはファミリー層
コンセプトは「ペットが飼えなくても動物と触れ合える」
存在を知ってもらいリピーターを増やすことを目指した
自主制作架空ショップフライヤー
「猫カフェ併設ペットショップ」
Figma
ターゲットはファミリー層
コンセプトは「ペットが飼えなくても動物と触れ合える」
存在を知ってもらいリピーターを増やすことを目指した
自主制作サイト
「猫カフェ併設ペットショップ」
HTML/CSS/JavaScript/copilot
ターゲットはファミリー層
コンセプトは「ペットが飼えなくても動物と触れ合える」
存在を知ってもらいリピーターを増やすことを目的に、安心感と遊び心を意識した構成
【技術的な工夫】猫カフェ紹介ページにJavaScriptで「カードガチャ」を設置し、来訪者が楽しめる仕掛けを追加
トップページのバナークリックで猫の鳴き声が流れる演出を実装
JavaScriptでトップスライドを設置し、動きのあるファーストビューを構築
Copilotを活用してロゴや写真を生成し、サイト全体のビジュアルを整えた
【成果イメージ】ファミリー層が安心して楽しめる雰囲気を重視し「また来たい」と思えるサイトデザインを目指した
自主制作サイト
「カフェサイト」
HTML/CSS/JavaScript/suno
VSCodeではじめてのコーディング
SB Creative
「スラスラわかる HTML&CSSのきほん 第3版」
ISBN978-4-8156-1165-1
Windowsで教科書通りに作成した
Macではクジラロゴが泳いで、クリックすると音楽が流れるようアレンジ
音楽生成にsunoを使用した
ファビコンの設定ができて面白くなった
自主制作サイト
「簡易クイズ付き元素周期表」
HTML/CSS/Javascript/PHP
各元素をクリックすると詳細が開くようJavaScriptで設置
phpで、番号を指定して元素名と記号が合っているか確認できるページを作成
自主制作サイト
「フラワーショップサイト」
WordPress
ターゲットは40〜60代
コンセプトは「セカンドライフで気軽に始められる趣味を見つける手助けできるショップ」
ガーデニングを趣味にするきっかけづくりとリピーターを増やすことを目的に、シニアを意識した構成
Contact Form 7を用いて、お問い合わせフォームを実装
ユーザーが安心して利用できるよう、バリデーションや送信後のメッセージ表示
Smart Slider 3を活用し、トップページに動きのあるスライダーを設置
写真やテキストを組み合わせ、視覚的にわかりやすく、遊び心のあるデザインを実現
自主制作サイト
「カフェサイト」
WordPress
SB Creative
「スラスラわかる HTML&CSSのきほん 第3版」 ISBN978-4-8156-1165-1
この本を元に、WordPressで制作
loadingを追加した
自主制作サイト
「カフェサイト」
WordPress
ターゲットはオフィスワーカー
コンセプトは「ナチュラル&リラックスなひと時を」
日常の疲れを癒すことを目的に、隙間時間でリフレッシュできる空間を提供
【技術的な工夫】オーダー予約できるよう、プラグインを設定
【成果イメージ】隙間時間で利用できる気軽さを感じてもらえるサイトを意識した
WEBDESIGN & OFFICEWORK
HTMLで基本的なページ構造を組み立て、CSSで色や余白、FlexboxやGridを用いたレイアウト調整、レスポンシブ対応
DOM操作やフォームバリデーションなど、動きのあるUIを実装
簡単な動的ページを作成
記事投稿やテーマ設定、プラグイン導入、基本的なサイト運営
基本的なページ構成やレスポンシブ対応を意識したデザイン
HTML・CSS・JavaScript・PHPを用いたWebサイト制作
バナー・ファーストビュー制作
ワイヤーフレーム制作
写真加工、合成
リポジトリ管理、GitHub Pagesを用いたサイト公開
表、グラフ、関数(四則演算、if、vlookup、条件付き書式)
文書作成、グラフ挿入、帳票・手順書作成
スライド作成、アニメーション、グラフ挿入
コーディング補助、文書作成効率化
生成AIパスポートを取得し、生成AIの仕組みや活用方法、情報漏洩や著作権などのリスク対策を学び、安心感のあるAI活用を心がけている