クリックしたら飛ぶ先を、ワイヤーで結ぶ。リンクを示せる。

プロトタイプモードにしてテキストをクリック！→青い矢印⇒を推移先にドラック&ドロップ！→伸びて繋がる。

この動作を左から右、右から左、両方やる！！

右タブ

  • トリガー：どういう時切り替わるか。タップ＝クリック。
  • 種類＝どう動かすか。トランジション＝ノーマル。
  • アクション＝動きをつける。スライダーできたり、ハンバーグメニューやったり。

出来たら、デザインモードにして、対象コンパスクリック！→➤やプレビューでできているか確認する。

仕事では共有して、他の人にも確認してもらう。

↑これの応用。
ハンバーガーメニューを作る。

□でメニューの形を作る。三と×とか。作った形をグループ化する。

↓

プロトタイプモードで青い矢印両方（三→×、×→三）繋ぐ。

トリガー：タップ
種類：オーバーレイ
アニメーション：左にスライド
イージング：イーズアウト

各項目の飛び先も結べば、完成！！プレビュー確認。

※これで時間をおいてトップ写真を切り替えるとかもできる。クロスフェード？

XDの書き出しをキレイにする方法

基本の書き出し：ファイル→書き出し→すべてのアートボード。書き出しサイズ1x＝原寸。（色々？）
で書き出し。
このXDでJPEGなどで書き出したものをWordpressに乗せると、荒くなる。軽いから。

キレイにするには…
①IllustratorやPhotoshopで新規でカンバス作ってJPEG貼り付けてから書き出すと、キレイになる。
※XDスクリーンショット取って、PhotoshopでJPEGで出していらないとこ削って書き出す、という方法もある。

↓からの、

②WordPressで挿入画像クリックして右タブ画像サイズ→フルサイズで画質キレイになる！！

※WordPress、Web版とレスポンシブ版、縦積みで良ければ②だけで行けそう。横積みにするなら①②両方必要。

今日覚えたデザインカンプについて

フォントサイズのブラウザの初期値（「見出しタグ　ピクセル」で検索）

h1→48px
h2→36px
h3→24px
h4〜h6→16px。

これを変えたいなら、自分でCSS書く！ということ。12pxまでなら読める！！田中先生はpタグすべてをfont-size:75％;と書いてる＝12px。

改行について

スマホの機種によって表示幅は変わるので、表示幅を設定するのではなく、絶対改行したいところだけ〈br〉で改行させて、あとはブラウザに任せる。どこで改行されても良いように。つまり、レスポンシブ版はワイヤーフレームの段階では〈br〉のことだけ意識でOK！！

ただし、文章全体を先頭寄せにするのか末尾寄せにするのかは書く！

どうしてもWeb版に合わせたいなら％を下げるしかない。しかし12px以下は見づらくなる。→これ以下の画面幅の機種にはこの画像、というブレイクポイントが必要になるかも。

Top画像について

Web版とレスポンシブ版では画面幅が大きく違う。

縦を基準に、横はカットされても良いような画像を作る。どこを残すかは指定できる！真ん中残し、右残し、左残し…

or Web版とレスポンシブ版完全に画像を分ける

○くする画像の方法について

①Photoshopで○く作って保存
②□い画像をCSSで○くする

marginについて

対象の2つを1回くっつけてから広げると、そこからのmarginになってくれる！