2025-6 EDITION
YUKI
KUDO
VOL. 01
PORTFOLIO

yukikudo|安心感を届けるWeb制作者のポートフォリオ

ABOUT

応募用ポートフォリオとして、Web制作の作品に加え、 SNS投稿サンプル(カルーセル)や文章発信(noteマガジン)も公開しています。
noteマガジンはこちら
カルーセルサンプルはこちら

左利きです。右利き用の鋏を左で持って使えます。
習字はなんとか右で書くことができますが、小筆だけは無理です。

バックオフィスの経験が長く、品質管理、システム/マスタ管理、医療事務、金融窓口などで「正確性」「柔軟性」「安心感」を培いました。

猫と暮らしてきた日々からは、温もりや安心感を大切にする姿勢を学びました。
2025年に大切な猫を見送ってからは、デザインの中に「調和を含み込む優しさ」を込めたいと思うようになりました。

人の心に寄り添い、安心と遊び心を届けるデザインを目指しています。

プロフィール写真

WORKS

サムネイルをクリックすると制作物が表示されます

八幡平市カルーセル

八幡平市農産物紹介

自主制作のSNS用カルーセル
Canva
SNS発信
八幡平市農産物をSNSで紹介するためのカルーセル広告

フィンランドカフェ サムネイル

finland cafe

自主制作の架空バナーを制作
Canva
エクアドル産ビーンズのこだわりを「香り・コク・価格」で簡潔に伝えるコピー構成
コーヒーカップと豆の写真を中心に、温かみのある背景で安心感を演出

ワークショップのお知らせ サムネイル
  

ワークショップのお知らせ

 

自主制作の架空バナーを制作
Canva
シニア向けフラワーショップサイトに設置し、ガーデニングから写真撮影へ趣味を広げるきっかけを演出

補聴器無料体験お知らせ サムネイル

補聴器無料体験お知らせ

自主制作の架空バナーを制作
 Canva
 シニア向けメガネショップのLPに設置し、視力と共に低下する聴力を補う無料体験を訴求し、購入につながる導線を意識

animal land ポスター サムネイル

ANIMAL LAND

自主制作架空ショップフポスター
 猫カフェ併設ペットショップ」
Figma
ターゲットはファミリー層
コンセプトは「ペットが飼えなくても動物と触れ合える」
存在を知ってもらいリピーターを増やすことを目指した

 
ANIMAL LAND サムネイル

ANIMAL LAND

自主制作架空ショップフライヤー
「猫カフェ併設ペットショップ」
Figma
ターゲットはファミリー層
コンセプトは「ペットが飼えなくても動物と触れ合える」
存在を知ってもらいリピーターを増やすことを目指した

ANIMAL LAND サムネイル

ANIMAL LAND

自主制作サイト
「猫カフェ併設ペットショップ」
HTML/CSS/JavaScript/copilot
ターゲットはファミリー層
コンセプトは「ペットが飼えなくても動物と触れ合える」
存在を知ってもらいリピーターを増やすことを目的に、安心感と遊び心を意識した構成
【技術的な工夫】猫カフェ紹介ページにJavaScriptで「カードガチャ」を設置し、来訪者が楽しめる仕掛けを追加
トップページのバナークリックで猫の鳴き声が流れる演出を実装
JavaScriptでトップスライドを設置し、動きのあるファーストビューを構築
Copilotを活用してロゴや写真を生成し、サイト全体のビジュアルを整えた
【成果イメージ】ファミリー層が安心して楽しめる雰囲気を重視し「また来たい」と思えるサイトデザインを目指した

kujira cafe サムネイル

KUJIRA CAFE

自主制作サイト
「カフェサイト」
HTML/CSS/JavaScript/suno
VSCodeではじめてのコーディング
SB Creative
「スラスラわかる HTML&CSSのきほん 第3版」 ISBN978-4-8156-1165-1
Windowsで教科書通りに作成した
Macではクジラロゴが泳いで、クリックすると音楽が流れるようアレンジ
音楽生成にsunoを使用した
ファビコンの設定ができて面白くなった

The periodic table サムネイル

The periodic table

