💬

制作実績掲載OK! デザインカンプ初級編

2023/11/24に公開

はじめに

簡単なホームページをコーディングしたことがある方を対象に Web 制作初級レベルのデザインカンプを作りました。以下リンクからアクセスできます。
https://www.figma.com/file/5qHw2Uh1IcMzxB9vfM8wW2/初級編-デザインカンプ?type=design&node-id=0%3A1&mode=design&t=lyrpzlPRbBZVWd2i-1

Figma デザインカンプからコーディングする方法を知りたい方は、以下の記事をご覧ください。
https://zenn.dev/reskilling_hase/articles/0d6b11fcd1172a
この記事では、Figma デザインカンプからコーディングする方法を画像を交えてご紹介しています。

ポートフォリオへの掲載や著作権について

  • OK なこと

    • デザインカンプをコーディングしたサイトをポートフォリオやブログへ掲載すること
    • デザインカンプを改変し、オリジナルのポートフォリオにすること
  • お願い

    • 掲載する際は『未経験から始める!Web 制作独学ロードマップ』へリンクを貼ること
      URL:https://zenn.dev/reskilling_hase/articles/11ba57549b2e64
    • 検索エンジンにインデックスされない処理をすること(以下の内 1 つ)
    • <head>内に<meta name="robots" content="noindex, nofollow">を記述
      • Basic 認証設定
      • robot.txt 設定
  • 禁止事項

    • 再配布や販売する行為

コンセプト

CSS と jQuery を組み合わせて、簡単なアニメーションをつけた Web サイトを作ること目標にデザインしました。

  • キーワード
    • 構造化マークアップ
    • アンカースクロール
    • OGP
    • リセット CSS
    • 疑似要素
    • CSS アニメーション
    • レスポンシブ
    • 命名規則
    • ハンバーガーメニュー
    • Grid レイアウト
    • Flexbox
    • フォーム
    • イベントの発火

Discussion