Loading...!

メインアニメ 指アイコン
隠しキャラ

このサイトって何?

ここは、私のことを知ってもらうためのポートフォリオサイトです。
「で、あなたは誰?」と思ったあなた。
その答えは、このあとすぐ!

は誰?

MAYU OGITA

荻田 真有

ジャンプするアニメ

高校・専門学校では造形やデザインを学びました。
卒業後はまったく違う業種で働いていましたが、やっぱり「つくること」が好き!という気持ちが忘れられず、ウェブデザインの勉強を始めました。
絵を描いたり、ちょこっと動くアニメ(gif)を作ったりもできるので、サイトに使う素材はぜんぶ自分で作れます。
権利面でも安心な、自分らしい世界観のデザインを大切にしています。
このサイトのイラストやアニメもすべて手描きです!

HTML/CSS/Bootstrap/GSAP/Photoshop/Illustrator/Clip Studio Paint

これをりました

本架空インド料理Usoshnaのサムネイル
本架空インド料理Usoshna

よく読んだら全てが嘘でいい加減な、インド料理屋さんの胡散臭いジョークサイトが作りたくて作りました。
初めて完全オリジナルで作ったサイトです。
素材集めに苦労したことと、少しサイトに動的な動きを入れてみたくて、カレーが流れてループする部分を作るのが素材加工含め少し大変だったと思います。
※こちらはフリー素材を使用しています。

本架空インド料理Usoshna
マメキチ喫茶のサムネイル
マメキチ喫茶

猫のいる喫茶店さんに許可を得て作らせていただきました。
店内の写真撮影から撮影した写真素材加工・イラストまで全て自分で用意しています。 地域で愛される、猫のいる普通の喫茶店をイメージしました。
さらに動的なサイトを作りたくなり、AOS.jsを使用しました。

マメキチ喫茶
お!いもフライのサムネイル
お!いもフライプロモーションサイト

架空のお菓子のプロモーションサイトを作りました。
ロゴ、イラスト、商品画像、お菓子本体まで全て自分の手で制作しました。駄菓子のようなイメージで、小さなお子さんも家族と一緒に見られるように、漢字にはなるべくルビを振っていたり、楽しい雰囲気になるように心がけています。

お!いもフライ プロモーションサイト

サイト制作のために制作した素材集

過程もご覧ください
topアイコン過程

TOPボタン
使用ソフト:Illustrator
喫茶店のページのTOPに
飛ぶボタンです。猫のいる喫茶店ということで押したくなるような肉球のボタンを作りました。

マメキチのファビコンの過程

ファビコン
使用ソフト:Illustrator
ファビコンを作りました。
小さくても存在感のある見た目を目指しました。

猫素材過程

猫素材過程
使用ソフト:Illustrator
喫茶店のサイトの飾りとして制作しました。
ページの整理をする装飾のため、横に長いです。

ロゴ過程

マウスロゴ
使用ソフト:Illustrator
このページのロゴを制作しました。
ポートフォリオのイメージが統一されるよう、色味に気を付けました。

指アイコン過程

指アイコン
使用ソフト:Illustrator
このページで使用するアイコンを作りました。
シンプルで邪魔にならないアイコンを目指しました。

インドロゴ過程

インド料理ロゴ
使用ソフト:Illustrator
架空のインド料理屋さんのロゴを作りました。
胡散臭いイメージとエキゾチックなイメージを入れています。

お!いもフライのロゴ過程

架空のお菓子ロゴ
使用ソフト:Illustrator
架空のお菓子のロゴを作りました。
駄菓子のようなイメージで、油でほっくり揚げたイメージが伝わるように意識しました。

キャンペーンバナー1の過程

キャンペーンバナー1
使用ソフト:Illustrator
架空のお菓子のキャンペーンバナー1
サイト内で架空のキャンペーンを設置したかったので、架空のキャンペーンバナーを簡単に作りました。
プレゼント箱のようなデザインにし、プレゼントが貰えるキャンペーンであることがひと目でわかるようにしました。

キャンペーンバナー2の過程

キャンペーンバナー2
使用ソフト:Illustrator
架空のキャンペーン2です。
冬のキャンペーンであること、あったかい雰囲気のキャンペーンであることが伝わるようにふんわりと白いぼかしを入れながら暖色でまとめました。

キャンペーンバナー3の過程

キャンペーンバナー3
使用ソフト:Illustrator
架空のキャンペーン3です。
制作したロゴを元手に大胆に配置し、商品を中心とした催しであることをアピールしました。

キャンペーンバナー4の過程

キャンペーンバナー4
使用ソフト:Illustrator
架空のキャンペーン4です。
新年に向けた挨拶という趣旨なので、日の出のデザインでおめでたくしました。

架空のお菓子パッケージの過程

架空のお菓子パッケージ
使用ソフト:Illustrator、Canva
お!いもフライの架空のパッケージ画像です。
Illustratorで芋の画像をはめ込んだ画像を作り、それをCanvaでモックアップ化しています。楽しい駄菓子のようなイメージです。

キャラクターgif gif制作過程

架空のお菓子プロモーションgif
使用ソフト:Clipstudio paint
お!いもフライのプロモーションキャラクターです。
手描きでアニメを作り、webpで書き出しています。画面に動くキャラクターがいると華やかになって楽しい雰囲気を演出できます。

このページも一つの作品としてご覧ください

    氏名

    メールアドレス

    題名

    メッセージ本文 (任意)