ねこパンチのアイコン Portfolio

ソファで眠る猫

ソファで眠る猫

はじめまして。数あるサイトの中から、私「ねこパンチ」のポートフォリオサイトをご覧いただきありがとうございます。

こちらは、職業訓練で学んだWeb制作のスキルをベースに、訓練中から現在にかけて制作してきた作品をまとめたサイトです。ただ見た目を整えるだけでなく、「誰に・何を・どう伝えるか」という目的やターゲットを一つひとつ考えながら、企画からデザイン、コーディングまで一貫して取り組みました。

掲載しているのは、商用サイトを想定した仮想のベーカリーショップ「Bakery Hibino」、コーヒーのある暮らしをテーマにした個人サイト「珈琲と過ごす日常」、そして2026年に制作した2つの仮想ねこカフェサイト「ねこカフェ にゃんこ堂」「ねこびより」の4作品です。それぞれサイトの目的・ターゲット・コンセプトを設定したうえで、配色やレイアウト、写真の選び方まで統一感を意識して仕上げました。

<自己紹介>

2023年12月から2024年3月まで、職業訓練でWeb制作を学びました。IllustratorやPhotoshopを使ったデザイン制作から、HTML・CSSによるコーディングまでを一通り習得し、サイトを形にする流れを実践的に経験しています。
「使う人にとって分かりやすいこと」「伝えたいことがきちんと届くこと」を大切に、これからも学び続けていきたいと考えています。
制作者:ねこパンチ

「Bakery Hibino(仮想)」

作品画像 site1

新規開店するベーカリーの魅力を、はじめて訪れる方にもひと目で伝えることを目指した仮想サイトです。焼きたてのパンや店内の写真を大きく・多めに配置することで、文章を読み込まなくても「どんなお店か」が視覚的に伝わるよう工夫しました。さらに、ロゴ・ボタン・見出しの配色をさわやかなスカイブルーで統一し、ヨーロッパ風のレトロで清潔感のある世界観を、サイト全体で一貫して感じられるように仕上げています。

<サイトの目的>
新規開店にともなう店舗の広報・周知。お店の雰囲気やこだわりを伝え、来店のきっかけをつくることを目的としています。
<ターゲット>
20〜40歳代の女性(F1・F2)で、パンやスイーツが好きな方、素材や健康を意識する方を想定しました。
<コンセプト>
ヨーロッパ風のレトロで温かみのある雰囲気。
さわやかなスカイブルーをロゴとメインカラーに据え、清潔感と親しみやすさを両立させました。

「Bakery Hibino(仮想)」 提案書(PDF)->

「Bakery Hibino(仮想)」 Webサイト->

「Bakery Hibino(仮想)」 チラシ(PDF)->

「珈琲と過ごす日常」

作品画像 site2

コーヒーのある暮らしの心地よさを、読み手にゆったりと感じてもらうことをテーマにした個人サイトです。情報を詰め込みすぎず、余白を生かしたシンプルな構成にすることで、記事の内容にすっと目が向くようにしました。イメージカラーには、コーヒーの色味とやわらかく調和する薄いピンクを選び、落ち着きの中にも温かみのある、リラックスした雰囲気に仕上げています。

<サイトの目的>
コーヒーの魅力や楽しみ方を伝え、日常の中にコーヒーのある暮らしを提案すること。
<ターゲット>
20〜40歳代の男女(F1・M1・F2・M2)で、おうち時間や自分の時間を大切にする方を想定しました。
<コンセプト>
余白を生かしたシンプルな北欧風。
薄いピンクをメインカラーに据え、やわらかく落ち着いた読み心地を目指しました。

「珈琲と過ごす日常」 提案書(PDF)->

「珈琲と過ごす日常」 Webサイト->

「ねこカフェ にゃんこ堂(仮想)」

作品画像 ねこカフェ にゃんこ堂

「もふもふ、そばにいます。」をキャッチコピーにした、仮想のねこカフェの店舗サイトです。職業訓練の修了後、2026年にあらためて制作した作品です。看板ねこの紹介から店内のようす、料金表、カフェメニュー、アクセスまで、はじめて訪れる方が知りたい情報をひと通りそろえました。ねこ一匹ずつのプロフィールページや、写真からメニューの詳しい説明へ移動できるつくりなど、眺めているだけで楽しくなるサイトを目指しています。

<サイトの目的>
お店の雰囲気とねこたちの魅力を伝え、はじめてのお客さまにも安心して来店してもらうこと。
<ターゲット>
ねこと触れ合いたい方、カフェでゆったりとした時間を過ごしたい方を想定しました。
<コンセプト>
やわらかくあたたかみのある雰囲気。
ねこたちの居心地のよさが伝わる、見ていて癒されるサイトづくり。
<制作ツール>
AIコーディング支援ツール「Claude Code」を活用して制作しました。

「ねこカフェ にゃんこ堂(仮想)」 Webサイト->

「ねこカフェ ねこびより(仮想)」

作品画像 ねこカフェ ねこびより

「ねこといっしょに、ほっとひとやすみ」がテーマの、保護ねこカフェを想定した仮想サイトです。2026年に制作した最新作で、ねこスタッフの紹介や料金・メニューに加えて、ねこと心地よく過ごすためのおねがいや、里親相談の流れまで丁寧にまとめました。1ページの中で上から順に読み進められる構成で、デモの予約フォームも備えています。

<サイトの目的>
保護ねこカフェの雰囲気と里親相談の取り組みを伝え、来店や予約のきっかけをつくること。
<ターゲット>
ねことのんびり過ごしたい方、保護ねこの里親を考えている方を想定しました。
<コンセプト>
「ねこにも人にも心地よい」空間づくり。
木のぬくもりを感じる、やさしくあたたかな色合いとデザイン。
<制作ツール>
AIコーディング支援ツール「Codex(ChatGPT)」を活用して制作しました。

「ねこカフェ ねこびより(仮想)」 Webサイト->