【webデザイン】「いちばんよくわかるWebデザインの基本きちんと入門」で勉強【番外編】

更新日:

「DIVE INTO CODE」学習記録 5日目

こんにちは。

5日目。「いちばんよくわかるWebデザインの基本きちんと入門」を読んでwebデザインについて学ぶ。

はじめに

本日はDICのテキストから少し外れ、webデザインについて市販の本で勉強しました。

というのも、前回までのJavaScriptの最後の課題が自己紹介ポートフォリオの作成なんです。

HTML・CSSのときの最後の課題もこれだったんですが、今回はそれにJavaScriptも加えて提出しなければなりません。

 

僕は思いました。

「もう少しちゃんとした形で提出したい」と。

 

もともとデザインは好きで、絵とか服とか建物とかのデザインを見るのが好きでした。

 

この感じはすごいおしゃれだな。

なんかこの外観の家はダサいな。お金かかってそうなのに。

 

とか普段過ごしてて思う人です。

 

しかし僕はデザインの勉強をしたことがなかった。

考えてみればそういうの好きなのに勉強として取り組んだことがない。

 

はい、やりましょう。

意識高いですわ。

 

今回はこの本読みました。

 

いちばんよくわかるWebデザインの基本きちんと入門

いちばんよくわかるWebデザインの基本きちんと入門

いろいろ調べてオススメされてたやつです。

とりあえず基本的なことをこれで学びます。

 

学習内容

【webデザインの基本】(番外編)

  • webサイトにおけるデザインとは何か
  • 「目的」と「目標」の設定
  • ターゲット・コンセプト
  • ワイヤーフレーム・プロトタイプ
  • 「近接」「整列」「反復」「対比」
  • グリッドレイアウトとフリーレイアウト
  • ナビゲーションのレイアウト
  • 視線誘導(グーテンベルグ・ダイヤグラム、Z型、F型)
  • リキッドレイアウト
  • レスポンシブwebデザイン
  • フラットデザインとマテリアルデザイン
  • インフォグラフィック
  • 色調補正、トンカーブ
  • 色(色相、明度、彩度)
  • 書体(ナビ→視認性、見出し→強調性、本文→可読性)
  • 視認性可読性→ゴシック体、強調性→明朝体
  • webにおける一行の文字数やフォントサイズ、行間

 

この本は一切DICとは関係ありません。

DICカリキュラムの課題である「自己紹介ポートフォリオの作成」に取り組むにあたって、

一回デザインについて学ぶ機会を勝手にもうけました。

 

「一番よくわかるwebデザインの基本」を読んで

まず構成です。

 

CHAPTER1、webデザインの基本

CHAPTER2、レイアウト

CHAPTER3、配色

CHAPTER4、写真と図版

CHAPTER5、タイポグラフィ

CHAPTER6、HTML5とCSS3

CHAPTER7、インタラクション

CHAPTER8、運用とマーケティング

 

この本はデザインのことだけ書かれているわけではなく、

実際のデザイン構成の考え方であったり、

ターゲットやコンセプト設定などのマーケティング要素、

HTMLとCSSの簡単な使い方、コードなど、

幅広く教えてくれます。

 

また最終章では広告についてや検索エンジン最適化(SEO)

にも軽くですが触れています。

 

お手本となる良質サイトについても多数載っており、

実際にあるものを見ながら、それぞれのデザインがどういうものであるかを学べる点が

めっちゃ楽しいです。

 

1つだけ紹介すると、

 

AND THE FRIET

(フレンチフライ専門店のホームページです。)

 

このサイトはグリッドレイアウト(横幅を均等に分けたマス目上にコンテンツを配置していくレイアウト)の 例としてあげられていたものです。

 

パソコンの方はサイトを開いて画面を大きくしたり小さくしてみてください。

大きさごとにコンテンツが配置を変えます。

 

PC画面ではナビが左側にありますが、タブレットやスマホでは

ナビは上部に自動で移動します。

(こういうのをリキッドレイアウトと言う。)

 

何よりデザインがかっこいいです。

webサイトにおけるデザインとはこういうことを指すんだなと。

 

こういう具体例がいろいろ載ってます。

 

基礎的な「色」や「書体」「画像」「レイアウト」の知識はもちろん、

実際にどんなデザインがあるのか参考にできる

良い機会となりました。

 

後半はまだあまり読めてないです。

SEOとか気になるし時間あるとき読みたいと思います。

 

次回からはちゃんとRubyスタートします。

さっさと終わらせて自分のwebサイトデザインしたいです。

 

以上ありがとうございました。

-DIVE INTO CODE
-, , ,

Copyright© s u p ? , 2019 All Rights Reserved.