Webデザイン・コーディング

HTMLとCSSを使用した自作ホームページと、figmaを使用したデザイン制作をご紹介いたします。

HTML CSS

◼️個人制作:デザイン・コーディング
◼️制作期間:1.5ヶ月
(職業訓練校 Webデザイナー科)
◼️フォームに予約の項目をつけました。フッターにBtoB向けのページリンクをもうけました。

figma

◼️個人制作:デザイン(2デザイン)
◼️制作期間:1週間
◼️20〜30代をターゲットにしたコンセプト。写真の選別や配置、カラートーンを工夫しました。

コーポレート・ブランドサイト

HTML・CSS・JavaSctipt

  • ◼️Dreamweaver
  • ◼️2023.7

動画マニュアルのアコーディオンメニューデザイン、動画モーダル、コーディング。

HTML・CSS

  • ◼️Photoshop・Dreamweaver
  • ◼️2023.7

バナー2種の配置デザイン、コーディング。

HTML・CSS

  • ◼️Photoshop・Dreamweaver
  • ◼️2023.9

チラシをもとにキービジュアルのデザイン・コーディング。
レスポンシブ。

HTML・CSS

  • ◼️Photoshop・Dreamweaver
  • ◼️2023.8

デザインカンプをもとに既存フォームの上部に商品の案内をコーディング。レスポンシブ。

HTML・CSS

  • ◼️Photoshop・Dreamweaver
  • ◼️2023.9

デザインカンプをもとにイベントサイトのコーディング。
レスポンシブ。

WordPress

  • ◼️Photoshop・WordPress

既存サイトを元に、キャッチコピー・スタッフ写真・メインカラーデザイン。インスタグラム、LINE追加、コーディング。

キャンペーン・SNSバナーデザイン

  • ◼️ブランドサイト
  • ◼️キャンペーンバナー
  • ◼️Instagram
  • ◼️募集企画バナー
  • ◼️Instagram
  • ◼️イベント告知バナー

  • ◼️Instagram
  • ◼️イベント告知バナー

  • ◼️Instagram
  • ◼️イベント告知バナー

動画編集

  • ◼️Instagram
  • ◼️イベント告知動画編集