PROJECTS
制作物
Python・FastAPI・WordPressを中心に制作したWebアプリやポートフォリオを掲載しています。
contact-form7の申し込みフォームで表にチェックボックスを追加するサンプルサイト
# クライアント様のご要望 クライアント様から「講座一覧の表の中にチェックボックスを配置し、 そのまま申し込みできるフォームを作りたい」というご相談をいただきました。 ## 実現前  ## 実現後  # 実現方法 Contact Form 7 の標準機能では実現方法が分かりにくく、調査に時間を要しましたが、 チェックボックスの出力HTMLを活用することで実現できました。 # 公開URLで確認できること [公開URL](https://ki-hi-ro.com/checkbox-table-contact-form7-sample/)では、実際に作成したサンプルフォームと、送信時にどのようなメールが届くのかを確認できます。 # ブログ記事 [contact-form7の申し込みフォームで表にチェックボックスを追加する方法](https://ki-hi-ro.com/checkbox-table-contact-form7/)
CASE STUDY →
自分のブログ
# 概要 2022年頃から続けている自分のブログです。 当時はWEBサイト制作のフリーランスとして働いていました。 WordPressでサイト制作をしていたこともあり、自分自身のブログを作ってみようと思い、作ってみました。 2026年6月現在では、1,500記事を超えました。 自分の内側から溢れる言葉を書き連ねています。 # 開発環境 MAMPです。MAMPは、無料のローカルサーバーです。使用されている技術は、Apache, Nginx, PHP, MySQLです。macOSとWindowsで動作します。 # 最新のデザイン 最新のデザインは、codexに依頼しました。その後に自分で微調整を加えました。 # 機能一覧 - ブログ一覧表示 - ブログ投稿・編集・削除（WordPress標準機能） # 画面のキャプチャ ## トップ ### PC  ### スマホ  ## 記事一覧  ## 記事詳細 
CASE STUDY →中小企業向けWebサイトのWordPressの新規テーマの実装
# 制作背景 地元のWebサイト制作会社様からのご依頼で、中小企業向けWebサイトの制作に携わりました。 制作会社経由の案件として、支給されたPhotoshopカンプをもとに、WordPressの新規テーマとして実装しました。 # 担当範囲 * Photoshopカンプからのコーディング * WordPress新規テーマの構築 * レスポンシブ対応 * HTML / CSS / JavaScriptの実装 * 表示崩れや細かなレイアウト調整 # 制作期間 約3週間 # 苦労した点と乗り越え方 当時はWebサイト制作の実務経験がまだ少なく、CSSのクラス名が既存のスタイルと衝突してしまい、想定外の表示崩れが発生する場面がありました。 その都度、原因となっているCSSを確認しながら修正を重ね、最終的に納品まで対応しました。 この経験を通じて、CSSは単に見た目を整えるだけでなく、保守しやすい命名や設計を意識することが重要だと学びました。 その後、CSS設計に関する書籍を読み、クラス名の付け方やスタイルの影響範囲を意識したコーディングを、以降の制作に取り入れるようになりました。 参考：[ざっくりつかむ CSS設計](https://www.amazon.co.jp/%E3%81%96%E3%81%A3%E3%81%8F%E3%82%8A%E3%81%A4%E3%81%8B%E3%82%80-CSS%E8%A8%AD%E8%A8%88-%E9%AB%98%E6%B4%A5%E6%88%B8-%E5%A3%AE-ebook/dp/B09NKR8RCZ?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=23URM11LLHI20&keywords=CSS%E8%A8%AD%E8%A8%88&qid=1667450361&qu=eyJxc2MiOiIzLjczIiwicXNhIjoiMi45MSIsInFzcCI6IjIuODkifQ%3D%3D&sprefix=css%E8%A8%AD%E8%A8%88,aps,183&sr=8-5&linkCode=sl1&tag=amhi1943-22&linkId=5e741bc789158eda97369cedf9c7494c&language=ja_JP&ref_=as_li_ss_tl) # 補足 制作会社経由の案件のため、クライアント名・URL・画面詳細は非公開としています。
CASE STUDY →
Adobe XDのデザインデータからのフロントエンドコーディング
# 制作背景 [クラウドワークスの募集](https://crowdworks.jp/public/jobs/5338118)に応募して、「完成イメージが膨らんだ」とのことでご依頼いただきました。 # 詳細 ブログに詳細を記載しています。 [Adobe XDのデザインデータからのフロントエンドコーディング](https://ki-hi-ro.com/adobe-xd-cording/) # 仕事の流れ ## 2020年5月3日〜2020年5月10日 初回アップ ## 2020年5月11日〜2020年5月15日 フィードバックをいただいて修正 ## 2020年5月15日〜2020年5月18日 ogpタグの追加、ディレクトリ構造の変更、ヘッダロゴエリア微調整 ## 2020年5月21日 納品完了 ## 2020年6月7日〜2020年6月11日 グラフ表示機能の修正 ## 2020年10月22日〜2020年11月2日 リニューアルの実施
CASE STUDY →
デザインカンプ（Photoshop・Adobe XD）からのコーディング実践
# 制作背景 [Webコーダーのはにわまん氏](https://haniwaman.com/)が販売していたコーディング教材を使用して、 PhotoshopおよびAdobe XDのデザインカンプから静的コーディングを行いました。 デザインデータからHTML・CSSへ落とし込む練習として制作したサイトです。 # 公開URL（ログインユーザ名・パスワード : khiro） [XD](https://ki-hi-ro.com/from-xd-link/) [Photoshop](https://ki-hi-ro.com/from-photoshop/) # 当時のWEB制作に関するブログ [Hatena Blog](https://khirok.hatenadiary.jp/) # スマホビュー 
CASE STUDY →
MUJI HOTELの模写コーディング
# 概要 無印良品が運営する **MUJI HOTEL** のサイトを参考に、HTML / CSS / JavaScript を用いて模写コーディングを行いました。 レスポンシブ対応やレイアウト再現を通して、フロントエンドの基礎を学習しました。 # 作成のきっかけ AQUENT で紹介していただいた観光サイト制作案件において、レスポンシブ対応が思うようにできなかった経験がありました。 [エージェントAQUENTでの約1ヶ月のコーディング業務](https://ki-hi-ro.com/aquent-1month/) 案件終了後、自宅で約2週間かけて、こちらの模写コーディングに取り組みました。 # 画面キャプチャ ## トップページ ### PC  ### スマホ  ## 施設ページ  # JavaScript の使用箇所 * [施設ページ](https://ki-hi-ro.com/reproduce/Muji-Hotel/facilities.html) のスライド * [施設ページ](https://ki-hi-ro.com/reproduce/Muji-Hotel/facilities.html) のコンテンツふわっと出現 * [施設ページ](https://ki-hi-ro.com/reproduce/Muji-Hotel/facilities.html) のメインビューのパララックス # 公開URL [公開URL](https://ki-hi-ro.com/reproduce/Muji-Hotel/) ユーザー名 / パスワード：`khiro`
CASE STUDY →