デザインカンプからのコーディング、上達するって分かっているけど
まだまだ私には早いかな。
そんなことはありません！
初期でもアウトプットは大事ですよ。
究極にシンプルなデザインカンプはどうでしょう？
ツイッターでフォロワー様1000人突破した時の企画です。
超初心者向け・コーディング練習用デザインカンプです。
WEB制作学習のコツは「インプット３：アウトプット７」と言われています。
私の場合はさらに「２：８」ぐらいの割合だったかもしれません。
あるあるだと思いますが、インプットの勉強をたくさんして出来る気分になって、いざページを作ってみようとしたらできない…。
そう。
たくさんインプットしていざ作ってみたら分からないより、こまめにアウトプットして何が分からないのかを早いうちに明確にした方が良いです。
やはり「なぜこのタグを書くのか」から自分で考えないと身につかないですね。
ということで学習初期からアウトプット学習をして欲しいのです！
そりゃそうだけど、ネットで見るデザインカンプはまだ私には早いなあ。
ですよねー。ハンバーガーメニューとか難しすぎ！
このデザインカンプは「Progate無料分+ドットインストール無料分+α」ぐらいでもできることを目指しました。
(＋本１冊ぐらいが必要かも？)
みなさまの学習のお役に立つと幸いです。
デザインカンプ掲載場所
こちらがそのデザインカンプです。
公園のドッグパークエリアの案内ページというテーマで作りました。
ハンバーガーメニューどころかフレックスボックスも使わないですよ。
(もちろん使っても良いです。)
フォントもMacにもWinにも入ってる游ゴシックなのでWEBフォントとか使いません！
・あさひドッグパーク
https://www.figma.com/file/z5uCOUIgYMx7fo5RrTF2k0/asahi_dogpark?node-id=2%3A2
※このブログ以前にツイッターからアクセスしていただいた方へ※
パンくずリスト部分「トップ > 施設案内 > ドッグラン」のフォントが間違っておりました！！申し訳ありませんでした🙏
正しいフォントは「游ゴシック」です。
ご指摘いただいたいしひろさん、ありがとうございます。
制作例として公開可能
「コーディング担当」として自サイトで公開可能です。ただしとてもシンプルなページなので逆に低い評価をされてしまう可能性もあります。
例えば以下のような説明をするなどの工夫を各自行ってください。
学習開始○○時間でこのページを作成しました
このようなシンプルなページでしたら〇〇時間で作成することができます
自サイトで公開する場合は、実在の施設と間違われないように<head>内に以下の記述をお願いします。(タイトルの表示と検索結果に反映されない処理です。)
<title>あさひドッグパーク – 架空サイト<title>
<meta name=”robots” content=”noindex,nofollow”>
また著作権は放棄しておりませんので「デザインカンプ作成：あさひ(https://blog.webtailor.work/archives/11)」の記載をお願いいたします。
必要スキル
以下のスキルがあればできると思います！
その１。 VSCodeなどでコードを書き、ブラウザで表示する
→ ドットインストール(はじめてのWeb制作＋Web制作の開発環境を整えよう)で学習！
その２。 HTML/CSSの基礎
その３。 figmaからの画像書き出し・コーディング
→「figma コーディング」「デザインカンプ コーディング 手順」などで検索してみてください。(急にお任せ(笑)。解説記事作成予定です)
このデザインカンプの注意点
①パソコン版のみと割り切って作成してください。
(横幅520pxぐらいまでは崩れません)
もちろん「よしなに」でスマホ版を作成していただくのは大歓迎です！
② パーフェクトピクセル(1pxもずれない再現)は目指しません。
しかし margin や padding はデザインカンプから読み取った数値で指定しましょう。
③ ホバー(オンマウス)の処理は特に記載していません。
付けたい場合は「よしなに」で作成してください。
(制作例では単純に文字色を変えました)
④ ファーストビューの画像は、特に画面の高さなどに合わせていません。
そのまま縦横比を保ったまま縮小してもデザインには支障ありません。
コーディングのコツ
個人的にですが、私が初心者の頃はここでつまずいた！というところを簡単に説明します🐶
①インラインとブロックの違い
・インライン → 横に並ぶ
・ブロック → 横幅いっぱい使い、次は縦に並ぶ
②text-align: center; は子要素に働く
③「ラッパー(wrapper)」の概念
そのままだと横方向いっぱいまで使ってしまうので、左右の余白があるところはwrapperで囲む
制作例・コード例
私がコーディングしたサイトは以下です。
参考にどうぞ☺
制作例
https://takiasahi.github.io/asahi-dogpark/
コードはこちら
https://github.com/takiasahi/asahi-dogpark
みなさまの制作例
デザインカンプ公表の翌日にお知らせいただいたのがこちら。
いしひろさん、早過ぎでしょ！
(しかもスマホ対応もされている…👀)
サイトはこちらです！いしひろさん、ありがとうございます🥰
こちらのブログに載せてもいいよ！という方はぜひお知らせくださいね。
ツイッター(@takiasahi)や下記のお問い合わせよりお待ちしております。
お問い合わせ
疑問点などがございましたらお問い合わせページ、又はツイッターのDM(https://twitter.com/takiasahi)より連絡下さい。
では皆様の学習が捗ることを願っております！
