ポートフォリオ

Works

HP・LP
SNS
印刷
バナー

お茶小売店HP

使用ツール:HTML/CSS、javascript、wordpress（PHP）、illustrator

商品ページの作成、googleカレンダー連携、ブログ機能追加

入社後すぐに担当したHPの作成であったが、入社前に会社が契約したフリーランスの方が作成途中で納品してしまい、自社ではリソース不足で完成が難しい状態での担当となった。
当サイトは1からPHPでのプログラミングでのサイト設計となっており、お茶の紹介ページのほとんどが欠損していた。
wordpressで使用するPHPを編集し残りのお茶ページの作成と、トップページにブログ投稿の表示、GoogleカレンダーAPIとの連携により、お茶レッスンの空き状況を告知する機能を追加した。

外壁塗装LP

使用ツール:illustrator、HTML/CSS、javascript

担当箇所:デザイン（ファーストビュー以外）、コーディング

ヒアリングの段階で施工実績が無かったが、推しポイントとして塗料の質が良いことが判明したため、塗料の質をアピールしたデザインを行った。
電話番号のボタンにはマスコットキャラにアニメーションを加えて、押してもらいやすいように工夫。

サブスクLP

使用ツール:illustrator、HTML/CSS、wordpress

担当箇所:デザイン(ファーストビュー以外)、コーディング

リフォームのサブスクサービスを展開するとのことで、作成したLP。
リフォームのサブスクで、ターゲットは金銭面で一括でリフォームが難しい層であったため、LP内では極力商売感は出さず、シンプルにすることで安心して契約をしてもらうよう意識。
商品の詳細や会員プランの詳細をLP1ページ内に収めるにはロングページになってしまい離脱率アップの恐れがあったため、wordpressの固定ページで1つずつ紹介してトップページにリンクを挿入している。

水回りパックLP

使用ツール:illustrator、HTML/CSS、javascript

担当箇所:デザイン(共同作業)、コーディング

水回り4点セットを販売するLPを作成。
デザインは水を連想させる水色のグラデーションを多用し世界観を作り上げた。
商品紹介後に自動見積りフォームをjavascripフレームワークのvue.jsで実装し、商品の組み合わせで、金額が変動する。
チェックが4つになった場合は、キャンペーン価格がアニメーション付きで表示する。

外壁塗装LP

使用ツール:illustrator、HTML/CSS、javascript

担当箇所:全てのデザイン、コーディング

新しく立ち上げたばかりの会社の外壁塗装LPを作成。
施工事例などのアピール点はなく、名古屋に密着した感じで、できるだけコンテンツを多くしてほしいとの依頼があった。
ファーストビューはとにかく明るくインパクト重視で、地域密着をアピールするため直下に手紙風のメッセージを配置した。

シロアリLP診断テスト

使用ツール:HTML/CSS、javascript

シロアリLP内のコンテンツとして使用。
診断テストというコンテンツだったので、学校のテストのような雰囲気を出すため、背景の机や解答用紙、マウスのカーソルを鉛筆を鉛筆にした。

中国茶小売店のテイクアウト紹介リール動画

この投稿をInstagramで見る

楽庵 rakuan(@tea_chanoen)がシェアした投稿

使用ツール:Premiere Pro

中国茶を販売する店舗から、テイクアウトメニューの紹介動画をリールで作成したいと依頼があり、実際の販売の流れの動画を作成。
動画の企画、撮影、編集、投稿まで担当し、公開後の再生回数は1000を超えている。

リフォーム店舗の催事用ポスター

使用ツール:illustrator、photshop

店舗での催事用ポスターをillustratorで作成。この催事では店頭で焼きそばとたこ焼きを無料配布して客引きを行うとのことでしたので、メインビジュアルは焼きそばとたこ焼きを大きく配置し、写真は湯気を立たす加工を行うことで誰が見ても美味しいと感じさせるようにした。
焼きそばは普段から自宅で調理しているので、フリー画像を使用せず自宅で撮影したものをphotshopで加工し使用。催事なので祭をイメージした背景と夜空に浮かぶ満月を表現した。

焼肉店のメニュー