自主制作サイト
「簡易クイズ付き元素周期表」
HTML/CSS/Javascript/PHP
各元素をクリックすると詳細が開くようJavaScriptで設置
phpで、番号を指定して元素名と記号が合っているか確認できるページを作成

snowdrop サムネイル

snowdrop

自主制作サイト
「フラワーショップサイト」
WordPress
ターゲットは40〜60代
コンセプトは「セカンドライフで気軽に始められる趣味を見つける手助けできるショップ」
ガーデニングを趣味にするきっかけづくりとリピーターを増やすことを目的に、シニアを意識した構成
Contact Form 7を用いて、お問い合わせフォームを実装 ユーザーが安心して利用できるよう、バリデーションや送信後のメッセージ表示
Smart Slider 3を活用し、トップページに動きのあるスライダーを設置
写真やテキストを組み合わせ、視覚的にわかりやすく、遊び心のあるデザインを実現

kujira cafe サムネイル

KUJIRA CAFE

自主制作サイト
「カフェサイト」
WordPress
SB Creative 「スラスラわかる HTML&CSSのきほん 第3版」 ISBN978-4-8156-1165-1
この本を元に、WordPressで制作
loadingを追加した

Green Beans Food Court サムネイル

Green Beans Food Court

自主制作サイト
「カフェサイト」
WordPress
ターゲットはオフィスワーカー
コンセプトは「ナチュラル&リラックスなひと時を」
日常の疲れを癒すことを目的に、隙間時間でリフレッシュできる空間を提供
【技術的な工夫】オーダー予約できるよう、プラグインを設定
【成果イメージ】隙間時間で利用できる気軽さを感じてもらえるサイトを意識した

digital HOLLYWOOD studio サムネイル

digital HOLLYWOOD studio

訓練校課題制作サイト
「ワーキングスペースサイト」
WordPress
ターゲットは会社員、学生
コンセプトは「パーティーできる会議室」
機材貸し出しにより手ぶらでも利用できる会議室を売りにした構成
【技術的な工夫】プラグインで自動翻訳を設置
【成果イメージ】会議のみならず、飲食可能スペースでパーティーするリピーターが7割となることを目標とした

kujira cafe サムネイル

eye leaf

自主制作架空サイト
「メガネ専門店サイト」
Studio
「老眼鏡専門メガネショップ」
ターゲットはシニア
コンセプトは「一人一人の見え方に寄り添う」
目が見えづらくなったシニアに再び「クリアな視界を届けたい」を意識した構成

SKILL / TOOL

WEBDESIGN & OFFICEWORK

HTML/CSS アイコン

HTML / CSS

HTMLで基本的なページ構造を組み立て、CSSで色や余白、FlexboxやGridを用いたレイアウト調整、レスポンシブ対応

JavaScript アイコン

JavaScript

DOM操作やフォームバリデーションなど、動きのあるUIを実装

PHP アイコン

PHP

簡単な動的ページを作成

WordPress アイコン

WordPress

記事投稿やテーマ設定、プラグイン導入、基本的なサイト運営

studio アイコン

studio

基本的なページ構成やレスポンシブ対応を意識したデザイン

visual studio Code アイコン

visual studio Code

HTML・CSS・JavaScript・PHPを用いたWebサイト制作

canva アイコン

Canva

バナー・ファーストビュー制作

figma アイコン

Figma

ワイヤーフレーム制作

affinity アイコン

affinity

写真加工、合成

github アイコン

Github

リポジトリ管理、GitHub Pagesを用いたサイト公開

excel アイコン

EXCEL

表、グラフ、関数(四則演算、if、vlookup、条件付き書式)

word アイコン

WROD

文書作成、グラフ挿入、帳票・手順書作成

powerpoint アイコン

POWERPOINT

スライド作成、アニメーション、グラフ挿入

copilot アイコン

Copilot

コーディング補助、文書作成効率化

GAI アイコン

生成AIパスポート

生成AIパスポートを取得し、生成AIの仕組みや活用方法、情報漏洩や著作権などのリスク対策を学び、安心感のあるAI活用を心がけている

CONTACT

contact
LET’S WORK
TOGETHER

ご覧いただきありがとうございます。
お問い合わせはメールにてお受けいたします。

お問い合わせはこちら