見る人にやさしく、
更新する人にもやさしい
Webサイトをつくります。

HTML/CSS・JavaScript・WordPressを使って、
ていねいなコーディングを心がけています。

作品を見る お問い合わせ

私について

About

プロフィールのイラスト（子どもと手をつないで歩く様子）

riyo

これまで事務の仕事をしてきました。Webサイトづくりに興味を持ち、Webスクールで HTML/CSS・JavaScript・WordPress を学び、修了しました。
事務の仕事で身につけた正確な作業、期限を守る段取り、相手の意図をくみ取るていねいなやりとりは、Web制作にも活かせると考えています。
一つひとつの案件に誠実に向き合いながら経験を積み、見る人にも更新する人にもわかりやすいサイトをつくれるよう、学び続けていきます。

  • 東京都在住
  • WebスクールでWeb制作を学び修了
  • 事務職の経験あり

できること

Skills

制作実績

Works

スクールの課題と、個人で制作した作品です。
作品は、これからも随時追加していきます。

洋菓子店CHALONのトップページ

授業課題

洋菓子店CHALON

デザインカンプをもとにコーディングし、WordPressのオリジナルテーマ化まで行った洋菓子店のサイトです。

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • WordPress
制作の詳細を見る
担当範囲
コーディング、WordPressテーマ制作（デザインは支給）
工夫した点（授業後に自分で改善）
仮の文章のままだったお知らせを、実際のお店を想定した内容に自分で書き換えた。
管理画面からタイトル・本文・写真を更新し、コードを触らずに内容を変えられる WordPress の良さを、更新する側として確かめた。写真は画像生成AI（Nano Banana）で作成した。
お知らせを1件ずつ読んだあと毎回トップに戻ってしまう不便さに気づき、前後のお知らせへのリンクと、一覧に戻るボタンを追加した。
サイトを見る
にじいろ体操クラブ 無料体験LPのファーストビュー

個人制作

にじいろ体操クラブ 無料体験LP（架空）

8つのセクションで構成した、架空の体操教室の無料体験LPです。スマホで画面の下に固定した申し込みボタンや、入力ミスをその場で知らせる申し込みフォームを入れました。

  • Figma
  • HTML
  • CSS
  • JavaScript
  • Claude Code
制作の詳細を見る
担当範囲・AIの使い方
企画・構成、ワイヤーフレーム、デザインの確認・調整。デザインカンプは AI（Claude）、コーディングは Claude Code、写真は Figma の画像生成AIで作成。
工夫した点
広告などから偶然訪れた保護者にターゲットを絞り、共感しやすく分かりやすい構成で、無料体験の申し込みまで自然に進めるようにした。
申し込みボタンだけにオレンジを使って目立たせ、スマホでは画面下に固定することで、いつでも申し込めるようにした。
サイトを見る デザインカンプを見る
にじいろ体操クラブ 無料体験の告知バナー

個人制作

にじいろ体操クラブ 告知バナー（架空）

にじいろ体操クラブの無料体験LPへ案内するための、PC用の横長バナーです。LPと同じ写真・配色を使い、バナーからLPまで同じ雰囲気で見られるようにしました。

  • Canva
  • Claude
制作の詳細を見る
担当範囲・AIの使い方
載せる文章・配色・写真の指定、仕上げの調整。たたき台は Canva のAI と Claude で作成。メインコピーのかっこなどの表記は、Canva で自分で直した。
工夫した点
イラストのたたき台を、LPのファーストビューと同じ写真に差し替え、バナーをクリックした人が同じ教室だとすぐ分かるようにした。
LPと同じく、申し込みボタンだけにオレンジを使って目立たせた。
バナーを見る LPを見る
そらいろこどもクリニックのトップページ

個人制作

そらいろこどもクリニック（架空）

5ページで構成した、架空の小児科クリニックのサイトです。今日の診療時間がひと目で分かる表や、院内の写真ギャラリーを入れました。

  • HTML
  • CSS
  • JavaScript
  • Claude Code
  • Nano Banana
制作の詳細を見る
担当範囲・AIの使い方
企画・構成、デザイン。コーディングは Claude Code、写真は画像生成AI「Nano Banana」で作成。
工夫した点
ひと目で必要な情報が見つかるよう内容を整理し、より詳しい情報は別ページで掲載した。
院内の雰囲気や設備が伝わる写真を取り入れ、やわらかい配色と丸みのあるフォントで全体をまとめることで、「ここなら安心して行けそう」と感じてもらえるようにした。
診療時間の表では、今日の曜日の列に JavaScript で色をつけた。
サイトを見る
カフェAndanteのトップページ

授業課題

カフェ Andante

ゆったりとした時間が伝わるように作った、4ページのカフェのサイトです。スマホでの見やすさを大切にしました。

  • HTML
  • CSS
  • jQuery
  • slick
制作の詳細を見る
担当範囲
コーディング（デザインは支給）
工夫した点（授業後に自分で改善）
ヘッダーのデザインを見直し、ロゴを左・メニューを右に並べて、すっきりと見やすくした。
お客様の目線で足りない情報に気づき、アクセスのページに営業時間・定休日を追加した。
サイトを見る
Yellow Magic Designのトップページ

授業課題

Yellow Magic Design

jQueryの授業で制作した、デザイン会社の1ページのサイトです。スライダーやアコーディオンなど、動きのある見せ方を取り入れました。

  • HTML
  • CSS
  • jQuery
  • slick
制作の詳細を見る
担当範囲
コーディング（デザインは支給）
工夫した点（授業後に自分で改善）
押しても反応しなかった「詳しく見る」ボタンに、作品の詳細をポップアップで表示する機能を jQuery で追加した。閉じるボタン・背景のクリック・Escキーで閉じられるようにし、開いている間はスライダーを止めた。
電話だけだったお問い合わせに、入力ミスをその場で知らせるメールフォームを追加した。
サイトを見る

お問い合わせ

Contact

お仕事のご相談やご質問は、
お気軽にご連絡ください。

メールで問い合わせる

mail:riyoge729@gmail.com