使用ツール:illustrator

前職で作成。
琵琶湖がお店から見えるがコンセプトの焼肉店のメニューを作成。
デザインは完全におまかせでの依頼となったので、店内内装や、琵琶湖の風景などをグルメサイトで調査して作成することにした。
白を基調とした内装と琵琶湖を一望できる開放的な窓が特徴的だったので、色は白と青の2つの使用を決め、背景に琵琶湖を全面に配置することで、窓から一望できる琵琶湖とリンクするように表現した。

自社配布用の販促チラシ

使用ツール:illustrator

前職で作成。
顧客先の飲食店に配布する用途。
当時はコロナ禍で飲食店のアルコール提供ができない状態だったので、シロップを用いたノンアルカクテルレシピの提供と、シロップの新規販売を目的としていた。
バーの室内をイメージした黒とカクテル名はグラデーションにすることで、カクテルのビルドアップの際の色の移り変わりをイメージした。

自社配布用の販促チラシ

使用ツール:illustrator

先ほどのチラシの第2弾として作成。
同じ飲食店に配布するものだったので、デザインは以前とは真逆で白を基調とした明るい雰囲気で作成。
ブロックの輪郭をぼかすことで、空に浮かぶ雲のような表現を行った。

リフォーム店舗のLINE配信用のバナー

店舗での催事の際、LINE配信に使用。
屋台デーという名前での開催でしたので、屋台をイメージしたデザインにした。
バルーンアートをお子さんにプレゼントする企画もあったため、風船も配置。

リフォーム会社のインターネット広告バナー

地域密着のリフォーム会社の広告運用を依頼され、広告に使用するバナーを作成した。
地域密着感を押して、明るい雰囲気でとの要望があったため、名古屋城のシンボルでもあるしゃちほこに会社の強みを会話風で表現した。
色合いは広告をクリックした後に遷移するLPの色と合わせた。

Skill

HTML/CSS

使用歴:4年

ユーザーの立場になって視覚性を意識したレイアウト設計、パーツ作成を行います。
CSSのライブラリはBootstrapを使用することがありますが、基本的にはハンドコーディングを行い、PC、タブレット、スマートフォンのいずれの端末においてレイアウト崩れが起こらないようにレスポンシブ対応を行います。
javascript

使用歴:3年

JqueryとVue.jsを使用します。
LP内での商品見積もりフォームの実装、アニメーションの実装
APIの連携では、サイト内にGoogleカレンダーの導入、wordpressの新着記事を自動で外部サイトに出力する機能実装を行いました。

参考サイト
商品見積もりフォーム
 APIの連携でgoogleカレンダーを表示
 下層ディレクトリに設置した記事のデータ取得と新着記事の自動反映
wordpress/PHP

使用歴:4年

2019年に趣味でブログを立ち上げて以来毎日のように使用しています。
ブログ開設時はブロックエディターでの記事入力がメインでしたが、現在はコンテンツ作成に加えて、PHPを使用したテーマ開発により1からHP・LPの構築が可能です。
クライアントのサイトの半数はwordpressであるため、サイト内容の更新や機能の追加の際はPHPのプログラムを編集することが多いです。
LPには問い合わせフォームの実装が可能です。
photshop

使用歴:3年

写真の合成、レタッチ、ブログのサムネイル作成、バナー作成で使用します。
レタッチが最も得意で、趣味のブログに使用する写真のほとんどはphotshopでレタッチを行ってから投稿します。
サムネイルやバナーではレイヤースタイルによるテキストデザインによって、ユーザーの目を惹きつけることを意識しています。
illustrator

使用歴:3年

webサイトのワイヤーフレーム、デザイン、ロゴやバナー作成を行います。
ブログに投稿する簡単な図やイラストの作成も行います。
前職ではチラシやメニューの作成で使用頻度が高かったため、現職のweb業務でもphotshopよりillustratorを積極的に使います。
Premire Pro

使用歴:1年

クライアントのinstagram投稿代行を受け持った際、リール動画の編集のために使用しています。
動画のトリミング、テロップの挿入、速度調節などの基本的な作業を行います。