All
Web site
Others
製作期間
256h (約１ヶ月)
環境構築：24h
デザイン設計：112h
コーディング：120h
＜2021.07～08＞
環境構築：24h
デザイン設計：112h
コーディング：120h
＜2021.07～08＞
使用技術
Adobe XD / Illustrator / Photoshop / Dreamweaver / Node.js / React / Sass(scss) / Git
写真素材
写真AC
ペルソナ
野菜不足が気になっているかつSNS映えを意識した食事をしたい女性、
子供と楽しく野菜を摂取したいファミリー層
子供と楽しく野菜を摂取したいファミリー層
ポイント
✓ 野菜＝緑という概念にとらわず、食欲増進を連想させる黄色をメインカラーに設定。
✓ 新鮮かつおしゃれなサラダの雰囲気に合わせたフォント・画像設定、ロゴ・ マップ作成。
✓ レジオーダーを想定し、メニューは一覧で把握し易い２カラムレイアウトを設定。
✓ 紙面のメニュー表を開いているように感じさせるスプラッシュページを設定。
✓ 新鮮かつおしゃれなサラダの雰囲気に合わせたフォント・画像設定、ロゴ・ マップ作成。
✓ レジオーダーを想定し、メニューは一覧で把握し易い２カラムレイアウトを設定。
✓ 紙面のメニュー表を開いているように感じさせるスプラッシュページを設定。
製作期間
284h (約１ヶ月)
環境構築：20h
デザイン設計：168h
コーディング：96h
＜2021.01＞
環境構築：20h
デザイン設計：168h
コーディング：96h
＜2021.01＞
使用技術
Adobe XD / IllustratorCLIP STUDIO PAINT / Visual Studio Code / WordPress / HTML / CSS
ペルソナ
羊とキャラクター系が好きな方全般
ポイント
✓ あたたかな牧場のいちご農園をイメージし、パステルカラーをメイン、いちごの赤と緑をサブカラーに設定。
✓ 絵本のような親しみやすい雰囲気に合わせたフォントを設定。
✓ グローバルメニューは牧場の柵をイメージし下部に固定。
✓ 絵本のような親しみやすい雰囲気に合わせたフォントを設定。
✓ グローバルメニューは牧場の柵をイメージし下部に固定。
製作期間
356h (約１ヶ月半)
環境構築：20h
デザイン設計：184h
コーディング：152h
＜2022.03～04＞
環境構築：20h
デザイン設計：184h
コーディング：152h
＜2022.03～04＞
使用技術
Adobe XD / Illustrator / Photoshop / Dreamweaver / After Effect / Media Encoder / PHP / jQuery / Sass(scss) / MySQL / Git
ポイント
✓ 好きな羊をテーマにアニメーション・ギミックを配置することで単調さをなくし、より印象の残るようなコンテンツを作成。
✓ 羊のような丸みのあるやわらかい印象のフォントを設定。
✓ 白を背景色とし、背景の着色やグラデーション等の装飾や要素を抑えることでコンテンツを強調。
✓ 羊のような丸みのあるやわらかい印象のフォントを設定。
✓ 白を背景色とし、背景の着色やグラデーション等の装飾や要素を抑えることでコンテンツを強調。
イタリアンカフェの仮想メニュー表(pdf)です。
素材データダウンロード
製作期間
4h
＜2022.02＞
＜2022.02＞
使用技術
Illustrator / Photoshop
写真素材
写真AC
ポイント
✓ 穏やかでリラックスできる緑の背景を設定。
✓ 目を引く表紙や大項目にはカフェの雰囲気にあわせたおしゃれで高貴なイメージをもつフォントを設定。
✓ 小項目にはモダンな印象を与え、可読性の高い細めのゴシック体を設定。
✓ 目を引く表紙や大項目にはカフェの雰囲気にあわせたおしゃれで高貴なイメージをもつフォントを設定。
✓ 小項目にはモダンな印象を与え、可読性の高い細めのゴシック体を設定。
アパレルサイトの仮想バナー(jpg・3サイズ)です。
素材データダウンロード
製作期間
3h
＜2022.02＞
＜2022.02＞
使用技術
Photoshop
写真素材
写真AC
ポイント
✓ ナチュラル系ファッションを想定し、カーキのアクセントカラーを設定。
✓ セールである情報を最優先とし、文字の表示面積を広く設定。
✓ セールである情報を最優先とし、文字の表示面積を広く設定。
自然食品サイトの仮想バナー(jpg・3サイズ)です。
素材データダウンロード
製作期間
3h
＜2022.02＞
＜2022.02＞
使用技術
Photoshop
写真素材
写真AC
ポイント
✓ 自然食品に合わせ自然系の背景を設定。
✓ 縁文字でメリハリをつけて目立たせる。
✓ 縁文字でメリハリをつけて目立たせる。
転職サイトの仮想バナー(gif・3サイズ)です。
素材データダウンロード
製作期間
3h
＜2021.03＞
＜2021.03＞
使用技術
Photoshop
写真素材
写真AC
ポイント
✓ 線が太いゴシック体により、力強く元気な印象を与える。
✓ クリックアニメーションを追加し目立たせることでクリックを促す。
✓ クリックアニメーションを追加し目立たせることでクリックを促す。
羊牧場サイトの仮想バナー(gif・3サイズ)です。
素材データダウンロード
製作期間
4h
＜2022.02＞
＜2022.02＞
使用技術
Photoshop / After Effect
写真素材
写真AC
ポイント
✓ 羊のような丸みのある太めのやわらかい印象のフォントを設定。
✓ 羊を覗くアニメーションを追加することでワクワク感を演出する。
✓ 羊を覗くアニメーションを追加することでワクワク感を演出する。
satomi-pf.com/Prototype/salad