選択範囲の複製パペットワープ「Webサイト制作のワークショップ」のメモです。グラフィックデザインをする操作に近い。シェイプレイヤー(ベクトルマスク)、スマートオブジェクト、テキストレイヤー、レイヤースタイルなどを使い、ピクセルに依存しない柔軟な作り方をしていく。enjoy!単位はピクセルPCのディスプレイだけに限定しても、画像の表示サイズは異なる。画像を等倍で表示した場合、見た目のサイズはディスプレイによって違う。ディスプレイによって1インチ四方あたりのピクセルの数(ピクセル密度)は違うし、ディスプレイ解像度の設定によっても変更される。いま自分がみているディスプレイ上で「何センチ」と言っても、相手が見ているディスプレイに表示されている大きさとは異なる場合がある。グリッドデザイン960pxを12分割したテンプレート。3分割や4分割、2カラムのレイアウトのグリッドとして使いやすいサイズ。System制作フローあくまでも一例。使い慣れているもので良い。UIキットが揃ったアプリもある。ワイヤーフレームをつくった方が効率的。遷移フローを簡単に作成できるプロトタイピングツール。UIキットも揃っているので、ワイヤーフレームの作成も効率的に行える。いったツールは必要に応じて柔軟に取り入れていきたい。モジュール/コンポーネント化Webサイトはいくつかのコンポーネントで構成される。ヘッダー/フッターの要素、グローバルナビゲーション、パンくずナビ、見出し、段落、ボタン、サイドメニューなど。この後のコーディングにも影響してくるのだが、再利用可能な派生コンポーネント(亜種)を使っていくこと。デザインも統一され、一定のトーンマナーを守ることにもつながる。具体的には、ボタンの形はサイト全体を通して共通のデザインにする。グレーのボタンもブルーのボタンも、形やマージンなどは揃えておく。グレーのボタンに対してCSSで色だけを上書きすることでブルーのボタンにする。CSSを上書きすることで、グレーと青のボタンをそれぞれCSSで作成する必要はなくなり、さらに他の色のボタンが必要になっても、同じフローで追加することができる。ボタン自体の形やマージンを調整する場合でも、もととなるコンポーネントを1箇所修正するだけですべての色のボタンを変更することが可能となる。どんなUIがあるかそれぞれのUIの特性を理解しておく。開いているデータをスマホでプレビューできる。