アンケート・診断付きLPです。 ページ全体のキャプチャ画像はこちらです（別ウィンドウで開きます） 制作時間：約20時間（パーツ制作：16h、カンプ作成：4h、コーディング：21h） 制作範囲：ディレクターさんのWFを基にパーツをデザインし、その後、コーディングまで一括して制作を担当いたしました。 ポイント： ・FV直後のYouTube動画は、視聴完了後にアンケートエリアが表示されるよう、設計いたしました。 ・アンケートの回答によってユーザーにオススメの商品が表示されます ・アニメーション部分は、動画とCSSアニメーションがございますが、どちらも制作を担当いたしました。

アンケート型LPです。 全体の画像はこちらです（別ウィンドウで開きます） 制作時間：約20時間（パーツ制作：4h、カンプ作成：4h、コーディング：16h） 制作経緯：某ブランドの新商品発売に伴い、SNS広告のLP制作のご依頼でした。
本ページは、デザインからコーディングまで担当いたしました。
ディレクターさんのWFとブランドサイトのトンマナを基に、素材の選定を始め一からパーツのデザインをいたしました。 ポイント： ・アンケートに回答する毎に1問ずつ表示される、シンプルなアンケートページです。 ・技術的な面では、最終納品先のCMS側の仕様と私が制作したJavaScriptコードが衝突し動作しないという問題がありましたが、画像ソースをJavaScriptで管理する等して対応し、無事リリースすることができました。

アンケート型LPです。 全体の画像はこちらです（別ウィンドウで開きます） 制作時間：約20時間（パーツ制作：10h、カンプ作成：4h、コーディング：20h） 制作経緯：某ブランドの新商品発売に伴い、SNS広告のLP制作のご依頼でした。
デザインからコーディングまで担当いたしました。
ディレクターさんのWFを基にデザインをいたしました。 クライアント様のご要望で、低価格路線から高級路線にイメージを変えていきたい、
との事でしたので、その点に留意してデザインをしました。 ポイント： ・アンケートに回答する毎に1問ずつ表示される、シンプルなアンケートページです。

非縦スクロール・非遷移型のアンケート型LPです。 全体の画像はこちらです（別ウィンドウで開きます） 制作時間：約20時間（カンプ：5h、コーディング：15h） 制作経緯：ディレクターさんからのご依頼で、
・今までのスクロール型とは違う動きのアンケートLPを作りたい ・コンセプトは、ショッピングモールのコスメカウンターに来たような、デパートとは違うワクワク感 ・アンケートがカウンセリングになるような表現 というご要望に基づき、デザイン、制作をいたしました。 ポイント： 選択した回答によって、後に表示されるカウンセリングシートの内容が変化し、
最後にお薦めする商品や順番、説明文が変わるような仕掛けになっています。

アンケートと結果表示のギミックです。 CSVファイルにデータを保存し、JavaScriptで読み込み、PHPで書き出し処理をしています。 派遣先のディレクターさんからご依頼があり、実際に運用されている似たようなページのコード（外注で制作されたようです）をいただき、参考にしたのですが、PHPを使用する旨をお伝えしたところ、ご依頼はキャンセルになりました。 ですが、勉強のために制作してみたかったので、制作し、ポートフォリオで公開することにいたしました。 制作してみて、CSVファイルへのデータの読み書きがセキュリティ上危険性を拭いきれないので、 今の派遣先のように、データベースを扱えない場合は、デザイナーレベルでは今のところお断りしようかな、と思いました。

制作時間：40〜60分／枚

派遣先のクライアント様である某化粧品メーカーの商品（日焼け止めクリーム）のバナーです。
ディレクターさんからの指示を基に制作いたしました。

尚、本バナーに使用した商品画像は架空のものです。
社内の秘密保持規定遵守のため、AIで生成した架空の商品に置き換えて再制作いたしました。

上下に指定のセーフゾーンが設けられています。

制作時間：40〜60分／枚

派遣先のクライアント様である某化粧品メーカーの商品（日焼け止めクリーム）のバナーです。
ディレクターさんからの指示を基に制作いたしました。

尚、本バナーに使用した商品画像は架空のものです。
社内の秘密保持規定遵守のため、AIで生成した架空の商品に置き換えて再制作いたしました。

上下に指定のセーフゾーンが設けられています。

制作時間：40分〜60分／枚

派遣先のクライアント様である某化粧品メーカーのバナーです。
ディレクターさんからのワイヤーフレームでの簡単な構成案を元に制作いたしました。

配信直後からCVが好調とのことで、1年後、パッケージが変更になった後も、商品画像を変更して同じデザインで配信されています。

（上下にセーフティーゾーンの指示があったため、コンテンツが中央に配置されています）

