コーディング練習用のXDデザインカンプ配布します

Brain
コーディング練習用のXDデザインカンプ配布します

コーディング練習用のXDデザインカンプ配布します

しょーごログ
2021-06-20
0 件のレビューがあります
平均スコア 0.0

こんにちは、現在web制作フリーランスとして2年ほど活動しているしょーご(@samuraibrass)です。

月収は70万程度、YouTubeでもフリーランス情報を発信しており登録者が3000人を超えています(しょーごログ

実務未経験の方がポートフォリオとして提出できるレベル感のデザインカンプを作成しました。

もともとはyoutubeでライブコーディングを撮影するためにデザインを作成したのが始まりで、どうせなら配布しようと思い、そこから更にデザインに手を加え今回配布に至りました(アコーディオンとフォーム、記事一覧を追加)。

難易度的に少し難しいため、デザインカンプからのコーディングが初めての方には最初は以下がおすすめです。

こんな感じのデザインです

デザインはXDのURLカンプを配布します。

XD持ってなくても大丈夫です。

実案件前の腕試しに!

実案件のスピード感を再現されたい方は、三日以内(20時間以内想定)の完成を目指してみてください。三日以内で終わった場合は普通に実務行けると思いますし、自信持っていいと思います。

ブログ記事一覧や制作実績一覧(スライダー)を追加しました。

どちらも案件に頻出のUIパーツになりますので、この際に練習しておきましょう!

スライダーでは頻出のSwiperも関わるので、いい練習になるはずです。

このカンプだけで最低限デザインカンプからのコーディングはこなせるようになります。

特典

利用していただければ僕が赤字になる特典を僭越ながらつけさせていただきます笑

特典1「Twitterで感想や完了報告いただければリツイートします」

これを特典と言って良いのかw
僕が確実に気づくため、@samuraibrassのメンションをつけてnoteのURLとともにツイートしていただければと思います。
全部拝見させていただきます‍♂️

特典2「表示崩れがないか、エラーが出ていないか確認します」

赤字の原因です。
❶:このデザインをコーディング後、サーバーにwebページをアップロードされて
❷:本noteの感想をtwitterで流していただけた方はご報告いただければ、PC、タブレット、スマホ表示の確認を無償で行います。
専用フォームからお送り下さい。
実案件ではSPデザインがないことが多いのでどう実装するかはその人の感覚に左右されます。
この課題でその経験を積んでいただけたらと思います(コードレビューは行いません)
レビュー例(最近は制作最前線で使われるAUNで行っています)
https://aun.tools/

特典3「コーディングのポートフォリオに使用OK」

営業で提案時に、「XDカンプからのコーディング」ということで使用OKです。(デザインを自作だと偽らないようにお願いします)

# 価格

本noteは6/9日時点で¥1680で販売しておりますが

1680円で制作物の添削をAUNで視覚的にわかりやすく行っている

この価格でここまでやるのは、他のどの教材にもない特典だと思っているので、1680円は自分でいうのなんですが頑張っています笑

書いて終わりでなく、最後に添削を受けられるのが実務前の腕試しにはいいよなと思い、提供しています。

身につくスキル

・XDデザインカンプからのレスポンシブコーディング

・JSを利用したハンバーガーメニュー、アコーディオン、スライダーの作成

・フォームの作成

・Googleフォームを用いて静的サイトのフォームを実際に動作させる(参考記事執筆済み)

・JavaScriptまたはjQueryでのフォームの入力確認

なお開発要件として下記をデザインカンプにも記載しています。

・SP版はPC版を参考に作成する(ハンバーガーメニュー設置など)
・アコーディオンはデフォルトは1つ目のみ開いている状態で
・AOS.jsなどで各々の要素をふわっと表示させる
・・制作実績部分はスライダーになるので、実務で一番使うswiperを利用(5秒おきに自動スクロールする処理)
・フォントはGoogle Fontsの「Noto sans jp」を利用
・「お問い合わせ」ボタンを押すと、お問い合わせフォームにスムーススクロールする
・お問い合わせフォームを動作するようにする(Googleフォームを利用する、自動返信メール送信まで可能)
・フォームの部分は全入力欄および「プライバシーポリシーに同意します」にチェックがないとsubmitできないようにする

以下有料になります

この続きを見るには購入する必要があります

この記事を購入する

この記事のレビュー

0 件のレビューがあります
平均スコア 0.0

この記事を購入する

関連記事

特集記事

コメント

この記事へのコメントはありません。

onefirst2019onefirst2019

onefirst2019

”Good seller” ”Good buyer” ”Good for the world”

Corona Virus Data

Japan

Last Updated: 5 mins ago

Confirmed Cases

0

New Cases

0

Total Deaths

0

New Deaths

0

Total Recovered

0

Active Cases

0

in Critical

0

カテゴリー

Newentry PICK UP 特集記事
  1. クリック率UP!Canvaで目立つデザイン作成完全マニュアル!

  2. 【限定販売】収録による匿名ウェビナーで、スキルと収益の資産化をはじめよう!

  3. Brain×Twitter戦略!Brain紹介&コンテンツ販売で稼ぐための認知されてクリックされる仕組み!

  4. AIバブルでめちゃくちゃ稼げるNovelAI!?産業構造を変えてやろう!

  5. ビール片手に電池交換で3万円稼ぐ方法

  1. 【年間1億3千万円稼いだ手法!】FXのIBアフィリエイトバイブル『超豪華特典付』

  2. 【Brain界のトップセールスから学ぶ】アフィリツイートの『型』完全大暴露!

  3. 【動画で解説】勝手にズコズコ売れる億超えセールスライティング

  4. 非デザイナーに贈る、そこそこのデザインができるようになるワザ

  5. 【最強の職業】SNSマネタイズでも活躍!コピーライティングで稼ぐ方法

  1. 【全額返金保証◎】仮想通貨で100%稼げる極秘ノウハウ【30万円以上稼げる!?!?】

  2. Twitterを1日数クリックで!?濃い見込み客を自動集客する方法

  3. ツイッターでフォロワー0人から10,000人を目指す為のインフルエンサーの教科書

  4. 【自動化】6ヶ月でInstagramのフォロワーを0→10,000人以上あつめたオートインスタ運営術

  5. 【Brain解説】初心者必見!!

TOP