コーディング練習用XDデザインデータを配布します。

こんにちは、akaneです。
今日は、コーディング練習用のデザインをXDで作成したのでnoteで配布しようと思います。

前置き

去年の2月に配布したコーディング練習用のデザイン（お花屋さんのサイトをイメージしたもの）を今でもいろんな方に使っていただいているようで、、Twitterでデザイン製作者としてアカウントのタグ付けしてくださる方、本当にありがとうございます。嬉しいです！

大変遅くなりましたが、、レスポンシブ化の練習ができるPCとSPのデザインを作成しました！自分でもコーディングしよっと！コーディングの練習に使ってあげてもいいよ〜っていう優しいお方にはaiかpsdデータをお渡しいたしますのでお気軽に、、🥰 pic.twitter.com/kvkHw2vKsv

— akane (@omsss22) February 6, 2019

コーディング練習用に使ってみたいなという方がいらっしゃいましたら以下からダウンロードをお願いします。（psd,aiデータのみです）

コーディングしたものはご自身のポートフォリオに掲載していただいて構いません。二次配布や一部改変・流用して配布・販売を禁じます。また無断でこのデザインデータを営利目的とした利用をすることを禁じます。

shiro

 

ひらともやさんが、このデザインをもとにXDの使い方や参考コードの記載などとっても丁寧に解説してくださっているのでこちらも合わせてお読みください＾０＾　

今回配布するコーディング練習用デザイン

前置きが長くなりましたが、久しぶりに配布用のデザインを作ってみようかなと思い、「わりとシンプルな架空のコーポレートサイト」をイメージしてXDで作成しました。（トップのみ）

今回、PCのデザインデータは無料、PC/SP両方入っているデザインデータは400円で配布します＾ー＾　

「progateやドットインストールなどで一通りの基礎知識を身に付けたのでなにかコーディングしたい」という方にはまずPCをやってみる、という感じで一旦PCのみでいいのではないかと思います。

レスポンシブの練習をしたい・自分のポートフォリオに載せたいよ〜という方はPC/SPデザインをおすすめします！

複雑な要素は多くないので、初心者の方でもコーディングの練習になるのではないかと思います。よかったら、使ってみてください＾ー＾

PCのデザイン

フォント：日本語はNoto Sans JP、英語はMontserratを使用（フォントがないよ〜という方はgoogleフォントからダウンロードをお願いします）
写真：すべてUnsplash
ロゴ：適当にそれっぽく作りました

XDの中にはコンポーネントとホバー状態をまとめていますので、こちらを参考に実装していただければなと思います。お好みでホバー状態をカスタムしちゃっても大丈夫です＾ー＾

デザインのアートボードの横には、挙動のイメージなども書き込んでいます。あくまでもわたしが想定している挙動なので、練習としていろんなアニメーションを試していただいてもおもしろいかもしれません。

コーディング練習用に使ってみたいなという方がいらっしゃいましたら以下からダウンロードをお願いします。（PCのデザインXDデータのみです）

コーディングしたものはご自身のポートフォリオに掲載していただいて構いません。二次配布や一部改変・流用して配布・販売を禁じます。また無断でこのデザインデータを営利目的とした利用をすることを禁じます。

CodingPractice_pc_20201115.xd

7453221 Bytes

ファイルダウンロードについて

ダウンロード

このxdがコーディング練習のお役に立てたら幸いです。コーディング後、Twitterやnoteで「コーディングしてみたよ！」と報告いただけたらとっても嬉しいです＾ー＾ 励みになります。

SPのデザイン

SPのデザインはこんなかんじで一番下まで組んでいってます。他にもメニューを開いた時のデザインや、Serviceセクションのデザインパターンを用意しています。PCと同様にデザインのアートボードの横には挙動のイメージなども書き込んでいます。

PC/SPのデザインXDデータはこちらから↓