About

相原 香織

Skills

Photoshop
Illustrator
HTML
CSS
Sass
JavaScript
jQuery
PHP
【その他】
・Git:約年ほど使用しております。
・フレームワーク:Vue.jsを勉強中です。現在の職場環境では使用できないため、プライベートで少しずつ学んでおります。

WEBデザイン、プログラミングに関して学んだメモを以下のサイトにてブログ形式で公開しておりますのでご参考いただければ幸いです。
Kaori Aihara

Qualifications

  • 色彩検定 2級
  • Webクリエイター能力認定試験・エキスパート
  • ハングル能力検定 準2級

History

1999年3月

日本電子専門学校・マルチメディア科卒業

Web制作、Webデザイン、グラフィックデザイン、インタラクティブコンテンツ制作、デザインマーケティング等を学ぶ。
学習ソフト・言語:Photoshop, Illustrator, Dreamweaver, HTML, JavaScript
1999年4月

ゲーム制作会社に入社

家庭用ゲーム機向けゲームを開発する会社で、ブラウザゲーム(Flash)制作部門に配属。
Flash版子供向け知育ゲームの企画・制作を担当。
2002年4月

貿易会社に入社

輸出入に関わる書類の作成や売上データや資料の作成等と並行し、
IllustratorやPhotoshopのスキルを活かし、販促用のカタログや名刺等のデザイン、制作を担当。
また、VBAを独学で習得し、書類の作成を自動化。
プログラミングの基礎を身につける。
2018年11月

勤務先の業績悪化により依願退職

パソコンスクールに通学し、現代のウェブ制作に必要な知識を含めて再学習。 退職後、オンライン講座等で学習を続けながら、資格(色彩検定、Webクリエイター能力認定試験)を取得。
2019年8月

ウェブ制作会社に入社

主に小売店や小規模事業者、市の関連事業などのサイトを制作・更新を請負う会社で、 CMS(WordPress, Joomla)でのサイトの更新、カスタマイズ、制作を担当。
2020年6月

フランスの化粧品ブランド運営会社に入社

ECサイト(楽天)のデザイン、コーディング、更新、メルマガ作成、DMやリーフレット等の販促物のDTP制作を担当。
2020年11月

特許事務所に入社(Webデザイナー職)

事務所サイトや関連サイトのリニューアル(WordPress化)、既存のWordPressサイト、静的サイトのカスタマイズ、バナー制作を担当。
現在

デジタルマーケティング会社で就業

デジタル広告を制作する会社で、バナー、LPの制作。 デザイン、コーディングを担当。
JavaScriptやCSSアニメーションを用いたインタラクティブなページの制作や、
既存LPのカスタマイズや不具合対応、また、簡単な動画の制作・編集。

Introduce

相原香織と申します。

得意分野は「動くLP制作」です。
「より伝わるデザイン」はもちろん、「触りたくなるWebページ」を多く制作しております。

ノーコード制作ができるCMSが普及する中、
どうしてもノーコードでは表現が難しいLPやカスタマイズ案件を多く手掛けております。
単に「作れる」だけでなく、クライアントの要望に合わせた独自のデザインや機能を実現できることが強みです。

Webデザインのお仕事を始めて、約年になります。
Webデザイナーとしては過去に、Web制作会社、化粧品ブランド、広告会社等でWebデザイン、コーディング等のお仕事をしてまいりました。

デザイン面の経験として一番多いジャンルは、化粧品関係になります。
化粧品ブランドでのインハウスデザイナーとして、また、広告会社のコスメ部門でのWebデザイナーとして、デザイン経験を積みました。
その他、制作会社等で小規模店舗やコーポレートサイトのデザインを経験いたしました。

コーディングに関しては、JavaScriptを用いたインタラクティブ性のあるLPや、
WordPressで、PHPを用いてカスタム投稿を多用した、更新しやすいページを得意としております。

CSSアニメーションにも力を入れております。
GIFやMP4を使用せずに表現できるものはCSSアニメーションで制作することで、
ページ容量を軽量化し、読み込み速度を向上に取り組んでおります。

何より、ご依頼いただいた方に喜んでいただけることが私にとっての一番の喜びです。
宜しくお願い致します。

Works

Websites

秘密保持のため、また、公開URLを共有されていないため、 一部、実際の制作物ではなく架空の製品を用いて再構成した画像を掲載しております。
化粧品のアンケートページ(横スライド型)

派遣先のデジタル広告会社で制作した、化粧品についてのアンケートページ(横スライド型)です。
(リンク先のページは、著作権等の都合上使用不可のため、架空の商品に置き換えて再制作したものです) 今までは、縦に進むタイプのアンケートページを多く制作いたしましたが、
ディレクターさんから、横に進むようなアンケートページが作れないか、とのご依頼を受け、 スライドショー(JSライブラリ「Swiper」を使用)を応用して制作いたしました。