CV前に、何度でも質問できるループ型のFAQです。 1つ質問をクリックすると、質問に対する答えが表示されます。 その後も何度でも質問が可能です。

ページを開いた日時から、指定した日時（キャンペーン終了日）までの時間をカウントダウン表示するパーツです。

画像を検索するツールです。
CSVファイルで、CMS上にアップロードした画像とそのソースを管理し、
すぐに情報を取得することができます。
また、重複アップロードを防ぐ目的もあります。

同じブランドの商品で様々なLPを制作する中で、
CMS上に既にアップロードした画像を何度も使い回すことがあるため、
このようなツールを制作いたしました。

口コミ検索風機能付きLPです。 LPの最後に、口コミ検索フォームを追加したページです。 制作時間：約18時間（コーディングのみ。実際は約25000px長ほどのLPです。） CTA部分の最後に、不安払拭を目的として、この口コミ検索風コンテンツがある形のページです。 そのため、この部分の正確な制作時間ではな（CSS(Sass)でのスタイリングも含みます） 制作経緯： 派遣先のディレクターさんから、オファー画像の後にユーザーの不安を払拭する目的で、 簡易的なアットコスメのような口コミ検索を入れたいとのことで、ディレクターさんの構成案を元に制作いたしました。 実際にユーザーが投稿してデータベースから抽出するようなものではなく、 あくまでLP上で、ディレクターさんが構成したいくつかの口コミを掲載する、というものです。 ポイント： ・イラスト部は、ファイル名に付けた枝番によって、奇数/偶数で2種類の画像を表示するようにしました。 ・星（★）の部分は、JavaScriptで自動生成するようにしました。JSONファイルでは整数で記載し、 その数値の分だけ、「★」マークを生成するコードです。 ・HTMLファイルが冗長で複雑になってしまうことと、リリース前にクライアント様からの修正や、 リリース後にもディレクターさんがPDCAを回してテキストを修正することも多いことから、 該当箇所を探さずすぐに修正ができるよう、口コミのデータ（ユーザー名、評価（星の数）、 コメント内容）をJSONデータにし、JavaScriptで呼び出す形で制作しました。 （後に、このページをWordPressに移植したいということになり、その際は、JSONが使えない（サーバーへのアップが権限上できないため）ため、 配列にしたJSファイルを作成して対応いたしました。）

本サイトです。 WordPressで、テーマから自作して制作しました。 詳細な説明は、ページ内に記載した通りです。 カスタム投稿ページ等を用いて、制作実績等の更新作業を可能な限り早くできるよう、工夫してコーディングしております。

制作時間：20分〜40分／枚

派遣先のクライアント様である某化粧品メーカーのバナーです。
ディレクターさんから大凡の構成案をいただき、そちらを元に制作いたしました。
夏をイメージしたバナーです。

制作時間：20分〜40分／枚

派遣先のクライアント様である某化粧品メーカーのバナーです。
ディレクターさんから大凡の構成案をいただき、それを元に制作いたしました。
夏をイメージしたバナーです。

制作時間：20分〜40分／枚

派遣先のクライアント様である某化粧品メーカーのバナーです。
ディレクターさんから大凡の構成案をいただき、そちらを元に制作いたしました。
温感が特徴の商品ということで、雰囲気を合わせたトンマナでデザインしました。

制作時間：20分〜40分／枚

派遣先のクライアント様である某化粧品メーカーの広告枠バナーです。
自然派コスメを押し出したシリーズということで、それに合わせたトンマナでデザインしました。
当時は化粧品ブランドでのデザイン経験しかなく、広告枠のデザインは強調したい部分が異なるため、ディレクターさんにご教示いただきながら制作した初期の制作物です。

横スライド式のアンケート型LPです。 全体の画像はこちらです（別ウィンドウで開きます） 制作時間：約12時間（カンプ：4h、コーディング：8h） 制作経緯：今まで、縦型のアンケートページを多く制作いたしましたが、ディレクターさんより、横にスライドするLPを制作したいとのご依頼を受け、設計、制作いたしました。 ポイント： ・Questionの下の設問番号部分はCSSで表現しております。JSも組み合わせて、設問数の増減にも自動で対応するようにコーディングいたしました。 ・JSライブラリ「Swiper」を導入し、ボタンをクリックすると進むよう、カスタマイズいたしました。

フランスの化粧品ブランド「SAMPAR」の百貨店イベント用リーフレットです。
画像データをいただき、イメージを聞き取りながら制作しました。

化粧品ブランド「SAMPAR」の商品イメージです。
コスメの商品でよくある鏡面反射ですが、底が丸いものなので工夫をして加工しました。

化粧品ブランド「SAMPAR」の商品イメージです。
楽天市場用に使用している商品画像です。
ブランドの商品の中では若者向けのため、少しポップなイメージと、ラインナップをわかりやすく色で強調したいと思い、デザインしました。

