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

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

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

しょーごログ
2021-06-21
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. 【リリース・タイム】〜Brain制作から販売までにかかった時間〜

  2. 『ダヤン式聖杯手法』これ教えちゃっていいの!?ガチで勝てるFX手法を解説。

  3. 【堅実投資法】知識ゼロ&無裁量でも”資産3,000万円”形成へ

  4. 【110部突破】初心者が無料note記事で収益化!売らないアフィリ攻略法

  5. レンタルスペースの教科書「田舎集客編」

  1. 【8割の人が知らない】文章だけで商品を売るセールスライティング

  2. 『1日1話 読めば心が熱くなる 365人の仕事の教科書』読書感想文①

  3. 【超話題】【1月30日リリース】【初心者向き】イケハヤさんのBrain攻略法で稼ぎながら,一生役立つ超優良教材を育てるスキルを身に着けよう!

  4. 【すぐ稼げる!】パソコンすら触った事のなかった私が、たった3ヶ月でWEB制作事業をスタート出来た方法を解説【サポート特典付き】

  5. 【ちょっと生活雑学】 今更ながら、単純に言うと「スキルアップ」する方法は?

  1. スマホ完結型トレカ高額せどり・転売10万越え商品リスト厳選20選

  2. 投資初心者にオススメの投資法5選+α

  3. お金の秘密手帳【普通の人がゼロから億の資産を作る方法】

  4. 【今がチャンス!】先発組となり、効率よく稼いでいくBrainを活用した戦略

  5. [プログラミング: ExcelVBA] Excelファイルが書き込み可能か状態をチェックする

TOP