HTML&CSSとWebデザイン⓪①

やっとスタートラインに立ったWebの勉強、、（笑）

この本に沿って勉強をしていきます！✏✏✏✏✏✏✏✏

アマゾンで見てもベストセラーに選ばれていたし、書店に買いに行った時には残り一冊でした！！

⓪①　CHAPTER⒈

Webサイトの基本について勉強。

デザインはセンスではなくて情報量が多ければ磨かれていく。安心。

デザインとは美しくしたり、かわいくしたり、お洒落にすることではなくて、「何を伝えたいか」という伝えるための手段。

ユーザービリティを考える

■見やすいデザインにする■

・色使いに注意！

背景色と文字色のコントラスト→グレースケールにすることで一目瞭然

・目立たせたいものを明確に！

・レイアウトを統一する！

■読みやすい文章にする■

・だらだらすると最後まで読んでもらえないから結論を先に書く！

最初の２文が勝負

・あらかじめ知識がいる専門用語は使わない！

・簡潔にまとめる！

キーワード大事

■使いやすくする■

・視覚で予想ができるようにする！

・イライラするから動作の速さは大事！

・ぱってみてリンク張られてるかわかるようにする！

制作の流れ→→→

①企画　②サイトマップ　⓷ワイヤーフレーム　④デザイン　⑤コーディング　⑥公開

①　ユーザー目線で何を求めているのか、何をしほしいのかを考える。その際に重要なのが、目標や、具体化したターゲットユーザーを決めること。具体的であればあるほどリアリティがあって良い。

②　サイト作成で必要なページを書き出して、つながりや重要性を図にまとめる。階層が深くなればなるほどユーザーが迷子になるので２階層以内がおすすめ。

③　全ページのレイアウトを考えていく。色や装飾は何もせずにテキスト・ライン・ボックスのみで作成。必要要素を書き出していきその中で優先順位をつける。ファーストビューで何を伝えたいサイトかがわかるように意識する。人間の視線の動きは、上から下、左から右に移動する。

④　実際にWebページとして表示されるデザインを作る。コーディングの時に役に立つ。デザインカンプという。Canvaを使おうかなあ、、https://www.canva.com/　←めっちゃおすすめ。

⑤　HTML、CSSを使って頑張る。画像も用意。フォルダーにまとめておくと分かりやすい。JPG・PNG・GIF・SVG。適材適所に使う。

⑥　世界中の人に見てもらえるようにするために少しお金を出してサーバーをレンタルする。ドメイン名も世界に１つらしい。

The Best Designsというサイトでいろんなサイトを見て刺激を受けました⚡⚡

動画や画像を駆使して文字は読めないけど統一された雰囲気から使えたいことが使わる。データが重いはずなのにすらすら見れた。

始まりのスターがめちゃめちゃ好み。見やすいし、食べたくなった。

商品のフレッシュな感じがサイトからも伝わってきた。サイトが少し重かった。

３つ目のやつのようにリンクでページが変わっていくものは動作が遅くストレスになって、2つ目のサイトのように下にスライドされてスクロールだけですべて見れるものはストレスがないなと思った。作成できるようになった頃にまた見ると裏のコードがこうなっているとかわかるようになっているのかな、、インスピレーション。

⓪①終了！！