おカエる。

カエルのこと、日々の経験、趣味のこと、教えたいことなどの雑記ブログです。

トップ > Webデザインのおべんきょうをする①

Webデザインのおべんきょうをする①

10/30から地元で新しく開業した、Webデザインコースの受講を開始しました。

 

開始するきっかけとなった記事はこちら↓

kapocola.hatenablog.com

 

本業をしている身なので休日のみですが、ガッツリ初日からやって参りました。

13：00～20：00計7時間です。途中眠気やばかったけどトイレ休憩以外休憩挟まずみっちりご指導いただきました。

講師の方の教え方がうまくて、凄い楽しかった！

 

復習がてらブログにその時の内容を綴っていこうと思います。

 

こちらの基本的なやり方としては自分の好きな本(教材)を1冊購入し、それを元に教えてくれる。で講師の方でKindle版を購入し、大画面で教えるというスタイル。

私はこちらの本で教えてもらうことにしました。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

Amazon

 

でこれをベースとしてちょいちょい豆知識を挟んできてくれたり本にツッコミ入れたりしてる感じかな？

 

今回教えてもらった豆知識が

  • 結果を出す為にはお客様(企業側)ではなくお客様(企業側)のお客様(クライアント)のことを考えて作るということ。
  • ちょっとSEOについて
  • 結論から先に書く

など

 

詳細をいうと

  • 結果を出す為にはお客様(企業側)ではなくお客様(企業側)のお客様(クライアント)のことを考えて作るということ。

というのは、今までのサイトで満足ができない結果に終わっているので、結果の出るサイトにしようということです。つまりお客様(企業側)のデザインに関する意見は完全に無視します。という感じです。

 

  • ちょっとSEOについて

まずサイトのスピードが重要になるということ。Google先生は重いサイトは上位にもってこないそうです。サイトを作ったら必ずGoogle PageSpeed Insights（ページスピードインサイト）でスピードを測るそうです。これかなり重要らしい。まだ作ってすらないけど、画像やらのサイズを小さくしたり調節するそうです。ちなみに70点くらいのスコアを出さないとまずいらしい。

 

  • 結論から先に書く

これもかなり重要でブログでも言われてることですよね。

お客様は何かを購入、知るためにサイトを訪れる訳で元々商品についてはある程度知ってるわけなんです。なので要はそれを購入したら自分にとってどんなメリットがあるのかっていうのを知りたいんです。そこで一番最初にそのメリットを(結論)を持ってくるのがいいそうです。

アタック(洗剤)でいうところの「驚きの白さ！」って部分がまさにこれらしいです。というわかりやすい例えをしてもらった

 

[Amazon限定ブランド]デカラクサイズ アタックZERO 洗濯洗剤 液体 アタック液体史上 最高の清潔力 詰め替え 2150ｇ 大容量

[Amazon限定ブランド]デカラクサイズ アタックZERO 洗濯洗剤 液体 アタック液体史上 最高の清潔力 詰め替え 2150ｇ 大容量

Amazon
ちなみに最近のアタックには書いてなかったけどこの商品でいうところの「菌の隠れ家まで０へ」ってやつですね。

 

豆知識の方から入ってしまいましたが、本題へ

今回学んだのがHTMLちょっととCSSかなりちょっと。

 

  • index.htmlについて

サイトのトップページで絶対使う。一番最初に表示される。URLは～.comや～.jpなどで終わっていることが多いが実はこれが隠れている。(トップページ)

  • <!doctype html>について

doctype宣言というやつです。こちらを記述することで一番最新のhtmlということを宣言してるそうです。古いver.のhtmlでは+αで記述が必要らしいです。

  • <head>について

サイトの頭に来る部分のことです。<html>タグの後ろ<body>タグの前に来るタグ。

<title><meta><link>などが中に入る。

ここで使う文字的な…？日本語、韓国語、英語半角でおｋとのこと。

とりあえず今はこれで設定しとくらしい。

  • <title>について

SEOでサイト全体のことをさす。

一番パワーがあるらしい。(SEOで)

  • <body>

画面に表示させる部分。

パス＝経路、道筋

絶対パス＝どのフォルダでやってても同じ経路、URLで指定

相対パス＝フォルダごとに経路が違う、対象ファイルの位置を指定

相対パスで慣れておくといいとのことです。

  • src属性について

ソース。画像などの大元がどこにあるかを示す。

  • alt属性について

画像が読み込めなかったときのためになにが表示されているのかをテキストで表示する。

目の見えない方がそのサイトを訪れたときに、音声でこの辺に～の画像があります。と読まれたりもするそうで、Google先生は結構alt属性に厳しいらしい。

  • <img>について

画像。ここにscr属性とalt属性の指定が必要。

例）<img scr="〇〇○.jpeg"alt="●●●">

〇〇○はファイル名、●●●は画像の代わりに表示されるテキスト

  • <a>について

リンクを貼るときに使う。

例）今すぐ<a harf="http://google.co.jp">Google</a>で検索！

<a harf="http://google.co.jp">Google</a>

太字で挟まれた部分がクリックできて指定したリンク先にとべるようにになる。

リンク先のURL前に必ずharfをつける。

 

かなりざっくり書きましたが、長くなるので今回はここまで。

実際はもっとやっていますが、似たりよったりなので割愛します。