見出し画像

【無料配布】コーディング練習用　リッチデザインデータ「KAGU」

HI-ROKI
HI-ROKI

はじめまして。

普段はフリーランスでWebサイト制作のエンジニアをやっているHI-ROKIと申します。
どうぞよろしくおねがいします。

Webサイト制作の勉強をしたい方がTwitterにたくさんおられることを拝見し、何か自分にもできることは無いかと考え、デザインデータの配布をおこなうことに致しました。

今回用意したのは、「KAGU」という名前の架空の家具販売会社を題材にしたWebサイトです。
無料版では、トップページのデザインデータを配布致します。
※PC版とスマートフォン版の両方のデザインがあります。

画像2

画像2

配布するデザインデータのサンプル

このデザインデータは、実際に現場で使用されている品質で作成されているため、文字情報やマージンの取り方など、細かいところまでルールが徹底されています。

また、写真素材はフリー素材*1ですが、単に配置するだけでなく、トリミングや色調補正などもおこなっていたり、レイヤー構成（ヘッダーやフッターはリンク機能を使用しております）もこだわっていたりしますので、デザインを勉強中の方も多少参考になるかと思います。

*1 Unsplash
https://unsplash.com/

また、リアルな品質に近づけるため、サンプルテキストは独自でライティングもおこないました。　
（一部、住所や電話番号はダミーです）

当デザインデータを使用してコーディングしたものを、ポートフォリオの実績として掲載していただいても構いません。
また、デザインデータ内で使用されている文言や写真などはダミーですので、差し替えたり、レイアウトを組み替えたりして、自由にカスタマイズしてOKです。

ぜひ、トライしてみてください！

同梱物について

以下の8点が入っております。

・01-top.psd
デザインデータのPSDファイルです。
作業する際は、このデータを開いてください。

・jpg/01-topDesktop.jpg
・jpg/01-topPalmtop.jpg
デザインデータのJPGファイルです。見た目を確認する際に使います。

・inc/header_desktop.psd
・inc/header_palmtop.psd
ヘッダーのリンクファイルです。

・inc/footer_desktop.psd
・inc/footer_palmtop.psd
フッターのリンクファイルです。

・要件定義書.pdf
簡易的な要件定義書です。
制作するサイトの要件（対応させるブラウザの種類、ブレイクポイントのルールなど）が書かれた資料です。
※難しくて実践できない場合は、内容を無視して好きなようにコーディングしてくださって構いませんが、ブレイクポイントやモバイルファーストを意識したコーディングは実践してみたほうが良いかと思います。

ダウンロード方法

下記の条件を満たした方に、TwitterのDMにてダウンロード先のURLをお送りさせていただきます。
※DMの返信は祝日除く平日10時～18時の間におこなっちおります

1. Twitterアカウントをフォロー（https://twitter.com/hiroki_web）
2. 以下の埋め込みされたツイートに「いいね」と「リツイート」をする
3. TwitterのDMにて、私宛にデータが欲しい旨を連絡する

※鍵垢や、極端にフォロワー数の少ないアカウントからの申請はお断りしております。

お願い

実際に取り組んでみて、どこまで出来たか、ここが難しいなど、コーディングの進捗を「@hiroki_web」付きでツイートしていただけると嬉しいです。
※ツイートは任意です。

コーディングを勉強している方へのメッセージ

「何度も取り組んでみて欲しい」

PCのデザインだけでなく、スマートフォン用のデザインを無料で公開している教材用データはあまり多くありません。
特に、〈勉強用の教材として質の良いデザインデータ〉となると探すのは難しいです。

〈勉強用の教材として質の良いデザインデータ〉というのは、イケてるビジュアルやダイナミックなレイアウトがあるデザインデータのことではありません。
デザインルールが徹底されていて、コーディングを学べば学ぶほど、より効率的なコードの書き方ができるように考えられた教材のことです。

「KAGU」では、見出しやボタン、コンテナ・カラムレイアウトなどを一定のルールに基づいてデザインしています。
勉強したてのうちは、上から順番にコーディングしていくことを推奨していますが、ある程度慣れてくると、効率的に書くために以下のようなことを考えるようになります。

1. デザインのレイアウトはどのようになっているか
2. デザイン上で頻繁に出てくる要素はないか
3. 使用されている文字や色、余白はどのようになっているか
4. 複雑そうな（作業時間が掛かりそうな）要素はないか

コーディングに慣れてくると、デザインを見る力が上がっていきます。
成長の変化にともない、前にデザインを見た時には気付けなかったルールが見えてくるようになるのです。
その成長をサポートしたいと考えています。

また、「KAGU」に取り組む前に、以下の記事を読むことで〈コーディングする際に考えるべきこと〉を知るキッカケになるかもしれません。
ぜひご一読ください。

正しいコーディングの手順をレクチャー
https://note.com/hi_roki/n/n4e889089c4d0

再利用できるセレクタの書き方をレクチャー
https://note.com/hi_roki/n/na9dddd0c161a

今後も、Webサイト制作に役に立つ情報を発信していきますので、いいねやTwitterのフォローなど、宜しくお願い致します。

その他、質問などありましたらTwitterにてご連絡ください。

宣伝

トップページに加え、普遍的なWebサイトによくある下層ページ9点のデザインを追加した完全版もあります。

【有償完全版】コーディング練習用　リッチデザインデータ「KAGU」
https://note.com/hi_roki/n/ne77175ea9395

更新履歴

2020年3月25日：Palmtopのデザイン修正
2020年3月18日：レイヤー構造を修正

以上。

1人がオススメしています
この記事が気に入ったら、サポートをしてみませんか？
気軽にクリエイターの支援と、記事のオススメができます！