【schoo学習記録】webデザイン３

Webデザイン入門 サイト設計編

自分がフロントエンド開発でできる部分は？

インタラクションとは
css3 javascript svg 平面上にありつつ動くもの

1 デザイン
フォトショ、イラレ、ファイヤーワークス
画像加工スキル
写真編集スキル

web用の設定知識
印刷とwebでは、ツールの設定が大きく違うので知識をつけておく
参考：スクー→webサイトでよく使うビジュアルデザインの作り方

画像のフォーマット、単位、解像度、カラーシステムの知識
参考：webデザインのためのPhotoshop基礎（全３回）
（設定の仕方が学べる）

css3を使うことがとても増えてきたデザイナーはAdobeツールとcss3でやる時代

html＋css
プレーンテキストの概念がわかるように
エディターについての知識　参考：スクー→webデザイナーのためのエディター入門など

W3Cのweb標準が大切
バリデーターでチェックする
Googleのマテリアルデザインも大切
スマホサイトでは、アップルのどのようにサイトを作っていけば

インタラクションについて
svg(xml) jQuery API　参考：スクーで検索

解像度が高すぎる写真は最適化して貼り付ける
色の変更

スクー→はじめてのgit

【制作仕様書】デザインガイドライン
テンプレートの構造をワイヤーを元に起こす
・コーディングを考えて設計します。
PC用のデザインテンプレートはピクセル単位で
スマホ用は％単位で（デバイスの大きさの関係）
配色について
コーポレートカラーを基調に調和のとれた２から３色で配色していく
ABテストなどでユーザーテストも必要
絶対配色感というべきものが絶対音感のようにある
目に痛くない気持ちのいい配色にする

コーディングガイドライン
デザインテンプレートからコーディングテンプレートを策定
デザインをコードに起こし込み
コーディングの骨組みを作る
フォント設計
各要素の使用フォント、行間、基本サイズ、各見出しサイズ
スマホはデバイスによって使用できるフォントが限られているので要チェック
デザインルール配色は１６進数または１０進数で確定しておく

フォント計画
段落や見出し、色を分けるなどの計画、ガイドラン

デザイニングインブラウザでデザインする
どう見えるかより、どう動くかが大切になってきている
モバイルファーストになり先にコーディングしてしまった方が楽。

シンプルなサイトは、インブラウザのフレームワークで先割し後で微調整をしていく。

【質疑応答】
インブラウザにおけるカンプの役割
実際みせて、さらに紙やPDFでも渡す

phpがまだ主流で　RubyonRailsも多い

グノシー
テックブログ（LIG DNA サイバー　カヤックなどなど毎日みましょう）

クライアントは何を作りたいかわかってない場合が多い
カラムを変更すると大規模修正がいるなどの情報は事前に伝える
そんなんでディレクターが必要だ

ヒヤリングに関しては、田口先生の授業が参考になる