2020.05

Corporate Site

My Role:Direction,Web Design,Front End

Illust:パピコ

株式会社 Share Re Green様のWebサイトを制作しました。Webサイト全体はイラストが際立つようなシンプルなデザインにし、事業が増えていっても追加が容易にできる設計にしました。

「笑顔の連鎖の転換点を育てる」というコンセプトを掲げている事から、メインビジュアルでは人と人が徐々に繋がり、笑顔が増えていく表現を考え実装しました。

2020.11

Event Site

My Role:Direction,Web Design

Front End:モピコ

トワイライトふくしま大煙火祭様の公式Webサイトを制作しました。打ち合わせ開始から公開までが1カ月という短い納期の中、協賛企業等の随時追加に強い設計を考えデザインしました。 また世界中に発信するプロジェクトである事から、英語サイトも制作しました。

2020.11

Corporate Site

My Role:Direction,Web Design,Front End

さいたま市を中心にトータルブランディングを行う、Rootfor様のWebサイトをリニューアル致しました。 強みにしているトータルブランディングをストレートに伝え、企業のミッションと想いを明確にしました。

メイン事業である内装のデザインでは設計で線を多く使う事から、ロゴのアウトラインを線で描画するような表現をVivus.jsで実装しました。

設計図から立体である店舗を作り上げる事から、フェードイしてくるアニメーションは奥から手前にくるような立体感のある実装にしました。また実績の見せ方をこだわりたいとのことでしたので、投稿ページ内も写真が際立つデザインにし、カスタムフィールドを使い簡単に運用できるようにしました。

2021.2

Corporate Site

My Role:Direction,Web Design,Front End

長野県に拠点を置く一般社団法人 徳広エネルギー工房様のWebサイトをリニューアル致しました。写真素材が少ない事からフリー素材メインでデザインし、企業のビジョン、サービスを明確にしました。

リニューアル前のWebサイトになります。事業とEC機能が混ざってしまい情報が多くなりがちな設計だったので、WebサイトはWordPress、ECサイトはBASEを使い目的事にドメインを分けての運用を提案しました。

2021.2

Corporate Site

My Role:Direction,Web Design,Front End

埼玉県越谷市に拠点を置くCREATIVE SHERPA様のWebサイトを制作致しました。世界に一つしかないという千鳥団扇の形をメインビジュアルで使い、人肌を連想させる配色で温かさとクリエイティビティを表現しました。

TOPページでは千鳥団扇をイメージしたロゴがふわっと飛んでいる表現と、ローディング終了後には風を斬って降り立ったような表現を実装しました。

2021.3

EC Site

My Role:Direction,Shopify

株式会社Share Re Green様が運営する野菜のキャンバスSTOREを担当致しました。CMSにはShopifyを採用し、日時指定アプリやメルマガ配信等のマーケティングツールを導入しカスタマイズしました。

2021.5

Brand Site

My Role:Direction,Web Design,Front End

日本の風土と恵みで、生活を創るブランド、きりもや様のWebサイトを制作させて頂きました。シンプルで上質なものを好むペルソナに向け、シンプルな配色と質の高い写真が際立つレイアウトで、ブランドのビジョンとサービスを明確に示しました。

きりもや(雰雰)は水の最小単位であり、温度が下がり徐々に現れます。TOPページの読み込み時にはメニューとコピーが徐々に現れる実装をし、下層ページにも同様の表現しました。

フッターでは水面に雰がかかった写真を使用しました。ホバーすると水面に触れているような実装で、より画像が際立つ表現をしました。

ターゲット選定や、ベンチマークブランドの分析、ペルソナ選定等も行いました。資料として視覚化する事で芯になる部分を共有し、プロジェクトをスムーズに進行する事ができました。

2021.5

Store Site

My Role:Direction,Web Design,Front End

福島県喜多方市にオープンしたM!KKE様のWebサイトを制作させて頂きました。ロゴのカラーをアクセントカラーとして使用し、サイト全体は店内の木目調から伝わる温かさを感じる配色にしました。またWebサイト全体的の撮影を担当しました。

M!KKEという店名から見つける事を意識したフロントエンドの実装を考えました。メインビジュアルのキャッチコピーは訪問時は隠れており、訪問と同時に見つかるようにしました。
メニューは見つける事を意識したのでPC時からハンバーガーメニューを採用し、メニューをホバーすると写真が切り替わり、発見がある実装を意識しました。

My Portfolio Site

自身のポートフォリオサイトを制作しました。
実績を分かりやすく見てもらう事と、自身の特徴とこだわりを裏付けと合わせて伝える事を意識して制作しました。

レイアウトは実績を分かりやすく伝える為に、私自身の事と制作実績で分けました。
配色は人に対しては根が真面目な性格が強く出る事から、誠実、信頼感を連想する青系にしています。
優柔不断、まわりの目が気になる、も該当すると思います。

制作実績のセクションにはCOLORの切り替えを配置し、ダークモードのような役割を持たせました。
実績の詳細はページ遷移よりも情報の表示が早い、モーダルウィンドウにしています。

自身の特徴はフロントエンドの技術で課題解決を最大化する実装や、UXを考えることが好きな事です。
上記が伝わるように実績毎にこだわったポイントをビデオと文章で掲載しました。