化粧品ブランド「SAMPAR」のサイトのトップページ用バナーです。 ブランドイメージは基本的にもう少し高級路線なのですが、 楽天では少しカジュアルに、というご要望を受けデザインしました。

サイトのリニューアルを担当した、S&P国際特許商標事務所様が運営するポータルサイトのバナーです。

特許事務所の広告枠用バナーです。

友人の紹介で、ピアノ教室のチラシを制作しました。 デザインの参考として、既にお持ちの名刺をいただきましたので、そちらのイメージを元にデザインしました。

サイトリニューアルの際、併せてご依頼いただき制作した名刺です。 シンプルなデザインをご希望とのことで、サイトのイメージとも合わせてデザインしました。

チャットボット風デザインのアンケートページです。 ページ遷移をしない形の、1枚もののLPです。 一問一答形式で、回答する度に対話型のコンテンツと次の質問が表示される形です。 全体の画像はこちらです（別ウィンドウで開きます） 制作時間：約18時間（コーディングのみ） 制作経緯： 派遣先のディレクターさんの構成案を元に制作いたしました。 ディレクターさんによると、今までの静的なLPに比べてユーザーの反応がとても良く、売上が好調とのことで、 ディレクターさんがPDCAを回しながら様々なブラッシュアップしていき、同様のページの中に色々なギミックが増えていきました。 少しずつ形を変えた様々なこのチャットボット風アンケート型LPを、数社のクライアント様（化粧品メーカー）のご依頼で数十本制作いたしました。  

【本ページの機能】

① 「Question 1 (1/5問目）」部分の値を自動表示 ②選択肢の単数/複数選択 ③選択肢の上に吹き出しを表示 ④選択肢の中に画像を配置し、アコーディオン形式で表示 ⑤選択した選択肢のテキストをチャットボットオペレーターの吹き出しに出力して対話風に表示 ⑥選択した回答によって、表示するコンテンツを出し分け

アンケート型LPです。 全ての選択肢を回答すると、最下部のCVボタン「詳しく見る▶︎」（公式購入ページへ遷移）をクリックできるようになります。 全体の画像はこちらです（別ウィンドウで開きます） 制作時間：約10時間 制作経緯：チャットアンケート型LPより前から制作されていた、1枚もののアンケートページに、CVボタンを選択必須にする改良を加えたい、とのことで制作いたしました。 ポイント： ・FV画像は、ページを読み込む毎に3枚の画像からランダムに表示されます。 ・CTA部分でオファー画像が表示されると、紙吹雪が出るアニメーションライブラリを入れました。

フランスの化粧品ブランドの楽天サイトです。
カテゴリーページや商品ページでJavaScriptが使用できない部分があるため、
共通で使用するヘッダー等はCSSのみで制作しました。

同じく現職の化粧品ブランドで制作した、スキンケアの特設ページです。
日焼けの後のスキンケア方法を、商品と共に紹介しております。
デザインからコーディングまで全て担当しました。

同じく現職の化粧品ブランドで制作した、ハンドクリームの特設ページです。
こちらもデザインからコーディングまで全て担当しました。

（URLが変更されてしまったため公開できません） 自社サイトです。 現在のサイトが古くなってきたため、リニューアルしてWordPress化したいとのことで、ご依頼をいただきました。
弁理士事務所らしくない、楽しいサイトにしたいとのことでこのようなデザインになりました。
また、ご要望として、今後の運営で、文章の修正等をなるべく社内で行えるようにしたい、CSVでも修正を行えるようにしたい、とのことで、
カスタム投稿でほとんどのページを作成いたしました。

架空のサイトです。
私ができることを制作会社やフリーランスのデザイナーのようなサイト風に制作したサイトです。
前職の制作会社で学んだ、WordPressのカスタマイズに力を入れて制作しました。

（閉鎖されてしまったため公開できません） 前職のウェブ制作会社で制作したサイトです。
一からのデザイン、WordPressでの制作を担当しました。（ログインシステム等は既存のテンプレートを使用）

空調等を扱う貿易会社のサイトです。
半年間の勉強期間を経た頃、リニューアルの依頼をいただき制作しました。
空調等を扱う貿易会社ということで、グローバル、環境といった点をイメージしてデザインしました。

友人の営む音楽教室のサイトです。
実際には使われていない架空のサイトですが、デザイン、機能面でもしっかりと聞き取りを行い、制作しました。
初めてWordPressを使ったサイトを制作しました。
勉強のため、テーマは自作しました。

1年間の勉強を経た後、就職活動のために制作したポートフォリオです。
実務未経験で作品も少なかったため、自己紹介や勉強したことをブログ形式で掲載しました。