化粧品のアンケートページ(横スライド型)

化粧品のアンケートページ(チャットボット風)

派遣先のデジタル広告会社で制作した、化粧品についてのチャットボット風のアンケートページです。
(リンク先のページは、著作権等の都合上使用不可のため、架空の商品に置き換えて再制作したものです)
この型のページを、さまざまなクライアント(テレビやWebCM等で知られる化粧品メーカーや製薬会社等)向けに10数本制作しました。 主にSNS広告誘導枠からの遷移先になり、公式購入ページへのCVを促すクッションページです。
ディレクターの構成案を基に、画像制作やコーディングを行いました。
離脱率改善のため、ユーザーの選択肢によってコンテンツの出し分けを行ったり、アニメーション等様々な仕掛けを盛り込んだ動きのあるLPです。

化粧品のアンケートページ(チャットボット風)

化粧品のアンケートページ(1枚もの)

派遣先のデジタル広告会社で制作した、化粧品についてのアンケートページです。
(リンク先のページは、著作権等の都合上使用不可のため、架空の商品に置き換えて再制作したものです)
ディレクターさんの構成案を基に、画像制作やコーディングを行いました。
FVの画像は、ページ読み込みの度に3種類の画像からランダムに表示されます。
また、GIFアニメもよく制作するため、こちらのサンプルページでも同様に採用してみました。
こちらはシンプルに回答を選択していくものですが、最下部のCVボタン(「詳しくみる▶︎」)は全ての回答が選択されないと、進めなくなっています。

化粧品のアンケートページ(1枚もの)

SAMPAR・楽天市場店

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

SAMPAR・楽天市場店

コスメブランド「SAMPAR」スキンケア特集のページ

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

コスメブランド「SAMPAR」スキンケア特集のページ

コスメブランド「SAMPAR」ハンドクリームのページ

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

コスメブランド「SAMPAR」ハンドクリームのページ

S&P国際特許商標事務所

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

S&P国際特許商標事務所

Kaori Aihara Design Services

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

Kaori Aihara Design Services

Web制作会社で制作したマッチングサイト

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

Web制作会社で制作したマッチングサイト

株式会社 日空 様

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

株式会社 日空 様

豊田音楽教室

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

豊田音楽教室

はじめてのポートフォリオ

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

はじめてのポートフォリオ

Interactive Parts of a Webpage(パーツ集)

LP丸ごと1本の制作ではなく、既存のLPにギミックをピンポイントで追加したいというようなご依頼も多いため、そのギミックをまとめたページを作成いたしました。 ぜひご覧ください。

DTP, Banners etc.

秘密保持のため、一部アクセス制限を設けております。 採用選考に関わる場合は、パスワードをお知らせいたしますので、お問い合わせください。
【バナー】某化粧品ブランドの商品(日焼け止めクリーム)のバナー

制作時間:40〜60分/枚

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

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

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

【バナー】某化粧品ブランドの商品(日焼け止めクリーム)のバナー

【バナー】某化粧品ブランドの商品(日焼け止めクリーム)のバナー

制作時間:40〜60分/枚

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

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

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

【バナー】某化粧品ブランドの商品(日焼け止めクリーム)のバナー

【バナー】某化粧品ブランドの商品のバナー

制作時間:20分〜40分/枚

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

【バナー】某化粧品ブランドの商品のバナー

【バナー】某化粧ブランドの商品のバナー

制作時間:20分〜40分/枚

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

【バナー】某化粧ブランドの商品のバナー

【バナー】某化粧品ブランドの商品のバナー

制作時間:20分〜40分/枚

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

【バナー】某化粧品ブランドの商品のバナー

【バナー】某化粧品ブランドの商品のバナー

制作時間:20分〜40分/枚

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

【バナー】某化粧品ブランドの商品のバナー

【リーフレット】SAMPAR 様

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

【リーフレット】SAMPAR 様

【商品イメージ】SAMPAR 様

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

【商品イメージ】SAMPAR 様

【商品イメージ】SAMPAR 様

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

【商品イメージ】SAMPAR 様

【バナー】SAMPAR 様

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

【バナー】SAMPAR 様

【バナー】知財パーク

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

【バナー】知財パーク

【バナー】特許事務所の広告

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

【バナー】特許事務所の広告

【チラシ】戸谷麻由美ピアノ教室 様

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

【チラシ】戸谷麻由美ピアノ教室 様

【名刺】株式会社 日空 様

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

【名刺】株式会社 日空 様

Contact