サイト制作の練習②
こんにちは。
お久しぶりです。
今回も前回に続いて一つのサイトを自分でデザインしてコーディングしたので、そこで学んだことをまとめていこうと思います。
今回のサイトは「美容鍼灸サロン」を題材として制作しました。
制作したサイト
XDを使ってpcとsp画面サイズをそれぞれ作成しました。
デザイン完成後はこのサイトをコーディングにて制作しました。
学んだこと・ポイント（デザイン）
1.ロゴの作成
サイトを作成するにあたってロゴを用意しなければいけません。
ロゴは、名前とともにブランドイメージをわかりやすく伝えるもの。
今まで私の制作したサイトでは、文字だけのロゴや簡単に自作できるものにしていました。しかし今回のサイトでは、文字だけのロゴではなくアイコンも入れたサイトのイメージに合うロゴにしたいと思いロゴジェネレーターを使用しました。
ロゴジェネレーターとは、デザイナーでなくても手軽にロゴが作れる便利なツールです。さまざまなブラウザやアプリなどで提供されているので調べてみて下さい。
2.フォント
フォントは、ブランドイメージやコンテンツの雰囲気を伝える上で非常に重要な要素です。なのでサイトに適したフォントを選定しなければいけません。
今までのサイト同様、今回もフォントの選定には苦戦しました。
その中でも今回はフォントを選ぶ上でポイントをいくつか学びました。
・フォントはGoogleフォントから選ぶ。
・基本のフォントはNoto Sans でよい。
・タイトルなど目立たせたい箇所や英語はフォントを変えて目立たせる。Noto Sansなどは使わない。（コーディングの際は、画像で書き出す。）
3.余白
毎回学んだこととして上げていますが、デザインにおいて余白はそれほど重要で難しいです。文字の余白・要素の余白、余白が綺麗にとれているとそれだけで洗練された印象にすることができます。
【今回学べたこと】
・文字の余白→AV（文字間）20〜40。
・要素の余白→内容ごとに余白でまとまりをつくる。
学んだこと・ポイント（コーディング）
1.クラス名
【アンダーバーの使い方】
CSSでクラス名をつけるときに、アンダーバーや伸ばし棒をつけるときがあると思います。今回はそんな時のアンダーバーや伸ばし棒の意味・使い方を学びました。
例として「about us」というクラス名をつけるとします。
これは一つの要素なのでabout-usとなります。
次に「column」というクラス名に1番目という意味で「1」とつける場合、それぞれ別々の要素なのでcolumn_1となります。
次に「about us」とついたクラスの要素の中に「wrapper」というクラスの要素を入れたい場合about-us__wrapperとなります。続けて中に中に要素が続いていく場合、このアンダーバーで繋いでいく形になります。
【要素の一部分だけを変更するとき】
基本のデザインが一緒で一部分だけ高さや色が違う箇所はそこだけに専用のクラスを作ってあげます。使いまわしを意識してコーディングする。
2.【jQuery】slickの使い方
今回のサイトの中の「施設のご紹介」のようなデザインのスライダーを作るなら「slick」という王道プラグインを使います。色んな形でテンプレートが用意されているのでデザインに合ったものを見つけて使用してください。
参考サイト↓
まとめ
今回のまとめをnoteにしていく中で、改めてデザインにおけるフォントと余白が自分はまだまだなことと、同時にこの2つがとても重要なことがわかりました。ただこの2つが自分の力で上手くできるようになったときにはデザインとしてすごく良い作品ができるだろうなとも思いました。
今後の課題としても、もっとデザインの数をこなしたり、日頃から様々なデザインを見ることで成長していきたいなと思いました。
今回学んだこともしっかりとメモをして同じ失敗は繰り返さないようにまた頑張っていこうと思います。
引き続き学んだことがあった際には
noteにまとめていくので次の更新をお楽しみに！
この記事が気に入ったらサポートをしてみませんか？