# D-ZEROクラス 2019-07-27

## Q1
> インタラクション、アクセシビリティを深く勉強したい。

### A

#### インタラクション
インタラクションは認知としてのデザインが重要になるため、アニメーションの知識と関係があります。インタラクションを持っているもので一番参考になるのはビデオゲームで、歴史も長く、且つ常に最先端を走っています。

実装レベルの話でいうと、CSS TransitionやCSS Animationと `hover` 擬似クラス、JavaScriptのDOMイベントを学ぶといいでしょう。

#### アクセシビリティ
Webに限らず広い分野なのでいろいろなところから学び始めることができます。

##### 広義のアクセシビリティを学べるキーワード

- ユニバーサルデザイン
- バリアフリー
- 障害者差別解消法
- UXデザイン

##### Webアクセシビリティを学べるもの

- [Webアクセシビリティ基盤委員会](https://waic.jp/)
- 国際規格[WCAG](https://waic.jp/docs/WCAG20/Overview.html)およびJIS-8341
- 総務省[みんなの公共サイト運用ガイドライン](http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/guideline.html)
- [Webアクセシビリティ資料まとめ](https://docs.google.com/document/d/1EiMwdl7J6d7tE5imTZ670PkdTp-rejxaOqiAgjE9TDU/edit)

## Q2
> `margin` と `padding` の違いがわからないので教えてほしい。

### A
`margin` を「外側の余白」と学んだかもしれませんが、厳密には異なります。 `margin` は **要素間の距離** が正しい解釈です。距離なのでマイナスの値を利用することができます。

一方、 `padding` は「**内側の余白**」の解釈のままでOKです。

詳しくは **ボックスモデル** というキーワードで調べてみましょう。「[CSS ボックスモデル](https://www.google.com/search?q=CSS+%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%A2%E3%83%87%E3%83%AB&oq=CSS+%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%A2%E3%83%87%E3%83%AB&aqs=chrome..69i57j0l2j69i64l2.5579j0j1&sourceid=chrome&ie=UTF-8)」で検索。

## Q3
> 卒業制作する上での気をつけることやポイントを教えてほしい。

### A
最終発表まで、たったの4ヶ月しかありません。
いつまでに何を決めておくべきか、誰に何を準備してもらう必要があるか、など
すぐにスケジュールを引きましょう。
ざっくりと工程を分けると
- 8月：企画
- 9月：サイト設計
- 10月：デザイン
- 11月：コーディング

といった感じでしょうか。
コーディング課題と並行して進むことも忘れないようにしてください。

ただ、全行程を平均的に行う必要はないと考えてます。
それぞれの企画内容や、得意なこと、やりたいことなど、各自にあった制作内容を検討してください。
各講師からもアドバイスしますのでぜひご相談を！（日高）

## Q4
> HTML→CSSの順番で記述していくと、後からHTMLを追加することがあってごちゃごちゃしてしまう。メンテナンスの面からもアドバイスがほしい。

### A
難しい問題ですね。そしてとても良い質問です。

結論から言うと、最初はそれを一生懸命繰り返してください。

グラフィックを見たときに、どのくらいのHTML要素とどんなCSSが必要になるかは、経験すればわかるようになります。それを踏まえ上で、最終的には **HTML → CSS** の順番で記述するのが **一番近道** というのが肌でわかるようになるでしょう。

なぜHTMLが最初になるのかは、アクセシビリティの話でも触れましたが、Webページは見た目がすべてではないからです。WebページをWebページたらしめる要素として最も重要なのはHTMLです。なので、その重要部を固めてからCSSで見た目（スタイル）を補っていく、という順番が合理的になります。

また、CSSでスタイルを当てていく際に、見た目のためにHTMLに要素を追加するとしたら `div` か `span` 要素のどちらかでしょう。その二択であればそんな時間はかかりませんし、メンテナンスの面からも削除するのも手間ではありません。もし、追加する要素がその2つ以外になってしまう場合は、そもそものHTML構成に問題があるので、そこからやり直すことが必要です。

あと、これを言ってしまうと元も子もありませんが、プロでもこれはよく悩みます。肩の力を抜いて。これを楽しんでいきましょう。

## Q5
> 正方形に角丸をかけるテクニックはどういうときに使えるのか。

### A
単純に「円」を表現したいときにも、かなり多用します。たとえば組み合わせのテクニックを使えば、半円の縁だけをCSSだけで再現することも可能です。

[ディーゼロ採用サイト](https://recruit.d-zero.co.jp/)より

## Q6
> 今後の課題の質的・量的な分量はどのようなペースになるか。

### A
中間課題以外は卒業制作課題しかありません。

## Q7
> おすすめの本を教えてほしい。

### A

- 日髙推薦: 好きな雑誌（なんでも良い）を、webサイトの構造やレイアウトと紐づけて眺めてみる。UI／フォーマット／共通パーツ／写真／テキスト／サイトマップ／etc
- 屋代推薦: [ノンデザイナーズ・デザインブック](https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-%E7%AC%AC4%E7%89%88-Robin-Williams/dp/4839955557)
- 田縁推薦: [考具](https://www.amazon.co.jp/%E8%80%83%E5%85%B7-%E2%80%95%E8%80%83%E3%81%88%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E9%81%93%E5%85%B7%E3%80%81%E6%8C%81%E3%81%A3%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%81%8B-%E5%8A%A0%E8%97%A4-%E6%98%8C%E6%B2%BB/dp/4484032058)
- 新津推薦: [ノンデザイナーズ・デザインブック](https://www.amazon.co.jp/%E3%83%8E%E3%83%B3%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%82%BA%E3%83%BB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%96%E3%83%83%E3%82%AF-%E7%AC%AC4%E7%89%88-Robin-Williams/dp/4839955557)、[IA100](https://www.amazon.co.jp/IA100-%E2%80%94%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%AA%E3%82%A8%E3%83%B3%E3%82%B9%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E6%83%85%E5%A0%B1%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3%E8%A8%AD%E8%A8%88-%E9%95%B7%E8%B0%B7%E5%B7%9D-%E6%95%A6%E5%A3%AB/dp/4861005779)
制作が上達したいからといって技術書ばかり読む必要もないです。色んなところにデザインのヒントはあるので強いていうなら小説読む、でも全然OK。目的によって使い分けを。
- 平尾推薦: [インクルーシブHTML+CSS & JavaScript](https://www.amazon.co.jp/%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%82%B7%E3%83%96HTML-JavaScript-%E5%A4%9A%E6%A7%98%E3%81%AA%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%83%8B%E3%83%BC%E3%82%BA%E3%81%AB%E5%BF%9C%E3%81%88%E3%82%8B%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3-Heydon-Pickering/dp/4862463878)

## Q8
> 情報収集の方法を教えてほしい。

### A
- 日髙メソッド: 歩いたこと無い道で帰宅する。いつもと違う時間帯で帰宅する。全然興味ない店に入る。
- 屋代メソッド: Pinterestはデザインの宝庫です。Webに限らず、グラフィック・パッケージ・サイン・タイポグラフィー、建築など、毎回テーマを決めてテーマに沿った収集をするのがおすすめです。
- 田縁メソッド: Pinterestでデザインやアイデア収集。企画系、マーケティング系、技術系などのサイトをRSS登録　※登録してる数が多くなってしまっているので後日厳選したものを共有します。）
- 新津メソッド: Twitterで情報収集。何でもいいので自分が興味ある分野の人をフォローしていると知りたい情報が集まってくるようになります。あとはinstagramでUI系のデザイン投稿してるアカウントをフォローしてザーッと流し見でもいいのでトレンドを把握するなど
- 平尾メソッド: 有識者のTwitterをフォローする。最初は「マジこいつらの言ってること意味わかんねえ」となりますが、そのうちだんだん話題についていけるようになります。つぶやく必要はありません。読むだけでも勉強になります。

## Q6
> コーディングの生産性目標はどのくらい必要か。

### A
一般的なシステムエンジニアのような指標はありません。スキルの話でも触れましたが、ビジュアルの品質・演出の品質・速度的な品質・セキュア・コードの堅牢性など、単純にコード量では品質を図りにくいのが現状です。

グラフィカルな装飾が多ければ、そのぶんHTMLの要素も増えますし、CSSの記述量も増えます。HTMLとCSSで再現できない場合、画像を利用する必要があります。そうするとPhotoshopなどから画像を書き出す作業コストも発生します。

大事なのは納期やマイルストーンまでに、目標の実装や作成をすることなので、**生産性目標**というと案件によって量もペースも変わります。内容で単価も変わりますし。

また、前回の資料でHTMLやCSSを直接作らないことに触れましたが、そういったツールや環境を整えて生産性を上げる方法もたくさんあります。

さらに最近での大量のページ制作では、基本的にCMSという仕組みを使うので、単純なHTMLコーディングはしません。

もし、今、現状で目標がほしいのであれば、**中間課題**のコーディングは1ページを8時間程度で制作できれば合格だと思います。